super-three 0.136.0 → 0.141.0

package/examples/jsm/renderers/SVGRenderer.js

@@ -18,14 +18,14 @@ class SVGObject extends Object3D {
 
 		super();
 
+		this.isSVGObject = true;
+
 		this.node = node;
 
 	}
 
 }
 
-SVGObject.prototype.isSVGObject = true;
-
 class SVGRenderer {
 
 	constructor() {
@@ -227,7 +227,7 @@ class SVGRenderer {
 
 					if ( _clipBox.intersectsBox( _elemBox ) === true ) {
 
-						renderLine( _v1, _v2, element, material );
+						renderLine( _v1, _v2, material );
 
 					}
 
@@ -397,7 +397,7 @@ class SVGRenderer {
 
 		}
 
-		function renderLine( v1, v2, element, material ) {
+		function renderLine( v1, v2, material ) {
 
 			const path = 'M' + convert( v1.positionScreen.x ) + ',' + convert( v1.positionScreen.y ) + 'L' + convert( v2.positionScreen.x ) + ',' + convert( v2.positionScreen.y );
 

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

@@ -1,4 +1,4 @@
-import Node from '../../nodes/core/Node.js';
+import Node from 'three-nodes/core/Node.js';
 
 class SlotNode extends Node {
 

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

@@ -1,11 +1,21 @@
-import NodeBuilder from '../../nodes/core/NodeBuilder.js';
+import NodeBuilder, { defaultShaderStages } from 'three-nodes/core/NodeBuilder.js';
+import NodeFrame from 'three-nodes/core/NodeFrame.js';
 import SlotNode from './SlotNode.js';
-import GLSLNodeParser from '../../nodes/parsers/GLSLNodeParser.js';
+import GLSLNodeParser from 'three-nodes/parsers/GLSLNodeParser.js';
 import WebGLPhysicalContextNode from './WebGLPhysicalContextNode.js';
 
-import { ShaderChunk, LinearEncoding, RGBAFormat, UnsignedByteType, sRGBEncoding } from 'three';
+import { PerspectiveCamera, ShaderChunk, ShaderLib, UniformsUtils, UniformsLib,
+	LinearEncoding, RGBAFormat, UnsignedByteType, sRGBEncoding } from 'three';
 
-const shaderStages = [ 'vertex', 'fragment' ];
+const nodeFrame = new NodeFrame();
+nodeFrame.camera = new PerspectiveCamera();
+
+const nodeShaderLib = {
+	LineBasicNodeMaterial: ShaderLib.basic,
+	MeshBasicNodeMaterial: ShaderLib.basic,
+	PointsNodeMaterial: ShaderLib.points,
+	MeshStandardNodeMaterial: ShaderLib.standard
+};
 
 function getIncludeSnippet( name ) {
 
@@ -55,6 +65,31 @@ class WebGLNodeBuilder extends NodeBuilder {
 	_parseObject() {
 
 		const material = this.material;
+		let type = material.type;
+
+		// shader lib
+
+		if ( material.isMeshStandardNodeMaterial ) type = 'MeshStandardNodeMaterial';
+		else if ( material.isMeshBasicNodeMaterial ) type = 'MeshBasicNodeMaterial';
+		else if ( material.isPointsNodeMaterial ) type = 'PointsNodeMaterial';
+		else if ( material.isLineBasicNodeMaterial ) type = 'LineBasicNodeMaterial';
+
+		if ( nodeShaderLib[ type ] !== undefined ) {
+
+			const shaderLib = nodeShaderLib[ type ];
+			const shader = this.shader;
+
+			shader.vertexShader = shaderLib.vertexShader;
+			shader.fragmentShader = shaderLib.fragmentShader;
+			shader.uniforms = UniformsUtils.merge( [ shaderLib.uniforms, UniformsLib.lights ] );
+
+		}
+
+		if ( material.isMeshStandardNodeMaterial !== true ) {
+
+			this.replaceCode( 'fragment', getIncludeSnippet( 'tonemapping_fragment' ), '' );
+
+		}
 
 		// parse inputs
 
@@ -106,6 +141,24 @@ class WebGLNodeBuilder extends NodeBuilder {
 
 		}
 
+		if ( material.iridescenceNode && material.iridescenceNode.isNode ) {
+
+			this.addSlot( 'fragment', new SlotNode( material.iridescenceNode, 'IRIDESCENCE', 'float' ) );
+
+		}
+
+		if ( material.iridescenceIORNode && material.iridescenceIORNode.isNode ) {
+
+			this.addSlot( 'fragment', new SlotNode( material.iridescenceIORNode, 'IRIDESCENCE_IOR', 'float' ) );
+
+		}
+
+		if ( material.iridescenceThicknessNode && material.iridescenceThicknessNode.isNode ) {
+
+			this.addSlot( 'fragment', new SlotNode( material.iridescenceThicknessNode, 'IRIDESCENCE_THICKNESS', 'float' ) );
+
+		}
+
 		if ( material.envNode && material.envNode.isNode ) {
 
 			const envRadianceNode = new WebGLPhysicalContextNode( WebGLPhysicalContextNode.RADIANCE, material.envNode );
@@ -130,33 +183,31 @@ class WebGLNodeBuilder extends NodeBuilder {
 
 	}
 
-	getTexture( textureProperty, uvSnippet, biasSnippet = null ) {
+	getTexture( textureProperty, uvSnippet ) {
 
-		if ( biasSnippet !== null ) {
+		return `texture2D( ${textureProperty}, ${uvSnippet} )`;
 
-			return `texture2D( ${textureProperty}, ${uvSnippet}, ${biasSnippet} )`;
+	}
 
-		} else {
+	getTextureBias( textureProperty, uvSnippet, biasSnippet ) {
 
-			return `texture2D( ${textureProperty}, ${uvSnippet} )`;
+		if ( this.material.extensions !== undefined ) this.material.extensions.shaderTextureLOD = true;
 
-		}
+		return `textureLod( ${textureProperty}, ${uvSnippet}, ${biasSnippet} )`;
 
 	}
 
-	getCubeTexture( textureProperty, uvSnippet, biasSnippet = null ) {
+	getCubeTexture( textureProperty, uvSnippet ) {
 
-		const textureCube = 'textureCubeLodEXT'; // textureCubeLodEXT textureLod
+		return `textureCube( ${textureProperty}, ${uvSnippet} )`;
 
-		if ( biasSnippet !== null ) {
-
-			return `${textureCube}( ${textureProperty}, ${uvSnippet}, ${biasSnippet} )`;
+	}
 
-		} else {
+	getCubeTextureBias( textureProperty, uvSnippet, biasSnippet ) {
 
-			return `${textureCube}( ${textureProperty}, ${uvSnippet} )`;
+		if ( this.material.extensions !== undefined ) this.material.extensions.shaderTextureLOD = true;
 
-		}
+		return `textureLod( ${textureProperty}, ${uvSnippet}, ${biasSnippet} )`;
 
 	}
 
@@ -298,11 +349,17 @@ class WebGLNodeBuilder extends NodeBuilder {
 
 	}
 
+	getFrontFacing() {
+
+		return 'gl_FrontFacing';
+
+	}
+
 	buildCode() {
 
 		const shaderData = {};
 
-		for ( const shaderStage of shaderStages ) {
+		for ( const shaderStage of defaultShaderStages ) {
 
 			const uniforms = this.getUniforms( shaderStage );
 			const attributes = this.getAttributes( shaderStage );
@@ -338,7 +395,6 @@ ${this.shader[ getShaderStageProperty( shaderStage ) ]}
 		this.vertexShader = shaderData.vertex;
 		this.fragmentShader = shaderData.fragment;
 
-
 	}
 
 	build() {
@@ -348,6 +404,8 @@ ${this.shader[ getShaderStageProperty( shaderStage ) ]}
 		this._addSnippets();
 		this._addUniforms();
 
+		this._updateUniforms();
+
 		this.shader.vertexShader = this.vertexShader;
 		this.shader.fragmentShader = this.fragmentShader;
 
@@ -363,7 +421,7 @@ ${this.shader[ getShaderStageProperty( shaderStage ) ]}
 
 			if ( node.name === name ) {
 
-				return this.getFlowData( shaderStage, node );
+				return this.getFlowData( node/*, shaderStage*/ );
 
 			}
 
@@ -383,6 +441,9 @@ ${this.shader[ getShaderStageProperty( shaderStage ) ]}
 		const metalnessNode = this.getSlot( 'fragment', 'METALNESS' );
 		const clearcoatNode = this.getSlot( 'fragment', 'CLEARCOAT' );
 		const clearcoatRoughnessNode = this.getSlot( 'fragment', 'CLEARCOAT_ROUGHNESS' );
+		const iridescenceNode = this.getSlot( 'fragment', 'IRIDESCENCE' );
+		const iridescenceIORNode = this.getSlot( 'fragment', 'IRIDESCENCE_IOR' );
+		const iridescenceThicknessNode = this.getSlot( 'fragment', 'IRIDESCENCE_THICKNESS' );
 
 		const positionNode = this.getSlot( 'vertex', 'POSITION' );
 		const sizeNode = this.getSlot( 'vertex', 'SIZE' );
@@ -467,6 +528,36 @@ ${this.shader[ getShaderStageProperty( shaderStage ) ]}
 
 		}
 
+		if ( iridescenceNode !== undefined ) {
+
+			this.addCodeAfterSnippet(
+				'fragment',
+				'iridescence_fragment',
+				`${iridescenceNode.code}\n\tmaterial.iridescence = ${iridescenceNode.result};`
+			);
+
+		}
+
+		if ( iridescenceIORNode !== undefined ) {
+
+			this.addCodeAfterSnippet(
+				'fragment',
+				'iridescence_fragment',
+				`${iridescenceIORNode.code}\n\tmaterial.iridescenceIOR = ${iridescenceIORNode.result};`
+			);
+
+		}
+
+		if ( iridescenceThicknessNode !== undefined ) {
+
+			this.addCodeAfterSnippet(
+				'fragment',
+				'iridescence_fragment',
+				`${iridescenceThicknessNode.code}\n\tmaterial.iridescenceThickness = ${iridescenceThicknessNode.result};`
+			);
+
+		}
+
 		if ( positionNode !== undefined ) {
 
 			this.addCodeAfterInclude(
@@ -487,7 +578,7 @@ ${this.shader[ getShaderStageProperty( shaderStage ) ]}
 
 		}
 
-		for ( const shaderStage of shaderStages ) {
+		for ( const shaderStage of defaultShaderStages ) {
 
 			this.addCodeAfterSnippet(
 				shaderStage,
@@ -501,7 +592,7 @@ ${this.shader[ getShaderStageProperty( shaderStage ) ]}
 
 	_addUniforms() {
 
-		for ( const shaderStage of shaderStages ) {
+		for ( const shaderStage of defaultShaderStages ) {
 
 			// uniforms
 
@@ -515,6 +606,19 @@ ${this.shader[ getShaderStageProperty( shaderStage ) ]}
 
 	}
 
+	_updateUniforms() {
+
+		nodeFrame.object = this.object;
+		nodeFrame.renderer = this.renderer;
+
+		for ( const node of this.updateNodes ) {
+
+			nodeFrame.updateNode( node );
+
+		}
+
+	}
+
 }
 
 export { WebGLNodeBuilder };

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 'THREE.WebGPURenderer: This renderer only supports THREE.BufferGeometry for geometries.';
-
-		}
-
 		if ( updateMap.get( geometry ) !== frame ) {
 
 			this.geometries.update( geometry );