Nodes: Ensure that setBindGroup matches with @group in the shader. (#28953)

* add example

* fix bindgroup

* rename id to index

examples/webgpu_materials.html

@@ -25,7 +25,7 @@
 		<script type="module">
 
 			import * as THREE from 'three';
-			import { tslFn, wgslFn, positionLocal, positionWorld, normalLocal, normalWorld, normalView, color, texture, uv, float, vec2, vec3, vec4, oscSine, triplanarTexture, viewportBottomLeft, js, string, global, loop } from 'three/tsl';
+			import { tslFn, wgslFn, positionLocal, positionWorld, normalLocal, normalWorld, normalView, color, texture, uv, float, vec2, vec3, vec4, oscSine, triplanarTexture, viewportBottomLeft, js, string, global, loop, cameraProjectionMatrix } from 'three/tsl';
 
 			import { TeapotGeometry } from 'three/addons/geometries/TeapotGeometry.js';
 
@@ -117,6 +117,12 @@
 				material.alphaTestNode = 0.5;
 				materials.push( material );
 
+				// camera
+				material = new THREE.MeshBasicNodeMaterial();
+				material.colorNode = cameraProjectionMatrix.mul( positionLocal );
+				materials.push( material );
+
+
 				// Normal
 				material = new THREE.MeshNormalMaterial();
 				material.opacity = .5;

src/nodes/core/NodeBuilder.js

@@ -197,14 +197,15 @@ class NodeBuilder {
 
 			if ( bindGroup === undefined ) {
 
-				bindGroup = new BindGroup( groupName, bindingsArray );
+				bindGroup = new BindGroup( groupName, bindingsArray, this.bindingsIndexes[ groupName ].group );
+
 				bindGroupsCache.set( bindingsArray, bindGroup );
 
 			}
 
 		} else {
 
-			bindGroup = new BindGroup( groupName, bindingsArray );
+			bindGroup = new BindGroup( groupName, bindingsArray, this.bindingsIndexes[ groupName ].group );
 
 		}
 

src/renderers/common/BindGroup.js

@@ -2,10 +2,11 @@ let _id = 0;
 
 class BindGroup {
 
-	constructor( name = '', bindings = [] ) {
+	constructor( name = '', bindings = [], index = 0 ) {
 
 		this.name = name;
 		this.bindings = bindings;
+		this.index = index;
 
 		this.id = _id ++;
 

src/renderers/common/nodes/NodeBuilderState.js

@@ -32,7 +32,7 @@ class NodeBuilderState {
 
 			if ( shared !== true ) {
 
-				const bindingsGroup = new BindGroup( instanceGroup.name );
+				const bindingsGroup = new BindGroup( instanceGroup.name, [], instanceGroup.index );
 				bindings.push( bindingsGroup );
 
 				for ( const instanceBinding of instanceGroup.bindings ) {

src/renderers/webgpu/WebGPUBackend.js

@@ -858,7 +858,7 @@ class WebGPUBackend extends Backend {
 			const bindGroup = bindings[ i ];
 			const bindingsData = this.get( bindGroup );
 
-			passEncoderGPU.setBindGroup( i, bindingsData.group );
+			passEncoderGPU.setBindGroup( bindGroup.index, bindingsData.group );
 
 		}