Multisampling in WebGL

9th January 2014

When using deferred shading, you must implement your own anti-aliasing techniques. The easiest, though also one of the slowest, ways of obtaining anti-aliasing with polygon rasterisation is multi-sampling. Multi-sampling is where you render the scene in the normal manner to a off-screen buffer at a larger resolution than the scene and then down-sample (merge multiple samples) and render back onto the screen.

Live demo

The canvas below is rendered using multi-sampling - the scene is first rendered at twice the resolution to a framebuffer and then the framebuffer is rendered to a screen plane. There are multiple ways you could render and sample the scene from the screen plane. The simplest would be to enable linear sampling on the TEXTURE_MIN_FILTER attribute of the texture bound to the framebuffer and let the gpu sample the scene for us. In this demo, I have used a shader to sample the scene in a custom manner by averaging the pixel with its three neighbours in the positive x/y directions.

Make a comment

Contribute to this article and have your say.