WebGPUNodes: Some revisions (#24662)

* fix webgpu warnings

* improve example a bit

* fix warning and update shader approch

* fix mesh lights color

examples/jsm/renderers/webgpu/nodes/WebGPUNodeBuilder.js

@@ -57,26 +57,28 @@ const wgslTypeLib = {
 const wgslMethods = {
 	dFdx: 'dpdx',
 	dFdy: 'dpdy',
+	mod: 'threejs_mod',
+	lessThanEqual: 'threejs_lessThanEqual',
 	inversesqrt: 'inverseSqrt'
 };
 
 const wgslPolyfill = {
 	lessThanEqual: new CodeNode( `
-fn lessThanEqual( a : vec3<f32>, b : vec3<f32> ) -> vec3<bool> {
+fn threejs_lessThanEqual( a : vec3<f32>, b : vec3<f32> ) -> vec3<bool> {
 
 	return vec3<bool>( a.x <= b.x, a.y <= b.y, a.z <= b.z );
 
 }
 ` ),
 	mod: new CodeNode( `
-fn mod( x : f32, y : f32 ) -> f32 {
+fn threejs_mod( x : f32, y : f32 ) -> f32 {
 
 	return x - y * floor( x / y );
 
 }
 ` ),
 	repeatWrapping: new CodeNode( `
-fn repeatWrapping( uv : vec2<f32>, dimension : vec2<i32> ) -> vec2<i32> {
+fn threejs_repeatWrapping( uv : vec2<f32>, dimension : vec2<i32> ) -> vec2<i32> {
 
 	let uvScaled = vec2<i32>( uv * vec2<f32>( dimension ) );
 
@@ -148,7 +150,7 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 			const dimension = `textureDimensions( ${textureProperty}, 0 )`;
 
-			return `textureLoad( ${textureProperty}, repeatWrapping( ${uvSnippet}, ${dimension} ), 0 )`;
+			return `textureLoad( ${textureProperty}, threejs_repeatWrapping( ${uvSnippet}, ${dimension} ), 0 )`;
 
 		}
 
@@ -166,7 +168,7 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 			const dimension = `textureDimensions( ${textureProperty}, 0 )`;
 
-			return `textureLoad( ${textureProperty}, repeatWrapping( ${uvSnippet}, ${dimension} ), i32( ${biasSnippet} ) )`;
+			return `textureLoad( ${textureProperty}, threejs_repeatWrapping( ${uvSnippet}, ${dimension} ), i32( ${biasSnippet} ) )`;
 
 		}
 

examples/webgpu_instance_uniform.html

@@ -27,8 +27,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import * as Nodes from 'three/nodes';
-			import { add, mul } from 'three/nodes';
+			import { MeshStandardNodeMaterial, NodeUpdateType, Node, uniform, attribute, cubeTexture, add, mul } from 'three/nodes';
 
 			import WebGPU from 'three/addons/capabilities/WebGPU.js';
 			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
@@ -39,15 +38,15 @@
 
 			import Stats from 'three/addons/libs/stats.module.js';
 
-			class InstanceUniformNode extends Nodes.Node {
+			class InstanceUniformNode extends Node {
 
 				constructor() {
 
 					super( 'vec3' );
 
-					this.updateType = Nodes.NodeUpdateType.Object;
+					this.updateType = NodeUpdateType.Object;
 
-					this.uniformNode = new Nodes.UniformNode( new THREE.Color() );
+					this.uniformNode = uniform( new THREE.Color() );
 
 				}
 
@@ -99,7 +98,7 @@
 				// Grid
 
 				const helper = new THREE.GridHelper( 1000, 40, 0x303030, 0x303030 );
-				helper.material.colorNode = new Nodes.AttributeNode( 'color' );
+				helper.material.colorNode = attribute( 'color' );
 				helper.position.y = - 75;
 				scene.add( helper );
 
@@ -113,14 +112,14 @@
 					path + 'pz' + format, path + 'nz' + format
 				];
 
-				const cubeTexture = new THREE.CubeTextureLoader().load( urls );
+				const cTexture = new THREE.CubeTextureLoader().load( urls );
 
 				// Materials
 
 				const instanceUniform = new InstanceUniformNode();
-				const cubeTextureNode = new Nodes.CubeTextureNode( cubeTexture );
+				const cubeTextureNode = cubeTexture( cTexture );
 
-				const material = new THREE.MeshStandardMaterial();
+				const material = new MeshStandardNodeMaterial();
 				material.colorNode = add( instanceUniform, cubeTextureNode );
 				material.emissiveNode = mul( instanceUniform, cubeTextureNode );
 

examples/webgpu_lights_custom.html

@@ -57,19 +57,28 @@
 
 				// lights
 
-				const sphere = new THREE.SphereGeometry( 0.02, 16, 8 );
+				const sphereGeometry = new THREE.SphereGeometry( 0.02, 16, 8 );
 
-				light1 = new THREE.PointLight( 0xffaa00, 2, 1 );
-				light1.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) ) );
-				scene.add( light1 );
+				const addLight = ( hexColor, intensity = 2, distance = 1 ) => {
 
-				light2 = new THREE.PointLight( 0x0040ff, 2, 1 );
-				light2.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0x0040ff } ) ) );
-				scene.add( light2 );
+					const material = new Nodes.MeshStandardNodeMaterial();
+					material.colorNode = new Nodes.ConstNode( new THREE.Color( hexColor ) );
+					material.lightsNode = new Nodes.LightsNode(); // ignore scene lights
 
-				light3 = new THREE.PointLight( 0x80ff80, 2, 1 );
-				light3.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0x80ff80 } ) ) );
-				scene.add( light3 );
+					const mesh = new THREE.Mesh( sphereGeometry, material );
+
+					const light = new THREE.PointLight( hexColor, intensity, distance );
+					light.add( mesh );
+
+					scene.add( light );
+
+					return light;
+
+				};
+
+				light1 = addLight( 0xffaa00 );
+				light2 = addLight( 0x0040ff );
+				light3 = addLight( 0x80ff80 );
 
 				//light nodes ( selective lights )
 

examples/webgpu_lights_selective.html

@@ -64,7 +64,7 @@
 				scene = new THREE.Scene();
 				scene.fogNode = new Nodes.FogRangeNode( color( 0xFF00FF ), float( 30 ), float( 300 ) );
 
-				const sphere = new THREE.SphereGeometry( 0.5, 16, 8 );
+				const sphereGeometry = new THREE.SphereGeometry( 0.5, 16, 8 );
 
 				//textures
 
@@ -80,21 +80,27 @@
 
 				//lights
 
-				light1 = new THREE.PointLight( 0xff0040, 2, 1000 );
-				light1.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xff0040 } ) ) );
-				scene.add( light1 );
+				const addLight = ( hexColor, intensity = 2, distance = 1000 ) => {
 
-				light2 = new THREE.PointLight( 0x0040ff, 2, 1000 );
-				light2.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0x0040ff } ) ) );
-				scene.add( light2 );
+					const material = new Nodes.MeshStandardNodeMaterial();
+					material.colorNode = color( hexColor );
+					material.lightsNode = new Nodes.LightsNode(); // ignore scene lights
 
-				light3 = new THREE.PointLight( 0x80ff80, 2, 1000 );
-				light3.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0x80ff80 } ) ) );
-				scene.add( light3 );
+					const mesh = new THREE.Mesh( sphereGeometry, material );
 
-				light4 = new THREE.PointLight( 0xffaa00, 2, 1000 );
-				light4.add( new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) ) );
-				scene.add( light4 );
+					const light = new THREE.PointLight( hexColor, intensity, distance );
+					light.add( mesh );
+
+					scene.add( light );
+
+					return light;
+
+				};
+
+				light1 = addLight( 0xff0040 );
+				light2 = addLight( 0x0040ff );
+				light3 = addLight( 0x80ff80 );
+				light4 = addLight( 0xffaa00 );
 
 				//light nodes ( selective lights )
 

examples/webgpu_skinning_instancing.html

@@ -86,6 +86,8 @@
 
 						if ( child.isMesh ) {
 
+							const oscNode = oscSine( timerLocal( .1 ) );
+
 							// random colors between instances from 0x000000 to 0xFFFFFF
 							const randomColors = range( new THREE.Color( 0x000000 ), new THREE.Color( 0xFFFFFF ) );
 
@@ -94,8 +96,8 @@
 
 							child.material = new Nodes.MeshStandardNodeMaterial();
 							child.material.roughness = .1;
-							child.material.metalnessNode = randomMetalness;
-							child.material.colorNode = mix( color( 0xFFFFFF ), randomColors, oscSine( timerLocal( .1 ) ) );
+							child.material.metalnessNode = mix( 0.0, randomMetalness, oscNode );
+							child.material.colorNode = mix( color( 0xFFFFFF ), randomColors, oscNode );
 
 							child.isInstancedMesh = true;
 							child.instanceMatrix = new THREE.InstancedBufferAttribute( new Float32Array( instanceCount * 16 ), 16 );