WebGPURenderer: Cache GPUBindGroupLayouts (#29158)

* cache BindGroupLayouts

* rename parameter and add default

---------

Co-authored-by: aardgoose <angus.sawyer@email.com>

src/nodes/core/NodeBuilder.js

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

src/renderers/common/BindGroup.js

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

src/renderers/common/nodes/NodeBuilderState.js

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

src/renderers/webgpu/utils/WebGPUBindingUtils.js

@@ -9,6 +9,7 @@ class WebGPUBindingUtils {
 	constructor( backend ) {
 
 		this.backend = backend;
+		this.bindGroupLayoutCache = new WeakMap();
 
 	}
 
@@ -135,12 +136,20 @@ class WebGPUBindingUtils {
 
 	createBindings( bindGroup ) {
 
-		const backend = this.backend;
+		const { backend, bindGroupLayoutCache } = this;
 		const bindingsData = backend.get( bindGroup );
 
 		// setup (static) binding layout and (dynamic) binding group
 
-		const bindLayoutGPU = this.createBindingsLayout( bindGroup );
+		let bindLayoutGPU = bindGroupLayoutCache.get( bindGroup.bindingsReference );
+
+		if ( bindLayoutGPU === undefined ) {
+
+			bindLayoutGPU = this.createBindingsLayout( bindGroup );
+			bindGroupLayoutCache.set( bindGroup.bindingsReference, bindLayoutGPU );
+
+		}
+
 		const bindGroupGPU = this.createBindGroup( bindGroup, bindLayoutGPU );
 
 		bindingsData.layout = bindLayoutGPU;