super-three 0.137.0 → 0.141.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/core/NodeFrame.js';
 
 import { Material } from 'three';
 
@@ -23,10 +23,21 @@ Material.prototype.onBeforeRender = function ( renderer, scene, camera, geometry
 		nodeFrame.object = object;
 		nodeFrame.renderer = renderer;
 
-		for ( const node of nodeBuilder.updateNodes ) {
+		const updateNodes = nodeBuilder.updateNodes;
 
-			nodeFrame.updateNode( node );
+		if ( updateNodes.length > 0 ) {
 
+			// force refresh material uniforms
+			renderer.state.useProgram( null );
+
+			//this.uniformsNeedUpdate = true;
+
+			for ( const node of updateNodes ) {
+
+				nodeFrame.updateNode( node );
+
+			}
+			
 		}
 
 	}

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

@@ -1,7 +1,7 @@
-import ContextNode from '../../nodes/core/ContextNode.js';
-import NormalNode from '../../nodes/accessors/NormalNode.js';
-import ExpressionNode from '../../nodes/core/ExpressionNode.js';
-import FloatNode from '../../nodes/inputs/FloatNode.js';
+import ContextNode from 'three-nodes/core/ContextNode.js';
+import NormalNode from 'three-nodes/accessors/NormalNode.js';
+import ExpressionNode from 'three-nodes/core/ExpressionNode.js';
+import ConstNode from 'three-nodes/core/ConstNode.js';
 
 class WebGLPhysicalContextNode extends ContextNode {
 
@@ -28,7 +28,7 @@ class WebGLPhysicalContextNode extends ContextNode {
 
 		} else if ( scope === WebGLPhysicalContextNode.IRRADIANCE ) {
 
-			roughness = new FloatNode( 1.0 ).setConst( true );
+			roughness = new ConstNode( 1 );
 
 			this.context.uv = new NormalNode( NormalNode.WORLD );
 

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,4 +1,4 @@
-import { GPULoadOp } from './constants.js';
+import { GPULoadOp, GPUStoreOp } from './constants.js';
 import { Color } from 'three';
 
 let _clearAlpha;
@@ -57,39 +57,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,9 @@ class WebGPUComputePipelines {
 
 	}
 
-	get( param ) {
+	get( computeNode ) {
 
-		let pipeline = this.pipelines.get( param );
+		let pipeline = this.pipelines.get( computeNode );
 
 		// @TODO: Reuse compute pipeline if possible, introduce WebGPUComputePipeline
 
@@ -23,8 +24,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 +39,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/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,12 +15,6 @@ 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 ) {
 
 			this.geometries.update( geometry );

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

@@ -46,7 +46,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
 			} );
 
@@ -114,24 +114,12 @@ class WebGPURenderPipeline {
 			},
 			multisample: {
 				count: this._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;
@@ -448,8 +436,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 +446,7 @@ class WebGPURenderPipeline {
 				break;
 
 			case DoubleSide:
-				descriptor.frontFace = GPUFrontFace.CCW;
+				descriptor.frontFace = GPUFrontFace.CW;
 				descriptor.cullMode = GPUCullMode.None;
 				break;
 
@@ -714,14 +702,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

@@ -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 ) {

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

@@ -0,0 +1,66 @@
+import LightsNode from 'three-nodes/lighting/LightsNode.js';
+
+class WebGPURenderState {
+
+	constructor() {
+
+		this.lightsNode = new LightsNode();
+
+		this.lightsArray = [];
+
+	}
+
+	init() {
+
+		this.lightsArray.length = 0;
+
+	}
+
+	pushLight( light ) {
+
+		this.lightsArray.push( light );
+
+	}
+
+	getLightsNode() {
+
+		return this.lightsNode.fromLights( this.lightsArray );
+
+	}
+
+}
+
+class WebGPURenderStates {
+
+	constructor() {
+
+		this.renderStates = new WeakMap();
+
+	}
+
+	get( scene, camera ) {
+
+		const renderStates = this.renderStates;
+
+		let renderState = renderStates.get( scene );
+
+		if ( renderState === undefined ) {
+
+			renderState = new WebGPURenderState();
+			renderStates.set( scene, renderState );
+
+		}
+
+		return renderState;
+
+	}
+
+	dispose() {
+
+		this.renderStates = new WeakMap();
+
+	}
+
+}
+
+export default WebGPURenderStates;