diff --git a/examples/webgpu_materials.html b/examples/webgpu_materials.html
index 42a364a029d699..83b1b2f22181c7 100644
--- a/examples/webgpu_materials.html
+++ b/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;
diff --git a/src/nodes/core/NodeBuilder.js b/src/nodes/core/NodeBuilder.js
index 82e07d4a50779f..c85b413a85efea 100644
--- a/src/nodes/core/NodeBuilder.js
+++ b/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 );
 
 		}
 
diff --git a/src/renderers/common/BindGroup.js b/src/renderers/common/BindGroup.js
index a56729a7bd69b1..8a48a1bae22b23 100644
--- a/src/renderers/common/BindGroup.js
+++ b/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 ++;
 
diff --git a/src/renderers/common/nodes/NodeBuilderState.js b/src/renderers/common/nodes/NodeBuilderState.js
index 98e1bd631d4628..8e0a40c5069df2 100644
--- a/src/renderers/common/nodes/NodeBuilderState.js
+++ b/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 ) {
diff --git a/src/renderers/webgpu/WebGPUBackend.js b/src/renderers/webgpu/WebGPUBackend.js
index ecefa2c05e9209..917eb0f8759434 100644
--- a/src/renderers/webgpu/WebGPUBackend.js
+++ b/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 );
 
 		}