What is the principle of Threejs shadow rendering？

Questions
1

What is the principle of Threejs shadow rendering and how does the shadow map blend with the material receiving the shadow

2

Answer depends on the shadow type. Going along the examples:

  • Lightmap¹: direct & indirect light is saved in a texture that you / artist unwrap over an entire scene, each black pixel is fully in shadow, any other color applies light to the scene.
  • Contact shadows¹: All elements on the scene are projected on a plane below them (ie. place camera above the scene, look down, render what you see to a plane), fully in black, then blurred in all directions to create smooth shadow effect.
  • Shadowmap (Basic, CSM, PCSS, etc.): shadowMap is first rendered to a texture / render target. Then each material handles it on it’s own - so shadowMap support depends on whether a material has it in the fragment shader or not (general shadow calculation, phong / standard materials, lambert / shadow material.) The result of getShadow can then be multiplied by direct total light to darken it, and indirect is added on top (these shadows should not affect ambient / hemisphere lights, but it’s once again up to the material.)
  • Progressive Shadowmap: kind of a mix between all the previous ones (original explanation.) You unwrap the scene like you’d do with a baked lightmap, then accumulate shadow maps over time based on different light positions and intensity. It effectively bakes a shadowmap over time, which you can then multiply by the dynamic lights in the scene.

¹ - Keep in mind these are not “real” shadows, since they kinda entirely ignore the existence / strength / color / position of lights in the scene.

1 Like