Skip to content

Improved webgpu reflection example #31409

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 7 commits into
base: dev
Choose a base branch
from
+68 −77
Draft

Improved webgpu reflection example #31409

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1310e4e
Improved webgpu reflection example.
mrdoob Jul 14, 2025
00855c6
Clean up.
mrdoob Jul 14, 2025
021c0ed
Added normalMap to floor.
mrdoob Jul 14, 2025
32aace7
Updated screenshot.
mrdoob Jul 14, 2025
2209746
Potential fix for code scanning alert no. 3582: Unused variable, impo…
mrdoob Jul 14, 2025
32febf1
Clean up.
mrdoob Jul 14, 2025
2046bfd
Update webgpu_reflection.html
Mugen87 Jul 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified examples/screenshots/webgpu_reflection.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
145 changes: 68 additions & 77 deletions examples/webgpu_reflection.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

<div id="info">
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgpu - reflection<br/>
Based on <a href="https://web.archive.org/web/20210101053442/http://oos.moxiecode.com/js_webgl/recursive_tree_cubes/" target="_blank" rel="noopener">Recursive Tree Cubes</a>
Based on <a href="https://oosmoxiecode.com/archive/js_webgl/recursive_tree_cubes/" target="_blank" rel="noopener">Recursive Tree Cubes</a>
by <a href="https://github.com/oosmoxiecode" target="_blank" rel="noopener">oosmoxiecode</a>
</div>

Expand All @@ -29,7 +29,7 @@

import * as THREE from 'three';

import { abs, color, div, float, Fn, instancedBufferAttribute, materialColor, min, normalWorldGeometry, pass, positionGeometry, positionLocal, reflector, screenUV, sin, sub, texture, time, uniform, uv, varyingProperty } from 'three/tsl';
import { abs, blendOverlay, color, float, Fn, instancedBufferAttribute, materialColor, normalWorldGeometry, pass, positionGeometry, positionLocal, reflector, screenUV, sin, sub, texture, time, uniform, uv, vec3 } from 'three/tsl';
import { gaussianBlur } from 'three/addons/tsl/display/GaussianBlurNode.js';

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
Expand All @@ -44,7 +44,6 @@

// below uniforms will be animated via TWEEN.js

const uniformLife = uniform( 0 );
const uniformEffector1 = uniform( - 0.2 );
const uniformEffector2 = uniform( - 0.2 );

Expand All @@ -56,19 +55,21 @@
camera.position.set( 4, 2, 4 );

scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0x0487e2, 7, 25 );
scene.backgroundNode = normalWorldGeometry.y.mix( color( 0x0487e2 ), color( 0x0066ff ) );
scene.fog = new THREE.Fog( 0x4195a4, 1, 25 );
scene.backgroundNode = normalWorldGeometry.y.mix( color( 0x4195a4 ), color( 0x0066ff ) );
camera.lookAt( 0, 1, 0 );

const sunLight = new THREE.DirectionalLight( 0xFFE499, 3 );
sunLight.position.set( 7, 3, 7 );
const sunLight = new THREE.DirectionalLight( 0xFFE499, 2 );
sunLight.position.set( 7, 5, 7 );
sunLight.castShadow = true;
sunLight.shadow.camera.zoom = 1.5;
sunLight.shadow.mapSize.set( 1024, 1024 );
scene.add( sunLight );

const waterAmbientLight = new THREE.HemisphereLight( 0x333366, 0x74ccf4, 3 );
const skyAmbientLight = new THREE.HemisphereLight( 0x74ccf4, 0, 1 );
const backLight = new THREE.DirectionalLight( 0x0487e2, 0.5 );
backLight.position.set( 7, - 5, 7 );
scene.add( backLight );

scene.add( sunLight );
scene.add( skyAmbientLight );
scene.add( waterAmbientLight );

// textures

Expand All @@ -82,10 +83,13 @@
const floorNormal = textureLoader.load( 'textures/floors/FloorsCheckerboard_S_Normal.jpg' );
floorNormal.wrapS = THREE.RepeatWrapping;
floorNormal.wrapT = THREE.RepeatWrapping;
floorNormal.repeat.set( 15, 15 );

