THREE.JS / FOUNDATIONS 273

Grade the final image in a volume.

A 3D lookup table is a color transform stored as a sampled volume. This lab builds typed lookup data, binds it through the official `lut3D()` node, and compares graded output with the raw render while keeping the WebGL2 limitation explicit.

Initializing-

Creating the stage, 3D LUT volume, and render pipeline.

backend
-
output
-
LUT
-
pipeline
-
Choose the color transformscene pass -> renderOutput -> lut3D
LUT nodewaiting
node
-
size
-
intensity
-
filter
-
bytes
-
color space
-

`lut3D()` samples a `texture3D()` lookup volume and mixes the result with the input by intensity.

Pipelinewaiting
scene pass
-
output pass
-
render node
-
raw view
-
graded view
-
builds
-

RenderPipeline owns the final output node and must render the pass inside the animation loop.

Backend boundarywaiting
WebGPU
-
WebGL2
-
3D texture
-
fallback
-
CPU avg
-
textures
-

The lookup graph is WebGPU-only here; WebGL2 remains a direct render reference.

VolumeR x G x B

Each input color becomes a coordinate in a typed 3D lookup field.

Samplinglinear / nearest

Trilinear interpolation smooths the lattice; nearest sampling exposes its discrete cells.

Mixintensity

The LUT node blends graded color with the original scene output.

OutputRenderOutputNode

With pipeline color transforms disabled, the output node defines the final color sequence.

Pipeline timingwaiting
build ms
-
CPU avg
-
CPU p95
-
LUT bytes
-
texture count
-
updates
-

Switch profiles and sampler policy, then measure the active output path.

scenepass()renderOutput()lut3D(texture3D)screen

This is a deterministic adaptation of the official 3D LUT example: the exact coffee mug, smoke, external LUT files, and Inspector presentation are replaced by generated local content, while the Data3DTexture, texture3D, lut3D, RenderPipeline, and outputColorTransform contracts remain executable.

Sources: official 3D LUT example · Data3DTexture · RenderPipeline · Lut3DNode source