super-three 0.133.3 → 0.136.0

package/examples/jsm/renderers/webgpu/nodes/WebGPUNodeBuilder.js

@@ -1,3 +1,5 @@
+import { LinearEncoding } from 'three';
+
 import WebGPUNodeUniformsGroup from './WebGPUNodeUniformsGroup.js';
 import {
 	FloatNodeUniform, Vector2NodeUniform, Vector3NodeUniform, Vector4NodeUniform,
@@ -6,64 +8,108 @@ import {
 import WebGPUNodeSampler from './WebGPUNodeSampler.js';
 import { WebGPUNodeSampledTexture } from './WebGPUNodeSampledTexture.js';
 
+import WebGPUUniformBuffer from '../WebGPUUniformBuffer.js';
 import { getVectorLength, getStrideLength } from '../WebGPUBufferUtils.js';
 
-import NodeSlot from '../../nodes/core/NodeSlot.js';
 import VarNode from '../../nodes/core/VarNode.js';
+import CodeNode from '../../nodes/core/CodeNode.js';
+import BypassNode from '../../nodes/core/BypassNode.js';
+import ExpressionNode from '../../nodes/core/ExpressionNode.js';
 import NodeBuilder from '../../nodes/core/NodeBuilder.js';
 import MaterialNode from '../../nodes/accessors/MaterialNode.js';
+import PositionNode from '../../nodes/accessors/PositionNode.js';
 import NormalNode from '../../nodes/accessors/NormalNode.js';
 import ModelViewProjectionNode from '../../nodes/accessors/ModelViewProjectionNode.js';
+import SkinningNode from '../../nodes/accessors/SkinningNode.js';
+import ColorSpaceNode from '../../nodes/display/ColorSpaceNode.js';
 import LightContextNode from '../../nodes/lights/LightContextNode.js';
-import ShaderLib from './ShaderLib.js';
-
-class WebGPUNodeBuilder extends NodeBuilder {
+import OperatorNode from '../../nodes/math/OperatorNode.js';
+import WGSLNodeParser from '../../nodes/parsers/WGSLNodeParser.js';
+import { vec4 } from '../../nodes/ShaderNode.js';
+import { getRoughness } from '../../nodes/functions/PhysicalMaterialFunctions.js';
+
+const wgslTypeLib = {
+	float: 'f32',
+	int: 'i32',
+	vec2: 'vec2<f32>',
+	vec3: 'vec3<f32>',
+	vec4: 'vec4<f32>',
+	uvec4: 'vec4<u32>',
+	bvec3: 'vec3<bool>',
+	mat3: 'mat3x3<f32>',
+	mat4: 'mat4x4<f32>'
+};
+
+const wgslMethods = {
+	dFdx: 'dpdx',
+	dFdy: 'dpdy'
+};
+
+const wgslPolyfill = {
+	lessThanEqual: new CodeNode( `
+fn lessThanEqual( a : vec3<f32>, b : vec3<f32> ) -> vec3<bool> {
+
+	return vec3<bool>( a.x <= b.x, a.y <= b.y, a.z <= b.z );
 
-	constructor( material, renderer, lightNode = null ) {
+}
+` ),
+	mod: new CodeNode( `
+fn mod( x : f32, y : f32 ) -> f32 {
 
-		super( material, renderer );
+	return x - y * floor( x / y );
 
-		this.lightNode = lightNode;
+}
+` ),
+	repeatWrapping: new CodeNode( `
+fn repeatWrapping( uv : vec2<f32>, dimension : vec2<i32> ) -> vec2<i32> {
 
-		this.bindings = { vertex: [], fragment: [] };
-		this.bindingsOffset = { vertex: 0, fragment: 0 };
+	let uvScaled = vec2<i32>( uv * vec2<f32>( dimension ) );
 
-		this.uniformsGroup = {};
+	return ( ( uvScaled % dimension ) + dimension ) % dimension;
 
-		this.nativeShader = null;
+}
+` ),
+	inversesqrt: new CodeNode( `
+fn inversesqrt( x : f32 ) -> f32 {
 
-		this._parseMaterial();
+	return 1.0 / sqrt( x );
 
-	}
+}
+` )
+};
 
-	_parseMaterial() {
+class WebGPUNodeBuilder extends NodeBuilder {
 
-		const material = this.material;
+	constructor( object, renderer, lightNode = null ) {
 
-		// get shader
+		super( object, renderer, new WGSLNodeParser() );
 
-		let shader = null;
+		this.lightNode = lightNode;
 
-		if ( material.isMeshStandardMaterial ) {
+		this.bindings = { vertex: [], fragment: [] };
+		this.bindingsOffset = { vertex: 0, fragment: 0 };
 
-			shader = ShaderLib.standard;
+		this.uniformsGroup = {};
 
-		} else {
+		this._parseObject();
 
-			shader = ShaderLib.common;
+	}
 
-		}
+	_parseObject() {
 
-		this.nativeShader = shader;
+		const object = this.object;
+		const material = this.material;
 
 		// parse inputs
 
 		if ( material.isMeshStandardMaterial || material.isMeshBasicMaterial || material.isPointsMaterial || material.isLineBasicMaterial ) {
 
-			const mvpNode = new ModelViewProjectionNode();
-
 			let lightNode = material.lightNode;
 
+			// VERTEX STAGE
+
+			let vertex = new PositionNode( PositionNode.GEOMETRY );
+
 			if ( lightNode === null && this.lightNode && this.lightNode.hasLights === true ) {
 
 				lightNode = this.lightNode;
@@ -72,64 +118,124 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 			if ( material.positionNode && material.positionNode.isNode ) {
 
-				mvpNode.position = material.positionNode;
+				const assignPositionNode = new OperatorNode( '=', new PositionNode( PositionNode.LOCAL ), material.positionNode );
+
+				vertex = new BypassNode( vertex, assignPositionNode );
 
 			}
 
-			this.addSlot( 'vertex', new NodeSlot( mvpNode, 'MVP', 'vec4' ) );
+			if ( object.isSkinnedMesh === true ) {
 
-			if ( material.alphaTestNode && material.alphaTestNode.isNode ) {
+				vertex = new BypassNode( vertex, new SkinningNode( object ) );
 
-				this.addSlot( 'fragment', new NodeSlot( material.alphaTestNode, 'ALPHA_TEST', 'float' ) );
+			}
 
-			} else {
+			this.context.vertex = vertex;
 
-				this.addSlot( 'fragment', new NodeSlot( new MaterialNode( MaterialNode.ALPHA_TEST ), 'ALPHA_TEST', 'float' ) );
+			this.addFlow( 'vertex', new VarNode( new ModelViewProjectionNode(), 'MVP', 'vec4' ) );
 
-			}
+			// COLOR
+
+			let colorNode = null;
 
 			if ( material.colorNode && material.colorNode.isNode ) {
 
-				this.addSlot( 'fragment', new NodeSlot( material.colorNode, 'COLOR', 'vec4' ) );
+				colorNode = material.colorNode;
 
 			} else {
 
-				this.addSlot( 'fragment', new NodeSlot( new MaterialNode( MaterialNode.COLOR ), 'COLOR', 'vec4' ) );
+				colorNode = new MaterialNode( MaterialNode.COLOR );
 
 			}
 
+			colorNode = this.addFlow( 'fragment', new VarNode( colorNode, 'Color', 'vec4' ) );
+
+			this.addFlow( 'fragment', new VarNode( colorNode, 'DiffuseColor', 'vec4' ) );
+
+			// OPACITY
+
+			let opacityNode = null;
+
 			if ( material.opacityNode && material.opacityNode.isNode ) {
 
-				this.addSlot( 'fragment', new NodeSlot( material.opacityNode, 'OPACITY', 'float' ) );
+				opacityNode = material.opacityNode;
 
 			} else {
 
-				this.addSlot( 'fragment', new NodeSlot( new MaterialNode( MaterialNode.OPACITY ), 'OPACITY', 'float' ) );
+				opacityNode = new VarNode( new MaterialNode( MaterialNode.OPACITY ) );
+
+			}
+
+			this.addFlow( 'fragment', new VarNode( opacityNode, 'OPACITY', 'float' ) );
+
+			this.addFlow( 'fragment', new ExpressionNode( 'DiffuseColor.a = DiffuseColor.a * OPACITY;' ) );
+
+			// ALPHA TEST
+
+			let alphaTest = null;
+
+			if ( material.alphaTestNode && material.alphaTestNode.isNode ) {
+
+				alphaTest = material.alphaTestNode;
+
+			} else if ( material.alphaTest > 0 ) {
+
+				alphaTest = new MaterialNode( MaterialNode.ALPHA_TEST );
+
+			}
+
+			if ( alphaTest !== null ) {
+
+				this.addFlow( 'fragment', new VarNode( alphaTest, 'AlphaTest', 'float' ) );
+
+				this.addFlow( 'fragment', new ExpressionNode( 'if ( DiffuseColor.a <= AlphaTest ) { discard; }' ) );
 
 			}
 
 			if ( material.isMeshStandardMaterial ) {
 
+				// METALNESS
+
+				let metalnessNode = null;
+
 				if ( material.metalnessNode && material.metalnessNode.isNode ) {
 
-					this.addSlot( 'fragment', new NodeSlot( material.metalnessNode, 'METALNESS', 'float' ) );
+					metalnessNode = material.metalnessNode;
 
 				} else {
 
-					this.addSlot( 'fragment', new NodeSlot( new MaterialNode( MaterialNode.METALNESS ), 'METALNESS', 'float' ) );
+					metalnessNode = new MaterialNode( MaterialNode.METALNESS );
 
 				}
 
+				this.addFlow( 'fragment', new VarNode( metalnessNode, 'Metalness', 'float' ) );
+
+				this.addFlow( 'fragment', new ExpressionNode( 'DiffuseColor = vec4<f32>( DiffuseColor.rgb * ( 1.0 - Metalness ), DiffuseColor.a );' ) );
+
+				// ROUGHNESS
+
+				let roughnessNode = null;
+
 				if ( material.roughnessNode && material.roughnessNode.isNode ) {
 
-					this.addSlot( 'fragment', new NodeSlot( material.roughnessNode, 'ROUGHNESS', 'float' ) );
+					roughnessNode = material.roughnessNode;
 
 				} else {
 
-					this.addSlot( 'fragment', new NodeSlot( new MaterialNode( MaterialNode.ROUGHNESS ), 'ROUGHNESS', 'float' ) );
+					roughnessNode = new MaterialNode( MaterialNode.ROUGHNESS );
 
 				}
 
+				roughnessNode = getRoughness( { roughness: roughnessNode } );
+
+				this.addFlow( 'fragment', new VarNode( roughnessNode, 'Roughness', 'float' ) );
+
+				// SPECULAR_TINT
+
+				this.addFlow( 'fragment', new VarNode( new ExpressionNode( 'mix( vec3<f32>( 0.04 ), Color.rgb, Metalness )', 'vec3' ), 'SpecularColor', 'color' ) );
+
+				// NORMAL_VIEW
+
 				let normalNode = null;
 
 				if ( material.normalNode && material.normalNode.isNode ) {
@@ -142,61 +248,80 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 				}
 
-				this.addSlot( 'fragment', new NodeSlot( new VarNode( normalNode, 'TransformedNormalView', 'vec3' ), 'NORMAL', 'vec3' ) );
+				this.addFlow( 'fragment', new VarNode( normalNode, 'TransformedNormalView', 'vec3' ) );
 
-			} else if ( material.isMeshPhongMaterial ) {
+			}
 
-				if ( material.specularNode && material.specularNode.isNode ) {
+			// LIGHT
 
-					this.addSlot( 'fragment', new NodeSlot( material.specularNode, 'SPECULAR', 'vec3' ) );
+			let outputNode = colorNode;
 
-				} else {
+			if ( lightNode && lightNode.isNode ) {
 
-					this.addSlot( 'fragment', new NodeSlot( new MaterialNode( MaterialNode.SPECULAR ), 'SPECULAR', 'vec3' ) );
+				const lightContextNode = new LightContextNode( lightNode );
 
-				}
+				outputNode = this.addFlow( 'fragment', new VarNode( lightContextNode, 'Light', 'vec3' ) );
 
-				if ( material.shininessNode && material.shininessNode.isNode ) {
+			}
 
-					this.addSlot( 'fragment', new NodeSlot( material.shininessNode, 'SHININESS', 'float' ) );
+			// RESULT
 
-				} else {
+			const outputEncoding = this.renderer.outputEncoding;
 
-					this.addSlot( 'fragment', new NodeSlot( new MaterialNode( MaterialNode.SHININESS ), 'SHININESS', 'float' ) );
+			if ( outputEncoding !== LinearEncoding ) {
 
-				}
+				outputNode = new ColorSpaceNode( ColorSpaceNode.LINEAR_TO_LINEAR, vec4( outputNode ) );
+				outputNode.fromEncoding( outputEncoding );
 
 			}
 
-			if ( lightNode && lightNode.isNode ) {
+			this.addFlow( 'fragment', new VarNode( outputNode, 'Output', 'vec4' ) );
 
-				const lightContextNode = new LightContextNode( lightNode );
+		}
 
-				this.addSlot( 'fragment', new NodeSlot( lightContextNode, 'LIGHT', 'vec3' ) );
+	}
 
-			}
+	addFlowCode( code ) {
+
+		if ( ! /;\s*$/.test( code ) ) {
+
+			code += ';';
 
 		}
 
+		super.addFlowCode( code + '\n\t' );
+
 	}
 
-	getTexture( textureProperty, uvSnippet, biasSnippet = null ) {
+	getTexture( textureProperty, uvSnippet, biasSnippet, shaderStage = this.shaderStage ) {
 
-		if ( biasSnippet !== null ) {
+		if ( shaderStage === 'fragment' ) {
 
-			return `texture( sampler2D( ${textureProperty}, ${textureProperty}_sampler ), ${uvSnippet}, ${biasSnippet} )`;
+			return `textureSample( ${textureProperty}, ${textureProperty}_sampler, ${uvSnippet} )`;
 
 		} else {
 
-			return `texture( sampler2D( ${textureProperty}, ${textureProperty}_sampler ), ${uvSnippet} )`;
+			this._include( 'repeatWrapping' );
+
+			const dimension = `textureDimensions( ${textureProperty}, 0 )`;
+
+			return `textureLoad( ${textureProperty}, repeatWrapping( ${uvSnippet}, ${dimension} ), 0 )`;
 
 		}
 
 	}
 
-	getPropertyName( node ) {
+	getPropertyName( node, shaderStage = this.shaderStage ) {
+
+		if ( node.isNodeVary === true ) {
 
-		if ( node.isNodeUniform === true ) {
+			if ( shaderStage === 'vertex' ) {
+
+				return `NodeVarys.${ node.name }`;
+
+			}
+
+		} else if ( node.isNodeUniform === true ) {
 
 			const name = node.name;
 			const type = node.type;
@@ -205,9 +330,13 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 				return name;
 
+			} else if ( type === 'buffer' ) {
+
+				return `NodeBuffer.${name}`;
+
 			} else {
 
-				return `nodeUniforms.${name}`;
+				return `NodeUniforms.${name}`;
 
 			}
 
@@ -245,9 +374,33 @@ class WebGPUNodeBuilder extends NodeBuilder {
 				const lastBinding = bindings[ bindings.length - 1 ];
 				const index = lastBinding && lastBinding.isUniformsGroup ? bindings.length - 1 : bindings.length;
 
-				bindings.splice( index, 0, sampler, texture );
+				if ( shaderStage === 'fragment' ) {
 
-				uniformGPU = [ sampler, texture ];
+					bindings.splice( index, 0, sampler, texture );
+
+					uniformGPU = [ sampler, texture ];
+
+				} else {
+
+					bindings.splice( index, 0, texture );
+
+					uniformGPU = [ texture ];
+
+
+				}
+
+
+			} else if ( type === 'buffer' ) {
+
+				const buffer = new WebGPUUniformBuffer( 'NodeBuffer', node.value );
+
+				// add first textures in sequence and group for last
+				const lastBinding = bindings[ bindings.length - 1 ];
+				const index = lastBinding && lastBinding.isUniformsGroup ? bindings.length - 1 : bindings.length;
+
+				bindings.splice( index, 0, buffer );
+
+				uniformGPU = buffer;
 
 			} else {
 
@@ -267,7 +420,7 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 					uniformGPU = [];
 
-					for ( const inputNode of node.value ) {
+					for ( const inputNode of node.nodes ) {
 
 						const uniformNodeGPU = this._getNodeUniform( inputNode, type );
 
@@ -312,15 +465,49 @@ class WebGPUNodeBuilder extends NodeBuilder {
 		if ( shaderStage === 'vertex' ) {
 
 			const attributes = this.attributes;
+			const length = attributes.length;
 
-			for ( let index = 0; index < attributes.length; index ++ ) {
+			snippet += '\n';
+
+			for ( let index = 0; index < length; index ++ ) {
 
 				const attribute = attributes[ index ];
+				const name = attribute.name;
+				const type = this.getType( attribute.type );
+
+				snippet += `\t[[ location( ${index} ) ]] ${ name } : ${ type }`;
+
+				if ( index + 1 < length ) {
 
-				snippet += `layout(location = ${index}) in ${attribute.type} ${attribute.name}; `;
+					snippet += ',\n';
+
+				}
 
 			}
 
+			snippet += '\n';
+
+		}
+
+		return snippet;
+
+	}
+
+	getVars( shaderStage ) {
+
+		let snippet = '';
+
+		const vars = this.vars[ shaderStage ];
+
+		for ( let index = 0; index < vars.length; index ++ ) {
+
+			const variable = vars[ index ];
+
+			const name = variable.name;
+			const type = this.getType( variable.type );
+
+			snippet += `var ${name} : ${type}; `;
+
 		}
 
 		return snippet;
@@ -331,15 +518,43 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 		let snippet = '';
 
-		const varys = this.varys;
+		if ( shaderStage === 'vertex' ) {
+
+			snippet += '\t[[ builtin( position ) ]] Vertex: vec4<f32>;\n';
+
+			const varys = this.varys;
+
+			for ( let index = 0; index < varys.length; index ++ ) {
+
+				const vary = varys[ index ];
+
+				snippet += `\t[[ location( ${index} ) ]] ${ vary.name } : ${ this.getType( vary.type ) };\n`;
+
+			}
+
+			snippet = this._getWGSLStruct( 'NodeVarysStruct', snippet );
+
+		} else if ( shaderStage === 'fragment' ) {
 
-		const ioStage = shaderStage === 'vertex' ? 'out' : 'in';
+			const varys = this.varys;
 
-		for ( let index = 0; index < varys.length; index ++ ) {
+			snippet += '\n';
 
-			const vary = varys[ index ];
+			for ( let index = 0; index < varys.length; index ++ ) {
 
-			snippet += `layout(location = ${index}) ${ioStage} ${vary.type} ${vary.name}; `;
+				const vary = varys[ index ];
+
+				snippet += `\t[[ location( ${index} ) ]] ${ vary.name } : ${ this.getType( vary.type ) }`;
+
+				if ( index + 1 < varys.length ) {
+
+					snippet += ',\n';
+
+				}
+
+			}
+
+			snippet += '\n';
 
 		}
 
@@ -360,12 +575,27 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 			if ( uniform.type === 'texture' ) {
 
-				snippet += `layout(set = 0, binding = ${index ++}) uniform sampler ${uniform.name}_sampler; `;
-				snippet += `layout(set = 0, binding = ${index ++}) uniform texture2D ${uniform.name}; `;
+				if ( shaderStage === 'fragment' ) {
+
+					snippet += `[[ group( 0 ), binding( ${index ++} ) ]] var ${uniform.name}_sampler : sampler; `;
+
+				}
+
+				snippet += `[[ group( 0 ), binding( ${index ++} ) ]] var ${uniform.name} : texture_2d<f32>; `;
+
+			} else if ( uniform.type === 'buffer' ) {
+
+				const bufferNode = uniform.node;
+				const bufferType = this.getType( bufferNode.bufferType );
+				const bufferCount = bufferNode.bufferCount;
+
+				const bufferSnippet = `\t${uniform.name} : array< ${bufferType}, ${bufferCount} >;\n`;
+
+				snippet += this._getWGSLUniforms( 'NodeBuffer', bufferSnippet, index ++ ) + '\n\n';
 
 			} else {
 
-				const vectorType = this.getVectorType( uniform.type );
+				const vectorType = this.getType( this.getVectorType( uniform.type ) );
 
 				if ( Array.isArray( uniform.value ) === true ) {
 
@@ -375,7 +605,7 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 				} else {
 
-					groupSnippet += `uniform ${vectorType} ${uniform.name}; `;
+					groupSnippet += `\t${uniform.name} : ${ vectorType};\n`;
 
 				}
 
@@ -385,7 +615,7 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 		if ( groupSnippet ) {
 
-			snippet += `layout(set = 0, binding = ${index ++}) uniform NodeUniforms { ${groupSnippet} } nodeUniforms; `;
+			snippet += this._getWGSLUniforms( 'NodeUniforms', groupSnippet, index ++ );
 
 		}
 
@@ -393,39 +623,91 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 	}
 
-	build() {
+	buildCode() {
 
-		const keywords = this.getContextValue( 'keywords' );
+		const shadersData = { fragment: {}, vertex: {} };
 
-		for ( const shaderStage of [ 'vertex', 'fragment' ] ) {
+		for ( const shaderStage in shadersData ) {
 
-			this.shaderStage = shaderStage;
+			let flow = '// code\n';
+			flow += `\t${ this.flowCode[ shaderStage ] }`;
+			flow += '\n';
 
-			keywords.include( this, this.nativeShader.fragmentShader );
+			const flowNodes = this.flowNodes[ shaderStage ];
+			const mainNode = flowNodes[ flowNodes.length - 1 ];
 
-		}
+			for ( const node of flowNodes ) {
+
+				const flowSlotData = this.getFlowData( shaderStage, node );
+				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 ) {
+
+					flow += '// FLOW RESULT\n\t';
+
+					if ( shaderStage === 'vertex' ) {
 
-		super.build();
+						flow += 'NodeVarys.Vertex = ';
 
-		this.vertexShader = this._composeShaderCode( this.nativeShader.vertexShader, this.vertexShader );
-		this.fragmentShader = this._composeShaderCode( this.nativeShader.fragmentShader, this.fragmentShader );
+					} else if ( shaderStage === 'fragment' ) {
 
-		return this;
+						flow += 'return ';
+
+					}
+
+					flow += `${ flowSlotData.result };`;
+
+				}
+
+			}
+
+			const stageData = shadersData[ shaderStage ];
+
+			stageData.uniforms = this.getUniforms( shaderStage );
+			stageData.attributes = this.getAttributes( shaderStage );
+			stageData.varys = this.getVarys( shaderStage );
+			stageData.vars = this.getVars( shaderStage );
+			stageData.codes = this.getCodes( shaderStage );
+			stageData.flow = flow;
+
+		}
+
+		this.vertexShader = this._getWGSLVertexCode( shadersData.vertex );
+		this.fragmentShader = this._getWGSLFragmentCode( shadersData.fragment );
 
 	}
 
-	_composeShaderCode( code, snippet ) {
+	getMethod( method ) {
 
-		// use regex maybe for security?
-		const versionStrIndex = code.indexOf( '\n' );
+		if ( wgslPolyfill[ method ] !== undefined ) {
 
-		let finalCode = code.substr( 0, versionStrIndex ) + '\n\n';
+			this._include( method );
 
-		finalCode += snippet;
+		}
 
-		finalCode += code.substr( versionStrIndex );
+		return wgslMethods[ method ] || method;
 
-		return finalCode;
+	}
+
+	getType( type ) {
+
+		return wgslTypeLib[ type ] || type;
+
+	}
+
+	_include( name ) {
+
+		wgslPolyfill[ name ].build( this );
 
 	}
 
@@ -443,6 +725,82 @@ class WebGPUNodeBuilder extends NodeBuilder {
 
 	}
 
+	_getWGSLVertexCode( shaderData ) {
+
+		return `${ this.getSignature() }
+
+// uniforms
+${shaderData.uniforms}
+
+// varys
+${shaderData.varys}
+
+// codes
+${shaderData.codes}
+
+[[ stage( vertex ) ]]
+fn main( ${shaderData.attributes} ) -> NodeVarysStruct {
+
+	// system
+	var NodeVarys: NodeVarysStruct;
+
+	// vars
+	${shaderData.vars}
+
+	// flow
+	${shaderData.flow}
+
+	return NodeVarys;
+
+}
+`;
+
+	}
+
+	_getWGSLFragmentCode( shaderData ) {
+
+		return `${ this.getSignature() }
+
+// uniforms
+${shaderData.uniforms}
+
+// codes
+${shaderData.codes}
+
+[[ stage( fragment ) ]]
+fn main( ${shaderData.varys} ) -> [[ location( 0 ) ]] vec4<f32> {
+
+	// vars
+	${shaderData.vars}
+
+	// flow
+	${shaderData.flow}
+
+}
+`;
+
+	}
+
+	_getWGSLStruct( name, vars ) {
+
+		return `
+struct ${name} {
+\n${vars}
+};`;
+
+	}
+
+	_getWGSLUniforms( name, vars, binding = 0, group = 0 ) {
+
+		const structName = name + 'Struct';
+		const structSnippet = this._getWGSLStruct( structName, vars );
+
+		return `${structSnippet}
+[[ binding( ${binding} ), group( ${group} ) ]]
+var<uniform> ${name} : ${structName};`;
+
+	}
+
 }
 
 export default WebGPUNodeBuilder;