Question

Using WebGL (which is constrained to the OpenGL ES 2 API), I am successfully rendering to texture and then displaying that texture onscreen. Because it is a texture, it is not being antialiased. If I were rendering to an RBO and then displaying that onscreen, I would be able to take advantage of AA.

My render target setup looks like this:

1. Create FBO
2. Bind FBO
3. Create texture (to be rendered to)
4. Create and bind depth buffer as RBO
5. Attach texture and RBO to FBO

And my rendering update loop looks like this:

1. Render the scene to the FBO created in step #2 above
2. Render a screen aligned quad with the texture created in step #3 above

With desktop OpenGL, I would call glBlitFramebuffer() instead of drawing the screen aligned quad.

How do I render my scene with antialiasing? Do I need to replace the texture with an RBO? If so, what calls do I use to bind the RBO to draw a screen-aligned quad?

Answer 1

You cannot blit the contents of an RBO to screen in WebGL unless you perform a readback and re-upload to texture to blit, which is rather slow.

WebGL has no support for MSAA on FBOs in any form (neither as RBO nor as RTT).

You can implement your own antialiasing in a variety of ways.

• Render at 2:2 size and scale down (google maps with webgl does this)
• Render at 1:1 size, run a sobel or laplace edge detection on color and depth, and run a bilateral gaussian blur using edge strength as weight (I’ve used this technique in some of my demos, it works well, http://codeflow.org/entries/2011/apr/11/advanced-webgl-part-1/ )
• Use the morphological antialiasing recipe from GPU Pro 2 (I’ve yet to try that)