THREE.JS / FOUNDATIONS 227

Split the light.

ChromaticAberrationNode samples the same render texture at separate red, green, and blue coordinates to expose lens-like color fringing.

Initializing chromatic aberration—

Preparing the scene pass, output transform, and channel offsets…

Aberration controlseffect node

architecture output view strength 1.50 center X 0.50 center Y 0.50 channel scale 1.20

animate scene auto-rotate camera

The CA node is active and samples red, green, and blue at separate coordinates.

Run a bounded sample after selecting an output; the sample reports average and p95 frame time.

Node contractChromaticAberrationNode

pass()scene input

scene → output

redoutward sample

center + offset

greenreference sample

centered

blueinward sample

center − offset

ownershipexplicit cleanup

graph 0

The node measures each fragment's distance from the configured center, scales the channel UVs, and samples alpha from the original UV.

The official example feeds a tone-mapped scene pass into renderOutput before the CA node and exposes static uniform values.

Derived from the official chromatic aberration example, ChromaticAberrationNode, RenderPipeline, and TSL docs. Use ?forceWebGL=1 to inspect the direct WebGL2 fallback.

LAB 227 / CHROMATIC ABERRATION