Improved webgpu reflection example

[mrdoob]

Related issue: #31372

Description

Tried to make webgpu_reflection (current) simpler and prettier.

Screen.Recording.2025-07-14.at.4.47.41.PM_.mov

[mrdoob]

Still far from ChatGPT's suggestion 😅

[Mugen87]

What I liked about the original code is that it demonstrates how to animate objects from a zero scale to the intended value since it gives the impression that things grow. This can be useful with all kinds of objects. Not just vegetation but also stuff like pillars could be animated like that.

I'm okay with all updates but I would prefer to keep the initial animation and let the tree "grow".

[mrdoob]

What I liked about the original code is that it demonstrates how to animate objects from a zero scale to something the intended value since it gives the impresses that things grow. This can be useful with all kinds of objects. Not just vegetation but also stuff like pillars could be animated like that.

I removed that when I added the shadow and I noticed that the objects in the shadow didn't animate.

Seemed like a foot-gun.

[Mugen87]

I see. In this case, I'm okay with the simplification. Maybe I can come up with an approach for a different or new example that works with shadows as well...

[oosmoxiecode]

Nice! 😸
Still have the original one up here: https://oosmoxiecode.com/archive/js_webgl/recursive_tree_cubes/
Could link to that one instead of the web archive if you like.

[Mugen87]

Could link to that one instead of the web archive if you like.

Done!

BTW. I'm a huge admirer of your WebGL demos! I was so much fun to port recursive_tree_cubes to our new TSL approach 😊 .

[mrdoob]

@Mugen87 As a reflection example I am actually having a hard time to understand what's going on...

Could you explain these lines?

three.js/examples/webgpu_reflection.html

Lines 95 to 112 in 2046bfd

	// floor
	const floorUV = uv().mul( 15 );
	const floorNormalOffset = texture( floorNormal, floorUV ).xy.mul( 2 ).sub( 1 ).mul( .02 );
	const reflection = reflector( { resolution: 0.5 } ); // 0.5 is half of the rendering view
	reflection.target.rotateX( - Math.PI / 2 );
	reflection.uvNode = reflection.uvNode.add( floorNormalOffset );
	scene.add( reflection.target );
	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.receiveShadow = true;
	scene.add( floor );

[Mugen87]

const reflection = reflector( { resolution: 0.5 } ); // 0.5 is half of the rendering view 
 reflection.target.rotateX( - Math.PI / 2 ); 

These lines create the reflector and align it with the floor. Notice that the reflector itself is a node object and not a 3D object like in earlier days. That allows to modify the effect with nodes and also use the reflection in subsequent node setups.

 reflection.uvNode = reflection.uvNode.add( floorNormalOffset ); 

If you remove this line, you end up with a perfect mirror that is mixed with the floor's diffuse texture. However, since the example models the reflection of reflective tiles, a mirror-like reflection would look strange. The above line adds a distortion similar to water effects by bending the uvs with a normal offset. Since the normal offset is derived from floorNormal, the resulting reflections should look convincing.

 const floorUV = uv().mul( 15 ); 
 const floorNormalOffset = texture( floorNormal, floorUV ).xy.mul( 2 ).sub( 1 ).mul( .02 ); 

The first line scales the default uvs, then we sample the floor's normal map, transfer the sampled color into the normal range and scale it down otherwise the scattering is way too strong.

[Mugen87]

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

[Mugen87]

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.

[Mugen87]

I'll go ahead and merge so we have this PR ready for the next release 🙌 . I'll update the screenshot after the merge.

[mrdoob]

I'm going to continue working on this one...

The shadow seems to be another foot gun:

Tried a similar setup in the editor using Garrett's Pathtracer:

[mrdoob]

Found a hacky way to solve it...

Screen.Recording.2025-08-01.at.2.14.03.PM.mov

Old:

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

New:

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

Compared to the rest of the code is not that hacky anyway... 😅

[mrdoob]

@Mugen87

const reflection = reflector( { resolution: 0.5 } ); // 0.5 is half of the rendering view 
 reflection.target.rotateX( - Math.PI / 2 ); 

These lines create the reflector and align it with the floor. Notice that the reflector itself is a node object and not a 3D object like in earlier days. That allows to modify the effect with nodes and also use the reflection in subsequent node setups.

 reflection.uvNode = reflection.uvNode.add( floorNormalOffset ); 

If you remove this line, you end up with a perfect mirror that is mixed with the floor's diffuse texture. However, since the example models the reflection of reflective tiles, a mirror-like reflection would look strange. The above line adds a distortion similar to water effects by bending the uvs with a normal offset. Since the normal offset is derived from floorNormal, the resulting reflections should look convincing.

 const floorUV = uv().mul( 15 ); 
 const floorNormalOffset = texture( floorNormal, floorUV ).xy.mul( 2 ).sub( 1 ).mul( .02 ); 

The first line scales the default uvs, then we sample the floor's normal map, transfer the sampled color into the normal range and scale it down otherwise the scattering is way too strong.

What I'm finding confusing is that floorNormal.repeat doesn't seem to be reflected in TSL.

We have this:

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

But then in TSL we do this again:

const floorUV = uv().mul( 15 );
const floorNormalOffset = texture( floorNormal, floorUV ).xy.mul( 2 ).sub( 1 ).mul( .02 );

/cc @sunag

[sunag]

It would be redundant in the API to use two UV configurations in the same input, to use the native configurations, just do not add a UV as a second parameter.

For example:

// removing the floorUV will use the native uv settings / repeat + scale + channel + offset + center, etc
// you can have a more optimized uv if you want just by replacing it with uv()

const floorNormalOffset = texture( floorNormal ).xy.mul( 2 ).sub( 1 ).mul( .02 );