Three.js effects

Generated from the engine's capability manifest: 16 functions and 2 classes. Each entry is the exported signature, what it is for, and a working example.

WorldEnvironment

class · src/render/worldEnvironment.ts

The generated file that composes every lighting stage and prints TN_RENDER_CHAIN naming each one as applied or refused with a reason. It is the game's source, not the framework's — edit it.

class WorldEnvironment

Use it to

• turn a lighting or post-processing effect on or off
• find out why an effect you enabled is not visible
• change how the scene is lit, graded, or tonemapped
• match a reference image's lighting

Example

src/render/postprocessing.ts — edit the preset it passes to WorldEnvironment

Good to know

• Read the TN_RENDER_CHAIN line before assuming a stage ran: it names every stage as applied or dropped, with the reason it was dropped.
• A stage reported applied can still be invisible if its own inputs are wrong — the chain reports whether it built, not whether you can see it.
• Appearance belongs here, in generated game source. Nothing in packages/ decides how the scene looks.

bloom

function · import { bloom } from "three/addons/tsl/display/BloomNode.js"

Glow around bright pixels. Already wired as the bloom stage.

bloom(node, strength, radius, threshold)

Use it to

• make a bright opening or a lamp glow
• bloom, glare, light spill

Example

src/render/postprocessing.ts — edit the preset it passes to WorldEnvironment

Good to know

• Strength above ~0.3 on an interior washes the mid-tones; the reference-matching band is lower than it looks.

denoise

function · import { denoise } from "three/addons/tsl/display/DenoiseNode.js"

ThreeNative equivalent for realism-effects denoise.

function denoise

Use it to

• denoise a noisy screen-space pass

Example

denoise(...)

Good to know

• Use the running WebGPU renderer and keep appearance choices in template render source.

godrays

function · import { godrays } from "three/addons/tsl/display/GodraysNode.js"

Raymarched shafts of light. Already wired as the godRays stage of the render chain; turn it on with godraysEnabled in src/render/postprocessing.ts.

godrays(textureNode, light, shadowMap, params)

Use it to

• draw a visible shaft of light through a window or a hole in a roof
• god rays, sun shafts, light beams, crepuscular rays
• make sunlight visible in dusty or misty air indoors
• light a cave or a hall through an opening above
• volumetric lighting without adding cone geometry

Example

src/render/postprocessing.ts — edit the preset it passes to WorldEnvironment

Good to know

• Needs a shadow-casting DirectionalLight passed as godraysLight, and renderer.shadowMap.enabled = true — without the shadow map the stage refuses and the whole chain reports it dropped.
• godraysFloor is what separates beams from fog: it subtracts out-of-beam scatter before godraysIntensity multiplies. Raising intensity with a floor near zero brightens the haze over the whole room instead of the beams.
• Do not author cone geometry for beams. A hand-built additive cone draws its own silhouette and reads as a plastic tube; this stage is the supported route.
• Measured band on an interior scene: density 0.7, floor 0.08, intensity 3.0, maxDensity 0.6. Above ~0.8 density the haze stops being confined to the beams and the room fogs.

ao

function · import { ao } from "three/addons/tsl/display/GTAONode.js"

Ground-truth ambient occlusion. Already wired as the ambientOcclusion stage; turn it on with gtaoEnabled.

ao(scene, camera, resolution, radius, intensity)

Use it to

• darken the contact where an object meets the floor
• stop props looking like they float
• ambient occlusion, contact shadows, crevice darkening

Example

src/render/postprocessing.ts — edit the preset it passes to WorldEnvironment

Good to know

• Radius is in metres; a radius sized for a room reads as a smudge on a prop.

motionBlur

function · import { motionBlur } from "three/addons/tsl/display/MotionBlur.js"

ThreeNative equivalent for realism-effects motionBlur.

function motionBlur

Use it to

• blur motion using a velocity buffer

Example

motionBlur(...)

Good to know

• Use the running WebGPU renderer and keep appearance choices in template render source.

recurrentDenoise

function · import { recurrentDenoise } from "three/addons/tsl/display/RecurrentDenoiseNode.js"

ThreeNative equivalent for realism-effects recurrentDenoise.

function recurrentDenoise

Use it to

• denoise a noisy screen-space pass

Example

recurrentDenoise(...)

Good to know

• Use the running WebGPU renderer and keep appearance choices in template render source.

sharpen

function · import { sharpen } from "three/addons/tsl/display/SharpenNode.js"

ThreeNative equivalent for realism-effects sharpen.

function sharpen

Use it to

• make the image sharper

Example

sharpen(...)

Good to know

• Use the running WebGPU renderer and keep appearance choices in template render source.

ssaaPass

function · import { ssaaPass } from "three/addons/tsl/display/SSAAPassNode.js"

ThreeNative equivalent for realism-effects ssaaPass.

function ssaaPass

Use it to

• anti-alias still and moving scenes

Example

ssaaPass(...)

Good to know

• Use the running WebGPU renderer and keep appearance choices in template render source.

ssgi

function · import { ssgi } from "three/addons/tsl/display/SSGINode.js"

ThreeNative equivalent for realism-effects ssgi.

function ssgi

Use it to

• add screen-space global illumination

Example

ssgi(...)

Good to know

• Use the running WebGPU renderer and keep appearance choices in template render source.

ssr

function · import { ssr } from "three/addons/tsl/display/SSRNode.js"

ThreeNative equivalent for realism-effects ssr.

function ssr

Use it to

• add screen-space reflections

Example

ssr(...)

Good to know

• Use the running WebGPU renderer and keep appearance choices in template render source.

temporalReproject

function · import { temporalReproject } from "three/addons/tsl/display/TemporalReprojectNode.js"

ThreeNative equivalent for realism-effects temporalReproject.

function temporalReproject

Use it to

• reproject a temporal history

Example

temporalReproject(...)

Good to know

• Use the running WebGPU renderer and keep appearance choices in template render source.

traa

function · import { traa } from "three/addons/tsl/display/TRAANode.js"

ThreeNative equivalent for realism-effects traa.

function traa

Use it to

• temporally resolve a moving image

Example

traa(...)

Good to know

• Use the running WebGPU renderer and keep appearance choices in template render source.

depth

function · import { depth } from "three/tsl"

ThreeNative equivalent for realism-effects depth.

function depth

Use it to

• provide depth to screen-space effects

Example

depth(...)

Good to know

• Use the running WebGPU renderer and keep appearance choices in template render source.

mrt

function · import { mrt } from "three/tsl"

ThreeNative equivalent for realism-effects mrt.

function mrt

Use it to

• provision velocity, normal, and depth render targets

Example

mrt(...)

Good to know

• Use the running WebGPU renderer and keep appearance choices in template render source.

normalView

function · import { normalView } from "three/tsl"

ThreeNative equivalent for realism-effects normalView.

function normalView

Use it to

• provide normals to screen-space effects

Example

normalView(...)

Good to know

• Use the running WebGPU renderer and keep appearance choices in template render source.

velocity

function · import { velocity } from "three/tsl"

ThreeNative equivalent for realism-effects velocity.

function velocity

Use it to

• provide motion vectors to temporal effects

Example

velocity(...)

Good to know

• Use the running WebGPU renderer and keep appearance choices in template render source.

VelocityNode

class · import { VelocityNode } from "three/webgpu"

ThreeNative equivalent for realism-effects VelocityNode.

class VelocityNode

Use it to

• provide motion vectors to temporal effects

Example

VelocityNode(...)

Good to know

• Use the running WebGPU renderer and keep appearance choices in template render source.