From 02c8f0e05b0dfde1dd2602b8ae63ee7a41e308bc Mon Sep 17 00:00:00 2001 From: Renaud Rohlinger Date: Fri, 26 Jan 2024 17:41:39 +0900 Subject: [PATCH] WebGPURenderer: Cleanup codebase (#27622) * some cleanup * cleanup examples --- examples/jsm/nodes/Nodes.js | 6 ++-- examples/jsm/nodes/math/MathNode.js | 13 +-------- examples/jsm/nodes/math/MathUtilsNode.js | 15 ++++++++++ examples/jsm/renderers/common/Backend.js | 2 +- examples/jsm/renderers/common/Renderer.js | 5 ++-- .../common/StorageBufferAttribute.js | 10 ++----- .../jsm/renderers/webgpu/WebGPUBackend.js | 28 +++++++++---------- examples/webgpu_compute_particles.html | 6 ++-- examples/webgpu_compute_particles_rain.html | 2 +- examples/webgpu_compute_particles_snow.html | 2 +- examples/webgpu_compute_points.html | 7 ++--- 11 files changed, 47 insertions(+), 49 deletions(-) create mode 100644 examples/jsm/nodes/math/MathUtilsNode.js diff --git a/examples/jsm/nodes/Nodes.js b/examples/jsm/nodes/Nodes.js index 9ea7994cb80524..354d9136b0df4e 100644 --- a/examples/jsm/nodes/Nodes.js +++ b/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'; diff --git a/examples/jsm/nodes/math/MathNode.js b/examples/jsm/nodes/math/MathNode.js index 116841e69e1ad7..61f1d199beacca 100644 --- a/examples/jsm/nodes/math/MathNode.js +++ b/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 ); diff --git a/examples/jsm/nodes/math/MathUtilsNode.js b/examples/jsm/nodes/math/MathUtilsNode.js new file mode 100644 index 00000000000000..6977d599012281 --- /dev/null +++ b/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 ); diff --git a/examples/jsm/renderers/common/Backend.js b/examples/jsm/renderers/common/Backend.js index 2fbd90dd6d642c..78d01f8b95abb5 100644 --- a/examples/jsm/renderers/common/Backend.js +++ b/examples/jsm/renderers/common/Backend.js @@ -90,7 +90,7 @@ class Backend { // utils - resolveTimeStampAsync( renderContext, type ) { } + resolveTimestampAsync( renderContext, type ) { } hasFeatureAsync( name ) { } // return Boolean diff --git a/examples/jsm/renderers/common/Renderer.js b/examples/jsm/renderers/common/Renderer.js index 9561f7c72e94f1..78098ee88c4609 100644 --- a/examples/jsm/renderers/common/Renderer.js +++ b/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; } diff --git a/examples/jsm/renderers/common/StorageBufferAttribute.js b/examples/jsm/renderers/common/StorageBufferAttribute.js index 79f7ed1d7c824b..ddf8ecdb5a21c8 100644 --- a/examples/jsm/renderers/common/StorageBufferAttribute.js +++ b/examples/jsm/renderers/common/StorageBufferAttribute.js @@ -2,7 +2,9 @@ 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 ); @@ -10,12 +12,6 @@ class StorageBufferAttribute extends InstancedBufferAttribute { } - static create( count, itemSize, typeClass = Float32Array ) { - - return new StorageBufferAttribute( new typeClass( count * itemSize ), itemSize ); - - } - } export default StorageBufferAttribute; diff --git a/examples/jsm/renderers/webgpu/WebGPUBackend.js b/examples/jsm/renderers/webgpu/WebGPUBackend.js index 74cdd934142736..8a4686c2b9d535 100644 --- a/examples/jsm/renderers/webgpu/WebGPUBackend.js +++ b/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,11 +1079,11 @@ 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; @@ -1091,21 +1091,21 @@ class WebGPUBackend extends Backend { // 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(); } diff --git a/examples/webgpu_compute_particles.html b/examples/webgpu_compute_particles.html index 95fb31f435801d..fe45364fc0b8d3 100644 --- a/examples/webgpu_compute_particles.html +++ b/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
- Draw ${renderer.info.render.drawCalls} pass in ${renderer.info.timestamp.render}ms`; + Compute ${renderer.info.compute.computeCalls} pass in ${renderer.info.timestamp.compute}ms
+ Draw ${renderer.info.render.drawCalls} pass in ${renderer.info.timestamp.render}ms`; } diff --git a/examples/webgpu_compute_particles_rain.html b/examples/webgpu_compute_particles_rain.html index b431b5decebf85..45b513e2be6328 100644 --- a/examples/webgpu_compute_particles_rain.html +++ b/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(); diff --git a/examples/webgpu_compute_particles_snow.html b/examples/webgpu_compute_particles_snow.html index b22010bd464508..f0f6783798902b 100644 --- a/examples/webgpu_compute_particles_snow.html +++ b/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(); diff --git a/examples/webgpu_compute_points.html b/examples/webgpu_compute_points.html index aa69137ab1ac9c..42ab40f0e6050c 100644 --- a/examples/webgpu_compute_points.html +++ b/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 );