THREE.JS / FOUNDATIONS 272

Compose the sky before it reaches the material.

The current WebGPU environment example treats image-based lighting as a node graph: mix filtered panoramas, add a procedural contribution, then apply hue, saturation, intensity, rotation, and background blur without rebuilding the scene.

Initializing -

Creating two typed-array panoramas and a node-owned environment/background graph.

backend: -
environment: -
background: -
graph: -

Adjust the environment graphpanorama -> PMREM node -> filters

renderer target panorama mix 0.50 procedural contribution 0.00 intensity 1.00 hue shift 0.00 saturation 1.00 background blur 0.00 HDR 1 rotation 0° HDR 2 rotation 0°

animate subject

Node graphwaiting

environment: -
background: -
mix: -
procedural: -
filters: -
updates: -

reference() nodes keep GUI-owned values live while the graph stays compiled.

Source panoramaswaiting

cool source: -
warm source: -
size: -
format: -
color: -
mapping: -

Generated equirectangular DataTextures stand in for the official HDR assets so the route is repeatable offline.

Backend boundarywaiting

WebGPU: -
WebGL2: -
PMREM: -
scene owner: -
source bytes: -
textures: -

WebGL2 keeps a direct PMREM scene environment; the custom adjustment node graph is WebGPU-only.

Mixtwo PMREMs

Two independently rotated filtered panoramas blend through a live reference node.

ProceduralnormalWorld

A normal-derived color field can be blended into the image-based environment.

Filtershue + saturation

Color operators modify the final environment node used by both lighting and background.

Backgrounddirection + blur

The background samples a different direction node and can receive a context-provided mip level.

Graph and render timingwaiting

build ms: -
CPU avg: -
CPU p95: -
uniform updates: -
source bytes: -
texture count: -

Live sliders should update reference nodes without rebuilding the material graph.

cool DataTexturepmremTexture+warm DataTexturemix / procedural / filtersScene.environmentNode + backgroundNode

This is a focused adaptation of the official EnvMap Adjustments example: generated panoramas replace the exact HDR/helmet assets, while the node ownership and adjustment contracts remain explicit. The forced WebGL2 route is a direct PMREM reference, not a claim of node-graph parity. Whole-example fidelity remains separate.

Sources: official EnvMap Adjustments example · EnvironmentNode · Scene · TSL · PMREMGenerator