WebGL Screenspace Ambient Occlusion

Oct. 25, 2011

The grass demo I did earlier used some Screenspace Ambient Occlusion. I thought it was a cool effect, and decided to research the topic futher. Scren-Space Ambient Occlusion is an incorrect aproximation to true ambient occlusion, and it has a couple problems, but it can be a useful technique.

This demo integrates a bunch of rendering techniques:

  • Percentage Close filtered shadow mapping
  • Screenspace Ambient Occlusion
  • Procedurally generated sky
  • Environment map lighting computed from the sky
  • Diffuse texturemaps and specular maps
  • Stochastic Sampling
  • Bilateral gaussian blurring


You can try the live demo. The code is on github.

The demo allows you to tune the parameters of the rendering and adjust it to your liking.


WASD for movement, click&hold for mouselook.



Reference without ssao

Critique: Don't overdo it

If carefully tuned and mixed with other lighting techniques SSAO can be quite useful. However it is quite easy to overdo the effect (a sin many AAA games commit these days). If you implement SSAO for your game, please keep in mind to give your artists control over the tuning of the effect.


I use a couple of different methods for SSAO.

Further research

It's worth checking out the following book chapters and links about the topic.


Simon Rozner was as kind as to design the city scape I'm using for test geometry. Thanks buddy!