OpenGL drawing with mouse - objective-c

If I try to texture drawing line with loaded texture
glLineWidth(10);
glEnable(GL_TEXTURE_2D);
glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
glBindTexture(GL_TEXTURE_2D, brushTextura);
glEnable(GL_LINE_SMOOTH);
glBegin(GL_LINES);
glVertex2f(location.x, location.y);
glVertex2f(prevLocation.x, prevLocation.y);
glEnd();
glFlush();
glDisable(GL_LINE_SMOOTH);
glDisable(GL_BLEND);
glDisable(GL_TEXTURE_2D);
It draws nothing. When I use same code, but drawing not GL_LINES, but GL_POINTS everything works as it should work. Image link here.
If i don't use texture here, and use GL_LINES, it draws lines as it should, but its not looking good. Image link here. Any solutions for drawing nice, smooth textured lines?

A line will not "magically" use the texture as kind of a brush applied along the path of the line. You'd actually have to supply some texture coordinates, but those would then only take slices out of the texture and not apply it as a "brush".
If points work for you, only if point sprites are enabled, because a point would sample only a single texure pixel and spread it over its whole area.
Honestly, I think your whole attempt is flawed. Usually when drawing with brushed, you draw it as a large number of textured quads at a regular, small distance.

Related

Are point sprites always perfect circles/squares?

I noticed that regardless of the shape (aspect ratio) of a texture, it will always draw as a perfect square, scaling unequally, when using it as a point sprite. I assume this is because points are, after all, circular.
If you wish to use point sprites on rectangular textures, is this possible using the point sprite mechanism, or would I need to just build quads with textures instead?
Or perhaps there is something that can be added to a shader to recognize and work with a rectangular texture? Currently mine are quite simple:
Vertex shader:
TextureCoordOut = TextureCoordinate;
gl_PointSize = 15.0;
Fragment:
gl_FragColor = texture2D(Sampler, isSprite? gl_PointCoord: TextureCoordOut) * DestinationColor;
Points have only one size, which will be equally applied to the width and height..

if vertex array count > 1000, glDrawArrays becomes slow?

I have painting app. Mouse event coordinates are stored to VertexArray. Then vertex array is being drawn to screen. My code structure looks like this
// I get mouse event coordinates and store them to VertexArray
glPushMatrix();
//some new matrix settings
glBindFramebufferEXT(GL_FRAMEBUFFER_EXT, framebuffer);
glClear(GL_COLOR_BUFFER_BIT);
//now I draw first full size textured quad and later I draw vertexArray
glDrawArrays(.....);
//and now I draw second full size textured quad on top of first quad ant that what have been drawn from vertex array
glPopMatrix();
glBindFramebufferEXT(GL_FRAMEBUFFER_EXT, 0);
//immediately after that I draw FBO to screen:
glBindTexture(GL_TEXTURE_2D, fbTexture);
//Code for drawing textured quad
glBindTexture(GL_TEXTURE_2D, 0);
So everything is redrawn every time when new mouse event coordinate is being registered. And if there are more than 1000 coordinates, drawing becomes really slow. Where could be my problem? I thing 1000 vertices for OpenGL is not much
It's not the number of vertices; it's how you're sending them.
First, you never defined "really slow"; often times people will mistakenly think that a change from 400fps to 300fps is "slow". It's not. It only represents a render time increase from 2.5ms-per-frame to 3.3ms, a change of less than a single millisecond. Non-trivial, but probably not something to be too concerned over.
It's always important to measure performance in terms of render time, not FPS.
That being said, your main problem is that you're drawing a single quad at a time. Each one coming from a separate glDrawArrays command. That's not necessarily a good thing, especially if you change state between drawing commands (like binding a texture and so forth).
If you're doing that, then you need to find ways to avoid doing that. What you want to do is render a lot of quads all with one draw calls. This means you have to use the same texture for all of them.
The common solution to this problem is to make a larger texture that has multiple images in different locations. This is commonly called a "texture atlas" (Google that for the details). Each quad would have texture coordinates for the particular image it renders. Text is often drawn in such a way, where each letter (glyph) is stored in the same texture.

