super-three 0.141.0 → 0.147.0

package/examples/jsm/renderers/webgpu/WebGPURenderer.js

@@ -1,4 +1,5 @@
 import { GPUIndexFormat, GPUTextureFormat, GPUStoreOp } from './constants.js';
+import WebGPUAnimation from './WebGPUAnimation.js';
 import WebGPUObjects from './WebGPUObjects.js';
 import WebGPUAttributes from './WebGPUAttributes.js';
 import WebGPUGeometries from './WebGPUGeometries.js';
@@ -12,6 +13,7 @@ import WebGPURenderStates from './WebGPURenderStates.js';
 import WebGPUTextures from './WebGPUTextures.js';
 import WebGPUBackground from './WebGPUBackground.js';
 import WebGPUNodes from './nodes/WebGPUNodes.js';
+import WebGPUUtils from './WebGPUUtils.js';
 
 import { Frustum, Matrix4, Vector3, Color, LinearEncoding } from 'three';
 
@@ -48,15 +50,34 @@ Matrix4.prototype.makeOrthographic = function ( left, right, top, bottom, near,
 	const y = ( top + bottom ) * h;
 	const z = near * p;
 
-	te[ 0 ] = 2 * w;	te[ 4 ] = 0;	te[ 8 ] = 0;	te[ 12 ] = - x;
-	te[ 1 ] = 0;	te[ 5 ] = 2 * h;	te[ 9 ] = 0;	te[ 13 ] = - y;
-	te[ 2 ] = 0;	te[ 6 ] = 0;	te[ 10 ] = - 1 * p;	te[ 14 ] = - z;
-	te[ 3 ] = 0;	te[ 7 ] = 0;	te[ 11 ] = 0;	te[ 15 ] = 1;
+	te[ 0 ] = 2 * w;	te[ 4 ] = 0;		te[ 8 ] = 0;		te[ 12 ] = - x;
+	te[ 1 ] = 0;		te[ 5 ] = 2 * h;	te[ 9 ] = 0;		te[ 13 ] = - y;
+	te[ 2 ] = 0;		te[ 6 ] = 0;		te[ 10 ] = - 1 * p;	te[ 14 ] = - z;
+	te[ 3 ] = 0;		te[ 7 ] = 0;		te[ 11 ] = 0;		te[ 15 ] = 1;
 
 	return this;
 
 };
 
+Frustum.prototype.setFromProjectionMatrix = function ( m ) {
+
+	const planes = this.planes;
+	const me = m.elements;
+	const me0 = me[ 0 ], me1 = me[ 1 ], me2 = me[ 2 ], me3 = me[ 3 ];
+	const me4 = me[ 4 ], me5 = me[ 5 ], me6 = me[ 6 ], me7 = me[ 7 ];
+	const me8 = me[ 8 ], me9 = me[ 9 ], me10 = me[ 10 ], me11 = me[ 11 ];
+	const me12 = me[ 12 ], me13 = me[ 13 ], me14 = me[ 14 ], me15 = me[ 15 ];
+
+	planes[ 0 ].setComponents( me3 - me0, me7 - me4, me11 - me8, me15 - me12 ).normalize();
+	planes[ 1 ].setComponents( me3 + me0, me7 + me4, me11 + me8, me15 + me12 ).normalize();
+	planes[ 2 ].setComponents( me3 + me1, me7 + me5, me11 + me9, me15 + me13 ).normalize();
+	planes[ 3 ].setComponents( me3 - me1, me7 - me5, me11 - me9, me15 - me13 ).normalize();
+	planes[ 4 ].setComponents( me3 - me2, me7 - me6, me11 - me10, me15 - me14 ).normalize();
+	planes[ 5 ].setComponents( me2, me6, me10, me14 ).normalize();
+
+	return this;
+
+};
 
 const _frustum = new Frustum();
 const _projScreenMatrix = new Matrix4();
