Shadows are important elements in creating realistic images and in providing the user with visual cues about object placement. Here I'll present three real-time shadow techniques from different aspects, which can be combined together, to show how shadows can make a significant difference to rendering quality.

Hard shadows: shadow mapping

Shadow mapping is the mainstream method for implementing hard shadows. Compared to another technique called Shadow Volume, it has the benefit of more predictable rendering cost, but suffers from aliasing issues due to resolution limitations. Both methods have been vastly explored over the years, and I'm choosing shadow mapping here because it's the default option in three.js. Basically, the scene is first rendered to a shadow map, which is a depth texture from the camera's point of view, then in the ordinary pass, each pixel is tested against the shadow map to determine whether it's occluded or not.

Soft shadows: percentage-closer soft shadows (PCSS)

If the light source has an area (in contrast to ideal point light or directional light), the shadows appear soft, i.e., sharper as objects contact each other and more blurry (softer) the further they are apart. A simple solution to get soft shadows is to approximate the area light by using a number of point lights, however it is very computation intensive. Percentage-closer soft shadows, a technique based on shadow mapping and percentage-closer filtering (PCF), has been proposed to provide fast and high quality pseudo-soft shadows. Instead of representing occlusion of each pixel in binary form, it tries to estimate the percentage in its neighborhood that is visible to the light, thus can produce gradient around shadow edges.

Ambient occlusion: screen-space ambient occlusion (SSAO)

Ambient occlusion is a special kind of shadow effect when there are ambient lights. Consider a fully illuminated room: even without explicit occluders, a pixel on the floor in the middle of room looks much more brighter than, say, a pixel in the corner. This is because the former is more exposed to lights (180 degrees in contrast to 90 degrees in the latter case). Such effects can be achieved by a family of techniques called ambient occlusion. Among the others, SSAO has become the most popular one since its first use in Crysis. It is notable for its efficiency due to its independency of scene complexity and that each pixel's occlusion is evaluated using readily available screen z-buffer.

• Real-Time Rendering 3rd edition Chpts. 9
• Three.js Shadows Tutorial
• Percentage-Closer Soft Shadows