// tree

const treeMesh = createTreeMesh();
treeMesh.castShadow = true;
treeMesh.receiveShadow = true;
scene.add( treeMesh );

// floor
Expand All @@ -100,9 +104,11 @@

const floorMaterial = new THREE.MeshPhongNodeMaterial();
floorMaterial.colorNode = texture( floorColor, floorUV ).add( reflection );
floorMaterial.normalMap = floorNormal;
floorMaterial.normalScale.set( 0.2, - 0.2 );

const floor = new THREE.Mesh( new THREE.BoxGeometry( 50, .001, 50 ), floorMaterial );
floor.position.set( 0, 0, 0 );
floor.receiveShadow = true;
scene.add( floor );

// renderer
Expand All @@ -111,6 +117,9 @@
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animate );
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
document.body.appendChild( renderer.domElement );

stats = new Stats();
Expand All @@ -137,18 +146,29 @@
const scenePassColorBlurred = gaussianBlur( scenePassColor );
scenePassColorBlurred.directionNode = scenePassDepth;

const vignette = screenUV.distance( .5 ).mul( 1.35 ).clamp().oneMinus();
const vignette = screenUV.distance( .5 ).mul( 1.25 ).clamp().oneMinus().sub( 0.2 );

postProcessing = new THREE.PostProcessing( renderer );
postProcessing.outputNode = scenePassColorBlurred.mul( vignette );
postProcessing.outputNode = blendOverlay( scenePassColorBlurred, vignette );

//
// tweens

window.addEventListener( 'resize', onWindowResize );
new TWEEN.Tween( uniformEffector1 )
.to( { value: 1.2 }, 3000 )
.delay( 800 )
.repeat( Infinity )
.easing( TWEEN.Easing.Sinusoidal.InOut )
.start();

new TWEEN.Tween( uniformEffector2 )
.to( { value: 1.2 }, 3000 )
.repeat( Infinity )
.easing( TWEEN.Easing.Sinusoidal.InOut )
.start();

//

startTweens();
window.addEventListener( 'resize', onWindowResize );

}

Expand All @@ -173,52 +193,12 @@

}

function startTweens() {

const lifeTween = new TWEEN.Tween( uniformLife )
.to( { value: 1 }, 5000 )
.easing( TWEEN.Easing.Bounce.Out );
lifeTween.start();

const effectTween = new TWEEN.Tween( uniformEffector1 )
.to( { value: 1.2 }, 2500 )
.delay( 3000 )
.easing( TWEEN.Easing.Sinusoidal.InOut )
.onComplete( function () {

secondaryTweens();

} );
effectTween.start();

}

function secondaryTweens() {

uniformEffector1.value = - 0.2;
uniformEffector2.value = - 0.2;

const effect2Tween = new TWEEN.Tween( uniformEffector2 )
.to( { value: 1.2 }, 3000 )
.repeat( Infinity )
.easing( TWEEN.Easing.Sinusoidal.InOut );
effect2Tween.start();

const effectTween = new TWEEN.Tween( uniformEffector1 )
.to( { value: 1.2 }, 3000 )
.delay( 800 )
.repeat( Infinity )
.easing( TWEEN.Easing.Sinusoidal.InOut );
effectTween.start();

}
function random () { return ( Math.random() - 0.5 ) * 2.0 };

