← Catalog
WebGPU · three.js

Shadow Mapping in WebGPU

Depth from the light's view, PCF filtering, cascaded shadows with three.js WebGPURenderer.

Free preview

What you will build

Depth from the light's view, PCF filtering, cascaded shadows with three.js WebGPURenderer.

Free preview below. The full runnable project and PDF notes unlock after purchase.

Preview: the core idea

const renderer = new THREE.WebGPURenderer({ antialias: true })
await renderer.init()
// shadow-mapping: see the full project for the complete pipeline
  • Animated principle diagrams, then real runtime output
  • Traced events from the instrumented code drive every visual
  • Bilingual subtitles (EN / 中文)