@needle-tools/three 0.153.1 → 0.154.1

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

@@ -0,0 +1,340 @@
+import { MathNode, GLSLNodeParser, NodeBuilder, NodeMaterial } from 'three/nodes';
+
+const glslMethods = {
+	[ MathNode.ATAN2 ]: 'atan'
+};
+
+const precisionLib = {
+	low: 'lowp',
+	medium: 'mediump',
+	high: 'highp'
+};
+
+class GLSLNodeBuilder extends NodeBuilder {
+
+	constructor( object, renderer, scene = null ) {
+
+		super( object, renderer, new GLSLNodeParser(), scene );
+
+	}
+
+	getMethod( method ) {
+
+		return glslMethods[ method ] || method;
+
+	}
+
+	getTexture( texture, textureProperty, uvSnippet ) {
+
+		if ( texture.isTextureCube ) {
+
+			return `textureCube( ${textureProperty}, ${uvSnippet} )`;
+
+		} else {
+
+			return `texture2D( ${textureProperty}, ${uvSnippet} )`;
+
+		}
+
+	}
+
+	getTextureBias( texture, textureProperty, uvSnippet, biasSnippet ) {
+
+		if ( this.material.extensions !== undefined ) this.material.extensions.shaderTextureLOD = true;
+
+		return `textureLod( ${textureProperty}, ${uvSnippet}, ${biasSnippet} )`;
+
+	}
+
+	getVars( shaderStage ) {
+
+		const snippets = [];
+
+		const vars = this.vars[ shaderStage ];
+
+		for ( const variable of vars ) {
+
+			snippets.push( `${ this.getVar( variable.type, variable.name ) };` );
+
+		}
+
+		return snippets.join( '\n\t' );
+
+	}
+
+	getUniforms( shaderStage ) {
+
+		const uniforms = this.uniforms[ shaderStage ];
+
+		let output = '';
+
+		for ( const uniform of uniforms ) {
+
+			let snippet = null;
+
+			if ( uniform.type === 'texture' ) {
+
+				snippet = `sampler2D ${uniform.name};\n`;
+
+			} else if ( uniform.type === 'cubeTexture' ) {
+
+				snippet = `samplerCube ${uniform.name};\n`;
+
+			} else {
+
+				const vectorType = this.getVectorType( uniform.type );
+
+				snippet = `${vectorType} ${uniform.name};\n`;
+
+			}
+
+			const precision = uniform.node.precision;
+
+			if ( precision !== null ) {
+
+				snippet = 'uniform ' + precisionLib[ precision ] + ' ' + snippet;
+
+			} else {
+
+				snippet = 'uniform ' + snippet;
+
+			}
+
+			output += snippet;
+
+		}
+
+		return output;
+
+	}
+
+	getAttributes( shaderStage ) {
+
+		let snippet = '';
+
+		if ( shaderStage === 'vertex' ) {
+
+			const attributes = this.attributes;
+
+			for ( const attribute of attributes ) {
+
+				snippet += `attribute ${attribute.type} ${attribute.name};\n`;
+
+			}
+
+		}
+
+		return snippet;
+
+	}
+
+	getVaryings( shaderStage ) {
+
+		let snippet = '';
+
+		const varyings = this.varyings;
+
+		if ( shaderStage === 'vertex' ) {
+
+			for ( const varying of varyings ) {
+
+				snippet += `${varying.needsInterpolation ? 'varying' : '/*varying*/'} ${varying.type} ${varying.name};\n`;
+
+			}
+
+		} else if ( shaderStage === 'fragment' ) {
+
+			for ( const varying of varyings ) {
+
+				if ( varying.needsInterpolation ) {
+
+					snippet += `varying ${varying.type} ${varying.name};\n`;
+
+				}
+
+			}
+
+		}
+
+		return snippet;
+
+	}
+
+	getVertexIndex() {
+
+		return 'gl_VertexID';
+
+	}
+
+	getFrontFacing() {
+
+		return 'gl_FrontFacing';
+
+	}
+
+	getFragCoord() {
+
+		return 'gl_FragCoord';
+
+	}
+
+	isFlipY() {
+
+		return true;
+
+	}
+
+	_getGLSLVertexCode( shaderData ) {
+
+		return `${ this.getSignature() }
+
+// uniforms
+${shaderData.uniforms}
+
+// varyings
+${shaderData.varyings}
+
+// attributes
+${shaderData.attributes}
+
+// codes
+${shaderData.codes}
+
+void main() {
+
+	// vars
+	${shaderData.vars}
+
+	// flow
+	${shaderData.flow}
+
+}
+`;
+
+	}
+
+	_getGLSLFragmentCode( shaderData ) {
+
+		return `${ this.getSignature() }
+
+// precision
+precision highp float;
+precision highp int;
+
+// uniforms
+${shaderData.uniforms}
+
+// varyings
+${shaderData.varyings}
+
+// codes
+${shaderData.codes}
+
+void main() {
+
+	// vars
+	${shaderData.vars}
+
+	// flow
+	${shaderData.flow}
+
+}
+`;
+
+	}
+
+	buildCode() {
+
+		const shadersData = this.material !== null ? { fragment: {}, vertex: {} } : { compute: {} };
+
+		for ( const shaderStage in shadersData ) {
+
+			let flow = '// code\n\n';
+			flow += this.flowCode[ shaderStage ];
+
+			const flowNodes = this.flowNodes[ shaderStage ];
+			const mainNode = flowNodes[ flowNodes.length - 1 ];
+
+			for ( const node of flowNodes ) {
+
+				const flowSlotData = this.getFlowData( node/*, shaderStage*/ );
+				const slotName = node.name;
+
+				if ( slotName ) {
+
+					if ( flow.length > 0 ) flow += '\n';
+
+					flow += `\t// flow -> ${ slotName }\n\t`;
+
+				}
+
+				flow += `${ flowSlotData.code }\n\t`;
+
+				if ( node === mainNode && shaderStage !== 'compute' ) {
+
+					flow += '// result\n\t';
+
+					if ( shaderStage === 'vertex' ) {
+
+						flow += 'gl_Position = ';
+
+					} else if ( shaderStage === 'fragment' ) {
+
+						flow += 'gl_FragColor = ';
+
+					}
+
+					flow += `${ flowSlotData.result };`;
+
+				}
+
+			}
+
+			const stageData = shadersData[ shaderStage ];
+
+			stageData.uniforms = this.getUniforms( shaderStage );
+			stageData.attributes = this.getAttributes( shaderStage );
+			stageData.varyings = this.getVaryings( shaderStage );
+			stageData.vars = this.getVars( shaderStage );
+			stageData.codes = this.getCodes( shaderStage );
+			stageData.flow = flow;
+
+		}
+
+		if ( this.material !== null ) {
+
+			this.vertexShader = this._getGLSLVertexCode( shadersData.vertex );
+			this.fragmentShader = this._getGLSLFragmentCode( shadersData.fragment );
+
+		} else {
+
+			console.warn( 'GLSLNodeBuilder: compute shaders are not supported.' );
+			//this.computeShader = this._getGLSLComputeCode( shadersData.compute );
+
+		}
+
+	}
+
+	build() {
+
+		// @TODO: Move this code to super.build()
+
+		const { object, material } = this;
+
+		if ( material !== null ) {
+
+			NodeMaterial.fromMaterial( material ).build( this );
+
+		} else {
+
+			this.addFlow( 'compute', object );
+
+		}
+
+		return super.build();
+
+	}
+
+}
+
+export default GLSLNodeBuilder;

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