@@ -112,6 +133,8 @@ class WebGPURenderer {
 		this._textures = null;
 		this._background = null;
 
+		this._animation = new WebGPUAnimation();
+
 		this._renderPassDescriptor = null;
 
 		this._currentRenderState = null;
@@ -127,6 +150,8 @@ class WebGPURenderer {
 
 		this._renderTarget = null;
 
+		this._initialized = false;
+
 		// some parameters require default values other than "undefined"
 
 		this._parameters.antialias = ( parameters.antialias === true );
@@ -148,6 +173,12 @@ class WebGPURenderer {
 
 	async init() {
 
+		if ( this._initialized === true ) {
+
+			throw new Error( 'WebGPURenderer: Device has already been initialized.' );
+
+		}
+
 		const parameters = this._parameters;
 
 		const adapterOptions = {
@@ -172,9 +203,9 @@ class WebGPURenderer {
 		const context = ( parameters.context !== undefined ) ? parameters.context : this.domElement.getContext( 'webgpu' );
 
 		context.configure( {
-			device: device,
+			device,
 			format: GPUTextureFormat.BGRA8Unorm, // this is the only valid context format right now (r121)
-			compositingAlphaMode: 'premultiplied'
+			alphaMode: 'premultiplied'
 		} );
 
 		this._adapter = adapter;
@@ -187,9 +218,10 @@ class WebGPURenderer {
 		this._geometries = new WebGPUGeometries( this._attributes, this._info );
 		this._textures = new WebGPUTextures( device, this._properties, this._info );
 		this._objects = new WebGPUObjects( this._geometries, this._info );
+		this._utils = new WebGPUUtils( this );
 		this._nodes = new WebGPUNodes( this, this._properties );
 		this._computePipelines = new WebGPUComputePipelines( device, this._nodes );
-		this._renderPipelines = new WebGPURenderPipelines( this, device, parameters.sampleCount, this._nodes );
+		this._renderPipelines = new WebGPURenderPipelines( device, this._nodes, this._utils );
 		this._bindings = this._renderPipelines.bindings = new WebGPUBindings( device, this._info, this._properties, this._textures, this._renderPipelines, this._computePipelines, this._attributes, this._nodes );
 		this._renderLists = new WebGPURenderLists();
 		this._renderStates = new WebGPURenderStates();
@@ -211,19 +243,24 @@ class WebGPURenderer {
 		this._setupColorBuffer();
 		this._setupDepthBuffer();
 
-	}
+		this._animation.setNodes( this._nodes );
+		this._animation.start();
+
+		this._initialized = true;
 
-	render( scene, camera ) {
+	}
 
-		// @TODO: move this to animation loop
+	async render( scene, camera ) {
 
-		this._nodes.updateFrame();
+		if ( this._initialized === false ) return await this.init();
 
 		//
 
-		if ( scene.autoUpdate === true ) scene.updateMatrixWorld();
+		if ( this._animation.isAnimating === false ) this._nodes.updateFrame();
 
-		if ( camera.parent === null ) camera.updateMatrixWorld();
+		if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
+
+		if ( camera.parent === null && camera.matrixWorldAutoUpdate === true ) camera.updateMatrixWorld();
 
 		if ( this._info.autoReset === true ) this._info.reset();
 
@@ -255,6 +292,8 @@ class WebGPURenderer {
 
 		if ( renderTarget !== null ) {
 
+			this._textures.initRenderTarget( renderTarget );
+
 			// @TODO: Support RenderTarget with antialiasing.
 
 			const renderTargetProperties = this._properties.get( renderTarget );
@@ -282,7 +321,7 @@ class WebGPURenderer {
 
 		//
 
-		this._background.update( scene );
+		this._background.update( this._currentRenderList, scene );
 
 		// start render pass
 
@@ -333,6 +372,24 @@ class WebGPURenderer {
 
 	}
 
+	setAnimationLoop( callback ) {
+
+		if ( this._initialized === false ) this.init();
+
+		const animation = this._animation;
+
+		animation.setAnimationLoop( callback );
+
+		( callback === null ) ? animation.stop() : animation.start();
+
+	}
+
+	async getArrayFromBuffer( attribute ) {
+
+		return await this._attributes.getArrayBuffer( attribute );
+
+	}
+
 	getContext() {
 
 		return this._context;
@@ -482,55 +539,6 @@ class WebGPURenderer {
 
 	}
 
-	getCurrentEncoding() {
-
-		const renderTarget = this.getRenderTarget();
-		return ( renderTarget !== null ) ? renderTarget.texture.encoding : this.outputEncoding;
-
-	}
-
-	getCurrentColorFormat() {
-
-		let format;
-
-		const renderTarget = this.getRenderTarget();
-
-		if ( renderTarget !== null ) {
-
-			const renderTargetProperties = this._properties.get( renderTarget );
-			format = renderTargetProperties.colorTextureFormat;
-
-		} else {
-
-			format = GPUTextureFormat.BGRA8Unorm; // default context format
-
-		}
-
-		return format;
-
-	}
-
-	getCurrentDepthStencilFormat() {
-
-		let format;
-
-		const renderTarget = this.getRenderTarget();
-
-		if ( renderTarget !== null ) {
-
-			const renderTargetProperties = this._properties.get( renderTarget );
-			format = renderTargetProperties.depthTextureFormat;
-
-		} else {
-
-			format = GPUTextureFormat.Depth24PlusStencil8;
-
-		}
-
-		return format;
-
-	}
-
 	getClearColor( target ) {
 
 		return target.copy( this._clearColor );
@@ -599,31 +607,40 @@ class WebGPURenderer {
 		this._renderStates.dispose();
 		this._textures.dispose();
 
+		this.setRenderTarget( null );
+		this.setAnimationLoop( null );
+
 	}
 
 	setRenderTarget( renderTarget ) {
 
 		this._renderTarget = renderTarget;
 
-		if ( renderTarget !== null ) {
-
-			this._textures.initRenderTarget( renderTarget );
-
-		}
-
 	}
 
-	compute( ...computeNodes ) {
+	async compute( ...computeNodes ) {
+
+		if ( this._initialized === false ) return await this.init();
 
 		const device = this._device;
+		const computePipelines = this._computePipelines;
+
 		const cmdEncoder = device.createCommandEncoder( {} );
 		const passEncoder = cmdEncoder.beginComputePass();
 
 		for ( const computeNode of computeNodes ) {
 
+			// onInit
+
+			if ( computePipelines.has( computeNode ) === false ) {
+
+				computeNode.onInit( { renderer: this } );
+
+			}
+
 			// pipeline
 
-			const pipeline = this._computePipelines.get( computeNode );
+			const pipeline = computePipelines.get( computeNode );
 			passEncoder.setPipeline( pipeline );
 
 			// node
@@ -768,19 +785,7 @@ class WebGPURenderer {
 			// @TODO: Add support for multiple materials per object. This will require to extract
 			// the material from the renderItem object and pass it with its group data to _renderObject().
 
-			const object = renderItem.object;
-
-			object.modelViewMatrix.multiplyMatrices( camera.matrixWorldInverse, object.matrixWorld );
-			object.normalMatrix.getNormalMatrix( object.modelViewMatrix );
-
-			this._objects.update( object );
-
-			// send scene properties to object
-
-			const objectProperties = this._properties.get( object );
-
-			objectProperties.lightsNode = lightsNode;
-			objectProperties.scene = scene;
+			const { object, geometry, material, group } = renderItem;
 
 			if ( camera.isArrayCamera ) {
 
@@ -798,9 +803,7 @@ class WebGPURenderer {
 
 						passEncoder.setViewport( vp.x, vp.y, vp.width, vp.height, minDepth, maxDepth );
 
-						this._nodes.update( object, camera2 );
-						this._bindings.update( object );
-						this._renderObject( object, passEncoder );
+						this._renderObject( object, scene, camera2, geometry, material, group, lightsNode, passEncoder );
 
 					}
 
@@ -808,9 +811,7 @@ class WebGPURenderer {
 
 			} else {
 
-				this._nodes.update( object, camera );
-				this._bindings.update( object );
-				this._renderObject( object, passEncoder );
+				this._renderObject( object, scene, camera, geometry, material, group, lightsNode, passEncoder );
 
 			}
 
@@ -818,10 +819,30 @@ class WebGPURenderer {
 
 	}
 
-	_renderObject( object, passEncoder ) {
+	_renderObject( object, scene, camera, geometry, material, group, lightsNode, passEncoder ) {
 
 		const info = this._info;
 
+		// send scene properties to object
+
+		const objectProperties = this._properties.get( object );
+
+		objectProperties.lightsNode = lightsNode;
+		objectProperties.scene = scene;
+
+		//
+
+		object.onBeforeRender( this, scene, camera, geometry, material, group );
+
+		object.modelViewMatrix.multiplyMatrices( camera.matrixWorldInverse, object.matrixWorld );
+		object.normalMatrix.getNormalMatrix( object.modelViewMatrix );
+
+		// updates
+
+		this._nodes.update( object, camera );
+		this._bindings.update( object );
+		this._objects.update( object );
+
 		// pipeline
 
 		const renderPipeline = this._renderPipelines.get( object );
@@ -834,7 +855,6 @@ class WebGPURenderer {
 
 		// index
 
-		const geometry = object.geometry;
 		const index = geometry.index;
 
 		const hasIndex = ( index !== null );
@@ -964,7 +984,7 @@ class WebGPURenderer {
 				device: device,
 				format: GPUTextureFormat.BGRA8Unorm,
 				usage: GPUTextureUsage.RENDER_ATTACHMENT,
-				compositingAlphaMode: 'premultiplied'
+				alphaMode: 'premultiplied'
 			} );
 
 		}

package/examples/jsm/renderers/webgpu/WebGPUTextureUtils.js

@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-import { GPUIndexFormat, GPUFilterMode, GPUPrimitiveTopology, GPULoadOp, GPUStoreOp } from './constants.js';
+import { GPUTextureViewDimension, GPUIndexFormat, GPUFilterMode, GPUPrimitiveTopology, GPULoadOp, GPUStoreOp } from './constants.js';
 
 // ported from https://github.com/toji/web-texture-tool/blob/master/src/webgpu-mipmap-generator.js
 
@@ -34,7 +34,7 @@ struct VarysStruct {
 	@location( 0 ) vTex : vec2<f32>
 };
 
-@stage( vertex )
+@vertex
 fn main( @builtin( vertex_index ) vertexIndex : u32 ) -> VarysStruct {
 
 	var Varys : VarysStruct;
@@ -68,7 +68,7 @@ var imgSampler : sampler;
 @group( 0 ) @binding( 1 )
 var img : texture_2d<f32>;
 
-@stage( fragment )
+@fragment
 fn main( @location( 0 ) vTex : vec2<f32> ) -> @location( 0 ) vec4<f32> {
 
 	return textureSample( img, imgSampler, vTex );
@@ -132,6 +132,7 @@ fn main( @location( 0 ) vTex : vec2<f32> ) -> @location( 0 ) vec4<f32> {
 		let srcView = textureGPU.createView( {
 			baseMipLevel: 0,
 			mipLevelCount: 1,
+			dimension: GPUTextureViewDimension.TwoD,
 			baseArrayLayer
 		} );
 
@@ -140,6 +141,7 @@ fn main( @location( 0 ) vTex : vec2<f32> ) -> @location( 0 ) vec4<f32> {
 			const dstView = textureGPU.createView( {
 				baseMipLevel: i,
 				mipLevelCount: 1,
+				dimension: GPUTextureViewDimension.TwoD,
 				baseArrayLayer
 			} );
 

package/examples/jsm/renderers/webgpu/WebGPUTextures.js

@@ -428,7 +428,7 @@ class WebGPUTextures {
 
 			if ( image.isDataTexture ) {
 
-				this._copyBufferToTexture( image.image, format, textureGPU, { z : i } );
+				this._copyBufferToTexture( image.image, format, textureGPU, { z: i } );
 
 				if ( needsMipmaps === true ) this._generateMipmaps( textureGPU, textureGPUDescriptor, i );
 
@@ -436,7 +436,7 @@ class WebGPUTextures {
 
 				this._getImageBitmap( image, texture ).then( imageBitmap => {
 
-					this._copyExternalImageToTexture( imageBitmap, textureGPU, { z : i } );
+					this._copyExternalImageToTexture( imageBitmap, textureGPU, { z: i } );
 
 					if ( needsMipmaps === true ) this._generateMipmaps( textureGPU, textureGPUDescriptor, i );
 

package/examples/jsm/renderers/webgpu/WebGPUUtils.js

@@ -0,0 +1,81 @@
+import { GPUPrimitiveTopology, GPUTextureFormat } from './constants.js';
+
+class WebGPUUtils {
+
+	constructor( renderer ) {
+
+		this.renderer = renderer;
+
+	}
+
+	getCurrentEncoding() {
+
+		const renderer = this.renderer;
+
+		const renderTarget = renderer.getRenderTarget();
+		return ( renderTarget !== null ) ? renderTarget.texture.encoding : renderer.outputEncoding;
+
+	}
+
+	getCurrentColorFormat() {
+
+		let format;
+
+		const renderer = this.renderer;
+		const renderTarget = renderer.getRenderTarget();
+
+		if ( renderTarget !== null ) {
+
+			const renderTargetProperties = renderer._properties.get( renderTarget );
+			format = renderTargetProperties.colorTextureFormat;
+
+		} else {
+
+			format = GPUTextureFormat.BGRA8Unorm; // default context format
+
+		}
+
+		return format;
+
+	}
+
+	getCurrentDepthStencilFormat() {
+
+		let format;
+
+		const renderer = this.renderer;
+		const renderTarget = renderer.getRenderTarget();
+
+		if ( renderTarget !== null ) {
+
+			const renderTargetProperties = renderer._properties.get( renderTarget );
+			format = renderTargetProperties.depthTextureFormat;
+
+		} else {
+
+			format = GPUTextureFormat.Depth24PlusStencil8;
+
+		}
+
+		return format;
+
+	}
+
+	getPrimitiveTopology( object ) {
+
+		if ( object.isMesh ) return GPUPrimitiveTopology.TriangleList;
+		else if ( object.isPoints ) return GPUPrimitiveTopology.PointList;
+		else if ( object.isLineSegments ) return GPUPrimitiveTopology.LineList;
+		else if ( object.isLine ) return GPUPrimitiveTopology.LineStrip;
+
+	}
+
+	getSampleCount() {
+
+		return this.renderer._parameters.sampleCount;
+
+	}
+
+}
+
+export default WebGPUUtils;