RFC: Multiple bindgroups for WebGPU - breaks WebGL currently

examples/jsm/nodes/accessors/CameraNode.js

@@ -1,12 +1,33 @@
 import { uniform } from '../core/UniformNode.js';
+import { renderGroup } from '../core/UniformGroupNode.js';
 import { Vector3 } from 'three';
 
-export const cameraNear = /*#__PURE__*/ uniform( 'float' ).onRenderUpdate( ( { camera } ) => camera.near );
-export const cameraFar = /*#__PURE__*/ uniform( 'float' ).onRenderUpdate( ( { camera } ) => camera.far );
-export const cameraLogDepth = /*#__PURE__*/ uniform( 'float' ).onRenderUpdate( ( { camera } ) => 2.0 / ( Math.log( camera.far + 1.0 ) / Math.LN2 ) );
-export const cameraProjectionMatrix = /*#__PURE__*/ uniform( 'mat4' ).onRenderUpdate( ( { camera } ) => camera.projectionMatrix );
-export const cameraProjectionMatrixInverse = /*#__PURE__*/ uniform( 'mat4' ).onRenderUpdate( ( { camera } ) => camera.projectionMatrixInverse );
-export const cameraViewMatrix = /*#__PURE__*/ uniform( 'mat4' ).onRenderUpdate( ( { camera } ) => camera.matrixWorldInverse );
-export const cameraWorldMatrix = /*#__PURE__*/ uniform( 'mat4' ).onRenderUpdate( ( { camera } ) => camera.matrixWorld );
-export const cameraNormalMatrix = /*#__PURE__*/ uniform( 'mat3' ).onRenderUpdate( ( { camera } ) => camera.normalMatrix );
-export const cameraPosition = /*#__PURE__*/ uniform( new Vector3() ).onRenderUpdate( ( { camera }, self ) => self.value.setFromMatrixPosition( camera.matrixWorld ) );
+const updateNear = ( { camera } ) => camera.near;
+const updateFar = ( { camera } ) => camera.far;
+const updateViewMatrix = ( { camera } ) => camera.matrixWorldInverse;
+const updateWorldMatrix =  ( { camera } ) => camera.matrixWorld;
+const updateLogDepth = ( { camera } ) => 2.0 / ( Math.log( camera.far + 1.0 ) / Math.LN2 );
+const updateProjectionMatrix =  ( { camera } ) => camera.projectionMatrix;
+const updateProjectionMatrixInverse =  ( { camera } ) => camera.projectionMatrixInverse;
+const updateCameraPosition = ( { camera }, self ) => self.value.setFromMatrixPosition( camera.matrixWorld );
+const updateNormalMatrix = ( { camera } ) => camera.normalMatrix;
+
+export const cameraNear = /*#__PURE__*/ uniform( 'float' ).label( 'cameraNear' ).setGroup( renderGroup ).onRenderUpdate( updateNear );
+export const cameraFar = /*#__PURE__*/ uniform( 'float' ).label( 'cameraFar' ).setGroup( renderGroup ).onRenderUpdate( updateFar );
+export const cameraLogDepth = /*#__PURE__*/ uniform( 'float' ).label( 'cameraLogDepth' ).setGroup( renderGroup ).onRenderUpdate( updateLogDepth );
+export const cameraProjectionMatrix = /*#__PURE__*/ uniform( 'mat4' ).label( 'cameraProjectionMatrix' ).setGroup( renderGroup ).onRenderUpdate( updateProjectionMatrix );
+export const cameraProjectionMatrixInverse = /*#__PURE__*/ uniform( 'mat4' ).label( 'cameraProjectionMatrixInverse' ).setGroup( renderGroup ).onRenderUpdate( updateProjectionMatrix );
+export const cameraViewMatrix = /*#__PURE__*/ uniform( 'mat4' ).label( 'cameraViewMatrix' ).setGroup( renderGroup ).onRenderUpdate( updateViewMatrix );
+export const cameraWorldMatrix = /*#__PURE__*/ uniform( 'mat4' ).label( 'cameraWorldMatrix' ).setGroup( renderGroup ).onRenderUpdate( updateWorldMatrix );
+export const cameraNormalMatrix = /*#__PURE__*/ uniform( 'mat3' ).label( 'cameraNormalMatrix' ).setGroup( renderGroup ).onRenderUpdate( updateNormalMatrix );
+export const cameraPosition = /*#__PURE__*/ uniform( new Vector3() ).label( 'cameraPosition' ).setGroup( renderGroup ).onRenderUpdate( ( { camera }, self ) => self.value.setFromMatrixPosition( camera.matrixWorld ) );
+
+renderGroup.register( 'cameraViewMatrix', 'mat4', updateViewMatrix );
+renderGroup.register( 'cameraWorldMatrix', 'mat4', updateWorldMatrix );
+renderGroup.register( 'cameraProjectionMatrix', 'mat4', updateProjectionMatrix );
+renderGroup.register( 'cameraProjectionMatrixInverse', 'mat4', updateProjectionMatrixInverse );
+renderGroup.register( 'cameraNormalMatrix', 'mat3', updateNormalMatrix );
+renderGroup.register( 'cameraPosition', 'vec3' );
+renderGroup.register( 'cameraNear', 'float', updateNear );
+renderGroup.register( 'cameraFar', 'float', updateFar );
+renderGroup.register( 'cameraLogDepth', 'float', updateLogDepth );

