OpenGL ES iPhone - drawing anti aliased lines

问题:

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?

回答1:

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);

回答2:

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 are also some sample pictures how it looks for me on my blog.

回答3:

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.

回答4:

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

回答5:

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.

回答6:

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.

回答7:

Put this in your render method and setUpFrame buffer... You will get anti-aliased appearance.

/*added*/
//[_context presentRenderbuffer:GL_RENDERBUFFER];

//Bind both MSAA and View FrameBuffers.
glBindFramebuffer(GL_READ_FRAMEBUFFER_APPLE, msaaFramebuffer); 
glBindFramebuffer(GL_DRAW_FRAMEBUFFER_APPLE, framebuffer );  
// Call a resolve to combine both buffers 
glResolveMultisampleFramebufferAPPLE();   
// Present final image to screen 
glBindRenderbuffer(GL_RENDERBUFFER, _colorRenderBuffer);
[_context presentRenderbuffer:GL_RENDERBUFFER];
/*added*/