super-three 0.136.1 → 0.144.0

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

@@ -1,5 +1,5 @@
 import { WebGLNodeBuilder } from './WebGLNodeBuilder.js';
-import NodeFrame from '../../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() );
+
+	}
 
 };
 
@@ -23,9 +27,20 @@ Material.prototype.onBeforeRender = function ( renderer, scene, camera, geometry
 		nodeFrame.object = object;
 		nodeFrame.renderer = renderer;
 
-		for ( const node of nodeBuilder.updateNodes ) {
+		const updateNodes = nodeBuilder.updateNodes;
+
+		if ( updateNodes.length > 0 ) {
+
+			// force refresh material uniforms
+			renderer.state.useProgram( null );
+
+			//this.uniformsNeedUpdate = true;
+
+			for ( const node of updateNodes ) {
+
+				nodeFrame.updateNode( node );
 
-			nodeFrame.updateNode( node );
+			}
 
 		}
 

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

@@ -73,9 +73,9 @@ class WebGPUAttributes {
 		const size = array.byteLength + ( ( 4 - ( array.byteLength % 4 ) ) % 4 ); // ensure 4 byte alignment, see #20441
 
 		const buffer = this.device.createBuffer( {
-			size: size,
+			size,
 			usage: usage | GPUBufferUsage.COPY_DST,
-			mappedAtCreation: true,
+			mappedAtCreation: true
 		} );
 
 		new array.constructor( buffer.getMappedRange() ).set( array );
@@ -86,8 +86,8 @@ class WebGPUAttributes {
 
 		return {
 			version: attribute.version,
-			buffer: buffer,
-			usage: usage
+			buffer,
+			usage
 		};
 
 	}

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

@@ -1,5 +1,6 @@
-import { GPULoadOp } from './constants.js';
-import { Color } from 'three';
+import { GPULoadOp, GPUStoreOp } from './constants.js';
+import { Color, Mesh, BoxGeometry, BackSide } from 'three';
+import { context, transformDirection, positionWorld, modelWorldMatrix, 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,38 @@ class WebGPUBackground {
 			_clearAlpha = 1;
 			forceClear = true;
 
+		} else if ( background.isNode === true ) {
+
+			_clearColor.copy( renderer._clearColor );
+			_clearAlpha = renderer._clearAlpha;
+
+			let boxMesh = this.boxMesh;
+
+			if ( boxMesh === null ) {
+
+				const colorNode = context( background, {
+					uvNode: transformDirection( positionWorld, modelWorldMatrix )
+				} );
+
+				const nodeMaterial = new MeshBasicNodeMaterial();
+				nodeMaterial.colorNode = colorNode;
+				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 );
@@ -57,39 +93,45 @@ class WebGPUBackground {
 
 			if ( renderer.autoClearColor === true ) {
 
-				colorAttachment.loadValue = { r: _clearColor.r, g: _clearColor.g, b: _clearColor.b, a: _clearAlpha };
+				_clearColor.multiplyScalar( _clearAlpha );
+
+				colorAttachment.clearValue = { r: _clearColor.r, g: _clearColor.g, b: _clearColor.b, a: _clearAlpha };
+				colorAttachment.loadOp = GPULoadOp.Clear;
+				colorAttachment.storeOp = GPUStoreOp.Store;
 
 			} else {
 
-				colorAttachment.loadValue = GPULoadOp.Load;
+				colorAttachment.loadOp = GPULoadOp.Load;
 
 			}
 
 			if ( renderer.autoClearDepth === true ) {
 
-				depthStencilAttachment.depthLoadValue = renderer._clearDepth;
+				depthStencilAttachment.depthClearValue = renderer._clearDepth;
+				depthStencilAttachment.depthLoadOp = GPULoadOp.Clear;
 
 			} else {
 
-				depthStencilAttachment.depthLoadValue = GPULoadOp.Load;
+				depthStencilAttachment.depthLoadOp = GPULoadOp.Load;
 
 			}
 
 			if ( renderer.autoClearStencil === true ) {
 
-				depthStencilAttachment.stencilLoadValue = renderer._clearStencil;
+				depthStencilAttachment.stencilClearValue = renderer._clearStencil;
+				depthStencilAttachment.stencilLoadOp = GPULoadOp.Clear;
 
 			} else {
 
-				depthStencilAttachment.stencilLoadValue = GPULoadOp.Load;
+				depthStencilAttachment.stencilLoadOp = GPULoadOp.Load;
 
 			}
 
 		} else {
 
-			colorAttachment.loadValue = GPULoadOp.Load;
-			depthStencilAttachment.depthLoadValue = GPULoadOp.Load;
-			depthStencilAttachment.stencilLoadValue = GPULoadOp.Load;
+			colorAttachment.loadOp = GPULoadOp.Load;
+			depthStencilAttachment.depthLoadOp = GPULoadOp.Load;
+			depthStencilAttachment.stencilLoadOp = GPULoadOp.Load;
 
 		}
 

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

@@ -30,9 +30,9 @@ class WebGPUBindings {
 
 			// setup (static) binding layout and (dynamic) binding group
 
-			const renderPipeline = this.renderPipelines.get( object );
+			const pipeline = object.isNode ? this.computePipelines.get( object ) : this.renderPipelines.get( object ).pipeline;
 
-			const bindLayout = renderPipeline.pipeline.getBindGroupLayout( 0 );
+			const bindLayout = pipeline.getBindGroupLayout( 0 );
 			const bindGroup = this._createBindGroup( bindings, bindLayout );
 
 			data = {
@@ -108,12 +108,12 @@ class WebGPUBindings {
 			if ( binding.isUniformBuffer ) {
 
 				const buffer = binding.getBuffer();
-				const bufferGPU = binding.bufferGPU;
-
 				const needsBufferWrite = binding.update();
 
 				if ( needsBufferWrite === true ) {
 
+					const bufferGPU = binding.bufferGPU;
+
 					this.device.queue.writeBuffer( bufferGPU, 0, buffer, 0 );
 
 				}
@@ -121,6 +121,7 @@ class WebGPUBindings {
 			} else if ( binding.isStorageBuffer ) {
 
 				const attribute = binding.attribute;
+
 				this.attributes.update( attribute, false, binding.usage );
 
 			} else if ( binding.isSampler ) {
@@ -188,7 +189,7 @@ class WebGPUBindings {
 
 					binding.bufferGPU = this.device.createBuffer( {
 						size: byteLength,
-						usage: binding.usage,
+						usage: binding.usage
 					} );
 
 				}
@@ -243,8 +244,8 @@ class WebGPUBindings {
 		}
 
 		return this.device.createBindGroup( {
-			layout: layout,
-			entries: entries
+			layout,
+			entries
 		} );
 
 	}

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

@@ -0,0 +1,43 @@
+import WebGPUBinding from './WebGPUBinding.js';
+import { getFloatLength } from './WebGPUBufferUtils.js';
+
+class WebGPUBuffer extends WebGPUBinding {
+
+	constructor( name, type, buffer = null ) {
+
+		super( name );
+
+		this.isBuffer = true;
+
+		this.bytesPerElement = Float32Array.BYTES_PER_ELEMENT;
+		this.type = type;
+		this.visibility = GPUShaderStage.VERTEX;
+
+		this.usage = GPUBufferUsage.COPY_DST;
+
+		this.buffer = buffer;
+		this.bufferGPU = null; // set by the renderer
+
+	}
+
+	getByteLength() {
+
+		return getFloatLength( this.buffer.byteLength );
+
+	}
+
+	getBuffer() {
+
+		return this.buffer;
+
+	}
+
+	update() {
+
+		return true;
+
+	}
+
+}
+
+export default WebGPUBuffer;

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

@@ -2,9 +2,10 @@ import WebGPUProgrammableStage from './WebGPUProgrammableStage.js';
 
 class WebGPUComputePipelines {
 
-	constructor( device ) {
+	constructor( device, nodes ) {
 
 		this.device = device;
+		this.nodes = nodes;
 
 		this.pipelines = new WeakMap();
 		this.stages = {
@@ -13,9 +14,15 @@ class WebGPUComputePipelines {
 
 	}
 
-	get( param ) {
+	has( computeNode ) {
 
-		let pipeline = this.pipelines.get( param );
+		return this.pipelines.get( computeNode ) !== undefined;
+
+	}
+
+	get( computeNode ) {
+
+		let pipeline = this.pipelines.get( computeNode );
 
 		// @TODO: Reuse compute pipeline if possible, introduce WebGPUComputePipeline
 
@@ -23,8 +30,13 @@ class WebGPUComputePipelines {
 
 			const device = this.device;
 
+			// get shader
+
+			const nodeBuilder = this.nodes.get( computeNode );
+			const computeShader = nodeBuilder.computeShader;
+
 			const shader = {
-				computeShader: param.shader
+				computeShader
 			};
 
 			// programmable stage
@@ -33,17 +45,18 @@ class WebGPUComputePipelines {
 
 			if ( stageCompute === undefined ) {
 
- 				stageCompute = new WebGPUProgrammableStage( device, shader.computeShader, 'compute' );
+ 				stageCompute = new WebGPUProgrammableStage( device, computeShader, 'compute' );
 
 				this.stages.compute.set( shader, stageCompute );
 
 			}
 
 			pipeline = device.createComputePipeline( {
-				compute: stageCompute.stage
+				compute: stageCompute.stage,
+				layout: 'auto'
 			} );
 
-			this.pipelines.set( param, pipeline );
+			this.pipelines.set( computeNode, pipeline );
 
 		}
 

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/WebGPUInfo.js

@@ -23,7 +23,7 @@ class WebGPUInfo {
 
 		this.render.drawCalls ++;
 
-		if ( object.isMesh ) {
+		if ( object.isMesh || object.isSprite ) {
 
 			this.render.triangles += instanceCount * ( count / 3 );
 

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

@@ -15,13 +15,7 @@ class WebGPUObjects {
 		const updateMap = this.updateMap;
 		const frame = this.info.render.frame;
 
-		if ( geometry.isBufferGeometry !== true ) {
-
-			throw new Error( 'THREE.WebGPURenderer: This renderer only supports THREE.BufferGeometry for geometries.' );
-
-		}
-
-		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;
 
 	}
 
@@ -46,7 +45,7 @@ class WebGPURenderPipeline {
 
 			vertexBuffers.push( {
 				arrayStride: attribute.arrayStride,
-				attributes: [ { shaderLocation: attribute.slot, offset: 0, format: attribute.format } ],
+				attributes: [ { shaderLocation: attribute.slot, offset: attribute.offset, format: attribute.format } ],
 				stepMode: stepMode
 			} );
 
@@ -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,25 +113,13 @@ class WebGPURenderPipeline {
 				stencilWriteMask: material.stencilWriteMask
 			},
 			multisample: {
-				count: this._sampleCount
-			}
+				count: sampleCount
+			},
+			layout: 'auto'
 		} );
 
 	}
 
-	_getArrayStride( type, bytesPerElement ) {
-
-		// @TODO: This code is GLSL specific. We need to update when we switch to WGSL.
-
-		if ( type === 'float' || type === 'int' || type === 'uint' ) return bytesPerElement;
-		if ( type === 'vec2' || type === 'ivec2' || type === 'uvec2' ) return bytesPerElement * 2;
-		if ( type === 'vec3' || type === 'ivec3' || type === 'uvec3' ) return bytesPerElement * 3;
-		if ( type === 'vec4' || type === 'ivec4' || type === 'uvec4' ) return bytesPerElement * 4;
-
-		console.error( 'THREE.WebGPURenderer: Shader variable type not supported yet.', type );
-
-	}
-
 	_getAlphaBlend( material ) {
 
 		const blending = material.blending;
@@ -156,7 +144,13 @@ class WebGPURenderPipeline {
 				break;
 
 			case AdditiveBlending:
-				// no alphaBlend settings
+
+				alphaBlend = {
+					srcFactor: GPUBlendFactor.Zero,
+					dstFactor: GPUBlendFactor.One,
+					operation: GPUBlendOperation.Add
+				};
+
 				break;
 
 			case SubtractiveBlending:
@@ -174,6 +168,7 @@ class WebGPURenderPipeline {
 				break;
 
 			case MultiplyBlending:
+
 				if ( premultipliedAlpha === true ) {
 
 					alphaBlend = {
@@ -330,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;
@@ -338,6 +332,7 @@ class WebGPURenderPipeline {
 
 			case AdditiveBlending:
 				colorBlend.srcFactor = ( premultipliedAlpha === true ) ? GPUBlendFactor.One : GPUBlendFactor.SrcAlpha;
+				colorBlend.dstFactor = GPUBlendFactor.One;
 				colorBlend.operation = GPUBlendOperation.Add;
 				break;
 
@@ -435,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 ) {
 
@@ -448,8 +443,8 @@ class WebGPURenderPipeline {
 		switch ( material.side ) {
 
 			case FrontSide:
-				descriptor.frontFace = GPUFrontFace.CCW;
-				descriptor.cullMode = GPUCullMode.Back;
+				descriptor.frontFace = GPUFrontFace.CW;
+				descriptor.cullMode = GPUCullMode.Front;
 				break;
 
 			case BackSide:
@@ -458,7 +453,7 @@ class WebGPURenderPipeline {
 				break;
 
 			case DoubleSide:
-				descriptor.frontFace = GPUFrontFace.CCW;
+				descriptor.frontFace = GPUFrontFace.CW;
 				descriptor.cullMode = GPUCullMode.None;
 				break;
 
@@ -472,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;
@@ -714,14 +700,26 @@ class WebGPURenderPipeline {
 			const type = nodeAttribute.type;
 
 			const geometryAttribute = geometry.getAttribute( name );
-			const bytesPerElement = ( geometryAttribute !== undefined ) ? geometryAttribute.array.BYTES_PER_ELEMENT : 4;
+			const bytesPerElement = geometryAttribute.array.BYTES_PER_ELEMENT;
 
-			const arrayStride = this._getArrayStride( type, bytesPerElement );
 			const format = this._getVertexFormat( type, bytesPerElement );
 
+			let arrayStride = geometryAttribute.itemSize * bytesPerElement;
+			let offset = 0;
+
+			if ( geometryAttribute.isInterleavedBufferAttribute === true ) {
+
+				// @TODO: It can be optimized for "vertexBuffers" on RenderPipeline
+
+				arrayStride = geometryAttribute.data.stride * bytesPerElement;
+				offset = geometryAttribute.offset * bytesPerElement;
+
+			}
+
 			attributes.push( {
 				name,
 				arrayStride,
+				offset,
 				format,
 				slot
 			} );

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();
@@ -24,7 +24,6 @@ class WebGPURenderPipelines {
 	get( object ) {
 
 		const device = this.device;
-		const material = object.material;
 
 		const cache = this._getCache( object );
 
@@ -32,6 +31,8 @@ class WebGPURenderPipelines {
 
 		if ( this._needsUpdate( object, cache ) ) {
 
+			const material = object.material;
+
 			// release previous cache
 
 			if ( cache.currentPipeline !== undefined ) {
@@ -124,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 );
@@ -138,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,
@@ -151,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();
@@ -266,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;