draft

examples/jsm/nodes/core/UniformNode.js

@@ -10,6 +10,8 @@ class UniformNode extends InputNode {
 
 		this.isUniformNode = true;
 
+		this.group = 'TEST';
+
 	}
 
 	getUniformHash( builder ) {

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

@@ -270,7 +270,7 @@ class WGSLNodeBuilder extends NodeBuilder {
 
 			} else {
 
-				return `NodeUniforms.${name}`;
+				return node.node.group + '.' + name;
 
 			}
 
@@ -345,14 +345,17 @@ class WGSLNodeBuilder extends NodeBuilder {
 
 			} else {
 
-				let uniformsGroup = this.uniformsGroup[ shaderStage ];
+				const uniformsStage = this.uniforms[ shaderStage ] || ( this.uniforms[ shaderStage ] = {} );
+				const uniformsGroupName = node.group;
+
+				let uniformsGroup = uniformsStage[ uniformsGroupName ];
 
 				if ( uniformsGroup === undefined ) {
 
-					uniformsGroup = new UniformsGroup( 'nodeUniforms' );
+					uniformsGroup = new UniformsGroup( uniformsGroupName );
 					uniformsGroup.setVisibility( gpuShaderStageLib[ shaderStage ] );
 
-					this.uniformsGroup[ shaderStage ] = uniformsGroup;
+					uniformsStage[ uniformsGroupName ] = uniformsGroup;
 
 					bindings.push( uniformsGroup );
 
@@ -653,7 +656,9 @@ ${ flowData.code }
 
 		const bindingSnippets = [];
 		const bufferSnippets = [];
-		const groupSnippets = [];
+		const structSnippets = [];
+
+		const uniformGroups = {};
 
 		let index = this.bindingsOffset[ shaderStage ];
 
@@ -720,6 +725,9 @@ ${ flowData.code }
 			} else {
 
 				const vectorType = this.getType( this.getVectorType( uniform.type ) );
+				const groupName = uniform.node.group;
+
+				const groupSnippets = uniformGroups[ groupName ] || ( uniformGroups[ groupName ] = [] );
 
 				if ( Array.isArray( uniform.value ) === true ) {
 
@@ -737,15 +745,18 @@ ${ flowData.code }
 
 		}
 
-		let code = bindingSnippets.join( '\n' );
-		code += bufferSnippets.join( '\n' );
+		for ( const group in uniformGroups ) {
 
-		if ( groupSnippets.length > 0 ) {
+			const groupSnippets = uniformGroups[ group ];
 
-			code += this._getWGSLStructBinding( 'NodeUniforms', groupSnippets.join( ',\n' ), 'uniform', index ++ );
+			structSnippets.push( this._getWGSLStructBinding( group, groupSnippets.join( ',\n' ), 'uniform', index ++ ) );
 
 		}
 
+		let code = bindingSnippets.join( '\n' );
+		code += bufferSnippets.join( '\n' );
+		code += structSnippets.join( '\n' );
+
 		return code;
 
 	}
@@ -815,6 +826,7 @@ ${ flowData.code }
 
 			this.vertexShader = this._getWGSLVertexCode( shadersData.vertex );
 			this.fragmentShader = this._getWGSLFragmentCode( shadersData.fragment );
+			console.log( this.fragmentShader );
 
 		} else {
 

examples/jsm/renderers/webgpu/utils/WebGPUBindingUtils.js

@@ -120,7 +120,7 @@ class WebGPUBindingUtils {
 	}
 
 	updateBinding( binding ) {
-
+console.log( binding );
 		const backend = this.backend;
 		const device = backend.device;
 

examples/webgpu_sandbox.html

@@ -24,7 +24,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { timerLocal, vec2, uv, texture, mix, checker, normalLocal, positionLocal, color, oscSine, attribute, MeshBasicNodeMaterial, PointsNodeMaterial, LineBasicNodeMaterial } from 'three/nodes';
+			import { timerLocal, vec2, uv, texture, mix, checker, uniform, normalLocal, positionLocal, color, oscSine, attribute, MeshBasicNodeMaterial, PointsNodeMaterial, LineBasicNodeMaterial } from 'three/nodes';
 
 			import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';
 
@@ -91,7 +91,13 @@
 
 				const textureNode = texture( uvTexture, animateUV );
 
-				materialBox.colorNode = mix( textureNode, checker( animateUV ), 0.5 );
+				//materialBox.colorNode = mix( textureNode, checker( animateUV ), 0.5 );
+				const a = uniform( new THREE.Color( 0x066FF ) );
+				const b = uniform( new THREE.Color( 0x229900 ) );
+				a.group = 'FRAME';
+				b.group = 'GROUP';
+
+				materialBox.colorNode = a.add( b );
 
 				// test uv 2
 				//geometryBox.setAttribute( 'uv1', geometryBox.getAttribute( 'uv' ) );
@@ -115,7 +121,7 @@
 
 				const sphere = new THREE.Mesh( geometrySphere, materialSphere );
 				sphere.position.set( - 2, - 1, 0 );
-				scene.add( sphere );
+				//scene.add( sphere );
 
 				// data texture
 
@@ -126,7 +132,7 @@
 
 				const plane = new THREE.Mesh( geometryPlane, materialPlane );
 				plane.position.set( 0, - 1, 0 );
-				scene.add( plane );
+				//scene.add( plane );
 
 				// compressed texture
 
@@ -139,7 +145,7 @@
 				const geo = flipY( new THREE.PlaneGeometry() );
 				const planeCompressed = new THREE.Mesh( geo, materialCompressed );
 				planeCompressed.position.set( - 2, 1, 0 );
-				scene.add( planeCompressed );
+				//scene.add( planeCompressed );
 
 				// points
 
@@ -159,7 +165,7 @@
 
 				const pointCloud = new THREE.Points( geometryPoints, materialPoints );
 				pointCloud.position.set( 2, - 1, 0 );
-				scene.add( pointCloud );
+				//scene.add( pointCloud );
 
 				// lines
 
@@ -178,7 +184,7 @@
 
 				const line = new THREE.Line( geometryLine, materialLine );
 				line.position.set( 2, 1, 0 );
-				scene.add( line );
+				//scene.add( line );
 
 				window.addEventListener( 'resize', onWindowResize );