What is the principle of Threejs shadow rendering?

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

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