Chapter 103: ClusteredLighting

Core Idea

A custom lighting implementation based on Forward+ Clustered Shading that overwrites the default lighting system in WebGPURenderer. Suitable for 3D scenes with many point lights and real depth complexity — the view frustum is partitioned into a 3D cluster grid so only the lights actually reaching each fragment are evaluated.

Code Examples

const lighting = new ClusteredLighting();
renderer.lighting = lighting; // set lighting system

• What it demonstrates: Typical usage of ClusteredLighting.

Reference Tables

Constructor

Signature
new ClusteredLighting( maxLights : number, tileSize : number, zSlices : number, maxLightsPerCluster : number )

Methods

Method	Description
.createNode( lights : Array.<Light> ) : ClusteredLightsNode	Creates a new clustered lights node for the given array of lights.

Key Takeaways

1. ClusteredLighting extends: Lighting
2. Key methods: createNode.

Connects To

• Lighting: parent class
• Source: examples/jsm/lighting/ClusteredLighting.js