THREE.JS / FOUNDATIONS 234

Read the depth that came before.

Color tells you what was rendered. Depth tells you where it was rendered. Inspect the previous viewport’s depth attachment, then convert it into a useful linear mask inside a transparent surface.

Initializing viewport depth—

Preparing the depth attachment and the transparent inspection surface…

backend: —
view: —
depth node: —
source: —
render order: —
frame ms: —

Depth sampling controlswaiting

depth view window geometry depth contrast 1.40 depth pivot 0.18 UV inset / edge safety 0.02

animate world auto-rotate camera

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

Viewport depth contractTSL

linear sourcedepth attachment

viewportLinearDepth

raw inputviewport texture

viewportDepthTexture()

conversionperspective → linear

linearDepth()

UV safetyclamped sample

viewportSafeUV()

copy timingrender update

copy before draw

orderingtransparent pass

renderOrder 10

The opaque source world renders first. The window reads the depth attachment that exists at render order 10, so the sample describes the scene behind the surface.

WebGPU executes the viewport depth nodes. The forced WebGL2 route is an explicit direct-color reference because it cannot execute the TSL depth graph.

Derived from the official ViewportDepthTextureNode, ViewportDepthNode, TSL, and depth texture example contracts. Use ?forceWebGL=1 to inspect the labeled fallback.

LAB 234 / VIEWPORT DEPTH