From 63866133e286039fb2b38a93799285e1bc01ed6c Mon Sep 17 00:00:00 2001 From: sunag Date: Wed, 1 Jan 2025 17:36:34 -0300 Subject: [PATCH 1/5] WaterMesh: Improve lighting support --- examples/jsm/objects/WaterMesh.js | 37 ++++++++++++++++--------------- 1 file changed, 19 insertions(+), 18 deletions(-) diff --git a/examples/jsm/objects/WaterMesh.js b/examples/jsm/objects/WaterMesh.js index 267e9975db0c1f..58384242e72668 100644 --- a/examples/jsm/objects/WaterMesh.js +++ b/examples/jsm/objects/WaterMesh.js @@ -2,10 +2,10 @@ import { Color, Mesh, Vector3, - NodeMaterial + MeshLambertNodeMaterial } from 'three/webgpu'; -import { Fn, add, cameraPosition, div, normalize, positionWorld, sub, time, texture, vec2, vec3, vec4, max, dot, reflect, pow, length, float, uniform, reflector, mul, mix } from 'three/tsl'; +import { Fn, add, cameraPosition, div, normalize, positionWorld, sub, time, texture, vec2, vec3, vec4, max, dot, reflect, pow, length, float, uniform, reflector, mul, mix, diffuseColor } from 'three/tsl'; /** * Work based on : @@ -18,7 +18,7 @@ class WaterMesh extends Mesh { constructor( geometry, options ) { - const material = new NodeMaterial(); + const material = new MeshLambertNodeMaterial(); super( geometry, material ); @@ -58,25 +58,28 @@ class WaterMesh extends Mesh { } ); - const fragmentNode = Fn( () => { + const noise = getNoise( positionWorld.xz.mul( this.size ) ); + const surfaceNormal = normalize( noise.xzy.mul( 1.5, 1.0, 1.5 ) ); - const noise = getNoise( positionWorld.xz.mul( this.size ) ); - const surfaceNormal = normalize( noise.xzy.mul( 1.5, 1.0, 1.5 ) ); + const worldToEye = cameraPosition.sub( positionWorld ); + const eyeDirection = normalize( worldToEye ); - const diffuseLight = vec3( 0 ).toVar(); - const specularLight = vec3( 0 ).toVar(); + const reflection = normalize( reflect( this.sunDirection.negate(), surfaceNormal ) ); + const direction = max( 0.0, dot( eyeDirection, reflection ) ); + const specularLight = pow( direction, 100 ).mul( this.sunColor ).mul( 2.0 ); + const diffuseLight = max( dot( this.sunDirection, surfaceNormal ), 0.0 ).mul( this.sunColor ).mul( 0.5 ); - const worldToEye = cameraPosition.sub( positionWorld ); - const eyeDirection = normalize( worldToEye ); + const distance = length( worldToEye ); - const reflection = normalize( reflect( this.sunDirection.negate(), surfaceNormal ) ); - const direction = max( 0.0, dot( eyeDirection, reflection ) ); - specularLight.addAssign( pow( direction, 100 ).mul( this.sunColor ).mul( 2.0 ) ); - diffuseLight.addAssign( max( dot( this.sunDirection, surfaceNormal ), 0.0 ).mul( this.sunColor ).mul( 0.5 ) ); + const distortion = surfaceNormal.xz.mul( float( 0.001 ).add( float( 1.0 ).div( distance ) ) ).mul( this.distortionScale ); - const distance = length( worldToEye ); + // - const distortion = surfaceNormal.xz.mul( float( 0.001 ).add( float( 1.0 ).div( distance ) ) ).mul( this.distortionScale ); + material.shadowPositionNode = positionWorld.add( distortion ); + + material.setupOutgoingLight = () => diffuseColor.rgb; // backwards compatibility + + material.colorNode = Fn( () => { const mirrorSampler = reflector(); mirrorSampler.uvNode = mirrorSampler.uvNode.add( distortion ); @@ -94,8 +97,6 @@ class WaterMesh extends Mesh { } )(); - material.fragmentNode = fragmentNode; - } } From b131c6d99f52c5be7016ecb57323f74fb85b0373 Mon Sep 17 00:00:00 2001 From: sunag Date: Wed, 1 Jan 2025 18:43:51 -0300 Subject: [PATCH 2/5] Update WaterMesh.js --- examples/jsm/objects/WaterMesh.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/examples/jsm/objects/WaterMesh.js b/examples/jsm/objects/WaterMesh.js index 58384242e72668..8708d4507532f6 100644 --- a/examples/jsm/objects/WaterMesh.js +++ b/examples/jsm/objects/WaterMesh.js @@ -75,6 +75,8 @@ class WaterMesh extends Mesh { // + material.transparent = true; + material.shadowPositionNode = positionWorld.add( distortion ); material.setupOutgoingLight = () => diffuseColor.rgb; // backwards compatibility From f4bcf8e2241ab6621e2cfbc74dfb919289a98e80 Mon Sep 17 00:00:00 2001 From: sunag Date: Wed, 1 Jan 2025 19:12:04 -0300 Subject: [PATCH 3/5] Update WaterMesh.js --- examples/jsm/objects/WaterMesh.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/examples/jsm/objects/WaterMesh.js b/examples/jsm/objects/WaterMesh.js index 8708d4507532f6..18e6df7dbe7873 100644 --- a/examples/jsm/objects/WaterMesh.js +++ b/examples/jsm/objects/WaterMesh.js @@ -77,6 +77,8 @@ class WaterMesh extends Mesh { material.transparent = true; + material.opacityNode = this.alpha; + material.shadowPositionNode = positionWorld.add( distortion ); material.setupOutgoingLight = () => diffuseColor.rgb; // backwards compatibility @@ -95,7 +97,7 @@ class WaterMesh extends Mesh { const scatter = max( 0.0, dot( surfaceNormal, eyeDirection ) ).mul( this.waterColor ); const albedo = mix( this.sunColor.mul( diffuseLight ).mul( 0.3 ).add( scatter ), mirrorSampler.rgb.mul( specularLight ).add( mirrorSampler.rgb.mul( 0.9 ) ).add( vec3( 0.1 ) ), reflectance ); - return vec4( albedo, this.alpha ); + return albedo; } )(); From 1646493d5889d976a98cd45dadf57a253aa5cc91 Mon Sep 17 00:00:00 2001 From: sunag Date: Wed, 1 Jan 2025 19:13:07 -0300 Subject: [PATCH 4/5] Update WaterMesh.js --- examples/jsm/objects/WaterMesh.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/jsm/objects/WaterMesh.js b/examples/jsm/objects/WaterMesh.js index 18e6df7dbe7873..5acfc5618f936c 100644 --- a/examples/jsm/objects/WaterMesh.js +++ b/examples/jsm/objects/WaterMesh.js @@ -26,7 +26,7 @@ class WaterMesh extends Mesh { this.resolution = options.resolution !== undefined ? options.resolution : 0.5; - // uniforms + // Uniforms this.waterNormals = texture( options.waterNormals ); this.alpha = uniform( options.alpha !== undefined ? options.alpha : 1.0 ); @@ -73,7 +73,7 @@ class WaterMesh extends Mesh { const distortion = surfaceNormal.xz.mul( float( 0.001 ).add( float( 1.0 ).div( distance ) ) ).mul( this.distortionScale ); - // + // Material material.transparent = true; From 25298c529a0cc1dd8e074b303b909558aefd8220 Mon Sep 17 00:00:00 2001 From: sunag Date: Wed, 1 Jan 2025 19:15:20 -0300 Subject: [PATCH 5/5] cleanup --- examples/jsm/objects/WaterMesh.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/jsm/objects/WaterMesh.js b/examples/jsm/objects/WaterMesh.js index 5acfc5618f936c..6d9e643745acb5 100644 --- a/examples/jsm/objects/WaterMesh.js +++ b/examples/jsm/objects/WaterMesh.js @@ -5,7 +5,7 @@ import { MeshLambertNodeMaterial } from 'three/webgpu'; -import { Fn, add, cameraPosition, div, normalize, positionWorld, sub, time, texture, vec2, vec3, vec4, max, dot, reflect, pow, length, float, uniform, reflector, mul, mix, diffuseColor } from 'three/tsl'; +import { Fn, add, cameraPosition, div, normalize, positionWorld, sub, time, texture, vec2, vec3, max, dot, reflect, pow, length, float, uniform, reflector, mul, mix, diffuseColor } from 'three/tsl'; /** * Work based on :