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

Merged
merged 10 commits into from
Jul 23, 2025
Merged

Improved webgpu reflection example #31409

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 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
dc72980
Update webgpu_reflection.html
Mugen87 Jul 22, 2025
b19e320
Merge branch 'dev' into examples
Mugen87 Jul 22, 2025
238cfdd
Update webgpu_reflection.html
Mugen87 Jul 22, 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.
160 changes: 80 additions & 80 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,48 +44,55 @@

// below uniforms will be animated via TWEEN.js

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

init();

function init() {
async function init() {

camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.25, 30 );
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 waterAmbientLight = new THREE.HemisphereLight( 0x333366, 0x74ccf4, 3 );
const skyAmbientLight = new THREE.HemisphereLight( 0x74ccf4, 0, 1 );

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 );
Copy link
Collaborator

@Mugen87 Mugen87 Jul 19, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The light shadow needs a small bias since there are self-shadowing artifacts all over the boxes.

Copy link
Collaborator

@Mugen87 Mugen87 Jul 22, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed with the latest commits. Removing the artifacts made the boxes look a bit pale so I've added a texture to give them more detail. Hope this looks good.

sunLight.shadow.bias = - 0.0001;
scene.add( sunLight );
scene.add( skyAmbientLight );
scene.add( waterAmbientLight );

const backLight = new THREE.DirectionalLight( 0x0487e2, 0.5 );
backLight.position.set( 7, - 5, 7 );
scene.add( backLight );

// textures

const textureLoader = new THREE.TextureLoader();

const floorColor = textureLoader.load( 'textures/floors/FloorsCheckerboard_S_Diffuse.jpg' );
const floorColor = await textureLoader.loadAsync( 'textures/floors/FloorsCheckerboard_S_Diffuse.jpg' );
floorColor.wrapS = THREE.RepeatWrapping;
floorColor.wrapT = THREE.RepeatWrapping;
floorColor.colorSpace = THREE.SRGBColorSpace;

const floorNormal = textureLoader.load( 'textures/floors/FloorsCheckerboard_S_Normal.jpg' );
const floorNormal = await textureLoader.loadAsync( 'textures/floors/FloorsCheckerboard_S_Normal.jpg' );
floorNormal.wrapS = THREE.RepeatWrapping;
floorNormal.wrapT = THREE.RepeatWrapping;
floorNormal.repeat.set( 15, 15 );

const boxMap = await textureLoader.loadAsync( 'textures/edge3.jpg' );
boxMap.colorSpace = THREE.SRGBColorSpace;

// tree

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

// floor
Expand All @@ -100,9 +107,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 +120,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 +149,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 +196,18 @@

}

function startTweens() {

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

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

secondaryTweens();

} );
effectTween.start();
return ( Math.random() - 0.5 ) * 2.0;

}

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 createTreeMesh() {
function createTreeMesh( boxMap ) {

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 +223,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 +237,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 +261,7 @@

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

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

// normal

Expand All @@ -279,7 +270,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 +283,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 All @@ -306,7 +301,7 @@
createTreePart( angle, 0, 0, 0, 16, 0 );

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardNodeMaterial();
const material = new THREE.MeshStandardNodeMaterial( { map: boxMap } );
const mesh = new THREE.Mesh( geometry, material );
mesh.scale.setScalar( 0.05 );
mesh.count = instanceCount;
Expand All @@ -321,13 +316,11 @@

// TSL

const vVisibility = varyingProperty( 'float' );

const instancePosition = instancedBufferAttribute( attributePosition );
const instanceNormal = instancedBufferAttribute( attributeNormal );
const instanceColor = instancedBufferAttribute( attributeColor );
const instanceData = instancedBufferAttribute( attributeData );

material.positionNode = Fn( () => {

const instanceSize = instanceData.x;
Expand All @@ -342,18 +335,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();
vVisibility.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 +351,24 @@

material.colorNode = Fn( () => {

vVisibility.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
Loading