Ambient Occlusion Map

Rendering shadows

We have learned how we can use shadows in Three.js. If we set the castShadow and receiveShadow properties of the correct meshes, add a couple of lights, and configure the shadow camera of the lights correctly, Three.js will render shadows.

Rendering shadows, however, is a rather expensive operation that is repeated for every render loop. If we have lights or objects that are moving around, this is necessary, but often, some of the lights or models are fixed, so it would be great if we could calculate the shadows once, and then reuse them. To accomplish this, Three.js offers two different maps:

• The ambient occlusion map

• The light map

We’ll look at the ambient occlusion map.

Adding subtle shadows with an ambient occlusion map

Ambient occlusion is a technique used to determine how much each part of a model is exposed to the ambient lighting in a scene. In ...