THREE.JS / FOUNDATIONS / RADIAL BLUR

Pull light from the center.

This study isolates the installed TSL radialBlur() contract: the scene pass feeds center-directed samples, while the direct WebGL2 lane stays explicitly outside the native node graph.

InitializingPreparing WebGPU

Preparing the radial blur graph…

backend: -
graph: -
output: -
target: -
resolution: -
center: -
sample: WAITING
resources: -

Radial blur controlsnode graph

output node pass resolution

center X 0.50 center Y 0.50 weight 0.90 decay 0.95 sample count 24 exposure 4.00

animate scene

radialBlur() samples the scene color toward the selected center.

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

Source contractWebGPU / TSL

pass(scene, camera)scene texture

renderOutput(color)sRGB boundary

radialBlur(output)center-directed samples

Loop(count)bounded iteration

setResolutionScale()target ownership

The native route keeps sample count, decay, weight, exposure, and center as explicit uniforms.

Node readoutready

scene pass-

radial node-

color transform-

graph ownership-

RenderPipeline owns the final graph; radialBlur owns the repeated center-directed samples.

Derived from the official WebGPU radial-blur example and the installed radialBlur(), PassNode, and RenderPipeline contracts. Use ?forceWebGL=1 to inspect the explicit direct WebGL2 fallback.

THREE.JS FOUNDATIONS LAB