super-three 0.133.3 → 0.136.0

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

@@ -1,5 +1,6 @@
 import NodeBuilder from '../../nodes/core/NodeBuilder.js';
-import NodeSlot from '../../nodes/core/NodeSlot.js';
+import SlotNode from './SlotNode.js';
+import GLSLNodeParser from '../../nodes/parsers/GLSLNodeParser.js';
 import WebGLPhysicalContextNode from './WebGLPhysicalContextNode.js';
 
 import { ShaderChunk, LinearEncoding, RGBAFormat, UnsignedByteType, sRGBEncoding } from 'three';
@@ -20,17 +21,38 @@ function getShaderStageProperty( shaderStage ) {
 
 class WebGLNodeBuilder extends NodeBuilder {
 
-	constructor( material, renderer, shader ) {
+	constructor( object, renderer, shader ) {
 
-		super( material, renderer );
+		super( object, renderer, new GLSLNodeParser() );
 
 		this.shader = shader;
+		this.slots = { vertex: [], fragment: [] };
 
-		this._parseMaterial();
+		this._parseObject();
 
 	}
 
-	_parseMaterial() {
+	addSlot( shaderStage, slotNode ) {
+
+		this.slots[ shaderStage ].push( slotNode );
+
+		return this.addFlow( shaderStage, slotNode );
+
+	}
+
+	addFlowCode( code ) {
+
+		if ( ! /;\s*$/.test( code ) ) {
+
+			code += ';';
+
+		}
+
+		super.addFlowCode( code + '\n\t' );
+
+	}
+
+	_parseObject() {
 
 		const material = this.material;
 
@@ -38,49 +60,49 @@ class WebGLNodeBuilder extends NodeBuilder {
 
 		if ( material.colorNode && material.colorNode.isNode ) {
 
-			this.addSlot( 'fragment', new NodeSlot( material.colorNode, 'COLOR', 'vec4' ) );
+			this.addSlot( 'fragment', new SlotNode( material.colorNode, 'COLOR', 'vec4' ) );
 
 		}
 
 		if ( material.opacityNode && material.opacityNode.isNode ) {
 
-			this.addSlot( 'fragment', new NodeSlot( material.opacityNode, 'OPACITY', 'float' ) );
+			this.addSlot( 'fragment', new SlotNode( material.opacityNode, 'OPACITY', 'float' ) );
 
 		}
 
 		if ( material.normalNode && material.normalNode.isNode ) {
 
-			this.addSlot( 'fragment', new NodeSlot( material.normalNode, 'NORMAL', 'vec3' ) );
+			this.addSlot( 'fragment', new SlotNode( material.normalNode, 'NORMAL', 'vec3' ) );
 
 		}
 
 		if ( material.emissiveNode && material.emissiveNode.isNode ) {
 
-			this.addSlot( 'fragment', new NodeSlot( material.emissiveNode, 'EMISSIVE', 'vec3' ) );
+			this.addSlot( 'fragment', new SlotNode( material.emissiveNode, 'EMISSIVE', 'vec3' ) );
 
 		}
 
 		if ( material.metalnessNode && material.metalnessNode.isNode ) {
 
-			this.addSlot( 'fragment', new NodeSlot( material.metalnessNode, 'METALNESS', 'float' ) );
+			this.addSlot( 'fragment', new SlotNode( material.metalnessNode, 'METALNESS', 'float' ) );
 
 		}
 
 		if ( material.roughnessNode && material.roughnessNode.isNode ) {
 
-			this.addSlot( 'fragment', new NodeSlot( material.roughnessNode, 'ROUGHNESS', 'float' ) );
+			this.addSlot( 'fragment', new SlotNode( material.roughnessNode, 'ROUGHNESS', 'float' ) );
 
 		}
 
 		if ( material.clearcoatNode && material.clearcoatNode.isNode ) {
 
-			this.addSlot( 'fragment', new NodeSlot( material.clearcoatNode, 'CLEARCOAT', 'float' ) );
+			this.addSlot( 'fragment', new SlotNode( material.clearcoatNode, 'CLEARCOAT', 'float' ) );
 
 		}
 
 		if ( material.clearcoatRoughnessNode && material.clearcoatRoughnessNode.isNode ) {
 
-			this.addSlot( 'fragment', new NodeSlot( material.clearcoatRoughnessNode, 'CLEARCOAT_ROUGHNESS', 'float' ) );
+			this.addSlot( 'fragment', new SlotNode( material.clearcoatRoughnessNode, 'CLEARCOAT_ROUGHNESS', 'float' ) );
 
 		}
 
@@ -89,20 +111,20 @@ class WebGLNodeBuilder extends NodeBuilder {
 			const envRadianceNode = new WebGLPhysicalContextNode( WebGLPhysicalContextNode.RADIANCE, material.envNode );
 			const envIrradianceNode = new WebGLPhysicalContextNode( WebGLPhysicalContextNode.IRRADIANCE, material.envNode );
 
-			this.addSlot( 'fragment', new NodeSlot( envRadianceNode, 'RADIANCE', 'vec3' ) );
-			this.addSlot( 'fragment', new NodeSlot( envIrradianceNode, 'IRRADIANCE', 'vec3' ) );
+			this.addSlot( 'fragment', new SlotNode( envRadianceNode, 'RADIANCE', 'vec3' ) );
+			this.addSlot( 'fragment', new SlotNode( envIrradianceNode, 'IRRADIANCE', 'vec3' ) );
 
 		}
 
-		if ( material.sizeNode && material.sizeNode.isNode ) {
+		if ( material.positionNode && material.positionNode.isNode ) {
 
-			this.addSlot( 'vertex', new NodeSlot( material.sizeNode, 'SIZE', 'float' ) );
+			this.addSlot( 'vertex', new SlotNode( material.positionNode, 'POSITION', 'vec3' ) );
 
 		}
 
-		if ( material.positionNode && material.positionNode.isNode ) {
+		if ( material.sizeNode && material.sizeNode.isNode ) {
 
-			this.addSlot( 'vertex', new NodeSlot( material.positionNode, 'POSITION', 'vec3' ) );
+			this.addSlot( 'vertex', new SlotNode( material.sizeNode, 'SIZE', 'float' ) );
 
 		}
 
@@ -194,7 +216,7 @@ class WebGLNodeBuilder extends NodeBuilder {
 
 	}
 
-	getVarys( shaderStage ) {
+	getVarys( /* shaderStage */ ) {
 
 		let snippet = '';
 
@@ -216,7 +238,7 @@ class WebGLNodeBuilder extends NodeBuilder {
 
 		const shaderProperty = getShaderStageProperty( shaderStage );
 
-		let source = this.shader[ shaderProperty ];
+		let source = this[ shaderProperty ];
 
 		const index = source.indexOf( snippet );
 
@@ -229,7 +251,7 @@ class WebGLNodeBuilder extends NodeBuilder {
 
 		}
 
-		this.shader[ shaderProperty ] = source;
+		this[ shaderProperty ] = source;
 
 	}
 
@@ -276,125 +298,208 @@ class WebGLNodeBuilder extends NodeBuilder {
 
 	}
 
+	buildCode() {
+
+		const shaderData = {};
+
+		for ( const shaderStage of shaderStages ) {
+
+			const uniforms = this.getUniforms( shaderStage );
+			const attributes = this.getAttributes( shaderStage );
+			const varys = this.getVarys( shaderStage );
+			const vars = this.getVars( shaderStage );
+			const codes = this.getCodes( shaderStage );
+
+			shaderData[ shaderStage ] = `${this.getSignature()}
+// <node_builder>
+
+// uniforms
+${uniforms}
+
+// attributes
+${attributes}
+
+// varys
+${varys}
+
+// vars
+${vars}
+
+// codes
+${codes}
+
+// </node_builder>
+
+${this.shader[ getShaderStageProperty( shaderStage ) ]}
+`;
+
+		}
+
+		this.vertexShader = shaderData.vertex;
+		this.fragmentShader = shaderData.fragment;
+
+
+	}
+
 	build() {
 
 		super.build();
 
 		this._addSnippets();
-		this._buildShader();
+		this._addUniforms();
+
+		this.shader.vertexShader = this.vertexShader;
+		this.shader.fragmentShader = this.fragmentShader;
 
 		return this;
 
 	}
 
-	_addSnippets() {
+	getSlot( shaderStage, name ) {
 
-		this.parseInclude( 'fragment', 'lights_physical_fragment' );
+		const slots = this.slots[ shaderStage ];
+
+		for ( const node of slots ) {
 
-		this.addCodeAfterInclude( 'fragment', 'normal_fragment_begin',
-			`#ifdef NODE_NORMAL
+			if ( node.name === name ) {
 
-				NODE_CODE_NORMAL
-				normal = NODE_NORMAL;
+				return this.getFlowData( shaderStage, node );
 
-			#endif` );
+			}
+
+		}
+
+	}
+
+	_addSnippets() {
 
-		this.addCodeAfterInclude( 'fragment', 'color_fragment',
-			`#ifdef NODE_COLOR
+		this.parseInclude( 'fragment', 'lights_physical_fragment' );
 
-				NODE_CODE_COLOR
-				diffuseColor = NODE_COLOR;
+		const colorSlot = this.getSlot( 'fragment', 'COLOR' );
+		const opacityNode = this.getSlot( 'fragment', 'OPACITY' );
+		const normalSlot = this.getSlot( 'fragment', 'NORMAL' );
+		const emissiveNode = this.getSlot( 'fragment', 'EMISSIVE' );
+		const roughnessNode = this.getSlot( 'fragment', 'ROUGHNESS' );
+		const metalnessNode = this.getSlot( 'fragment', 'METALNESS' );
+		const clearcoatNode = this.getSlot( 'fragment', 'CLEARCOAT' );
+		const clearcoatRoughnessNode = this.getSlot( 'fragment', 'CLEARCOAT_ROUGHNESS' );
 
-			#endif` );
+		const positionNode = this.getSlot( 'vertex', 'POSITION' );
+		const sizeNode = this.getSlot( 'vertex', 'SIZE' );
 
-		this.addCodeAfterInclude( 'fragment', 'alphamap_fragment',
-			`#ifdef NODE_OPACITY
+		if ( colorSlot !== undefined ) {
 
-				NODE_CODE_OPACITY
-				diffuseColor.a *= NODE_OPACITY;
+			this.addCodeAfterInclude(
+				'fragment',
+				'color_fragment',
+				`${colorSlot.code}\n\tdiffuseColor = ${colorSlot.result};`
+			);
 
-			#endif` );
+		}
 
-		this.addCodeAfterInclude( 'fragment', 'emissivemap_fragment',
-			`#ifdef NODE_EMISSIVE
+		if ( opacityNode !== undefined ) {
 
-				NODE_CODE_EMISSIVE
-				totalEmissiveRadiance = NODE_EMISSIVE;
+			this.addCodeAfterInclude(
+				'fragment',
+				'alphatest_fragment',
+				`${opacityNode.code}\n\tdiffuseColor.a = ${opacityNode.result};`
+			);
 
-			#endif` );
+		}
 
-		this.addCodeAfterInclude( 'fragment', 'roughnessmap_fragment',
-			`#ifdef NODE_ROUGHNESS
+		if ( normalSlot !== undefined ) {
 
-				NODE_CODE_ROUGHNESS
-				roughnessFactor = NODE_ROUGHNESS;
+			this.addCodeAfterInclude(
+				'fragment',
+				'normal_fragment_begin',
+				`${normalSlot.code}\n\tnormal = ${normalSlot.result};`
+			);
 
-			#endif` );
+		}
 
-		this.addCodeAfterInclude( 'fragment', 'metalnessmap_fragment',
-			`#ifdef NODE_METALNESS
+		if ( emissiveNode !== undefined ) {
 
-				NODE_CODE_METALNESS
-				metalnessFactor = NODE_METALNESS;
+			this.addCodeAfterInclude(
+				'fragment',
+				'emissivemap_fragment',
+				`${emissiveNode.code}\n\ttotalEmissiveRadiance = ${emissiveNode.result};`
+			);
 
-			#endif` );
+		}
 
-		this.addCodeAfterSnippet( 'fragment', 'material.clearcoatRoughness = clearcoatRoughness;',
-			`#ifdef NODE_CLEARCOAT
+		if ( roughnessNode !== undefined ) {
 
-				NODE_CODE_CLEARCOAT
-				material.clearcoat = NODE_CLEARCOAT;
+			this.addCodeAfterInclude(
+				'fragment',
+				'roughnessmap_fragment',
+				`${roughnessNode.code}\n\troughnessFactor = ${roughnessNode.result};`
+			);
 
-			#endif
+		}
 
-			#ifdef NODE_CLEARCOAT_ROUGHNESS
+		if ( metalnessNode !== undefined ) {
 
-				NODE_CODE_CLEARCOAT_ROUGHNESS
-				material.clearcoatRoughness = NODE_CLEARCOAT_ROUGHNESS;
+			this.addCodeAfterInclude(
+				'fragment',
+				'metalnessmap_fragment',
+				`${metalnessNode.code}\n\tmetalnessFactor = ${metalnessNode.result};`
+			);
 
-			#endif` );
+		}
 
-		this.addCodeAfterInclude( 'fragment', 'lights_fragment_begin',
-			`#ifdef NODE_RADIANCE
+		if ( clearcoatNode !== undefined ) {
 
-				NODE_CODE_RADIANCE
-				radiance += NODE_RADIANCE;
+			this.addCodeAfterSnippet(
+				'fragment',
+				'material.clearcoatRoughness = clearcoatRoughness;',
+				`${clearcoatNode.code}\n\tmaterial.clearcoat = ${clearcoatNode.result};`
+			);
 
-				NODE_CODE_IRRADIANCE
-				iblIrradiance += PI * NODE_IRRADIANCE;
+		}
 
-			#endif` );
+		if ( clearcoatRoughnessNode !== undefined ) {
 
-		this.addCodeAfterInclude( 'vertex', 'begin_vertex',
-			`#ifdef NODE_POSITION
+			this.addCodeAfterSnippet(
+				'fragment',
+				'material.clearcoatRoughness = clearcoatRoughness;',
+				`${clearcoatRoughnessNode.code}\n\tmaterial.clearcoatRoughness = ${clearcoatRoughnessNode.result};`
+			);
 
-				NODE_CODE_POSITION
-				transformed = NODE_POSITION;
+		}
 
-			#endif` );
+		if ( positionNode !== undefined ) {
 
-		this.addCodeAfterSnippet( 'vertex', 'gl_PointSize = size;',
-			`#ifdef NODE_SIZE
+			this.addCodeAfterInclude(
+				'vertex',
+				'begin_vertex',
+				`${positionNode.code}\n\ttransformed = ${positionNode.result};`
+			);
 
-				NODE_CODE_SIZE
-				gl_PointSize = NODE_SIZE;
+		}
 
-			#endif` );
+		if ( sizeNode !== undefined ) {
 
-		for ( const shaderStage of shaderStages ) {
+			this.addCodeAfterSnippet(
+				'vertex',
+				'gl_PointSize = size;',
+				`${sizeNode.code}\n\tgl_PointSize = ${sizeNode.result};`
+			);
 
-			this.addCodeAfterSnippet( shaderStage, 'main() {',
-				`#ifdef NODE_CODE
+		}
 
-					NODE_CODE
+		for ( const shaderStage of shaderStages ) {
 
-				#endif` );
+			this.addCodeAfterSnippet(
+				shaderStage,
+				'main() {',
+				this.flowCode[ shaderStage ]
+			);
 
 		}
 
 	}
 
-	_buildShader() {
+	_addUniforms() {
 
 		for ( const shaderStage of shaderStages ) {
 
@@ -406,14 +511,6 @@ class WebGLNodeBuilder extends NodeBuilder {
 
 			}
 
-			// code
-
-			const shaderProperty = getShaderStageProperty( shaderStage );
-
-			const nodeCode = this[ shaderProperty ];
-
-			this.shader[ shaderProperty ] = nodeCode + this.shader[ shaderProperty ];
-
 		}
 
 	}

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

@@ -6,9 +6,9 @@ import { Material } from 'three';
 const builders = new WeakMap();
 export const nodeFrame = new NodeFrame();
 
-Material.prototype.onBuild = function ( parameters, renderer ) {
+Material.prototype.onBuild = function ( object, parameters, renderer ) {
 
-	builders.set( this, new WebGLNodeBuilder( this, renderer, parameters ).build() );
+	builders.set( this, new WebGLNodeBuilder( object, renderer, parameters ).build() );
 
 };
 

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

@@ -30,11 +30,11 @@ class WebGLPhysicalContextNode extends ContextNode {
 
 			roughness = new FloatNode( 1.0 ).setConst( true );
 
-			this.setContextValue( 'uv', new NormalNode( NormalNode.WORLD ) );
+			this.context.uv = new NormalNode( NormalNode.WORLD );
 
 		}
 
-		this.setContextValue( 'roughness', roughness );
+		this.context.roughness = roughness;
 
 		return super.generate( builder, output );
 

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

@@ -77,7 +77,7 @@ class WebGPUBackground {
 
 			if ( renderer.autoClearStencil === true ) {
 
-				depthStencilAttachment.stencilLoadValue = renderer._clearDepth;
+				depthStencilAttachment.stencilLoadValue = renderer._clearStencil;
 
 			} else {
 

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

@@ -49,6 +49,12 @@ class WebGPUBindings {
 
 	}
 
+	remove( object ) {
+
+		this.uniformsData.delete( object );
+
+	}
+
 	getForCompute( param ) {
 
 		let data = this.uniformsData.get( param );
@@ -78,7 +84,7 @@ class WebGPUBindings {
 
 	}
 
-	update( object, camera ) {
+	update( object ) {
 
 		const textures = this.textures;
 
@@ -108,12 +114,7 @@ class WebGPUBindings {
 
 				if ( needsBufferWrite === true ) {
 
-					this.device.queue.writeBuffer(
-						bufferGPU,
-						0,
-						buffer,
-						0
-					);
+					this.device.queue.writeBuffer( bufferGPU, 0, buffer, 0 );
 
 				}
 
@@ -141,10 +142,10 @@ class WebGPUBindings {
 
 				const texture = binding.getTexture();
 
-				const forceUpdate = textures.updateTexture( texture );
+				const needsTextureRefresh = textures.updateTexture( texture );
 				const textureGPU = textures.getTextureGPU( texture );
 
-				if ( binding.textureGPU !== textureGPU || forceUpdate === true ) {
+				if ( textureGPU !== undefined && binding.textureGPU !== textureGPU || needsTextureRefresh === true ) {
 
 					binding.textureGPU = textureGPU;
 					needsBindGroupRefresh = true;

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

@@ -2,10 +2,9 @@ import WebGPUProgrammableStage from './WebGPUProgrammableStage.js';
 
 class WebGPUComputePipelines {
 
-	constructor( device, glslang ) {
+	constructor( device ) {
 
 		this.device = device;
-		this.glslang = glslang;
 
 		this.pipelines = new WeakMap();
 		this.stages = {
@@ -23,7 +22,6 @@ class WebGPUComputePipelines {
 		if ( pipeline === undefined ) {
 
 			const device = this.device;
-			const glslang = this.glslang;
 
 			const shader = {
 				computeShader: param.shader
@@ -35,7 +33,7 @@ class WebGPUComputePipelines {
 
 			if ( stageCompute === undefined ) {
 
- 				stageCompute = new WebGPUProgrammableStage( device, glslang, shader.computeShader, 'compute' );
+ 				stageCompute = new WebGPUProgrammableStage( device, shader.computeShader, 'compute' );
 
 				this.stages.compute.set( shader, stageCompute );
 

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

@@ -2,7 +2,7 @@ let _id = 0;
 
 class WebGPUProgrammableStage {
 
-	constructor( device, glslang, code, type ) {
+	constructor( device, code, type ) {
 
 		this.id = _id ++;
 
@@ -10,10 +10,8 @@ class WebGPUProgrammableStage {
 		this.type = type;
 		this.usedTimes = 0;
 
-		const byteCode = glslang.compileGLSL( code, type );
-
 		this.stage = {
-			module: device.createShaderModule( { code: byteCode } ),
+			module: device.createShaderModule( { code } ),
 			entryPoint: 'main'
 		};
 

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

@@ -32,7 +32,7 @@ class WebGPURenderPipeline {
 
 		// determine shader attributes
 
-		const shaderAttributes = this._parseShaderAttributes( nodeBuilder.vertexShader, geometry );
+		const shaderAttributes = this._getShaderAttributes( nodeBuilder, geometry );
 
 		// vertex buffers
 
@@ -701,42 +701,34 @@ class WebGPURenderPipeline {
 
 	}
 
-	_parseShaderAttributes( shader, geometry ) {
-
-		// find "layout (location = num) in type name" in vertex shader
-
-		const regex = /\s*layout\s*\(\s*location\s*=\s*(?<location>[0-9]+)\s*\)\s*in\s+(?<type>\w+)\s+(?<name>\w+)\s*;/gmi;
-		let shaderAttribute = null;
+	_getShaderAttributes( nodeBuilder, geometry ) {
 
+		const nodeAttributes = nodeBuilder.attributes;
 		const attributes = [];
 
-		while ( shaderAttribute = regex.exec( shader ) ) {
+		for ( let slot = 0; slot < nodeAttributes.length; slot ++ ) {
 
-			const name = shaderAttribute.groups.name;
+			const nodeAttribute = nodeAttributes[ slot ];
+
+			const name = nodeAttribute.name;
+			const type = nodeAttribute.type;
 
 			const geometryAttribute = geometry.getAttribute( name );
 			const bytesPerElement = ( geometryAttribute !== undefined ) ? geometryAttribute.array.BYTES_PER_ELEMENT : 4;
 
-			const shaderLocation = parseInt( shaderAttribute.groups.location );
-			const arrayStride = this._getArrayStride( shaderAttribute.groups.type, bytesPerElement );
-			const vertexFormat = this._getVertexFormat( shaderAttribute.groups.type, bytesPerElement );
+			const arrayStride = this._getArrayStride( type, bytesPerElement );
+			const format = this._getVertexFormat( type, bytesPerElement );
 
 			attributes.push( {
-				name: name,
-				arrayStride: arrayStride,
-				slot: shaderLocation,
-				format: vertexFormat
+				name,
+				arrayStride,
+				format,
+				slot
 			} );
 
 		}
 
-		// the sort ensures to setup vertex buffers in the correct order
-
-		return attributes.sort( function ( a, b ) {
-
-			return a.slot - b.slot;
-
-		} );
+		return attributes;
 
 	}