Skip to content

Commit de77d57

Browse files
sunagsunag
authored
Examples: Add Volumetric Lighting using TRAA (#32953)
1 parent 4f40b0a commit de77d57

File tree

6 files changed

+344
-4
lines changed

6 files changed

+344
-4
lines changed

‎examples/files.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -485,6 +485,7 @@
485485
"webgpu_volume_cloud",
486486
"webgpu_volume_lighting",
487487
"webgpu_volume_lighting_rectarea",
488+
"webgpu_volume_lighting_traa",
488489
"webgpu_volume_perlin",
489490
"webgpu_water",
490491
"webgpu_xr_rollercoaster",

‎examples/screenshots/webgpu_volume_lighting_traa.jpg‎

32.4 KB
Loading

‎examples/webgpu_volume_lighting.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -239,12 +239,12 @@
239239
const gui = renderer.inspector.createParameters( 'Volumetric Lighting' );
240240

241241
const rayMarching = gui.addFolder( 'Ray Marching' );
242-
rayMarching.add( params, 'resolution', .1, .5 ).onChange( ( resolution ) => {
242+
rayMarching.add( params, 'resolution', .1, 1 ).onChange( ( resolution ) => {
243243

244244
volumetricPass.setResolutionScale( resolution );
245245

246246
} );
247-
rayMarching.add( volumetricMaterial, 'steps', 2, 12 ).name( 'step count' );
247+
rayMarching.add( volumetricMaterial, 'steps', 2, 16 ).name( 'step count' );
248248
rayMarching.add( denoiseStrength, 'value', 0, 1 ).name( 'denoise strength' );
249249
rayMarching.add( params, 'denoise' ).onChange( ( denoise ) => {
250250

‎examples/webgpu_volume_lighting_rectarea.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -261,12 +261,12 @@
261261
const gui = renderer.inspector.createParameters( 'Volumetric Lighting' );
262262

263263
const rayMarching = gui.addFolder( 'Ray Marching' );
264-
rayMarching.add( params, 'resolution', .1, .5 ).onChange( ( resolution ) => {
264+
rayMarching.add( params, 'resolution', .1, 1 ).onChange( ( resolution ) => {
265265

266266
volumetricPass.setResolutionScale( resolution );
267267

268268
} );
269-
rayMarching.add( volumetricMaterial, 'steps', 2, 12 ).name( 'step count' );
269+
rayMarching.add( volumetricMaterial, 'steps', 2, 16 ).name( 'step count' );
270270
rayMarching.add( denoiseStrength, 'value', 0, 1 ).name( 'denoise strength' );
271271
rayMarching.add( params, 'denoise' ).onChange( ( denoise ) => {
272272

‎examples/webgpu_volume_lighting_traa.html‎

Lines changed: 338 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,338 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>three.js webgpu - volumetric lighting using TRAA</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7+
<link type="text/css" rel="stylesheet" href="example.css">
8+
</head>
9+
10+
<body>
11+
12+
<div id="info">
13+
<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>
14+
15+
<div class="title-wrapper">
16+
<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a><span>Volumetric Lighting using TRAA</span>
17+
</div>
18+
19+
<small>Compatible with native lights and shadows using TRAA.</small>
20+
</div>
21+
22+
<script type="importmap">
23+
{
24+
"imports": {
25+
"three": "../build/three.webgpu.js",
26+
"three/webgpu": "../build/three.webgpu.js",
27+
"three/tsl": "../build/three.tsl.js",
28+
"three/addons/": "./jsm/"
29+
}
30+
}
31+
</script>
32+
33+
<script type="module">
34+
35+
import * as THREE from 'three/webgpu';
36+
import { vec2, vec3, Fn, texture3D, screenUV, uniform, screenCoordinate, pass, depthPass, mrt, output, velocity, fract, interleavedGradientNoise } from 'three/tsl';
37+
38+
import { traa } from 'three/addons/tsl/display/TRAANode.js';
39+
40+
import { Inspector } from 'three/addons/inspector/Inspector.js';
41+
42+
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
43+
import { ImprovedNoise } from 'three/addons/math/ImprovedNoise.js';
44+
import { TeapotGeometry } from 'three/addons/geometries/TeapotGeometry.js';
45+
46+
// Halton sequence for temporal offset - matches TRAA's 32-sample Halton jitter
47+
// This creates optimal low-discrepancy distribution that accumulates well with TRAA
48+
function halton( index, base ) {
49+
50+
let result = 0;
51+
let f = 1;
52+
53+
while ( index > 0 ) {
54+
55+
f /= base;
56+
result += f * ( index % base );
57+
index = Math.floor( index / base );
58+
59+
}
60+
61+
return result;
62+
63+
}
64+
65+
// Generate 32 Halton offsets (base 2, 3) - same length as TRAA
66+
const _haltonOffsets = Array.from(
67+
{ length: 32 },
68+
( _, i ) => [ halton( i + 1, 2 ), halton( i + 1, 3 ) ]
69+
);
70+
71+
let renderer, scene, camera;
72+
let volumetricMesh, teapot, pointLight, spotLight;
73+
let renderPipeline;
74+
let temporalOffset, temporalRotation, shaderTime;
75+
let params;
76+
77+
init();
78+
79+
function createTexture3D() {
80+
81+
let i = 0;
82+
83+
const size = 128;
84+
const data = new Uint8Array( size * size * size );
85+
86+
const scale = 10;
87+
const perlin = new ImprovedNoise();
88+
89+
const repeatFactor = 5.0;
90+
91+
for ( let z = 0; z < size; z ++ ) {
92+
93+
for ( let y = 0; y < size; y ++ ) {
94+
95+
for ( let x = 0; x < size; x ++ ) {
96+
97+
const nx = ( x / size ) * repeatFactor;
98+
const ny = ( y / size ) * repeatFactor;
99+
const nz = ( z / size ) * repeatFactor;
100+
101+
const noiseValue = perlin.noise( nx * scale, ny * scale, nz * scale );
102+
103+
data[ i ] = ( 128 + 128 * noiseValue );
104+
105+
i ++;
106+
107+
}
108+
109+
}
110+
111+
}
112+
113+
const texture = new THREE.Data3DTexture( data, size, size, size );
114+
texture.format = THREE.RedFormat;
115+
texture.minFilter = THREE.LinearFilter;
116+
texture.magFilter = THREE.LinearFilter;
117+
texture.wrapS = THREE.RepeatWrapping;
118+
texture.wrapT = THREE.RepeatWrapping;
119+
texture.unpackAlignment = 1;
120+
texture.needsUpdate = true;
121+
122+
return texture;
123+
124+
}
125+
126+
function init() {
127+
128+
renderer = new THREE.WebGPURenderer();
129+
// renderer.setPixelRatio( window.devicePixelRatio ); // Disable DPR for performance
130+
renderer.setSize( window.innerWidth, window.innerHeight );
131+
renderer.setAnimationLoop( animate );
132+
renderer.toneMapping = THREE.NeutralToneMapping;
133+
renderer.toneMappingExposure = 2;
134+
renderer.shadowMap.enabled = true;
135+
renderer.inspector = new Inspector();
136+
document.body.appendChild( renderer.domElement );
137+
138+
scene = new THREE.Scene();
139+
140+
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 );
141+
camera.position.set( - 8, 1, - 6 );
142+
143+
const controls = new OrbitControls( camera, renderer.domElement );
144+
controls.maxDistance = 40;
145+
controls.minDistance = 2;
146+
147+
// Volumetric Fog Area
148+
149+
const noiseTexture3D = createTexture3D();
150+
151+
const smokeAmount = uniform( 2 );
152+
153+
const volumetricMaterial = new THREE.VolumeNodeMaterial();
154+
volumetricMaterial.steps = 12;
155+
volumetricMaterial.transparent = true;
156+
volumetricMaterial.blending = THREE.AdditiveBlending;
157+
158+
// Temporal dithering using Interleaved Gradient Noise (IGN) + Halton sequence
159+
temporalOffset = uniform( 0 );
160+
temporalRotation = uniform( 0 );
161+
shaderTime = uniform( 0 );
162+
163+
const temporalJitter2D = vec2( temporalOffset, temporalRotation );
164+
volumetricMaterial.offsetNode = fract( interleavedGradientNoise( screenCoordinate.add( temporalJitter2D.mul( 100 ) ) ).add( temporalOffset ) );
165+
volumetricMaterial.scatteringNode = Fn( ( { positionRay } ) => {
166+
167+
const timeScaled = vec3( shaderTime, 0, shaderTime.mul( .3 ) );
168+
169+
const sampleGrain = ( scale, timeScale = 1 ) => texture3D( noiseTexture3D, positionRay.add( timeScaled.mul( timeScale ) ).mul( scale ).mod( 1 ), 0 ).r.add( .5 );
170+
171+
let density = sampleGrain( .1 );
172+
density = density.mul( sampleGrain( .05, 1 ) );
173+
density = density.mul( sampleGrain( .02, 2 ) );
174+
175+
return smokeAmount.mix( 1, density );
176+
177+
} );
178+
179+
volumetricMesh = new THREE.Mesh( new THREE.BoxGeometry( 20, 10, 20 ), volumetricMaterial );
180+
volumetricMesh.receiveShadow = true;
181+
volumetricMesh.position.y = 2;
182+
scene.add( volumetricMesh );
183+
184+
// Objects
185+
186+
teapot = new THREE.Mesh( new TeapotGeometry( .8, 18 ), new THREE.MeshStandardMaterial( { color: 0xffffff, side: THREE.DoubleSide } ) );
187+
teapot.castShadow = true;
188+
scene.add( teapot );
189+
190+
const floor = new THREE.Mesh( new THREE.PlaneGeometry( 100, 100 ), new THREE.MeshStandardMaterial( { color: 0xffffff } ) );
191+
floor.rotation.x = - Math.PI / 2;
192+
floor.position.y = - 3;
193+
floor.receiveShadow = true;
194+
scene.add( floor );
195+
196+
// Lights
197+
198+
pointLight = new THREE.PointLight( 0xf9bb50, 3, 100 );
199+
pointLight.castShadow = true;
200+
pointLight.position.set( 0, 1.4, 0 );
201+
scene.add( pointLight );
202+
203+
spotLight = new THREE.SpotLight( 0xffffff, 100 );
204+
spotLight.position.set( 2.5, 5, 2.5 );
205+
spotLight.angle = Math.PI / 6;
206+
spotLight.penumbra = 1;
207+
spotLight.decay = 2;
208+
spotLight.distance = 0;
209+
spotLight.map = new THREE.TextureLoader().setPath( 'textures/' ).load( 'colors.png' );
210+
spotLight.castShadow = true;
211+
spotLight.shadow.intensity = .98;
212+
spotLight.shadow.mapSize.width = 1024;
213+
spotLight.shadow.mapSize.height = 1024;
214+
spotLight.shadow.camera.near = 1;
215+
spotLight.shadow.camera.far = 15;
216+
spotLight.shadow.focus = 1;
217+
scene.add( spotLight );
218+
219+
// Render Pipeline
220+
221+
renderPipeline = new THREE.RenderPipeline( renderer );
222+
223+
const volumetricIntensity = uniform( 1 );
224+
225+
// Pre-Pass: Opaque objects only (volumetric is transparent, excluded automatically)
226+
227+
const prePass = depthPass( scene, camera );
228+
prePass.name = 'Pre Pass';
229+
prePass.transparent = false;
230+
231+
const prePassDepth = prePass.getTextureNode( 'depth' ).toInspector( 'Depth', () => prePass.getLinearDepthNode() );
232+
233+
// Apply depth to volumetric material for proper occlusion
234+
235+
volumetricMaterial.depthNode = prePassDepth.sample( screenUV );
236+
237+
// Scene Pass: Full scene including volumetric with MRT
238+
239+
const scenePass = pass( scene, camera ).toInspector( 'Scene' );
240+
scenePass.name = 'Scene Pass';
241+
scenePass.setMRT( mrt( {
242+
output: output,
243+
velocity: velocity
244+
} ) );
245+
246+
const scenePassColor = scenePass.getTextureNode().toInspector( 'Output' );
247+
const scenePassVelocity = scenePass.getTextureNode( 'velocity' ).toInspector( 'Velocity' );
248+
249+
// TRAA with scene pass depth/velocity (includes volumetric)
250+
251+
const traaPass = traa( scenePassColor, prePassDepth, scenePassVelocity, camera );
252+
253+
renderPipeline.outputNode = traaPass;
254+
255+
// GUI
256+
257+
params = {
258+
traa: true,
259+
animated: true
260+
};
261+
262+
const gui = renderer.inspector.createParameters( 'Volumetric Lighting' );
263+
264+
gui.add( params, 'animated' );
265+
gui.add( params, 'traa' ).name( 'TRAA' ).onChange( updatePostProcessing );
266+
267+
const rayMarching = gui.addFolder( 'Ray Marching' );
268+
rayMarching.add( volumetricMaterial, 'steps', 2, 16, 1 ).name( 'step count' );
269+
270+
function updatePostProcessing() {
271+
272+
renderPipeline.outputNode = params.traa ? traaPass : scenePassColor;
273+
renderPipeline.needsUpdate = true;
274+
275+
}
276+
277+
const lighting = gui.addFolder( 'Lighting / Scene' );
278+
lighting.add( pointLight, 'intensity', 0, 6 ).name( 'light intensity' );
279+
lighting.add( spotLight, 'intensity', 0, 200 ).name( 'spot intensity' );
280+
lighting.add( volumetricIntensity, 'value', 0, 2 ).name( 'volumetric intensity' );
281+
lighting.add( smokeAmount, 'value', 0, 3 ).name( 'smoke amount' );
282+
283+
window.addEventListener( 'resize', onWindowResize );
284+
285+
}
286+
287+
function onWindowResize() {
288+
289+
camera.aspect = window.innerWidth / window.innerHeight;
290+
camera.updateProjectionMatrix();
291+
292+
renderer.setSize( window.innerWidth, window.innerHeight );
293+
294+
}
295+
296+
let frameCount = 0;
297+
let animationTime = 0;
298+
let lastTime = performance.now();
299+
300+
function animate() {
301+
302+
const currentTime = performance.now();
303+
const delta = ( currentTime - lastTime ) * 0.001;
304+
lastTime = currentTime;
305+
306+
// Update temporal uniforms - synced with TRAA's Halton sequence for optimal accumulation
307+
const haltonIndex = frameCount % 32;
308+
temporalOffset.value = _haltonOffsets[ haltonIndex ][ 0 ];
309+
temporalRotation.value = _haltonOffsets[ haltonIndex ][ 1 ];
310+
frameCount ++;
311+
312+
if ( params.animated ) {
313+
314+
animationTime += delta;
315+
316+
}
317+
318+
shaderTime.value = animationTime;
319+
320+
const scale = 2.4;
321+
322+
pointLight.position.x = Math.sin( animationTime * 0.7 ) * scale;
323+
pointLight.position.y = Math.cos( animationTime * 0.5 ) * scale;
324+
pointLight.position.z = Math.cos( animationTime * 0.3 ) * scale;
325+
326+
spotLight.position.x = Math.cos( animationTime * 0.3 ) * scale;
327+
spotLight.lookAt( 0, 0, 0 );
328+
329+
teapot.rotation.y = animationTime * 0.2;
330+
331+
renderPipeline.render();
332+
333+
}
334+
335+
</script>
336+
337+
</body>
338+
</html>

‎test/e2e/puppeteer.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ const exceptionList = [
3939
'webgpu_test_memory',
4040
'webgpu_texturegrad',
4141
'webgpu_tsl_vfx_flames',
42+
'webgpu_volume_lighting_traa',
4243

4344
// Need more time to render
4445
'css3d_mixed',

0 commit comments

Comments
 (0)