function createTreeMesh() {

const maxSteps = 6;
const angleLeft = Math.PI / 180 * 30;
const angleRight = Math.PI / 180 * 40;
const lengthMult = 0.88;
const maxSteps = 5;
const lengthMult = 0.8;

const positions = [];
const normals = [];
Expand All @@ -234,6 +214,8 @@

function createTreePart( angle, x, y, z, length, count ) {

if ( Math.random() > ( maxSteps / count ) * 0.25 ) return;

if ( count < maxSteps ) {

const newLength = length * lengthMult;
Expand All @@ -246,9 +228,9 @@
if ( size > 25 ) size = 25;
if ( size < 10 ) size = 10;

size = size / 10;
size = size / 100;

const subSteps = 60;
const subSteps = 200;

// below loop generates the instanced data for a tree part

Expand All @@ -270,7 +252,7 @@

positions.push( position.x, position.y, position.z );

const scale = 0.25 * Math.random();
const scale = Math.random();

// normal

Expand All @@ -279,7 +261,7 @@

// color

color.setHSL( 0.55 + Math.random() * 0.05, 1.0, 0.7 + Math.random() * 0.3 );
color.setHSL( ( count / maxSteps ) * 0.5 + Math.random() * 0.05, 0.75, 0.6 + Math.random() * 0.1 );
colors.push( color.r, color.g, color.b );

// to save vertex buffers, we store the size, time and seed in a single attribute
Expand All @@ -292,8 +274,12 @@

}

createTreePart( angle - angleRight, newX, newY, newZ, newLength, count + 1 );
createTreePart( angle + angleLeft, newX, newY, newZ, newLength, count + 1 );
createTreePart( angle + random(), newX, newY, newZ, newLength + random(), count + 1 );
createTreePart( angle + random(), newX, newY, newZ, newLength + random(), count + 1 );
createTreePart( angle + random(), newX, newY, newZ, newLength + random(), count + 1 );
createTreePart( angle + random(), newX, newY, newZ, newLength + random(), count + 1 );
createTreePart( angle + random(), newX, newY, newZ, newLength + random(), count + 1 );
createTreePart( angle + random(), newX, newY, newZ, newLength + random(), count + 1 );

}

Expand Down Expand Up @@ -321,8 +307,6 @@

// TSL

const vVisbility = varyingProperty( 'float' );

const instancePosition = instancedBufferAttribute( attributePosition );
const instanceNormal = instancedBufferAttribute( attributeNormal );
const instanceColor = instancedBufferAttribute( attributeColor );
Expand All @@ -342,18 +326,13 @@
const dif2 = abs( instanceTime.sub( uniformEffector2 ) ).toConst();
effect = dif2.lessThanEqual( 0.15 ).select( sub( 0.15, dif2 ).mul( sub( 1.7, instanceTime ).mul( 10 ) ), effect );

// life (controls the visibility and initial scale of the cubes)

const scale = uniformLife.greaterThan( instanceTime ).select( min( 1, div( uniformLife.sub( instanceTime ), 0 ) ) ).oneMinus();
vVisbility.assign( uniformLife.greaterThan( instanceTime ).select( 1, 0 ) );

// accumulate different vertex animations

let animated = positionLocal.add( instancePosition ).toVar();
const direction = positionGeometry.normalize().toConst();

animated = animated.add( direction.mul( effect.add( instanceSize ) ) );
animated = animated.sub( direction.mul( scale ) );
animated = animated.sub( direction.mul( effect ) );
animated = animated.add( instanceNormal.mul( effect.mul( 1 ) ) );
animated = animated.add( instanceNormal.mul( abs( sin( time.add( instanceSeed.mul( 2 ) ) ).mul( 1.5 ) ) ) );

Expand All @@ -363,12 +342,24 @@

material.colorNode = Fn( () => {

vVisbility.equal( 0 ).discard();

return materialColor.mul( instanceColor );

} )();

material.emissiveNode = Fn( () => {

const instanceTime = instanceData.y;

const dif1 = abs( instanceTime.sub( uniformEffector1 ) ).toConst();
const effect1 = dif1.lessThanEqual( 0.15 ).select( sub( 0.15, dif1 ).mul( sub( 1.7, instanceTime ).mul( 10 ) ), float( 0 ) );

const dif2 = abs( instanceTime.sub( uniformEffector2 ) ).toConst();
const effect2 = dif2.lessThanEqual( 0.15 ).select( sub( 0.15, dif2 ).mul( sub( 1.7, instanceTime ).mul( 10 ) ), effect1 );

return vec3( effect1, 0, effect2 ).mul( instanceColor );

} )();

return mesh;

}
Expand Down