Three.js Demos
Three.js Demos

Shadow Map Types Comparison (r183 roadmap)

Three-way split viewport that compares `PCFShadowMap`, `PCFSoftShadowMap`, and `VSMShadowMap` on the same animated scene and light setup.

Key topics: three.js shadows, pcf shadow map, pcfsoftshadowmap, vsmshadowmap, shadow quality

What this code does

- Side-by-Side Method: renders the same camera view three times per frame using different `renderer.shadowMap.type` values.
- Shadow Quality Tradeoff: PCF is sharper, PCFSoft is smoother, and VSM can produce soft penumbras with different artifact behavior.
- Shared Scene Baseline: identical geometry, animated motion, and light direction make differences easier to judge.
- Shadow Tuning Controls: includes map size, bias, radius, and light intensity sliders for practical balancing.
- Engineering Use: useful when selecting a default shadow method for product visuals versus stylized scenes.

Related Demos

Continue Learning

Browse Three.js Tutorials

JavaScript Implementation

ES6+ 
renderer.shadowMap.enabled = true

// Compare map types by rendering the same scene with different values:
renderer.shadowMap.type = THREE.PCFShadowMap
renderer.render(scene, camera)

renderer.shadowMap.type = THREE.PCFSoftShadowMap
renderer.render(scene, camera)

renderer.shadowMap.type = THREE.VSMShadowMap
renderer.render(scene, camera)
← Back