super-three 0.141.0 → 0.147.0

package/examples/jsm/renderers/webgl/nodes/WebGLNodes.js

@@ -1,5 +1,5 @@
 import { WebGLNodeBuilder } from './WebGLNodeBuilder.js';
-import NodeFrame from 'three-nodes/core/NodeFrame.js';
+import { NodeFrame } from 'three/nodes';
 
 import { Material } from 'three';
 
@@ -8,7 +8,11 @@ export const nodeFrame = new NodeFrame();
 
 Material.prototype.onBuild = function ( object, parameters, renderer ) {
 
-	builders.set( this, new WebGLNodeBuilder( object, renderer, parameters ).build() );
+	if ( object.material.isNodeMaterial === true ) {
+
+		builders.set( this, new WebGLNodeBuilder( object, renderer, parameters ).build() );
+
+	}
 
 };
 
@@ -37,7 +41,7 @@ Material.prototype.onBeforeRender = function ( renderer, scene, camera, geometry
 				nodeFrame.updateNode( node );
 
 			}
-			
+
 		}
 
 	}

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

@@ -0,0 +1,58 @@
+class WebGPUAnimation {
+
+	constructor() {
+
+		this.nodes = null;
+
+		this.animationLoop = null;
+		this.requestId = null;
+
+		this.isAnimating = false;
+
+		this.context = self;
+
+	}
+
+	start() {
+
+		if ( this.isAnimating === true || this.animationLoop === null || this.nodes === null ) return;
+
+		this.isAnimating = true;
+
+		const update = ( time, frame ) => {
+
+			this.requestId = self.requestAnimationFrame( update );
+
+			this.animationLoop( time, frame );
+
+			this.nodes.updateFrame();
+
+		};
+
+		this.requestId = self.requestAnimationFrame( update );
+
+	}
+
+	stop() {
+
+		self.cancelAnimationFrame( this.requestId );
+
+		this.isAnimating = false;
+
+	}
+
+	setAnimationLoop( callback ) {
+
+		this.animationLoop = callback;
+
+	}
+
+	setNodes( nodes ) {
+
+		this.nodes = nodes;
+
+	}
+
+}
+
+export default WebGPUAnimation;

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