examples/jsm/nodes/core/NodeFrame.js

@@ -162,6 +162,11 @@ class NodeFrame {
 
 			node.update( this );
 
+		} else if ( updateType === NodeUpdateType.ONCE ) {
+
+			node.update( this );
+			node.updateType = NodeUpdateType.NONE;
+
 		}
 
 	}

examples/jsm/nodes/core/UniformGroupNode.js

@@ -14,6 +14,8 @@ class UniformGroupNode extends Node {
 
 		this.isUniformGroup = true;
 
+		this.registered = [];
+
 	}
 
 	set needsUpdate( value ) {
@@ -22,6 +24,12 @@ class UniformGroupNode extends Node {
 
 	}
 
+	register( name, type, callback = () => {} ) {
+
+		this.registered.push( { name, type, callback } );
+
+	}
+
 }
 
 export const uniformGroup = ( name ) => new UniformGroupNode( name );

examples/jsm/nodes/core/constants.js

@@ -7,7 +7,8 @@ export const NodeUpdateType = {
 	NONE: 'none',
 	FRAME: 'frame',
 	RENDER: 'render',
-	OBJECT: 'object'
+	OBJECT: 'object',
+	ONCE: 'once'
 };
 
 export const NodeType = {

examples/jsm/renderers/common/Renderer.js

@@ -299,6 +299,7 @@ class Renderer {
 		//
 
 		this._background.update( sceneRef, renderList, renderContext );
+		this._nodes.updateRendererBindings( renderContext, camera );
 
 		// process render lists
 
@@ -639,6 +640,8 @@ class Renderer {
 
 		//
 
+		this._nodes.updateRendererBindings( renderContext, camera );
+
 		this._background.update( sceneRef, renderList, renderContext );
 
 		//

examples/jsm/renderers/common/UniformsGroup.js

@@ -270,7 +270,9 @@ class UniformsGroup extends UniformBuffer {
 		let updated = false;
 
 		const a = this.buffer;
+
 		const e = uniform.getValue().elements;
+
 		const offset = uniform.offset;
 
 		if ( arraysEqual( a, e, offset ) === false ) {

examples/jsm/renderers/common/nodes/Nodes.js

@@ -2,7 +2,12 @@ import DataMap from '../DataMap.js';
 import ChainMap from '../ChainMap.js';
 import NodeBuilderState from './NodeBuilderState.js';
 import { EquirectangularReflectionMapping, EquirectangularRefractionMapping, NoToneMapping, SRGBColorSpace } from 'three';
-import { NodeFrame, vec4, objectGroup, renderGroup, frameGroup, cubeTexture, texture, rangeFog, densityFog, reference, viewportBottomLeft, normalWorld, pmremTexture, viewportTopLeft } from '../../../nodes/Nodes.js';
+import { NodeFrame, vec4, objectGroup, renderGroup, frameGroup, cubeTexture, texture, rangeFog, densityFog, reference, viewportBottomLeft, normalWorld, pmremTexture, viewportTopLeft, uniform, NodeUniform, NodeUpdateType } from '../../../nodes/Nodes.js';
+import {
+	FloatNodeUniform, Vector2NodeUniform, Vector3NodeUniform, Vector4NodeUniform,
+	ColorNodeUniform, Matrix3NodeUniform, Matrix4NodeUniform
+} from './NodeUniform.js';
+import NodeUniformsGroup from './NodeUniformsGroup.js';
 
 class Nodes extends DataMap {
 
@@ -17,6 +22,8 @@ class Nodes extends DataMap {
 		this.callHashCache = new ChainMap();
 		this.groupsData = new ChainMap();
 
+		this._renderNodeUniformsGroup = null;
+
 	}
 
 	updateGroup( nodeUniformsGroup ) {
@@ -114,6 +121,7 @@ class Nodes extends DataMap {
 				nodeBuilder.environmentNode = this.getEnvironmentNode( renderObject.scene );
 				nodeBuilder.fogNode = this.getFogNode( renderObject.scene );
 				nodeBuilder.clippingContext = renderObject.clippingContext;
+				nodeBuilder.renderNodeUniformsGroup = this._renderNodeUniformsGroup;
 				nodeBuilder.build();
 
 				nodeBuilderState = this._createNodeBuilderState( nodeBuilder );
@@ -245,6 +253,76 @@ class Nodes extends DataMap {
 
 	}
 
+	updateRendererBindings( renderContext, camera ) {
+
+		let initialUpdate = false;
+
+		if ( renderContext.bindings === undefined ) {
+
+			const registeredUniforms = renderGroup.registered;
+
+			const group = new NodeUniformsGroup( 'render', renderGroup );
+
+			for ( let i = 0, l = registeredUniforms.length; i < l; i ++ ) {
+
+				const uniformDesc = registeredUniforms[ i ];
+				const tempUniform = uniform( uniformDesc.type ).label( uniformDesc.name ).onUpdate( uniformDesc.callback, NodeUpdateType.ONCE );
+				const nodeUniform = this.getNodeUniform( new NodeUniform( uniformDesc.name, uniformDesc.type, tempUniform ), uniformDesc.type );
+
+				group.addUniform( nodeUniform );
+
+			}
+
+			// FIXME hardcode WebGPU visibility
+			group.setVisibility( 1 );
+			group.setVisibility( 2 );
+
+			renderContext.bindings = [ group ];
+			this.backend.createBindings( renderContext.bindings, 'render' );
+
+			initialUpdate = true;
+
+		}
+
+		const binding = renderContext.bindings[ 0 ];
+		this._renderNodeUniformsGroup = binding;
+
+		if ( this.updateGroup( binding ) || initialUpdate ) {
+
+			const nodes = binding.getNodes( false );
+
+			const nodeFrame = this.getNodeFrame( this.renderer, null, null, camera, null );
+
+			for ( let i = 0, l = nodes.length; i < l; i ++ ) {
+
+				nodeFrame.updateNode( nodes[ i ] );
+
+			}
+
+			if ( binding.update() ) {
+
+				this.backend.updateBinding( binding );
+
+			}
+
+		}
+
+	}
+
+	getNodeUniform( uniformNode, type ) {
+
+		if ( type === 'float' ) return new FloatNodeUniform( uniformNode );
+		if ( type === 'vec2' ) return new Vector2NodeUniform( uniformNode );
+		if ( type === 'vec3' ) return new Vector3NodeUniform( uniformNode );
+		if ( type === 'vec4' ) return new Vector4NodeUniform( uniformNode );
+		if ( type === 'color' ) return new ColorNodeUniform( uniformNode );
+		if ( type === 'mat3' ) return new Matrix3NodeUniform( uniformNode );
+		if ( type === 'mat4' ) return new Matrix4NodeUniform( uniformNode );
+
+		throw new Error( `Uniform "${type}" not declared.` );
+
+	}
+
 	get isToneMappingState() {
 
 		return this.renderer.getRenderTarget() ? false : true;

examples/jsm/renderers/webgpu/WebGPUBackend.js

@@ -446,6 +446,11 @@ class WebGPUBackend extends Backend {
 
 		}
 
+		const bindingsData = this.get( renderContext.bindings );
+		const bindGroupGPU = bindingsData.group;
+
+		currentPass.setBindGroup( 0, bindGroupGPU );
+
 	}
 
 	finishRender( renderContext ) {
@@ -747,7 +752,7 @@ class WebGPUBackend extends Backend {
 		const groupGPU = this.get( computeGroup );
 
 
-		const descriptor = {};
+		const descriptor = { label: 'compute_pass' };
 
 		this.initTimestampQuery( computeGroup, descriptor );
 
@@ -825,8 +830,15 @@ class WebGPUBackend extends Backend {
 
 		// bind group
 
+		if ( this.renderer._currentRenderBundle ) {
+
+			const bindGroupGPU = this.get( context.bindings ).group;
+			passEncoderGPU.setBindGroup( 0, bindGroupGPU );
+
+		}
+
 		const bindGroupGPU = bindingsData.group;
-		passEncoderGPU.setBindGroup( 0, bindGroupGPU );
+		passEncoderGPU.setBindGroup( 1, bindGroupGPU );
 
 		// attributes
 
@@ -1198,9 +1210,9 @@ class WebGPUBackend extends Backend {
 
 	// bindings
 
-	createBindings( bindings ) {
+	createBindings( bindings, label ) {
 
-		this.bindingUtils.createBindings( bindings );
+		this.bindingUtils.createBindings( bindings, label );
 
 	}
 
@@ -1282,7 +1294,7 @@ class WebGPUBackend extends Backend {
 			dstY = dstPosition.y;
 
 		}
-		
+
 		const encoder = this.device.createCommandEncoder( { label: 'copyTextureToTexture_' + srcTexture.id + '_' + dstTexture.id } );
 
 		const sourceGPU = this.get( srcTexture ).texture;
@@ -1378,6 +1390,11 @@ class WebGPUBackend extends Backend {
 		renderContextData.currentPass = encoder.beginRenderPass( descriptor );
 		renderContextData.currentSets = { attributes: {} };
 
+		const bindingsData = this.get( renderContext.bindings );
+		const bindGroupGPU = bindingsData.group;
+
+		renderContextData.currentPass.setBindGroup( 0, bindGroupGPU );
+
 	}
 
 }