Ambient occlusion is a great effect that provides more realistic lighting to objects in a 3D scene. It works by looking at the scene geometry to see what is nearby; floors, walls or other geometry. In the real world the effect we see when objects are near each other is subtle shadowing – this is the effect ambient occlusion creates, and very convincingly so! The main downside of it is that it’s really intensive (read: slow) to calculate properly, so to render it in real-time we do what the very best of us do: cheat. Cheat like dirty, rotten scoundrels.
The proper non-cheated effect is generated in 3D space, but instead we calculate the ambient occlusion in something called “screen space”. In other words, we use the information that we’ve already calculated when the scene was rendered, particularly the depth information, and reuse it to approximate the soft shadows. There are a few benefits of doing it this way: it can be done entirely on the GPU, it’s independent of the scene’s complexity (because it’s calculated per-pixel and not per-object) and it can be dynamically recalculated as the scene changes. Of course it’s only an approximation of ambient occlusion so you’re trading out accuracy.
If you’re wondering what this effect looks like, you’re in luck. It turns out prolific creative coder and Three.js contributor, AlteredQualia, has you covered. He’s written a very nice demo showing screen space ambient occlusion (or SSAO as it’s typically known). The demo also allows you to toggle tilt-shift as well, but I’ll not get into that just now!
Take a look at the demo, and if you’re interested in ambient occlusion or its screen space sibling you should head over to Wikipedia or check out this tutorial from John Chapman. A little warning, though: it can get a little intense if you’re not into graphics programming.
SSAO with Three.js by AlteredQualia