@@ -1,4 +1,4 @@
-import { defaultShaderStages, NodeFrame, MathNode, GLSLNodeParser, NodeBuilder } from 'three/nodes';
+import { defaultShaderStages, NodeFrame, MathNode, GLSLNodeParser, NodeBuilder, normalView } from 'three/nodes';
 import SlotNode from './SlotNode.js';
 import { PerspectiveCamera, ShaderChunk, ShaderLib, UniformsUtils, UniformsLib } from 'three';
 
@@ -10,7 +10,8 @@ const nodeShaderLib = {
 	MeshBasicNodeMaterial: ShaderLib.basic,
 	PointsNodeMaterial: ShaderLib.points,
 	MeshStandardNodeMaterial: ShaderLib.standard,
-	MeshPhysicalNodeMaterial: ShaderLib.physical
+	MeshPhysicalNodeMaterial: ShaderLib.physical,
+	MeshPhongNodeMaterial: ShaderLib.phong
 };
 
 const glslMethods = {
@@ -74,6 +75,7 @@ class WebGLNodeBuilder extends NodeBuilder {
 
 		if ( material.isMeshPhysicalNodeMaterial ) type = 'MeshPhysicalNodeMaterial';
 		else if ( material.isMeshStandardNodeMaterial ) type = 'MeshStandardNodeMaterial';
+		else if ( material.isMeshPhongNodeMaterial ) type = 'MeshPhongNodeMaterial';
 		else if ( material.isMeshBasicNodeMaterial ) type = 'MeshBasicNodeMaterial';
 		else if ( material.isPointsNodeMaterial ) type = 'PointsNodeMaterial';
 		else if ( material.isLineBasicNodeMaterial ) type = 'LineBasicNodeMaterial';
@@ -97,6 +99,14 @@ class WebGLNodeBuilder extends NodeBuilder {
 
 		const { material, renderer } = this;
 
+		this.addSlot( 'fragment', new SlotNode( {
+			node: normalView,
+			nodeType: 'vec3',
+			source: getIncludeSnippet( 'clipping_planes_fragment' ),
+			target: 'vec3 TransformedNormalView = %RESULT%;',
+			inclusionType: 'append'
+		} ) );
+
 		if ( renderer.toneMappingNode && renderer.toneMappingNode.isNode === true ) {
 
 			this.addSlot( 'fragment', new SlotNode( {
@@ -116,7 +126,7 @@ class WebGLNodeBuilder extends NodeBuilder {
 				node: material.colorNode,
 				nodeType: 'vec4',
 				source: 'vec4 diffuseColor = vec4( diffuse, opacity );',
-				target: 'vec4 diffuseColor = %RESULT%;'
+				target: 'vec4 diffuseColor = %RESULT%; diffuseColor.a *= opacity;',
 			} ) );
 
 		}
@@ -131,10 +141,6 @@ class WebGLNodeBuilder extends NodeBuilder {
 				inclusionType: 'append'
 			} ) );
 
-		} else {
-
-			this.addCode( 'fragment', getIncludeSnippet( 'alphatest_fragment' ), 'diffuseColor.a = opacity;', this.shader );
-
 		}
 
 		if ( material.normalNode && material.normalNode.isNode ) {
@@ -348,17 +354,6 @@ class WebGLNodeBuilder extends NodeBuilder {
 
 					}
 
-					if ( material.thicknessNode && material.thicknessNode.isNode ) {
-
-						this.addSlot( 'fragment', new SlotNode( {
-							node: material.thicknessNode,
-							nodeType: 'float',
-							source: 'material.thickness = thickness;',
-							target: 'material.thickness = %RESULT%;'
-						} ) );
-
-					}
-
 					if ( material.attenuationDistanceNode && material.attenuationDistanceNode.isNode ) {
 
 						this.addSlot( 'fragment', new SlotNode( {
@@ -452,6 +447,9 @@ class WebGLNodeBuilder extends NodeBuilder {
 
 		for ( const uniform of uniforms ) {
 
+			if ( /^(modelViewMatrix|projectionMatrix)$/.test( uniform.name ) )
+				continue;
+
 			let snippet = null;
 
 			if ( uniform.type === 'texture' ) {
@@ -501,7 +499,7 @@ class WebGLNodeBuilder extends NodeBuilder {
 			for ( const attribute of attributes ) {
 
 				// ignore common attributes to prevent redefinitions
-				if ( attribute.name === 'uv' || attribute.name === 'position' || attribute.name === 'normal' )
+				if ( /^(position|normal|uv\d?)$/.test( attribute.name ) )
 					continue;
 
 				snippet += `attribute ${attribute.type} ${attribute.name}; `;
@@ -575,6 +573,12 @@ class WebGLNodeBuilder extends NodeBuilder {
 
 	}
 
+	getVertexIndex() {
+
+		return 'gl_VertexID';
+
+	}
+
 	getFrontFacing() {
 
 		return 'gl_FrontFacing';

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

@@ -1,9 +1,13 @@
+/*// debugger tools
+import 'https://greggman.github.io/webgpu-avoid-redundant-state-setting/webgpu-check-redundant-state-setting.js';
+//*/
+
 import { GPUFeatureName, GPUTextureFormat, GPULoadOp, GPUStoreOp, GPUIndexFormat, GPUTextureViewDimension } from './utils/WebGPUConstants.js';
 
-import WebGPUNodeBuilder from './nodes/WGSLNodeBuilder.js';
+import WGSLNodeBuilder from './nodes/WGSLNodeBuilder.js';
 import Backend from '../common/Backend.js';
 
-import { DepthFormat, WebGPUCoordinateSystem } from 'three';
+import { DepthTexture, DepthFormat, DepthStencilFormat, UnsignedInt248Type, UnsignedIntType, WebGPUCoordinateSystem } from 'three';
 
 import WebGPUUtils from './utils/WebGPUUtils.js';
 import WebGPUAttributeUtils from './utils/WebGPUAttributeUtils.js';
@@ -49,7 +53,8 @@ class WebGPUBackend extends Backend {
 		this.device = null;
 		this.context = null;
 		this.colorBuffer = null;
-		this.depthBuffer = null;
+
+		this.depthBuffers = new WeakMap();
 
 		this.utils = new WebGPUUtils( this );
 		this.attributeUtils = new WebGPUAttributeUtils( this );
@@ -180,7 +185,7 @@ class WebGPUBackend extends Backend {
 
 			}
 
-			depthStencilAttachment.view = this.depthBuffer.createView();
+			depthStencilAttachment.view = this._getDepthBufferGPU( renderContext ).createView();
 
 		}
 
@@ -243,6 +248,7 @@ class WebGPUBackend extends Backend {
 		renderContextData.descriptor = descriptor;
 		renderContextData.encoder = encoder;
 		renderContextData.currentPass = currentPass;
+		renderContextData.currentAttributesSet = {};
 
 		//
 
@@ -316,7 +322,7 @@ class WebGPUBackend extends Backend {
 
 		}
 
-		descriptor.depthStencilAttachment.view = this.depthBuffer.createView();
+		descriptor.depthStencilAttachment.view = this._getDepthBufferGPU( renderContext ).createView();
 
 		if ( color ) {
 
@@ -395,6 +401,7 @@ class WebGPUBackend extends Backend {
 		const bindingsData = this.get( renderObject.getBindings() );
 		const contextData = this.get( context );
 		const pipelineGPU = this.get( pipeline ).pipeline;
+		const attributesSet = contextData.currentAttributesSet;
 
 		// pipeline
 
@@ -406,18 +413,26 @@ class WebGPUBackend extends Backend {
 		const bindGroupGPU = bindingsData.group;
 		passEncoderGPU.setBindGroup( 0, bindGroupGPU );
 
-		// index
+		// attributes
 
 		const index = renderObject.getIndex();
 
 		const hasIndex = ( index !== null );
 
+		// index
+
 		if ( hasIndex === true ) {
 
-			const buffer = this.get( index ).buffer;
-			const indexFormat = ( index.array instanceof Uint16Array ) ? GPUIndexFormat.Uint16 : GPUIndexFormat.Uint32;
+			if ( attributesSet.index !== index ) {
+			
+				const buffer = this.get( index ).buffer;
+				const indexFormat = ( index.array instanceof Uint16Array ) ? GPUIndexFormat.Uint16 : GPUIndexFormat.Uint32;
 
-			passEncoderGPU.setIndexBuffer( buffer, indexFormat );
+				passEncoderGPU.setIndexBuffer( buffer, indexFormat );
+
+				attributesSet.index = index;
+
+			}
 
 		}
 
@@ -427,8 +442,16 @@ class WebGPUBackend extends Backend {
 
 		for ( let i = 0, l = attributes.length; i < l; i ++ ) {
 
-			const buffer = this.get( attributes[ i ] ).buffer;
-			passEncoderGPU.setVertexBuffer( i, buffer );
+			const attribute = attributes[ i ];
+
+			if ( attributesSet[ i ] !== attribute ) {
+
+				const buffer = this.get( attribute ).buffer;
+				passEncoderGPU.setVertexBuffer( i, buffer );
+
+				attributesSet[ i ] = attribute;
+
+			}
 
 		}
 
@@ -549,11 +572,17 @@ class WebGPUBackend extends Backend {
 
 	}
 
+	copyTextureToBuffer( texture, x, y, width, height ) {
+
+		return this.textureUtils.copyTextureToBuffer( texture, x, y, width, height );
+
+	}
+
 	// node builder
 
-	createNodeBuilder( object, renderer ) {
+	createNodeBuilder( object, renderer, scene = null ) {
 
-		return new WebGPUNodeBuilder( object, renderer );
+		return new WGSLNodeBuilder( object, renderer, scene );
 
 	}
 
@@ -648,7 +677,6 @@ class WebGPUBackend extends Backend {
 
 		this._configureContext();
 		this._setupColorBuffer();
-		this._setupDepthBuffer();
 
 	}
 
@@ -674,40 +702,114 @@ class WebGPUBackend extends Backend {
 
 	}
 
-	copyFramebufferToTexture( framebufferTexture, renderContext ) {
+	copyFramebufferToTexture( texture, renderContext ) {
 
 		const renderContextData = this.get( renderContext );
 
 		const { encoder, descriptor } = renderContextData;
 
-		const sourceGPU = this.context.getCurrentTexture();
-		const destinationGPU = this.get( framebufferTexture ).texture;
+		let sourceGPU = null;
+
+		if ( texture.isFramebufferTexture ) {
+
+			sourceGPU = this.context.getCurrentTexture();
+
+		} else if ( texture.isDepthTexture ) {
+
+			sourceGPU = this._getDepthBufferGPU( renderContext );
+
+		}
+
+		const destinationGPU = this.get( texture ).texture;
 
 		renderContextData.currentPass.end();
 
 		encoder.copyTextureToTexture(
 			{
-			  texture: sourceGPU
+				texture: sourceGPU,
+				origin: { x: 0, y: 0, z: 0 }
 			},
 			{
-			  texture: destinationGPU
+				texture: destinationGPU
 			},
 			[
-				framebufferTexture.image.width,
-				framebufferTexture.image.height
+				texture.image.width,
+				texture.image.height
 			]
 		);
 
+		if ( texture.generateMipmaps ) this.textureUtils.generateMipmaps( texture );
+
 		descriptor.colorAttachments[ 0 ].loadOp = GPULoadOp.Load;
 		if ( renderContext.depth ) descriptor.depthStencilAttachment.depthLoadOp = GPULoadOp.Load;
 		if ( renderContext.stencil ) descriptor.depthStencilAttachment.stencilLoadOp = GPULoadOp.Load;
 
 		renderContextData.currentPass = encoder.beginRenderPass( descriptor );
+		renderContextData.currentAttributesSet = {};
 
 	}
 
 	// utils
 
+	_getDepthBufferGPU( renderContext ) {
+
+		const { depthBuffers } = this;
+		const { width, height } = this.getDrawingBufferSize();
+
+		let depthTexture = depthBuffers.get( renderContext );
+
+		if ( depthTexture !== undefined && depthTexture.image.width === width && depthTexture.image.height === height ) {
+
+			return this.get( depthTexture ).texture;
+
+		}
+
+		this._destroyDepthBufferGPU( renderContext );
+
+		depthTexture = new DepthTexture();
+		depthTexture.name = 'depthBuffer';
+
+		if ( renderContext.stencil  ) {
+
+			depthTexture = new DepthTexture();
+			depthTexture.format = DepthStencilFormat;
+			depthTexture.type = UnsignedInt248Type;
+
+		} else if ( renderContext.depth ) {
+
+			depthTexture = new DepthTexture();
+			depthTexture.format = DepthFormat;
+			depthTexture.type = UnsignedIntType;
+
+		}
+
+		depthTexture.image.width = width;
+		depthTexture.image.height = height;
+
+		this.textureUtils.createTexture( depthTexture, { sampleCount: this.parameters.sampleCount } );
+
+		depthBuffers.set( renderContext, depthTexture );
+
+		return this.get( depthTexture ).texture;
+
+	}
+
+	_destroyDepthBufferGPU( renderContext ) {
+
+		const { depthBuffers } = this;
+
+		const depthTexture = depthBuffers.get( renderContext );
+
+		if ( depthTexture !== undefined ) {
+
+			this.textureUtils.destroyTexture( depthTexture );
+
+			depthBuffers.delete( renderContext );
+
+		}
+
+	}
+
 	_configureContext() {
 
 		this.context.configure( {
@@ -740,26 +842,6 @@ class WebGPUBackend extends Backend {
 
 	}
 
-	_setupDepthBuffer() {
-
-		if ( this.depthBuffer ) this.depthBuffer.destroy();
-
-		const { width, height } = this.getDrawingBufferSize();
-
-		this.depthBuffer = this.device.createTexture( {
-			label: 'depthBuffer',
-			size: {
-				width: width,
-				height: height,
-				depthOrArrayLayers: 1
-			},
-			sampleCount: this.parameters.sampleCount,
-			format: GPUTextureFormat.Depth24PlusStencil8,
-			usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC
-		} );
-
-	}
-
 }
 
 export default WebGPUBackend;