WebGPURenderer: WebGL fallback, use shared UBOs for common uniform groups (#29420)

* Use shared UBOs for common uniform groups

* cleanup

---------

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

src/nodes/core/NodeBuilder.js

@@ -109,8 +109,6 @@ class NodeBuilder {
 		this.stacks = [];
 		this.tab = '\t';
 
-		this.instanceBindGroups = true;
-
 		this.currentFunctionNode = null;
 
 		this.context = {

src/renderers/common/nodes/NodeBuilderState.js

@@ -2,7 +2,7 @@ import BindGroup from '../BindGroup.js';
 
 class NodeBuilderState {
 
-	constructor( vertexShader, fragmentShader, computeShader, nodeAttributes, bindings, updateNodes, updateBeforeNodes, updateAfterNodes, monitor, instanceBindGroups = true, transforms = [] ) {
+	constructor( vertexShader, fragmentShader, computeShader, nodeAttributes, bindings, updateNodes, updateBeforeNodes, updateAfterNodes, monitor, transforms = [] ) {
 
 		this.vertexShader = vertexShader;
 		this.fragmentShader = fragmentShader;
@@ -18,8 +18,6 @@ class NodeBuilderState {
 
 		this.monitor = monitor;
 
-		this.instanceBindGroups = instanceBindGroups;
-
 		this.usedTimes = 0;
 
 	}
@@ -30,7 +28,7 @@ class NodeBuilderState {
 
 		for ( const instanceGroup of this.bindings ) {
 
-			const shared = this.instanceBindGroups && instanceGroup.bindings[ 0 ].groupNode.shared;
+			const shared = instanceGroup.bindings[ 0 ].groupNode.shared;
 
 			if ( shared !== true ) {
 

src/renderers/common/nodes/Nodes.js

@@ -191,7 +191,6 @@ class Nodes extends DataMap {
 			nodeBuilder.updateBeforeNodes,
 			nodeBuilder.updateAfterNodes,
 			nodeBuilder.monitor,
-			nodeBuilder.instanceBindGroups,
 			nodeBuilder.transforms
 		);
 

src/renderers/webgl-fallback/WebGLBackend.js

@@ -62,6 +62,7 @@ class WebGLBackend extends Backend {
 
 		this.disjoint = this.extensions.get( 'EXT_disjoint_timer_query_webgl2' );
 		this.parallel = this.extensions.get( 'KHR_parallel_shader_compile' );
+
 		this._currentContext = null;
 
 	}
@@ -1106,40 +1107,52 @@ class WebGLBackend extends Backend {
 
 	updateBindings( bindGroup, bindings ) {
 
-		const { state, gl } = this;
+		if ( ! bindGroup ) return;
 
-		let groupIndex = 0;
-		let textureIndex = 0;
+		const { gl } = this;
 
-		for ( const bindGroup of bindings ) {
+		const bindingsData = this.get( bindings );
+		const bindGroupData = this.get( bindGroup );
 
-			for ( const binding of bindGroup.bindings ) {
+		if ( bindingsData.textureIndex === undefined ) bindingsData.textureIndex = 0;
 
-				if ( binding.isUniformsGroup || binding.isUniformBuffer ) {
+		if ( bindGroupData.textureIndex === undefined ) {
 
-					const bufferGPU = gl.createBuffer();
-					const data = binding.buffer;
+			bindGroupData.textureIndex = bindingsData.textureIndex;
 
-					gl.bindBuffer( gl.UNIFORM_BUFFER, bufferGPU );
-					gl.bufferData( gl.UNIFORM_BUFFER, data, gl.DYNAMIC_DRAW );
-					state.bindBufferBase( gl.UNIFORM_BUFFER, groupIndex, bufferGPU );
+		} else {
 
-					this.set( binding, {
-						index: groupIndex ++,
-						bufferGPU
-					} );
+			// reset textureIndex to match previous mappimgs when rebuilt
+			bindingsData.textureIndex = bindGroupData.textureIndex;
 
-				} else if ( binding.isSampledTexture ) {
+		}
 
-					const { textureGPU, glTextureType } = this.get( binding.texture );
+		let i = 0;
 
-					this.set( binding, {
-						index: textureIndex ++,
-						textureGPU,
-						glTextureType
-					} );
+		for ( const binding of bindGroup.bindings ) {
 
-				}
+			if ( binding.isUniformsGroup || binding.isUniformBuffer ) {
+
+				const data = binding.buffer;
+				const bufferGPU = gl.createBuffer();
+
+				gl.bindBuffer( gl.UNIFORM_BUFFER, bufferGPU );
+				gl.bufferData( gl.UNIFORM_BUFFER, data, gl.DYNAMIC_DRAW );
+
+				this.set( binding, {
+					index: bindGroup.index * 2 + i ++,
+					bufferGPU
+				} );
+
+			} else if ( binding.isSampledTexture ) {
+
+				const { textureGPU, glTextureType } = this.get( binding.texture );
+
+				this.set( binding, {
+					index: bindingsData.textureIndex ++,
+					textureGPU,
+					glTextureType
+				} );
 
 			}
 

src/renderers/webgl-fallback/nodes/GLSLNodeBuilder.js

@@ -56,8 +56,6 @@ class GLSLNodeBuilder extends NodeBuilder {
 		this.transforms = [];
 		this.extensions = {};
 
-		this.instanceBindGroups = false;
-
 		this.useComparisonMethod = true;
 
 	}
@@ -854,6 +852,8 @@ void main() {
 
 		const shadersData = this.material !== null ? { fragment: {}, vertex: {} } : { compute: {} };
 
+		this.sortBindingGroups();
+
 		for ( const shaderStage in shadersData ) {
 
 			let flow = '// code\n\n';

src/renderers/webgl-fallback/utils/WebGLState.js

@@ -649,7 +649,6 @@ class WebGLState {
 
 		}
 
-
 	}
 
 
@@ -711,10 +710,8 @@ class WebGLState {
 			boundTexture.type = webglType;
 			boundTexture.texture = webglTexture;
 
-
 		}
 
-
 	}
 
 	bindBufferBase( target, index, buffer ) {

src/renderers/webgpu/nodes/WGSLNodeBuilder.js

@@ -977,8 +977,8 @@ ${ flowData.code }
 
 		for ( const uniform of uniforms ) {
 
-			const groundName = uniform.groupNode.name;
-			const uniformIndexes = this.bindingsIndexes[ groundName ];
+			const groupName = uniform.groupNode.name;
+			const uniformIndexes = this.bindingsIndexes[ groupName ];
 
 			if ( uniform.type === 'texture' || uniform.type === 'cubeTexture' || uniform.type === 'storageTexture' || uniform.type === 'texture3D' ) {