THREE.JS / FOUNDATIONS 264

Make the surface understand depth.

This is the combined backdrop-water graph: a transparent surface reads the current framebuffer, compares linear depth against the geometry it covers, then rejects unsafe refraction samples at foreground edges.

Initializing backdrop water—

Preparing the depth-aware viewport graph and opaque test world…

backend: —
graph: —
surface y: —
depth window: —
objects: —
frame ms: —

Depth-aware water controlswaiting

water graph water tint refraction strength 0.080 depth response 0.060 water elevation 0.00

animate world auto-rotate camera show water guide

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

Backdrop-water contractTSL

surface depthcurrent mesh

linearDepth()

scene depthprevious framebuffer

viewportLinearDepth

shifted testrefracted UV

viewportDepthTexture(UV)

color samplesafe viewport

viewportSharedTexture(UV)

material slottransparent stage

backdropNode

fallbackWebGL2 reference

direct translucent tint

The water surface renders after the opaque world at render order 10, so its backdrop graph can inspect what is already in the framebuffer.

WebGPU executes the viewport/depth graph. The forced WebGL2 route preserves the scene and controls but does not execute the backdrop nodes.

Derived from the official Backdrop Water example and the NodeMaterial, ViewportSharedTextureNode, ViewportDepthTextureNode, and TSL contracts. Use ?forceWebGL=1 to inspect the explicit fallback.

LAB 264 / BACKDROP WATER