THREE.JS / FOUNDATIONS 235

Bend the frame behind the surface.

A refractive surface can reuse the pixels already rendered behind it. Distort screen UVs with the surface normal, sample the viewport, and let depth-aware UV safety reject foreground mistakes.

Initializing refraction—

Preparing the opaque source world and the transparent optical surface…

backend: —
graph: —
source: —
surface: —
render order: —
frame ms: —

Optical sampling controlswaiting

viewport source surface graph surface geometry refraction strength 0.18 index of refraction 1.45 dispersion 0.045 UV inset / edge safety 0.02

animate world auto-rotate camera

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

Screen-space refraction contractTSL

normal offsetsurface graph

viewportSharedTexture()

frame sourcecurrent viewport

shared framebuffer

directionview-space normal

normalView.xy

UV safetydepth-aware sample

viewportSafeUV()

orderingtransparent pass

renderOrder 10

fallbackWebGL2 reference

direct translucent tint

The opaque source world renders first. At render order 10, the transparent lens samples that previous viewport and bends it with its view-space normal.

WebGPU executes the TSL viewport graph. The forced WebGL2 route keeps the interaction surface but uses a direct translucent material because the viewport node graph is not executed there.

Derived from the official refraction example, ViewportTextureNode, NodeMaterial, and TSL contracts. Use ?forceWebGL=1 to inspect the labeled fallback; whole-example fidelity remains separate.

LAB 235 / SCREEN-SPACE REFRACTION