WebGPURenderer: Cleanup codebase (#27622)

* some cleanup

* cleanup examples

examples/jsm/nodes/Nodes.js

@@ -40,13 +40,15 @@ export { NodeUtils };
 
 // math
 export { default as MathNode, PI, PI2, EPSILON, INFINITY, radians, degrees, exp, exp2, log, log2, sqrt, inverseSqrt, floor, ceil, normalize, fract, sin, cos, tan, asin, acos, atan, abs, sign, length, lengthSq, negate, oneMinus, dFdx, dFdy, round, reciprocal, trunc, fwidth, bitcast, atan2, min, max, mod, step, reflect, distance, difference, dot, cross, pow, pow2, pow3, pow4, transformDirection, mix, clamp, saturate, refract, smoothstep, faceForward, cbrt } from './math/MathNode.js';
-export { parabola, gain, pcurve, sinc } from './math/MathNode.js';
-export { triNoise3D } from './math/TriNoise3D.js';
 
 export { default as OperatorNode, add, sub, mul, div, remainder, equal, lessThan, greaterThan, lessThanEqual, greaterThanEqual, and, or, xor, bitAnd, bitOr, bitXor, shiftLeft, shiftRight } from './math/OperatorNode.js';
 export { default as CondNode, cond } from './math/CondNode.js';
 export { default as HashNode, hash } from './math/HashNode.js';
 
+// math utils
+export { parabola, gain, pcurve, sinc } from './math/MathUtilsNode.js';
+export { triNoise3D } from './math/TriNoise3D.js';
+
 // utils
 export { default as ArrayElementNode } from './utils/ArrayElementNode.js';
 export { default as ConvertNode } from './utils/ConvertNode.js';

examples/jsm/nodes/math/MathNode.js

@@ -1,5 +1,5 @@
 import TempNode from '../core/TempNode.js';
-import { sub, mul, div, add } from './OperatorNode.js';
+import { sub, mul, div } from './OperatorNode.js';
 import { addNodeClass } from '../core/Node.js';
 import { addNodeElement, nodeObject, nodeProxy, float, vec3, vec4 } from '../shadernode/ShaderNode.js';
 
@@ -303,12 +303,6 @@ export const pow3 = nodeProxy( MathNode, MathNode.POW, 3 );
 export const pow4 = nodeProxy( MathNode, MathNode.POW, 4 );
 export const transformDirection = nodeProxy( MathNode, MathNode.TRANSFORM_DIRECTION );
 
-// remapping functions https://iquilezles.org/articles/functions/
-export const parabola = ( x, k ) => pow( mul( 4.0, x.mul( sub( 1.0, x ) ) ), k );
-export const gain = ( x, k ) => x.lessThan( 0.5 ) ? parabola( x.mul( 2.0 ), k ).div( 2.0 ) : sub( 1.0, parabola( mul( sub( 1.0, x ), 2.0 ), k ).div( 2.0 ) );
-export const pcurve = ( x, a, b ) => pow( div( pow( x, a ), add( pow( x, a ), pow( sub( 1.0, x ), b ) ) ), 1.0 / a );
-export const sinc = ( x, k ) => sin( PI.mul( k.mul( x ).sub( 1.0 ) ) ).div( PI.mul( k.mul( x ).sub( 1.0 ) ) );
-
 export const cbrt = ( a ) => mul( sign( a ), pow( abs( a ), 1.0 / 3.0 ) );
 export const lengthSq = ( a ) => dot( a, a );
 export const mix = nodeProxy( MathNode, MathNode.MIX );
@@ -374,9 +368,4 @@ addNodeElement( 'difference', difference );
 addNodeElement( 'saturate', saturate );
 addNodeElement( 'cbrt', cbrt );
 
-addNodeElement( 'parabola', parabola );
-addNodeElement( 'gain', gain );
-addNodeElement( 'pcurve', pcurve );
-addNodeElement( 'sinc', sinc );
-
 addNodeClass( 'MathNode', MathNode );

examples/jsm/nodes/math/MathUtilsNode.js

@@ -0,0 +1,15 @@
+import { sub, mul, div, add } from './OperatorNode.js';
+import { addNodeElement } from '../shadernode/ShaderNode.js';
+import { PI, pow, sin } from './MathNode.js';
+
+// remapping functions https://iquilezles.org/articles/functions/
+export const parabola = ( x, k ) => pow( mul( 4.0, x.mul( sub( 1.0, x ) ) ), k );
+export const gain = ( x, k ) => x.lessThan( 0.5 ) ? parabola( x.mul( 2.0 ), k ).div( 2.0 ) : sub( 1.0, parabola( mul( sub( 1.0, x ), 2.0 ), k ).div( 2.0 ) );
+export const pcurve = ( x, a, b ) => pow( div( pow( x, a ), add( pow( x, a ), pow( sub( 1.0, x ), b ) ) ), 1.0 / a );
+export const sinc = ( x, k ) => sin( PI.mul( k.mul( x ).sub( 1.0 ) ) ).div( PI.mul( k.mul( x ).sub( 1.0 ) ) );
+
+
+addNodeElement( 'parabola', parabola );
+addNodeElement( 'gain', gain );
+addNodeElement( 'pcurve', pcurve );
+addNodeElement( 'sinc', sinc );

examples/jsm/renderers/common/Backend.js

@@ -90,7 +90,7 @@ class Backend {
 
 	// utils
 
-	resolveTimeStampAsync( renderContext, type ) { }
+	resolveTimestampAsync( renderContext, type ) { }
 
 	hasFeatureAsync( name ) { } // return Boolean
 

examples/jsm/renderers/common/Renderer.js

@@ -478,7 +478,7 @@ class Renderer {
 		sceneRef.onAfterRender( this, scene, camera, renderTarget );
 
 
-		await this.backend.resolveTimeStampAsync( renderContext, 'render' );
+		await this.backend.resolveTimestampAsync( renderContext, 'render' );
 
 	}
 
@@ -894,7 +894,7 @@ class Renderer {
 
 		backend.finishCompute( computeNodes );
 
-		await this.backend.resolveTimeStampAsync( computeNodes, 'compute' );
+		await this.backend.resolveTimestampAsync( computeNodes, 'compute' );
 
 		//
 
@@ -1194,7 +1194,6 @@ class Renderer {
 
 	get compile() {
 
-		console.warn( 'THREE.Renderer: compile() is deprecated and will be removed in r170, use compileAsync instead.' ); // @deprecated, r170
 		return this.compileAsync;
 
 	}

examples/jsm/renderers/common/StorageBufferAttribute.js

@@ -2,20 +2,16 @@ import { InstancedBufferAttribute } from 'three';
 
 class StorageBufferAttribute extends InstancedBufferAttribute {
 
-	constructor( array, itemSize ) {
+	constructor( array, itemSize, typeClass = Float32Array ) {
+
+		if ( ArrayBuffer.isView( array ) === false ) array = new typeClass( array * itemSize );
 
 		super( array, itemSize );
 
 		this.isStorageBufferAttribute = true;
 
 	}
 
-	static create( count, itemSize, typeClass = Float32Array ) {
-
-		return new StorageBufferAttribute( new typeClass( count * itemSize ), itemSize );
-
-	}
-
 }
 
 export default StorageBufferAttribute;

examples/jsm/renderers/webgpu/WebGPUBackend.js

@@ -325,7 +325,7 @@ class WebGPUBackend extends Backend {
 
 		}
 
-		this.initTimeStampQuery( renderContext, descriptor );
+		this.initTimestampQuery( renderContext, descriptor );
 
 		descriptor.occlusionQuerySet = occlusionQuerySet;
 
@@ -494,7 +494,7 @@ class WebGPUBackend extends Backend {
 
 		}
 
-		this.prepareTimeStampBuffer( renderContext, renderContextData.encoder );
+		this.prepareTimestampBuffer( renderContext, renderContextData.encoder );
 
 		this.device.queue.submit( [ renderContextData.encoder.finish() ] );
 
@@ -735,7 +735,7 @@ class WebGPUBackend extends Backend {
 
 		const descriptor = {};
 
-		this.initTimeStampQuery( computeGroup, descriptor );
+		this.initTimestampQuery( computeGroup, descriptor );
 
 		groupGPU.cmdEncoderGPU = this.device.createCommandEncoder();
 
@@ -767,7 +767,7 @@ class WebGPUBackend extends Backend {
 
 		groupData.passEncoderGPU.end();
 
-		this.prepareTimeStampBuffer( computeGroup, groupData.cmdEncoderGPU );
+		this.prepareTimestampBuffer( computeGroup, groupData.cmdEncoderGPU );
 
 		this.device.queue.submit( [ groupData.cmdEncoderGPU.finish() ] );
 
@@ -1031,7 +1031,7 @@ class WebGPUBackend extends Backend {
 	}
 
 
-	initTimeStampQuery( renderContext, descriptor ) {
+	initTimestampQuery( renderContext, descriptor ) {
 
 		if ( ! this.hasFeature( GPUFeatureName.TimestampQuery ) || ! this.trackTimestamp ) return;
 
@@ -1059,7 +1059,7 @@ class WebGPUBackend extends Backend {
 
 	// timestamp utils
 
-	prepareTimeStampBuffer( renderContext, encoder ) {
+	prepareTimestampBuffer( renderContext, encoder ) {
 
 		if ( ! this.hasFeature( GPUFeatureName.TimestampQuery ) || ! this.trackTimestamp ) return;
 
@@ -1079,33 +1079,33 @@ class WebGPUBackend extends Backend {
 		encoder.resolveQuerySet( renderContextData.timeStampQuerySet, 0, 2, resolveBuffer, 0 );
 		encoder.copyBufferToBuffer( resolveBuffer, 0, resultBuffer, 0, size );
 
-		renderContextData.currentTimeStampQueryBuffer = resultBuffer;
+		renderContextData.currentTimestampQueryBuffer = resultBuffer;
 
 	}
 
-	async resolveTimeStampAsync( renderContext, type = 'render' ) {
+	async resolveTimestampAsync( renderContext, type = 'render' ) {
 
 		if ( ! this.hasFeature( GPUFeatureName.TimestampQuery ) || ! this.trackTimestamp ) return;
 
 		const renderContextData = this.get( renderContext );
 
 		// handle timestamp query results
 
-		const { currentTimeStampQueryBuffer } = renderContextData;
+		const { currentTimestampQueryBuffer } = renderContextData;
 
-		if ( currentTimeStampQueryBuffer ) {
+		if ( currentTimestampQueryBuffer ) {
 
-			renderContextData.currentTimeStampQueryBuffer = null;
+			renderContextData.currentTimestampQueryBuffer = null;
 
-			await currentTimeStampQueryBuffer.mapAsync( GPUMapMode.READ );
+			await currentTimestampQueryBuffer.mapAsync( GPUMapMode.READ );
 
-			const times = new BigUint64Array( currentTimeStampQueryBuffer.getMappedRange() );
+			const times = new BigUint64Array( currentTimestampQueryBuffer.getMappedRange() );
 
 			const duration = Number( times[ 1 ] - times[ 0 ] ) / 1000000;
 			// console.log( `Compute ${type} duration: ${Number( times[ 1 ] - times[ 0 ] ) / 1000000}ms` );
 			this.renderer.info.updateTimestamp( type, duration );
 
-			currentTimeStampQueryBuffer.unmap();
+			currentTimestampQueryBuffer.unmap();
 
 		}
 

examples/webgpu_compute_particles.html

@@ -90,7 +90,7 @@
 
 				//
 
-				const createBuffer = () => storage( StorageBufferAttribute.create( particleCount, 3 ), 'vec3', particleCount );
+				const createBuffer = () => storage( new StorageBufferAttribute( particleCount, 3 ), 'vec3', particleCount );
 
 				const positionBuffer = createBuffer();
 				const velocityBuffer = createBuffer();
@@ -294,8 +294,8 @@
 
 						timestamps.innerHTML = `
 
-										Compute ${renderer.info.compute.computeCalls} pass in ${renderer.info.timestamp.compute}ms<br>
-										Draw ${renderer.info.render.drawCalls} pass in ${renderer.info.timestamp.render}ms`;
+							Compute ${renderer.info.compute.computeCalls} pass in ${renderer.info.timestamp.compute}ms<br>
+							Draw ${renderer.info.render.drawCalls} pass in ${renderer.info.timestamp.render}ms`;
 
 					}
 

examples/webgpu_compute_particles_rain.html

@@ -103,7 +103,7 @@
 
 				//
 
-				const createBuffer = ( type = 'vec3' ) => storage( StorageBufferAttribute.create( maxParticleCount, 3 ), type, maxParticleCount );
+				const createBuffer = ( type = 'vec3' ) => storage( new StorageBufferAttribute( maxParticleCount, 3 ), type, maxParticleCount );
 
 				const positionBuffer = createBuffer();
 				const velocityBuffer = createBuffer();

examples/webgpu_compute_particles_snow.html

@@ -104,7 +104,7 @@
 
 				//
 
-				const createBuffer = ( type = 'vec3' ) => storage( StorageBufferAttribute.create( maxParticleCount, type === 'vec4' ? 4 : 3 ), type, maxParticleCount );
+				const createBuffer = ( type = 'vec3' ) => storage( new StorageBufferAttribute( maxParticleCount, type === 'vec4' ? 4 : 3 ), type, maxParticleCount );
 
 				const positionBuffer = createBuffer();
 				const scaleBuffer = createBuffer();

examples/webgpu_compute_points.html

@@ -62,13 +62,10 @@
 				const particleNum = 300000;
 				const particleSize = 2; // vec2
 
-//				const particleArray = new Float32Array( particleNum * particleSize );
-//				const velocityArray = new Float32Array( particleNum * particleSize );
-
 				// create buffers
 
-				const particleBuffer = StorageBufferAttribute.create( particleNum, particleSize );
-				const velocityBuffer = StorageBufferAttribute.create( particleNum, particleSize );
+				const particleBuffer = new StorageBufferAttribute( particleNum, particleSize );
+				const velocityBuffer = new StorageBufferAttribute( particleNum, particleSize );
 
 				const particleBufferNode = storage( particleBuffer, 'vec2', particleNum );
 				const velocityBufferNode = storage( velocityBuffer, 'vec2', particleNum );