An interactive WebGL2 demo for understanding how shadow mapping works. The screen is split into four viewports rendered every frame:
| Viewport | Contents |
|---|---|
| Top left | The shadow map |
| Top right | Shadow-map depth projected onto the scene |
| Bottom left | Final lit scene with shadows |
| Bottom right | Unlit scene |
Hover the mouse over the shadow map to cast the corresponding light ray through the scene. it is drawn as a white line in the other viewports, and the depth value stored at that shadow-map texel is shown in the side panel.
- Mouse over the top-left viewport — pick a shadow-map texel and visualize its light ray in world space.
- Stop/Play rotation — toggle the orbiting camera.
- Mesh — swap the floating model between cube, sphere, pyramid and cone.
- Azimuth / elevation sliders — change the directional light.
- gl-matrix (MIT) for vector/matrix math, vendored
in
lib/.