WebGPURenderer: Refactor UBO updates.

mrdoob · Sep 12, 2020 · d5c3089 · d5c3089
1 parent dfe538e
commit d5c3089
Show file tree

Hide file tree

Showing 3 changed files with 225 additions and 97 deletions.
diff --git a/examples/jsm/renderers/webgpu/WebGPUBindings.js b/examples/jsm/renderers/webgpu/WebGPUBindings.js
@@ -1,7 +1,7 @@
 import WebGPUUniformsGroup from './WebGPUUniformsGroup.js';
+import { FloatUniform, Matrix4Uniform } from './WebGPUUniform.js';
 import WebGPUSampler from './WebGPUSampler.js';
 import WebGPUSampledTexture from './WebGPUSampledTexture.js';
-import { Matrix4 } from '../../../../build/three.module.js';
 
 class WebGPUBindings {
 
@@ -97,7 +97,9 @@ class WebGPUBindings {
 				const array = binding.array;
 				const bufferGPU = binding.bufferGPU;
 
-				const needsBufferWrite = binding.update( object, camera );
+				binding.onBeforeUpdate( object, camera );
+
+				const needsBufferWrite = binding.update();
 
 				if ( needsBufferWrite === true ) {
 
@@ -242,33 +244,36 @@ class WebGPUBindings {
 
 		// ubos
 
+		const modelViewUniform = new Matrix4Uniform( 'modelMatrix' );
+		const modelViewMatrixUniform = new Matrix4Uniform( 'modelViewMatrix' );
+
 		const modelGroup = new WebGPUUniformsGroup();
 		modelGroup.setName( 'modelUniforms' );
-		modelGroup.setUniform( 'modelMatrix', new Matrix4() );
-		modelGroup.setUniform( 'modelViewMatrix', new Matrix4() );
-		modelGroup.setUpdateCallback( function ( object/*, camera */ ) {
+		modelGroup.addUniform( modelViewUniform );
+		modelGroup.addUniform( modelViewMatrixUniform );
+		modelGroup.setOnBeforeUpdate( function ( object/*, camera */ ) {
 
-			let updated = false;
+			modelViewUniform.setValue( object.matrixWorld );
+			modelViewMatrixUniform.setValue( object.modelViewMatrix );
 
-			if ( modelGroup.updateMatrix4( object.matrixWorld, 0 ) ) updated = true;
-			if ( modelGroup.updateMatrix4( object.modelViewMatrix, 16 ) ) updated = true;
+		} );
 
-			return updated;
+		// opacity
 
-		} );
+		const opacityUniform = new FloatUniform( 'opacity', 1 );
 
 		const cameraGroup = this.sharedUniformsGroups.get( 'cameraUniforms' );
 
 		const opacityGroup = new WebGPUUniformsGroup();
 		opacityGroup.setName( 'opacityUniforms' );
-		opacityGroup.setUniform( 'opacity', 1.0 );
+		opacityGroup.addUniform( opacityUniform );
 		opacityGroup.visibility = GPUShaderStage.FRAGMENT;
-		opacityGroup.setUpdateCallback( function ( object/*, camera */ ) {
+		opacityGroup.setOnBeforeUpdate( function ( object/*, camera */ ) {
 
 			const material = object.material;
 			const opacity = ( material.transparent === true ) ? material.opacity : 1.0;
 
-			return opacityGroup.updateNumber( opacity, 0 );
+			opacityUniform.setValue( opacity );
 
 		} );
 
@@ -300,18 +305,17 @@ class WebGPUBindings {
 
 		// ubos
 
+		const modelViewUniform = new Matrix4Uniform( 'modelMatrix' );
+		const modelViewMatrixUniform = new Matrix4Uniform( 'modelViewMatrix' );
+
 		const modelGroup = new WebGPUUniformsGroup();
 		modelGroup.setName( 'modelUniforms' );
-		modelGroup.setUniform( 'modelMatrix', new Matrix4() );
-		modelGroup.setUniform( 'modelViewMatrix', new Matrix4() );
-		modelGroup.setUpdateCallback( function ( object/*, camera */ ) {
-
-			let updated = false;
-
-			if ( modelGroup.updateMatrix4( object.matrixWorld, 0 ) ) updated = true;
-			if ( modelGroup.updateMatrix4( object.modelViewMatrix, 16 ) ) updated = true;
+		modelGroup.addUniform( modelViewUniform );
+		modelGroup.addUniform( modelViewMatrixUniform );
+		modelGroup.setOnBeforeUpdate( function ( object/*, camera */ ) {
 
-			return updated;
+			modelViewUniform.setValue( object.matrixWorld );
+			modelViewMatrixUniform.setValue( object.modelViewMatrix );
 
 		} );
 
@@ -332,18 +336,17 @@ class WebGPUBindings {
 
 		// ubos
 
+		const modelViewUniform = new Matrix4Uniform( 'modelMatrix' );
+		const modelViewMatrixUniform = new Matrix4Uniform( 'modelViewMatrix' );
+
 		const modelGroup = new WebGPUUniformsGroup();
 		modelGroup.setName( 'modelUniforms' );
-		modelGroup.setUniform( 'modelMatrix', new Matrix4() );
-		modelGroup.setUniform( 'modelViewMatrix', new Matrix4() );
-		modelGroup.setUpdateCallback( function ( object/*, camera */ ) {
-
-			let updated = false;
-
-			if ( modelGroup.updateMatrix4( object.matrixWorld, 0 ) ) updated = true;
-			if ( modelGroup.updateMatrix4( object.modelViewMatrix, 16 ) ) updated = true;
+		modelGroup.addUniform( modelViewUniform );
+		modelGroup.addUniform( modelViewMatrixUniform );
+		modelGroup.setOnBeforeUpdate( function ( object/*, camera */ ) {
 
-			return updated;
+			modelViewUniform.setValue( object.matrixWorld );
+			modelViewMatrixUniform.setValue( object.modelViewMatrix );
 
 		} );
 
@@ -360,18 +363,17 @@ class WebGPUBindings {
 
 	_setupSharedUniformsGroups() {
 
+		const projectionMatrixUniform = new Matrix4Uniform( 'projectionMatrix' );
+		const viewMatrixUniform = new Matrix4Uniform( 'viewMatrix' );
+
 		const cameraGroup = new WebGPUUniformsGroup();
 		cameraGroup.setName( 'cameraUniforms' );
-		cameraGroup.setUniform( 'projectionMatrix', new Matrix4() );
-		cameraGroup.setUniform( 'viewMatrix', new Matrix4() );
-		cameraGroup.setUpdateCallback( function ( object, camera ) {
-
-			let updated = false;
-
-			if ( cameraGroup.updateMatrix4( camera.projectionMatrix, 0 ) ) updated = true;
-			if ( cameraGroup.updateMatrix4( camera.matrixWorldInverse, 16 ) ) updated = true;
+		cameraGroup.addUniform( projectionMatrixUniform );
+		cameraGroup.addUniform( viewMatrixUniform );
+		cameraGroup.setOnBeforeUpdate( function ( object, camera ) {
 
-			return updated;
+			projectionMatrixUniform.setValue( camera.projectionMatrix );
+			viewMatrixUniform.setValue( camera.matrixWorldInverse );
 
 		} );
 

diff --git a/examples/jsm/renderers/webgpu/WebGPUUniform.js b/examples/jsm/renderers/webgpu/WebGPUUniform.js
@@ -0,0 +1,129 @@
+import { Color, Matrix3, Matrix4, Vector2, Vector3, Vector4 } from '../../../../build/three.module.js';
+
+class WebGPUUniform {
+
+	constructor( name, value ) {
+
+		this.name = name;
+		this.value = value;
+
+		this.byteLength = 0;
+		this.itemSize = 0;
+		this.value = null;
+
+	}
+
+	setValue( value ) {
+
+		this.value = value;
+
+	}
+
+}
+
+class FloatUniform extends WebGPUUniform {
+
+	constructor( name, value = 0 ) {
+
+		super( name, value );
+
+		this.byteLength = 4;
+		this.itemSize = 1;
+
+		Object.defineProperty( this, 'isFloatUniform', { value: true } );
+
+	}
+
+}
+
+class Vector2Uniform extends WebGPUUniform {
+
+	constructor( name, value = new Vector2() ) {
+
+		super( name, value );
+
+		this.byteLength = 8;
+		this.itemSize = 2;
+
+		Object.defineProperty( this, 'isVector2Uniform', { value: true } );
+
+	}
+
+}
+
+class Vector3Uniform extends WebGPUUniform {
+
+	constructor( name, value = new Vector3() ) {
+
+		super( name, value );
+
+		this.byteLength = 12;
+		this.itemSize = 3;
+
+		Object.defineProperty( this, 'isVector3Uniform', { value: true } );
+
+	}
+
+}
+
+class Vector4Uniform extends WebGPUUniform {
+
+	constructor( name, value = new Vector4() ) {
+
+		super( name, value );
+
+		this.byteLength = 16;
+		this.itemSize = 4;
+
+		Object.defineProperty( this, 'isVector4Uniform', { value: true } );
+
+	}
+
+}
+
+class ColorUniform extends WebGPUUniform {
+
+	constructor( name, value = new Color() ) {
+
+		super( name, value );
+
+		this.byteLength = 12;
+		this.itemSize = 3;
+
+		Object.defineProperty( this, 'isColorUniform', { value: true } );
+
+	}
+
+}
+
+class Matrix3Uniform extends WebGPUUniform {
+
+	constructor( name, value = new Matrix3() ) {
+
+		super( name, value );
+
+		this.byteLength = 48; // (3 * 4) * 4 bytes
+		this.itemSize = 12;
+
+		Object.defineProperty( this, 'isMatrix3Uniform', { value: true } );
+
+	}
+
+}
+
+class Matrix4Uniform extends WebGPUUniform {
+
+	constructor( name, value = new Matrix4() ) {
+
+		super( name, value );
+
+		this.byteLength = 64;
+		this.itemSize = 16;
+
+		Object.defineProperty( this, 'isMatrix4Uniform', { value: true } );
+
+	}
+
+}
+
+export { FloatUniform, Vector2Uniform, Vector3Uniform, Vector4Uniform, ColorUniform, Matrix3Uniform, Matrix4Uniform };