← Catalog
WebGPU · three.js

Deferred Rendering & Clustered Lights

G-buffers, light clustering and hundreds of dynamic lights at 60 fps.

Free preview

What you will build

G-buffers, light clustering and hundreds of dynamic lights at 60 fps.

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()
// deferred-rendering: 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 / 中文)