THREE.JS / FOUNDATIONS 232

Filter the world with one surface.

A backdrop material samples what has already rendered behind it, then applies a TSL filter during the material’s lighting stage. The result is a lens, portal, or glass area without a hand-managed scene pass.

Initializing backdrop—

Preparing the shared viewport texture and transparent filter surface…

backend
—
effect
—
surface
—
source
—
render order
—
frame ms
—
Backdrop graph controlswaiting

The filter graph will be compiled after the renderer selects its backend.

Backdrop contractTSL
sourceshared framebuffer

viewportSharedTexture()

material slotlighting stage

backdropNode

influencefloat node

backdropAlphaNode

UV safetyrefraction guard

viewportSafeUV()

deptharea mode

viewportLinearDepth

orderingtransparent pass

renderOrder 10

The surface is rendered after the opaque world; its backdrop node sees the framebuffer state that exists at that point in the render order.

WebGPU uses the official material-level backdrop path. The forced WebGL2 route is a labeled direct-tint reference because it does not execute the backdrop node.

Derived from the official Backdrop, Backdrop Area, and Refraction examples plus the NodeMaterial, ViewportSharedTextureNode, and TSL docs. Use ?forceWebGL=1 to inspect the explicit fallback.

LAB 232 / BACKDROP MATERIAL