@@ -23,7 +23,7 @@ class WebGPUAttributes {
 
 		if ( data ) {
 
-			data.buffer.destroy();
+			this._destroyBuffers( data );
 
 			this.buffers.delete( attribute );
 
@@ -51,7 +51,7 @@ class WebGPUAttributes {
 
 		} else if ( usage && usage !== data.usage ) {
 
-			data.buffer.destroy();
+			this._destroyBuffers( data );
 
 			data = this._createBuffer( attribute, usage );
 
@@ -67,6 +67,53 @@ class WebGPUAttributes {
 
 	}
 
+	async getArrayBuffer( attribute ) {
+
+		const data = this.get( attribute );
+		const device = this.device;
+
+		const gpuBuffer = data.buffer;
+		const size = gpuBuffer.size;
+
+		let gpuReadBuffer = data.readBuffer;
+		let needsUnmap = true;
+
+		if ( gpuReadBuffer === null ) {
+
+			gpuReadBuffer = device.createBuffer( {
+				size,
+				usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
+			} );
+
+			needsUnmap = false;
+
+			data.readBuffer = gpuReadBuffer;
+
+		}
+
+		const cmdEncoder = device.createCommandEncoder( {} );
+
+		cmdEncoder.copyBufferToBuffer(
+			gpuBuffer,
+			0,
+			gpuReadBuffer,
+			0,
+			size
+		);
+
+		if ( needsUnmap ) gpuReadBuffer.unmap();
+
+		const gpuCommands = cmdEncoder.finish();
+		device.queue.submit( [ gpuCommands ] );
+
+		await gpuReadBuffer.mapAsync( GPUMapMode.READ );
+
+		const arrayBuffer = gpuReadBuffer.getMappedRange();
+
+		return new Float32Array( arrayBuffer );
+
+	}
+
 	_createBuffer( attribute, usage ) {
 
 		const array = attribute.array;
@@ -74,7 +121,7 @@ class WebGPUAttributes {
 
 		const buffer = this.device.createBuffer( {
 			size,
-			usage: usage | GPUBufferUsage.COPY_DST,
+			usage: usage | GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST,
 			mappedAtCreation: true
 		} );
 
@@ -87,6 +134,7 @@ class WebGPUAttributes {
 		return {
 			version: attribute.version,
 			buffer,
+			readBuffer: null,
 			usage
 		};
 
@@ -94,6 +142,8 @@ class WebGPUAttributes {
 
 	_writeBuffer( buffer, attribute ) {
 
+		const device = this.device;
+
 		const array = attribute.array;
 		const updateRange = attribute.updateRange;
 
@@ -101,7 +151,7 @@ class WebGPUAttributes {
 
 			// Not using update ranges
 
-			this.device.queue.writeBuffer(
+			device.queue.writeBuffer(
 				buffer,
 				0,
 				array,
@@ -110,7 +160,7 @@ class WebGPUAttributes {
 
 		} else {
 
-			this.device.queue.writeBuffer(
+			device.queue.writeBuffer(
 				buffer,
 				0,
 				array,
@@ -124,6 +174,14 @@ class WebGPUAttributes {
 
 	}
 
+	_destroyBuffers( { buffer, readBuffer } ) {
+
+		buffer.destroy();
+
+		if ( readBuffer !== null ) readBuffer.destroy();
+
+	}
+
 }
 
 export default WebGPUAttributes;

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

@@ -1,5 +1,6 @@
 import { GPULoadOp, GPUStoreOp } from './constants.js';
-import { Color } from 'three';
+import { Color, Mesh, BoxGeometry, BackSide, EquirectangularReflectionMapping, EquirectangularRefractionMapping } from 'three';
+import { context, vec2, invert, texture, cubeTexture, transformDirection, positionWorld, modelWorldMatrix, viewportBottomLeft, equirectUV, MeshBasicNodeMaterial } from 'three/nodes';
 
 let _clearAlpha;
 const _clearColor = new Color();
@@ -10,6 +11,8 @@ class WebGPUBackground {
 
 		this.renderer = renderer;
 
+		this.boxMesh = null;
+
 		this.forceClear = false;
 
 	}
@@ -20,10 +23,11 @@ class WebGPUBackground {
 
 	}
 
-	update( scene ) {
+	update( renderList, scene ) {
 
 		const renderer = this.renderer;
-		const background = ( scene.isScene === true ) ? scene.background : null;
+		const background = ( scene.isScene === true ) ? scene.backgroundNode || scene.background : null;
+
 		let forceClear = this.forceClear;
 
 		if ( background === null ) {
@@ -41,6 +45,67 @@ class WebGPUBackground {
 			_clearAlpha = 1;
 			forceClear = true;
 
+		} else if ( background.isNode === true || background.isTexture === true ) {
+
+			_clearColor.copy( renderer._clearColor );
+			_clearAlpha = renderer._clearAlpha;
+
+			let boxMesh = this.boxMesh;
+
+			if ( boxMesh === null ) {
+
+				let node = null;
+
+				if ( background.isCubeTexture === true ) {
+
+					node = cubeTexture( background, transformDirection( positionWorld, modelWorldMatrix ) );
+
+				} else if ( background.isTexture === true ) {
+
+					let nodeUV = null;
+
+					if ( background.mapping === EquirectangularReflectionMapping || background.mapping === EquirectangularRefractionMapping ) {
+
+						const dirNode = transformDirection( positionWorld, modelWorldMatrix );
+
+						nodeUV = equirectUV( dirNode );
+						nodeUV = vec2( nodeUV.x, invert( nodeUV.y ) );
+
+					} else {
+
+						nodeUV = viewportBottomLeft;
+
+					}
+
+					node = texture( background, nodeUV );
+
+				} else /*if ( background.isNode === true )*/ {
+
+					node = context( background, {
+						uvNode: transformDirection( positionWorld, modelWorldMatrix )
+					} );
+
+				}
+
+				const nodeMaterial = new MeshBasicNodeMaterial();
+				nodeMaterial.colorNode = node;
+				nodeMaterial.side = BackSide;
+				nodeMaterial.depthTest = false;
+				nodeMaterial.depthWrite = false;
+				nodeMaterial.fog = false;
+
+				this.boxMesh = boxMesh = new Mesh( new BoxGeometry( 1, 1, 1 ), nodeMaterial );
+
+				boxMesh.onBeforeRender = function ( renderer, scene, camera ) {
+
+					this.matrixWorld.copyPosition( camera.matrixWorld );
+
+				};
+
+			}
+
+			renderList.unshift( boxMesh, boxMesh.geometry, boxMesh.material, 0, 0, null );
+
 		} else {
 
 			console.error( 'THREE.WebGPURenderer: Unsupported background configuration.', background );

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

@@ -14,6 +14,12 @@ class WebGPUComputePipelines {
 
 	}
 
+	has( computeNode ) {
+
+		return this.pipelines.get( computeNode ) !== undefined;
+
+	}
+
 	get( computeNode ) {
 
 		let pipeline = this.pipelines.get( computeNode );

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

@@ -9,6 +9,12 @@ class WebGPUGeometries {
 
 	}
 
+	has( geometry ) {
+
+		return this.geometries.has( geometry );
+
+	}
+
 	update( geometry ) {
 
 		if ( this.geometries.has( geometry ) === false ) {

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

@@ -15,7 +15,7 @@ class WebGPUObjects {
 		const updateMap = this.updateMap;
 		const frame = this.info.render.frame;
 
-		if ( updateMap.get( geometry ) !== frame ) {
+		if ( this.geometries.has( geometry ) === false || updateMap.get( geometry ) !== frame ) {
 
 			this.geometries.update( geometry );
 

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

@@ -1,4 +1,4 @@
-import { GPUPrimitiveTopology, GPUIndexFormat, GPUCompareFunction, GPUFrontFace, GPUCullMode, GPUVertexFormat, GPUBlendFactor, GPUBlendOperation, BlendColorFactor, OneMinusBlendColorFactor, GPUColorWriteFlags, GPUStencilOperation, GPUInputStepMode } from './constants.js';
+import { GPUIndexFormat, GPUCompareFunction, GPUFrontFace, GPUCullMode, GPUVertexFormat, GPUBlendFactor, GPUBlendOperation, BlendColorFactor, OneMinusBlendColorFactor, GPUColorWriteFlags, GPUStencilOperation, GPUInputStepMode } from './constants.js';
 import {
 	FrontSide, BackSide, DoubleSide,
 	NeverDepth, AlwaysDepth, LessDepth, LessEqualDepth, EqualDepth, GreaterEqualDepth, GreaterDepth, NotEqualDepth,
@@ -11,7 +11,7 @@ import {
 
 class WebGPURenderPipeline {
 
-	constructor( device, renderer, sampleCount ) {
+	constructor( device, utils ) {
 
 		this.cacheKey = null;
 		this.shaderAttributes = null;
@@ -20,8 +20,7 @@ class WebGPURenderPipeline {
 		this.usedTimes = 0;
 
 		this._device = device;
-		this._renderer = renderer;
-		this._sampleCount = sampleCount;
+		this._utils = utils;
 
 	}
 
@@ -89,8 +88,9 @@ class WebGPURenderPipeline {
 		const primitiveState = this._getPrimitiveState( object, material );
 		const colorWriteMask = this._getColorWriteMask( material );
 		const depthCompare = this._getDepthCompare( material );
-		const colorFormat = this._renderer.getCurrentColorFormat();
-		const depthStencilFormat = this._renderer.getCurrentDepthStencilFormat();
+		const colorFormat = this._utils.getCurrentColorFormat();
+		const depthStencilFormat = this._utils.getCurrentDepthStencilFormat();
+		const sampleCount = this._utils.getSampleCount();
 
 		this.pipeline = this._device.createRenderPipeline( {
 			vertex: Object.assign( {}, stageVertex.stage, { buffers: vertexBuffers } ),
@@ -113,7 +113,7 @@ class WebGPURenderPipeline {
 				stencilWriteMask: material.stencilWriteMask
 			},
 			multisample: {
-				count: this._sampleCount
+				count: sampleCount
 			},
 			layout: 'auto'
 		} );
@@ -144,7 +144,13 @@ class WebGPURenderPipeline {
 				break;
 
 			case AdditiveBlending:
-				// no alphaBlend settings
+
+				alphaBlend = {
+					srcFactor: GPUBlendFactor.Zero,
+					dstFactor: GPUBlendFactor.One,
+					operation: GPUBlendOperation.Add
+				};
+
 				break;
 
 			case SubtractiveBlending:
@@ -162,6 +168,7 @@ class WebGPURenderPipeline {
 				break;
 
 			case MultiplyBlending:
+
 				if ( premultipliedAlpha === true ) {
 
 					alphaBlend = {
@@ -318,7 +325,6 @@ class WebGPURenderPipeline {
 		switch ( blending ) {
 
 			case NormalBlending:
-
 				colorBlend.srcFactor = ( premultipliedAlpha === true ) ? GPUBlendFactor.One : GPUBlendFactor.SrcAlpha;
 				colorBlend.dstFactor = GPUBlendFactor.OneMinusSrcAlpha;
 				colorBlend.operation = GPUBlendOperation.Add;
@@ -326,6 +332,7 @@ class WebGPURenderPipeline {
 
 			case AdditiveBlending:
 				colorBlend.srcFactor = ( premultipliedAlpha === true ) ? GPUBlendFactor.One : GPUBlendFactor.SrcAlpha;
+				colorBlend.dstFactor = GPUBlendFactor.One;
 				colorBlend.operation = GPUBlendOperation.Add;
 				break;
 
@@ -423,7 +430,7 @@ class WebGPURenderPipeline {
 
 		const descriptor = {};
 
-		descriptor.topology = this._getPrimitiveTopology( object );
+		descriptor.topology = this._utils.getPrimitiveTopology( object );
 
 		if ( object.isLine === true && object.isLineSegments !== true ) {
 
@@ -460,15 +467,6 @@ class WebGPURenderPipeline {
 
 	}
 
-	_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;
-
-	}
-
 	_getStencilCompare( material ) {
 
 		let stencilCompare;

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

@@ -3,13 +3,13 @@ import WebGPUProgrammableStage from './WebGPUProgrammableStage.js';
 
 class WebGPURenderPipelines {
 
-	constructor( renderer, device, sampleCount, nodes, bindings = null ) {
+	constructor( device, nodes, utils ) {
 
-		this.renderer = renderer;
 		this.device = device;
-		this.sampleCount = sampleCount;
 		this.nodes = nodes;
-		this.bindings = bindings;
+		this.utils = utils;
+
+		this.bindings = null;
 
 		this.pipelines = [];
 		this.objectCache = new WeakMap();
@@ -125,7 +125,7 @@ class WebGPURenderPipelines {
 
 		if ( pipeline === undefined ) {
 
-			pipeline = new WebGPURenderPipeline( this.device, this.renderer, this.sampleCount );
+			pipeline = new WebGPURenderPipeline( this.device, this.utils );
 			pipeline.init( cacheKey, stageVertex, stageFragment, object, nodeBuilder );
 
 			pipelines.push( pipeline );
@@ -139,7 +139,7 @@ class WebGPURenderPipelines {
 	_computeCacheKey( stageVertex, stageFragment, object ) {
 
 		const material = object.material;
-		const renderer = this.renderer;
+		const utils = this.utils;
 
 		const parameters = [
 			stageVertex.id, stageFragment.id,
@@ -152,8 +152,9 @@ class WebGPURenderPipelines {
 			material.stencilFail, material.stencilZFail, material.stencilZPass,
 			material.stencilFuncMask, material.stencilWriteMask,
 			material.side,
-			this.sampleCount,
-			renderer.getCurrentEncoding(), renderer.getCurrentColorFormat(), renderer.getCurrentDepthStencilFormat()
+			utils.getSampleCount(),
+			utils.getCurrentEncoding(), utils.getCurrentColorFormat(), utils.getCurrentDepthStencilFormat(),
+			utils.getPrimitiveTopology( object )
 		];
 
 		return parameters.join();
@@ -267,16 +268,17 @@ class WebGPURenderPipelines {
 
 		// check renderer state
 
-		const renderer = this.renderer;
+		const utils = this.utils;
 
-		const encoding = renderer.getCurrentEncoding();
-		const colorFormat = renderer.getCurrentColorFormat();
-		const depthStencilFormat = renderer.getCurrentDepthStencilFormat();
+		const sampleCount = utils.getSampleCount();
+		const encoding = utils.getCurrentEncoding();
+		const colorFormat = utils.getCurrentColorFormat();
+		const depthStencilFormat = utils.getCurrentDepthStencilFormat();
 
-		if ( cache.sampleCount !== this.sampleCount || cache.encoding !== encoding ||
+		if ( cache.sampleCount !== sampleCount || cache.encoding !== encoding ||
 			cache.colorFormat !== colorFormat || cache.depthStencilFormat !== depthStencilFormat ) {
 
-			cache.sampleCount = this.sampleCount;
+			cache.sampleCount = sampleCount;
 			cache.encoding = encoding;
 			cache.colorFormat = colorFormat;
 			cache.depthStencilFormat = depthStencilFormat;

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

@@ -1,4 +1,4 @@
-import LightsNode from 'three-nodes/lighting/LightsNode.js';
+import { LightsNode } from 'three/nodes';
 
 class WebGPURenderState {
 
@@ -38,7 +38,7 @@ class WebGPURenderStates {
 
 	}
 
-	get( scene, camera ) {
+	get( scene, /* camera */ ) {
 
 		const renderStates = this.renderStates;