OpenGL ES 2.0 for 2D, how to set origin to top-left

I think this has been discussed before, but I can't find an answer that works for me.
I'm developing a 2D "drawing" application for iPad with OpenGL ES 2.0.
I'm creating an Ortho Projection Matrix with a function described in the book "iPhone 3D Programming", and as far as I know that matrix is correct. The function call is something like this:
proj = identity.Ortho(-width/2, width/2, -height/2, height/2, -1.0f, 1.0f);
It works ok, but it's putting the origin in the center of the viewport. I'm gonna need to get touch information from the user to paint so I would like the origin to be at the top left corner.
I know I don't really need that, since I can just substract (width/2, height/2), but everything would be easier if the origin was at the TL.
So I tried this:
proj = identity.Ortho(0, width, 0, height, -1.0f, 1.0f);
But it doesn't work at all, if I draw a rectangle I just see some lines or triangles when I rotate the viewModel Matrix, it's like it getting distorted.
Thankyou.
With identity.Ortho(0, width, 0, height, -1.0f, 1.0f) you were on the right track. But this will position the origin in the lower left corner (as it operates still in right-handed 3d space and not in screen space, so y goes up and x goes right). Instead, just swap top and bottom using
proj = identity.Ortho(0, width, height, 0, -1.0f, 1.0f);
But keep in mind, that since this mirrors the y-direction (like you want it), it will invert the orientation of any triangles you draw, turning counter-clockwise oriented triangles into clockwise ones. This is not really a problem, you just have to keep this in mind when you do things based on a triangle's orientation (e.g. back-face culling, two-sided materials, ...) and can be accounted for by using glFrontFace to switch the default front-side winding order. But since you want to do 2d, triangle orientation and back-face culling won't be that much of an issue for you, anyway.

Strange thin line or dots at the bottom of my opengl texture

I have made an app similar to this one: http://www.youtube.com/watch?v=U2uH-jrsSxs (the sound is a bit loud and bad). The problem is there is a very thin line/dots/whatever appearing at the bottom of every texture. It is almost unnoticeable but it is there and I have no idea why. My texture size is 256x256. I tested earliear with a texture size 128x128 I THINK there was nothing there but not sure. It's not such a big deal as it is very thin but I find it annoying. Here is a screenshot. I have selected with RED those lines. I'm a noob at OpenGL(ES) so probably I did something wrong. Any help is appreciated.
This will be due to OpenGL tiling the texture to fill the specified area. So the thin line you are seeing will be the very top of that texture just starting to repeat again.
To avoid it, tell the texture to CLAMP, rather than REPEAT (repeat being synonymous with tiling). Textures repeat by default, so you will want a line something like this:
glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP );
glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP );
If you're this way inclined, there is also a no-code-involved bodge way around it. Simply edit your source graphics so that no pixels are present in the top or left edges. So move the whole lot down one pixel and right one pixel inside its canvas. But then of course you will need to adjust your coordinates if you want the images to appear in exactly the same place.

How To Draw More Precise Lines using Core Graphics and CALayer

Hello I am having a hard time making this UI element look the way I want (see screenshot). Notice the image on the right--how the line width and darkness looks inconsistent compared to the image on the left (which happens to be a screen grab from safari) where the border width is more consistent. How does apple make their lines so perfect?
I'm using a CALayer and the Core Graphics API to draw the image on the right. Is it possible to draw such perfect lines with the standard apis?
The problem with drawing a 1-pixel path is that Quartz draws paths on an exact point grid, starting from {0,0}. This means that if you stroke a vertical path starting at {10,10} with a 1-point width, half of that line will render in the pixel to the left of the coordinate and half in the pixel to the right, causing a blurring effect.
You should therefore shift your drawing by {0.5,0.5} if you want lines to draw on exact pixels.
You can definitely draw what you want with Quartz.
Apple uses images for the tab elements.