OpenGL ES iPhone - drawing anti aliased lines

Question

Normally, you'd use something like:

glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);
glEnable(GL_BLEND);
glEnable(GL_LINE_SMOOTH);

glLineWidth(2.0f);

glVertexPointer(2, GL_FLOAT, 0, points);
glEnableClientState(GL_VERTEX_ARRAY);

glDrawArrays(GL_LINE_STRIP, 0, num_points);

glDisableClientState(GL_VERTEX_ARRAY);

It looks good in the iPhone simulator, but on the iPhone the lines get extremely thin and w/o any anti aliasing.

How do you get AA on iPhone?

Answer 1

I remember very specifically that I tried this and there is no simple way to do this using OpenGL on the iPhone. You can draw using CGPaths and a CGContextRef, but that will be significantly slower.

Answer 2

The problem is that on the iPhone OpenGl renders to a frame buffer object rather than the main frame buffer and as I understand it FBO's don't support multisampling.

There are various tricks that can be done, such as rendering to another FBO at twice the display size and then relying on texture filtering to smooth things out, not something that I've tried though so can't comment on how well this works.

Answer 3

One approach around this limitation is tessellating your lines into textured triangle strips (as seen here).

Answer 4

One can achieve the effect of anti aliasing very cheaply using vertices with opacity 0. Here's an image example to explain:

Comparison with AA:

You can read a paper about this here:

http://research.microsoft.com/en-us/um/people/hoppe/overdraw.pdf

You could do something along this way:

// Colors is a pointer to unsigned bytes (4 per color).
// Should alternate in opacity.
glColorPointer(4, GL_UNSIGNED_BYTE, 0, colors);
glEnableClientState(GL_COLOR_ARRAY);

// points is a pointer to floats (2 per vertex)
glVertexPointer(2, GL_FLOAT, 0, points);
glEnableClientState(GL_VERTEX_ARRAY);

glDrawArrays(GL_TRIANGLE_STRIP, 0, points_count);

glDisableClientState(GL_VERTEX_ARRAY);
glDisableClientState(GL_COLOR_ARRAY);

Answer 5

I'm a noob when it comes to programming on the iphone, but I'm guessing theres no AA because of the iphone's standard practice to triple buffer everything.

Answer 6

Using http://answers.oreilly.com/topic/1669-how-to-render-anti-aliased-lines-with-textures-in-ios-4/ as a starting point, I was able to get anti-aliased lines like these:

They aren't perfect nor are they as nice as the ones that I had been drawing with Core Graphics, but they are pretty good. I am actually drawing same lines (vertices) twice - once with bigger texture and color, then with smaller texture and translucent white.

There are artifacts when lines overlap too tightly and alphas start to accumulate.

Answer 7

Starting in iOS Version 4.0 you have an easy solution, it's now possible to use Antialiasing for the whole OpenGL ES scene with just a few lines of added code. (And nearly no performance loss, at least on the SGX GPU).

For the code please read the following Apple Dev-Forum Thread. There's also some sample pictures how it looks for me on my blog.