Hacker News new | past | comments | ask | show | jobs | submit login

Yes, WebGL's built in antialiasing is MSAA, not supersampling. MSAA only affects the edges of triangles. It doesn't help aliasing introduced by shaders at all.

Supersampling is easy to implement, just set the canvas size to a multiple of the viewport size and scale it down with CSS. It will help with all forms of aliasing, however it gets very slow very quickly. Shader aliasing is better solved analytically whenever possible.

One trick that you can use when aliasing is difficult to solve is to use supersampling but only when the scene is static. Google Maps WebGL does this. While you are dragging the map it is aliased. As soon as you stop dragging and the map becomes stationary, it renders 16 frames with subpixel offsets and blends them together to produce one supersampled frame (this is better than resizing the canvas because it can be interrupted in the middle if the user starts dragging again). This doesn't work for dynamic games but it might be suitable for your application with a lot of static content.




Whoa, that's brilliant. I think that just works for out app. Is there a public reference I could look at?


Try searching for accumulation buffer antialiasing. OpenGL ES (WebGL) doesn't directly support an "accumulation buffer" the way desktop OpenGL does, but you can emulate it with render to texture and appropriate blending settings.

Now that I think about it, it may not work as well for your app as Google Maps. The thing about Google Maps is that when you zoom or pan the map the whole screen moves. In your app when you drag something, everything else remains static. The static items on screen will flicker between aliased and smooth whenever you drag something else. That will be distracting.




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: