@needle-tools/three 0.160.3 → 0.162.1

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

@@ -1,1098 +1,1078 @@
-import { NoColorSpace, FloatType } from 'three';
-
-import NodeUniformsGroup from '../../common/nodes/NodeUniformsGroup.js';
-
-import NodeSampler from '../../common/nodes/NodeSampler.js';
-import { NodeSampledTexture, NodeSampledCubeTexture } from '../../common/nodes/NodeSampledTexture.js';
-
-import UniformBuffer from '../../common/UniformBuffer.js';
-import StorageBuffer from '../../common/StorageBuffer.js';
-import { getVectorLength, getStrideLength } from '../../common/BufferUtils.js';
-
-import { NodeBuilder, CodeNode } from '../../../nodes/Nodes.js';
-
-import { getFormat } from '../utils/WebGPUTextureUtils.js';
-
-import WGSLNodeParser from './WGSLNodeParser.js';
-
-// GPUShaderStage is not defined in browsers not supporting WebGPU
-const GPUShaderStage = self.GPUShaderStage;
-
-const gpuShaderStageLib = {
-	'vertex': GPUShaderStage ? GPUShaderStage.VERTEX : 1,
-	'fragment': GPUShaderStage ? GPUShaderStage.FRAGMENT : 2,
-	'compute': GPUShaderStage ? GPUShaderStage.COMPUTE : 4
-};
-
-const supports = {
-	instance: true,
-	storageBuffer: true
-};
-
-const wgslFnOpLib = {
-	'^^': 'threejs_xor'
-};
-
-const wgslTypeLib = {
-	float: 'f32',
-	int: 'i32',
-	uint: 'u32',
-	bool: 'bool',
-	color: 'vec3<f32>',
-
-	vec2: 'vec2<f32>',
-	ivec2: 'vec2<i32>',
-	uvec2: 'vec2<u32>',
-	bvec2: 'vec2<bool>',
-
-	vec3: 'vec3<f32>',
-	ivec3: 'vec3<i32>',
-	uvec3: 'vec3<u32>',
-	bvec3: 'vec3<bool>',
-
-	vec4: 'vec4<f32>',
-	ivec4: 'vec4<i32>',
-	uvec4: 'vec4<u32>',
-	bvec4: 'vec4<bool>',
-
-	mat3: 'mat3x3<f32>',
-	imat3: 'mat3x3<i32>',
-	umat3: 'mat3x3<u32>',
-	bmat3: 'mat3x3<bool>',
-
-	mat4: 'mat4x4<f32>',
-	imat4: 'mat4x4<i32>',
-	umat4: 'mat4x4<u32>',
-	bmat4: 'mat4x4<bool>'
-};
-
-const wgslMethods = {
-	dFdx: 'dpdx',
-	dFdy: '- dpdy',
-	mod_float: 'threejs_mod_float',
-	mod_vec2: 'threejs_mod_vec2',
-	mod_vec3: 'threejs_mod_vec3',
-	mod_vec4: 'threejs_mod_vec4',
-	lessThanEqual: 'threejs_lessThanEqual',
-	greaterThan: 'threejs_greaterThan',
-	inversesqrt: 'inverseSqrt',
-	bitcast: 'bitcast<f32>'
-};
-
-const wgslPolyfill = {
-	threejs_xor: new CodeNode( `
-fn threejs_xor( a : bool, b : bool ) -> bool {
-
-	return ( a || b ) && !( a && b );
-
-}
-` ),
-	lessThanEqual: new CodeNode( `
-fn threejs_lessThanEqual( a : vec3<f32>, b : vec3<f32> ) -> vec3<bool> {
-
-	return vec3<bool>( a.x <= b.x, a.y <= b.y, a.z <= b.z );
-
-}
-` ),
-	greaterThan: new CodeNode( `
-fn threejs_greaterThan( a : vec3<f32>, b : vec3<f32> ) -> vec3<bool> {
-
-	return vec3<bool>( a.x > b.x, a.y > b.y, a.z > b.z );
-
-}
-` ),
-	mod_float: new CodeNode( 'fn threejs_mod_float( x : f32, y : f32 ) -> f32 { return x - y * floor( x / y ); }' ),
-	mod_vec2: new CodeNode( 'fn threejs_mod_vec2( x : vec2f, y : vec2f ) -> vec2f { return x - y * floor( x / y ); }' ),
-	mod_vec3: new CodeNode( 'fn threejs_mod_vec3( x : vec3f, y : vec3f ) -> vec3f { return x - y * floor( x / y ); }' ),
-	mod_vec4: new CodeNode( 'fn threejs_mod_vec4( x : vec4f, y : vec4f ) -> vec4f { return x - y * floor( x / y ); }' ),
-	repeatWrapping: new CodeNode( `
-fn threejs_repeatWrapping( uv : vec2<f32>, dimension : vec2<u32> ) -> vec2<u32> {
-
-	let uvScaled = vec2<u32>( uv * vec2<f32>( dimension ) );
-
-	return ( ( uvScaled % dimension ) + dimension ) % dimension;
-
-}
-` )
-};
-
-class WGSLNodeBuilder extends NodeBuilder {
-
-	constructor( object, renderer, scene = null ) {
-
-		super( object, renderer, new WGSLNodeParser(), scene );
-
-		this.uniformGroups = {};
-
-		this.builtins = {};
-
-	}
-
-	needsColorSpaceToLinear( texture ) {
-
-		return texture.isVideoTexture === true && texture.colorSpace !== NoColorSpace;
-
-	}
-
-	_generateTextureSample( texture, textureProperty, uvSnippet, depthSnippet, shaderStage = this.shaderStage ) {
-
-		if ( shaderStage === 'fragment' ) {
-
-			if ( depthSnippet ) {
-
-				return `textureSample( ${ textureProperty }, ${ textureProperty }_sampler, ${ uvSnippet }, ${ depthSnippet } )`;
-
-			} else {
-
-				return `textureSample( ${ textureProperty }, ${ textureProperty }_sampler, ${ uvSnippet } )`;
-
-			}
-
-		} else {
-
-			return this.generateTextureLod( texture, textureProperty, uvSnippet );
-
-		}
-
-	}
-
-	_generateVideoSample( textureProperty, uvSnippet, shaderStage = this.shaderStage ) {
-
-		if ( shaderStage === 'fragment' ) {
-
-			return `textureSampleBaseClampToEdge( ${ textureProperty }, ${ textureProperty }_sampler, vec2<f32>( ${ uvSnippet }.x, 1.0 - ${ uvSnippet }.y ) )`;
-
-		} else {
-
-			console.error( `WebGPURenderer: THREE.VideoTexture does not support ${ shaderStage } shader.` );
-
-		}
-
-	}
-
-	_generateTextureSampleLevel( texture, textureProperty, uvSnippet, levelSnippet, depthSnippet, shaderStage = this.shaderStage ) {
-
-		if ( shaderStage === 'fragment' && this.isUnfilterable( texture ) === false ) {
-
-			return `textureSampleLevel( ${ textureProperty }, ${ textureProperty }_sampler, ${ uvSnippet }, ${ levelSnippet } )`;
-
-		} else {
-
-			return this.generateTextureLod( texture, textureProperty, uvSnippet, levelSnippet );
-
-		}
-
-	}
-
-	generateTextureLod( texture, textureProperty, uvSnippet, levelSnippet = '0' ) {
-
-		this._include( 'repeatWrapping' );
-
-		const dimension = `textureDimensions( ${ textureProperty }, 0 )`;
-
-		return `textureLoad( ${ textureProperty }, threejs_repeatWrapping( ${ uvSnippet }, ${ dimension } ), i32( ${ levelSnippet } ) )`;
-
-	}
-
-	generateTextureLoad( texture, textureProperty, uvIndexSnippet, depthSnippet, levelSnippet = '0u' ) {
-
-		if ( depthSnippet ) {
-
-			return `textureLoad( ${ textureProperty }, ${ uvIndexSnippet }, ${ depthSnippet }, ${ levelSnippet } )`;
-
-		} else {
-
-			return `textureLoad( ${ textureProperty }, ${ uvIndexSnippet }, ${ levelSnippet } )`;
-
-		}
-
-	}
-
-	generateTextureStore( texture, textureProperty, uvIndexSnippet, valueSnippet ) {
-
-		return `textureStore( ${ textureProperty }, ${ uvIndexSnippet }, ${ valueSnippet } )`;
-
-	}
-
-	isUnfilterable( texture ) {
-
-		return texture.isDataTexture === true && texture.type === FloatType;
-
-	}
-
-	generateTexture( texture, textureProperty, uvSnippet, depthSnippet, shaderStage = this.shaderStage ) {
-
-		let snippet = null;
-
-		if ( texture.isVideoTexture === true ) {
-
-			snippet = this._generateVideoSample( textureProperty, uvSnippet, shaderStage );
-
-		} else if ( this.isUnfilterable( texture ) ) {
-
-			snippet = this.generateTextureLod( texture, textureProperty, uvSnippet, '0', depthSnippet, shaderStage );
-
-		} else {
-
-			snippet = this._generateTextureSample( texture, textureProperty, uvSnippet, depthSnippet, shaderStage );
-
-		}
-
-		return snippet;
-
-	}
-
-	generateTextureCompare( texture, textureProperty, uvSnippet, compareSnippet, depthSnippet, shaderStage = this.shaderStage ) {
-
-		if ( shaderStage === 'fragment' ) {
-
-			return `textureSampleCompare( ${ textureProperty }, ${ textureProperty }_sampler, ${ uvSnippet }, ${ compareSnippet } )`;
-
-		} else {
-
-			console.error( `WebGPURenderer: THREE.DepthTexture.compareFunction() does not support ${ shaderStage } shader.` );
-
-		}
-
-	}
-
-	generateTextureLevel( texture, textureProperty, uvSnippet, levelSnippet, depthSnippet, shaderStage = this.shaderStage ) {
-
-		let snippet = null;
-
-		if ( texture.isVideoTexture === true ) {
-
-			snippet = this._generateVideoSample( textureProperty, uvSnippet, shaderStage );
-
-		} else {
-
-			snippet = this._generateTextureSampleLevel( texture, textureProperty, uvSnippet, levelSnippet, depthSnippet, shaderStage );
-
-		}
-
-		return snippet;
-
-	}
-
-	getPropertyName( node, shaderStage = this.shaderStage ) {
-
-		if ( node.isNodeVarying === true && node.needsInterpolation === true ) {
-
-			if ( shaderStage === 'vertex' ) {
-
-				return `varyings.${ node.name }`;
-
-			}
-
-		} else if ( node.isNodeUniform === true ) {
-
-			const name = node.name;
-			const type = node.type;
-
-			if ( type === 'texture' || type === 'cubeTexture' || type === 'storageTexture' ) {
-
-				return name;
-
-			} else if ( type === 'buffer' || type === 'storageBuffer' ) {
-
-				return `NodeBuffer_${ node.id }.${name}`;
-
-			} else {
-
-				return node.groupNode.name + '.' + name;
-
-			}
-
-		}
-
-		return super.getPropertyName( node );
-
-	}
-
-	_getUniformGroupCount( shaderStage ) {
-
-		return Object.keys( this.uniforms[ shaderStage ] ).length;
-
-	}
-
-	getFunctionOperator( op ) {
-
-		const fnOp = wgslFnOpLib[ op ];
-
-		if ( fnOp !== undefined ) {
-
-			this._include( fnOp );
-
-			return fnOp;
-
-		}
-
-		return null;
-
-	}
-
-	getUniformFromNode( node, type, shaderStage, name = null ) {
-
-		const uniformNode = super.getUniformFromNode( node, type, shaderStage, name );
-		const nodeData = this.getDataFromNode( node, shaderStage, this.globalCache );
-
-		if ( nodeData.uniformGPU === undefined ) {
-
-			let uniformGPU;
-
-			const bindings = this.bindings[ shaderStage ];
-
-			if ( type === 'texture' || type === 'cubeTexture' || type === 'storageTexture' ) {
-
-				let texture = null;
-
-				if ( type === 'texture' || type === 'storageTexture' ) {
-
-					texture = new NodeSampledTexture( uniformNode.name, uniformNode.node );
-
-				} else if ( type === 'cubeTexture' ) {
-
-					texture = new NodeSampledCubeTexture( uniformNode.name, uniformNode.node );
-
-				}
-
-				texture.store = node.isStoreTextureNode === true;
-				texture.setVisibility( gpuShaderStageLib[ shaderStage ] );
-
-				if ( shaderStage === 'fragment' && this.isUnfilterable( node.value ) === false && texture.store === false ) {
-
-					const sampler = new NodeSampler( `${uniformNode.name}_sampler`, uniformNode.node );
-					sampler.setVisibility( gpuShaderStageLib[ shaderStage ] );
-
-					bindings.push( sampler, texture );
-
-					uniformGPU = [ sampler, texture ];
-
-				} else {
-
-					bindings.push( texture );
-
-					uniformGPU = [ texture ];
-
-				}
-
-			} else if ( type === 'buffer' || type === 'storageBuffer' ) {
-
-				const bufferClass = type === 'storageBuffer' ? StorageBuffer : UniformBuffer;
-				const buffer = new bufferClass( 'NodeBuffer_' + node.id, node.value );
-				buffer.setVisibility( gpuShaderStageLib[ shaderStage ] );
-
-				bindings.push( buffer );
-
-				uniformGPU = buffer;
-
-			} else {
-
-				const group = node.groupNode;
-				const groupName = group.name;
-
-				const uniformsStage = this.uniformGroups[ shaderStage ] || ( this.uniformGroups[ shaderStage ] = {} );
-
-				let uniformsGroup = uniformsStage[ groupName ];
-
-				if ( uniformsGroup === undefined ) {
-
-					uniformsGroup = new NodeUniformsGroup( groupName, group );
-					uniformsGroup.setVisibility( gpuShaderStageLib[ shaderStage ] );
-
-					uniformsStage[ groupName ] = uniformsGroup;
-
-					bindings.push( uniformsGroup );
-
-				}
-
-				if ( node.isArrayUniformNode === true ) {
-
-					uniformGPU = [];
-
-					for ( const uniformNode of node.nodes ) {
-
-						const uniformNodeGPU = this.getNodeUniform( uniformNode, type );
-
-						// fit bounds to buffer
-						uniformNodeGPU.boundary = getVectorLength( uniformNodeGPU.itemSize );
-						uniformNodeGPU.itemSize = getStrideLength( uniformNodeGPU.itemSize );
-
-						uniformsGroup.addUniform( uniformNodeGPU );
-
-						uniformGPU.push( uniformNodeGPU );
-
-					}
-
-				} else {
-
-					uniformGPU = this.getNodeUniform( uniformNode, type );
-
-					uniformsGroup.addUniform( uniformGPU );
-
-				}
-
-			}
-
-			nodeData.uniformGPU = uniformGPU;
-
-			if ( shaderStage === 'vertex' ) {
-
-				this.bindingsOffset[ 'fragment' ] = bindings.length;
-
-			}
-
-		}
-
-		return uniformNode;
-
-	}
-
-	isReference( type ) {
-
-		return super.isReference( type ) || type === 'texture_2d' || type === 'texture_cube' || type === 'texture_depth_2d' || type === 'texture_storage_2d';
-
-	}
-
-	getBuiltin( name, property, type, shaderStage = this.shaderStage ) {
-
-		const map = this.builtins[ shaderStage ] || ( this.builtins[ shaderStage ] = new Map() );
-
-		if ( map.has( name ) === false ) {
-
-			map.set( name, {
-				name,
-				property,
-				type
-			} );
-
-		}
-
-		return property;
-
-	}
-
-	getVertexIndex() {
-
-		if ( this.shaderStage === 'vertex' ) {
-
-			return this.getBuiltin( 'vertex_index', 'vertexIndex', 'u32', 'attribute' );
-
-		}
-
-		return 'vertexIndex';
-
-	}
-
-	buildFunctionCode( shaderNode ) {
-
-		const layout = shaderNode.layout;
-		const flowData = this.flowShaderNode( shaderNode );
-
-		const parameters = [];
-
-		for ( const input of layout.inputs ) {
-
-			parameters.push( input.name + ' : ' + this.getType( input.type ) );
-
-		}
-
-		//
-
-		const code = `fn ${ layout.name }( ${ parameters.join( ', ' ) } ) -> ${ this.getType( layout.type ) } {
-${ flowData.vars }
-${ flowData.code }
-	return ${ flowData.result };
-
-}`;
-
-		//
-
-		return code;
-
-	}
-
-	getInstanceIndex() {
-
-		if ( this.shaderStage === 'vertex' ) {
-
-			return this.getBuiltin( 'instance_index', 'instanceIndex', 'u32', 'attribute' );
-
-		}
-
-		return 'instanceIndex';
-
-	}
-
-	getFrontFacing() {
-
-		return this.getBuiltin( 'front_facing', 'isFront', 'bool' );
-
-	}
-
-	getFragCoord() {
-
-		return this.getBuiltin( 'position', 'fragCoord', 'vec4<f32>' ) + '.xy';
-
-	}
-
-	getFragDepth() {
-
-		return 'output.' + this.getBuiltin( 'frag_depth', 'depth', 'f32', 'output' );
-
-	}
-
-	isFlipY() {
-
-		return false;
-
-	}
-
-	getBuiltins( shaderStage ) {
-
-		const snippets = [];
-		const builtins = this.builtins[ shaderStage ];
-
-		if ( builtins !== undefined ) {
-
-			for ( const { name, property, type } of builtins.values() ) {
-
-				snippets.push( `@builtin( ${name} ) ${property} : ${type}` );
-
-			}
-
-		}
-
-		return snippets.join( ',\n\t' );
-
-	}
-
-	getAttributes( shaderStage ) {
-
-		const snippets = [];
-
-		if ( shaderStage === 'compute' ) {
-
-			this.getBuiltin( 'global_invocation_id', 'id', 'vec3<u32>', 'attribute' );
-
-		}
-
-		if ( shaderStage === 'vertex' || shaderStage === 'compute' ) {
-
-			const builtins = this.getBuiltins( 'attribute' );
-
-			if ( builtins ) snippets.push( builtins );
-
-			const attributes = this.getAttributesArray();
-
-			for ( let index = 0, length = attributes.length; index < length; index ++ ) {
-
-				const attribute = attributes[ index ];
-				const name = attribute.name;
-				const type = this.getType( attribute.type );
-
-				snippets.push( `@location( ${index} ) ${ name } : ${ type }` );
-
-			}
-
-		}
-
-		return snippets.join( ',\n\t' );
-
-	}
-
-	getStructMembers( struct ) {
-
-		const snippets = [];
-		const members = struct.getMemberTypes();
-
-		for ( let i = 0; i < members.length; i ++ ) {
-
-			const member = members[ i ];
-			snippets.push( `\t@location( ${i} ) m${i} : ${ member }<f32>` );
-
-		}
-
-		return snippets.join( ',\n' );
-
-	}
-
-	getStructs( shaderStage ) {
-
-		const snippets = [];
-		const structs = this.structs[ shaderStage ];
-
-		for ( let index = 0, length = structs.length; index < length; index ++ ) {
-
-			const struct = structs[ index ];
-			const name = struct.name;
-
-			let snippet = `\struct ${ name } {\n`;
-			snippet += this.getStructMembers( struct );
-			snippet += '\n}';
-
-			snippets.push( snippet );
-
-		}
-
-		return snippets.join( '\n\n' );
-
-	}
-
-	getVar( type, name ) {
-
-		return `var ${ name } : ${ this.getType( type ) }`;
-
-	}
-
-	getVars( shaderStage ) {
-
-		const snippets = [];
-		const vars = this.vars[ shaderStage ];
-
-		if ( vars !== undefined ) {
-
-			for ( const variable of vars ) {
-
-				snippets.push( `\t${ this.getVar( variable.type, variable.name ) };` );
-
-			}
-
-		}
-
-		return `\n${ snippets.join( '\n' ) }\n`;
-
-	}
-
-	getVaryings( shaderStage ) {
-
-		const snippets = [];
-
-		if ( shaderStage === 'vertex' ) {
-
-			this.getBuiltin( 'position', 'Vertex', 'vec4<f32>', 'vertex' );
-
-		}
-
-		if ( shaderStage === 'vertex' || shaderStage === 'fragment' ) {
-
-			const varyings = this.varyings;
-			const vars = this.vars[ shaderStage ];
-
-			for ( let index = 0; index < varyings.length; index ++ ) {
-
-				const varying = varyings[ index ];
-
-				if ( varying.needsInterpolation ) {
-
-					let attributesSnippet = `@location( ${index} )`;
-
-					if ( /^(int|uint|ivec|uvec)/.test( varying.type ) ) {
-
-						attributesSnippet += ' @interpolate( flat )';
-
-
-					}
-
-					snippets.push( `${ attributesSnippet } ${ varying.name } : ${ this.getType( varying.type ) }` );
-
-				} else if ( shaderStage === 'vertex' && vars.includes( varying ) === false ) {
-
-					vars.push( varying );
-
-				}
-
-			}
-
-		}
-
-		const builtins = this.getBuiltins( shaderStage );
-
-		if ( builtins ) snippets.push( builtins );
-
-		const code = snippets.join( ',\n\t' );
-
-		return shaderStage === 'vertex' ? this._getWGSLStruct( 'VaryingsStruct', '\t' + code ) : code;
-
-	}
-
-	getUniforms( shaderStage ) {
-
-		const uniforms = this.uniforms[ shaderStage ];
-
-		const bindingSnippets = [];
-		const bufferSnippets = [];
-		const structSnippets = [];
-		const uniformGroups = {};
-
-		let index = this.bindingsOffset[ shaderStage ];
-
-		for ( const uniform of uniforms ) {
-
-			if ( uniform.type === 'texture' || uniform.type === 'cubeTexture' || uniform.type === 'storageTexture' ) {
-
-				const texture = uniform.node.value;
-
-				if ( shaderStage === 'fragment' && this.isUnfilterable( texture ) === false && uniform.node.isStoreTextureNode !== true ) {
-
-					if ( texture.isDepthTexture === true && texture.compareFunction !== null ) {
-
-						bindingSnippets.push( `@binding( ${index ++} ) @group( 0 ) var ${uniform.name}_sampler : sampler_comparison;` );
-
-					} else {
-
-						bindingSnippets.push( `@binding( ${index ++} ) @group( 0 ) var ${uniform.name}_sampler : sampler;` );
-
-					}
-
-				}
-
-				let textureType;
-
-				if ( texture.isCubeTexture === true ) {
-
-					textureType = 'texture_cube<f32>';
-
-				} else if ( texture.isDataArrayTexture === true ) {
-
-					textureType = 'texture_2d_array<f32>';
-
-				} else if ( texture.isDepthTexture === true ) {
-
-					textureType = 'texture_depth_2d';
-
-				} else if ( texture.isVideoTexture === true ) {
-
-					textureType = 'texture_external';
-
-				} else if ( uniform.node.isStoreTextureNode === true ) {
-
-					const format = getFormat( texture );
-
-					textureType = 'texture_storage_2d<' + format + ', write>';
-
-				} else {
-
-					textureType = 'texture_2d<f32>';
-
-				}
-
-				bindingSnippets.push( `@binding( ${index ++} ) @group( 0 ) var ${uniform.name} : ${textureType};` );
-
-			} else if ( uniform.type === 'buffer' || uniform.type === 'storageBuffer' ) {
-
-				const bufferNode = uniform.node;
-				const bufferType = this.getType( bufferNode.bufferType );
-				const bufferCount = bufferNode.bufferCount;
-
-				const bufferCountSnippet = bufferCount > 0 ? ', ' + bufferCount : '';
-				const bufferSnippet = `\t${uniform.name} : array< ${bufferType}${bufferCountSnippet} >\n`;
-				const bufferAccessMode = bufferNode.isStorageBufferNode ? 'storage,read_write' : 'uniform';
-
-				bufferSnippets.push( this._getWGSLStructBinding( 'NodeBuffer_' + bufferNode.id, bufferSnippet, bufferAccessMode, index ++ ) );
-
-			} else {
-
-				const vectorType = this.getType( this.getVectorType( uniform.type ) );
-				const groupName = uniform.groupNode.name;
-
-				const group = uniformGroups[ groupName ] || ( uniformGroups[ groupName ] = {
-					index: index ++,
-					snippets: []
-				} );
-
-				if ( Array.isArray( uniform.value ) === true ) {
-
-					const length = uniform.value.length;
-
-					group.snippets.push( `uniform ${vectorType}[ ${length} ] ${uniform.name}` );
-
-				} else {
-
-					group.snippets.push( `\t${uniform.name} : ${ vectorType}` );
-
-				}
-
-			}
-
-		}
-
-		for ( const name in uniformGroups ) {
-
-			const group = uniformGroups[ name ];
-
-			structSnippets.push( this._getWGSLStructBinding( name, group.snippets.join( ',\n' ), 'uniform', group.index ) );
-
-		}
-
-		let code = bindingSnippets.join( '\n' );
-		code += bufferSnippets.join( '\n' );
-		code += structSnippets.join( '\n' );
-
-		return code;
-
-	}
-
-	buildCode() {
-
-		const shadersData = this.material !== null ? { fragment: {}, vertex: {} } : { compute: {} };
-
-		for ( const shaderStage in shadersData ) {
-
-			const stageData = shadersData[ shaderStage ];
-			stageData.uniforms = this.getUniforms( shaderStage );
-			stageData.attributes = this.getAttributes( shaderStage );
-			stageData.varyings = this.getVaryings( shaderStage );
-			stageData.structs = this.getStructs( shaderStage );
-			stageData.vars = this.getVars( shaderStage );
-			stageData.codes = this.getCodes( shaderStage );
-
-			//
-
-			let flow = '// code\n\n';
-			flow += this.flowCode[ shaderStage ];
-
-			const flowNodes = this.flowNodes[ shaderStage ];
-			const mainNode = flowNodes[ flowNodes.length - 1 ];
-
-			const outputNode = mainNode.outputNode;
-			const isOutputStruct = ( outputNode !== undefined && outputNode.isOutputStructNode === true );
-
-			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\n\t';
-
-					if ( shaderStage === 'vertex' ) {
-
-						flow += `varyings.Vertex = ${ flowSlotData.result };`;
-
-					} else if ( shaderStage === 'fragment' ) {
-
-						if ( isOutputStruct ) {
-
-							stageData.returnType = outputNode.nodeType;
-
-							flow += `return ${ flowSlotData.result };`;
-
-						} else {
-
-							let structSnippet = '\t@location(0) color: vec4<f32>';
-
-							const builtins = this.getBuiltins( 'output' );
-
-							if ( builtins ) structSnippet += ',\n\t' + builtins;
-
-							stageData.returnType = 'OutputStruct';
-							stageData.structs += this._getWGSLStruct( 'OutputStruct', structSnippet );
-							stageData.structs += '\nvar<private> output : OutputStruct;\n\n';
-
-							flow += `output.color = ${ flowSlotData.result };\n\n\treturn output;`;
-
-						}
-
-					}
-
-				}
-
-			}
-
-			stageData.flow = flow;
-
-		}
-
-		if ( this.material !== null ) {
-
-			this.vertexShader = this._getWGSLVertexCode( shadersData.vertex );
-			this.fragmentShader = this._getWGSLFragmentCode( shadersData.fragment );
-
-		} else {
-
-			this.computeShader = this._getWGSLComputeCode( shadersData.compute, ( this.object.workgroupSize || [ 64 ] ).join( ', ' ) );
-
-		}
-
-	}
-
-	getMethod( method, output = null ) {
-
-		let wgslMethod;
-
-		if ( output !== null ) {
-
-			wgslMethod = this._getWGSLMethod( method + '_' + output );
-
-		}
-
-		if ( wgslMethod === undefined ) {
-
-			wgslMethod = this._getWGSLMethod( method );
-
-		}
-
-		return wgslMethod || method;
-
-	}
-
-	getType( type ) {
-
-		return wgslTypeLib[ type ] || type;
-
-	}
-
-	isAvailable( name ) {
-
-		return supports[ name ] === true;
-
-	}
-
-	_getWGSLMethod( method ) {
-
-		if ( wgslPolyfill[ method ] !== undefined ) {
-
-			this._include( method );
-
-		}
-
-		return wgslMethods[ method ];
-
-	}
-
-	_include( name ) {
-
-		const codeNode = wgslPolyfill[ name ];
-		codeNode.build( this );
-
-		if ( this.currentFunctionNode !== null ) {
-
-			this.currentFunctionNode.includes.push( codeNode );
-
-		}
-
-		return codeNode;
-
-	}
-
-	_getWGSLVertexCode( shaderData ) {
-
-		return `${ this.getSignature() }
-
-// uniforms
-${shaderData.uniforms}
-
-// varyings
-${shaderData.varyings}
-var<private> varyings : VaryingsStruct;
-
-// codes
-${shaderData.codes}
-
-@vertex
-fn main( ${shaderData.attributes} ) -> VaryingsStruct {
-
-	// vars
-	${shaderData.vars}
-
-	// flow
-	${shaderData.flow}
-
-	return varyings;
-
-}
-`;
-
-	}
-
-	_getWGSLFragmentCode( shaderData ) {
-
-		return `${ this.getSignature() }
-
-// uniforms
-${shaderData.uniforms}
-
-// structs
-${shaderData.structs}
-
-// codes
-${shaderData.codes}
-
-@fragment
-fn main( ${shaderData.varyings} ) -> ${shaderData.returnType} {
-
-	// vars
-	${shaderData.vars}
-
-	// flow
-	${shaderData.flow}
-
-}
-`;
-
-	}
-
-	_getWGSLComputeCode( shaderData, workgroupSize ) {
-
-		return `${ this.getSignature() }
-// system
-var<private> instanceIndex : u32;
-
-// uniforms
-${shaderData.uniforms}
-
-// codes
-${shaderData.codes}
-
-@compute @workgroup_size( ${workgroupSize} )
-fn main( ${shaderData.attributes} ) {
-
-	// system
-	instanceIndex = id.x;
-
-	// vars
-	${shaderData.vars}
-
-	// flow
-	${shaderData.flow}
-
-}
-`;
-
-	}
-
-	_getWGSLStruct( name, vars ) {
-
-		return `
-struct ${name} {
-${vars}
-};`;
-
-	}
-
-	_getWGSLStructBinding( name, vars, access, binding = 0, group = 0 ) {
-
-		const structName = name + 'Struct';
-		const structSnippet = this._getWGSLStruct( structName, vars );
-
-		return `${structSnippet}
-@binding( ${binding} ) @group( ${group} )
-var<${access}> ${name} : ${structName};`;
-
-	}
-
-}
-
-export default WGSLNodeBuilder;
+import { NoColorSpace, FloatType } from 'three';
+
+import NodeUniformsGroup from '../../common/nodes/NodeUniformsGroup.js';
+
+import NodeSampler from '../../common/nodes/NodeSampler.js';
+import { NodeSampledTexture, NodeSampledCubeTexture } from '../../common/nodes/NodeSampledTexture.js';
+
+import NodeUniformBuffer from '../../common/nodes/NodeUniformBuffer.js';
+import NodeStorageBuffer from '../../common/nodes/NodeStorageBuffer.js';
+
+import { NodeBuilder, CodeNode } from '../../../nodes/Nodes.js';
+
+import { getFormat } from '../utils/WebGPUTextureUtils.js';
+
+import WGSLNodeParser from './WGSLNodeParser.js';
+
+// GPUShaderStage is not defined in browsers not supporting WebGPU
+const GPUShaderStage = self.GPUShaderStage;
+
+const gpuShaderStageLib = {
+	'vertex': GPUShaderStage ? GPUShaderStage.VERTEX : 1,
+	'fragment': GPUShaderStage ? GPUShaderStage.FRAGMENT : 2,
+	'compute': GPUShaderStage ? GPUShaderStage.COMPUTE : 4
+};
+
+const supports = {
+	instance: true,
+	storageBuffer: true
+};
+
+const wgslFnOpLib = {
+	'^^': 'threejs_xor'
+};
+
+const wgslTypeLib = {
+	float: 'f32',
+	int: 'i32',
+	uint: 'u32',
+	bool: 'bool',
+	color: 'vec3<f32>',
+
+	vec2: 'vec2<f32>',
+	ivec2: 'vec2<i32>',
+	uvec2: 'vec2<u32>',
+	bvec2: 'vec2<bool>',
+
+	vec3: 'vec3<f32>',
+	ivec3: 'vec3<i32>',
+	uvec3: 'vec3<u32>',
+	bvec3: 'vec3<bool>',
+
+	vec4: 'vec4<f32>',
+	ivec4: 'vec4<i32>',
+	uvec4: 'vec4<u32>',
+	bvec4: 'vec4<bool>',
+
+	mat2: 'mat2x2<f32>',
+	imat2: 'mat2x2<i32>',
+	umat2: 'mat2x2<u32>',
+	bmat2: 'mat2x2<bool>',
+
+	mat3: 'mat3x3<f32>',
+	imat3: 'mat3x3<i32>',
+	umat3: 'mat3x3<u32>',
+	bmat3: 'mat3x3<bool>',
+
+	mat4: 'mat4x4<f32>',
+	imat4: 'mat4x4<i32>',
+	umat4: 'mat4x4<u32>',
+	bmat4: 'mat4x4<bool>'
+};
+
+const wgslMethods = {
+	dFdx: 'dpdx',
+	dFdy: '- dpdy',
+	mod_float: 'threejs_mod_float',
+	mod_vec2: 'threejs_mod_vec2',
+	mod_vec3: 'threejs_mod_vec3',
+	mod_vec4: 'threejs_mod_vec4',
+	equals_bool: 'threejs_equals_bool',
+	equals_bvec2: 'threejs_equals_bvec2',
+	equals_bvec3: 'threejs_equals_bvec3',
+	equals_bvec4: 'threejs_equals_bvec4',
+	lessThanEqual: 'threejs_lessThanEqual',
+	greaterThan: 'threejs_greaterThan',
+	inversesqrt: 'inverseSqrt',
+	bitcast: 'bitcast<f32>'
+};
+
+const wgslPolyfill = {
+	threejs_xor: new CodeNode( `
+fn threejs_xor( a : bool, b : bool ) -> bool {
+
+	return ( a || b ) && !( a && b );
+
+}
+` ),
+	lessThanEqual: new CodeNode( `
+fn threejs_lessThanEqual( a : vec3<f32>, b : vec3<f32> ) -> vec3<bool> {
+
+	return vec3<bool>( a.x <= b.x, a.y <= b.y, a.z <= b.z );
+
+}
+` ),
+	greaterThan: new CodeNode( `
+fn threejs_greaterThan( a : vec3<f32>, b : vec3<f32> ) -> vec3<bool> {
+
+	return vec3<bool>( a.x > b.x, a.y > b.y, a.z > b.z );
+
+}
+` ),
+	mod_float: new CodeNode( 'fn threejs_mod_float( x : f32, y : f32 ) -> f32 { return x - y * floor( x / y ); }' ),
+	mod_vec2: new CodeNode( 'fn threejs_mod_vec2( x : vec2f, y : vec2f ) -> vec2f { return x - y * floor( x / y ); }' ),
+	mod_vec3: new CodeNode( 'fn threejs_mod_vec3( x : vec3f, y : vec3f ) -> vec3f { return x - y * floor( x / y ); }' ),
+	mod_vec4: new CodeNode( 'fn threejs_mod_vec4( x : vec4f, y : vec4f ) -> vec4f { return x - y * floor( x / y ); }' ),
+	equals_bool: new CodeNode( 'fn threejs_equals_bool( a : bool, b : bool ) -> bool { return a == b; }' ),
+	equals_bvec2: new CodeNode( 'fn threejs_equals_bvec2( a : vec2f, b : vec2f ) -> vec2<bool> { return vec2<bool>( a.x == b.x, a.y == b.y ); }' ),
+	equals_bvec3: new CodeNode( 'fn threejs_equals_bvec3( a : vec3f, b : vec3f ) -> vec3<bool> { return vec3<bool>( a.x == b.x, a.y == b.y, a.z == b.z ); }' ),
+	equals_bvec4: new CodeNode( 'fn threejs_equals_bvec4( a : vec4f, b : vec4f ) -> vec4<bool> { return vec4<bool>( a.x == b.x, a.y == b.y, a.z == b.z, a.w == b.w ); }' ),
+	repeatWrapping: new CodeNode( `
+fn threejs_repeatWrapping( uv : vec2<f32>, dimension : vec2<u32> ) -> vec2<u32> {
+
+	let uvScaled = vec2<u32>( uv * vec2<f32>( dimension ) );
+
+	return ( ( uvScaled % dimension ) + dimension ) % dimension;
+
+}
+` )
+};
+
+class WGSLNodeBuilder extends NodeBuilder {
+
+	constructor( object, renderer, scene = null ) {
+
+		super( object, renderer, new WGSLNodeParser(), scene );
+
+		this.uniformGroups = {};
+
+		this.builtins = {};
+
+	}
+
+	needsColorSpaceToLinear( texture ) {
+
+		return texture.isVideoTexture === true && texture.colorSpace !== NoColorSpace;
+
+	}
+
+	_generateTextureSample( texture, textureProperty, uvSnippet, depthSnippet, shaderStage = this.shaderStage ) {
+
+		if ( shaderStage === 'fragment' ) {
+
+			if ( depthSnippet ) {
+
+				return `textureSample( ${ textureProperty }, ${ textureProperty }_sampler, ${ uvSnippet }, ${ depthSnippet } )`;
+
+			} else {
+
+				return `textureSample( ${ textureProperty }, ${ textureProperty }_sampler, ${ uvSnippet } )`;
+
+			}
+
+		} else {
+
+			return this.generateTextureLod( texture, textureProperty, uvSnippet );
+
+		}
+
+	}
+
+	_generateVideoSample( textureProperty, uvSnippet, shaderStage = this.shaderStage ) {
+
+		if ( shaderStage === 'fragment' ) {
+
+			return `textureSampleBaseClampToEdge( ${ textureProperty }, ${ textureProperty }_sampler, vec2<f32>( ${ uvSnippet }.x, 1.0 - ${ uvSnippet }.y ) )`;
+
+		} else {
+
+			console.error( `WebGPURenderer: THREE.VideoTexture does not support ${ shaderStage } shader.` );
+
+		}
+
+	}
+
+	_generateTextureSampleLevel( texture, textureProperty, uvSnippet, levelSnippet, depthSnippet, shaderStage = this.shaderStage ) {
+
+		if ( shaderStage === 'fragment' && this.isUnfilterable( texture ) === false ) {
+
+			return `textureSampleLevel( ${ textureProperty }, ${ textureProperty }_sampler, ${ uvSnippet }, ${ levelSnippet } )`;
+
+		} else {
+
+			return this.generateTextureLod( texture, textureProperty, uvSnippet, levelSnippet );
+
+		}
+
+	}
+
+	generateTextureLod( texture, textureProperty, uvSnippet, levelSnippet = '0' ) {
+
+		this._include( 'repeatWrapping' );
+
+		const dimension = `textureDimensions( ${ textureProperty }, 0 )`;
+
+		return `textureLoad( ${ textureProperty }, threejs_repeatWrapping( ${ uvSnippet }, ${ dimension } ), i32( ${ levelSnippet } ) )`;
+
+	}
+
+	generateTextureLoad( texture, textureProperty, uvIndexSnippet, depthSnippet, levelSnippet = '0u' ) {
+
+		if ( depthSnippet ) {
+
+			return `textureLoad( ${ textureProperty }, ${ uvIndexSnippet }, ${ depthSnippet }, ${ levelSnippet } )`;
+
+		} else {
+
+			return `textureLoad( ${ textureProperty }, ${ uvIndexSnippet }, ${ levelSnippet } )`;
+
+		}
+
+	}
+
+	generateTextureStore( texture, textureProperty, uvIndexSnippet, valueSnippet ) {
+
+		return `textureStore( ${ textureProperty }, ${ uvIndexSnippet }, ${ valueSnippet } )`;
+
+	}
+
+	isUnfilterable( texture ) {
+
+		return texture.isDataTexture === true && texture.type === FloatType;
+
+	}
+
+	generateTexture( texture, textureProperty, uvSnippet, depthSnippet, shaderStage = this.shaderStage ) {
+
+		let snippet = null;
+
+		if ( texture.isVideoTexture === true ) {
+
+			snippet = this._generateVideoSample( textureProperty, uvSnippet, shaderStage );
+
+		} else if ( this.isUnfilterable( texture ) ) {
+
+			snippet = this.generateTextureLod( texture, textureProperty, uvSnippet, '0', depthSnippet, shaderStage );
+
+		} else {
+
+			snippet = this._generateTextureSample( texture, textureProperty, uvSnippet, depthSnippet, shaderStage );
+
+		}
+
+		return snippet;
+
+	}
+
+	generateTextureCompare( texture, textureProperty, uvSnippet, compareSnippet, depthSnippet, shaderStage = this.shaderStage ) {
+
+		if ( shaderStage === 'fragment' ) {
+
+			return `textureSampleCompare( ${ textureProperty }, ${ textureProperty }_sampler, ${ uvSnippet }, ${ compareSnippet } )`;
+
+		} else {
+
+			console.error( `WebGPURenderer: THREE.DepthTexture.compareFunction() does not support ${ shaderStage } shader.` );
+
+		}
+
+	}
+
+	generateTextureLevel( texture, textureProperty, uvSnippet, levelSnippet, depthSnippet, shaderStage = this.shaderStage ) {
+
+		let snippet = null;
+
+		if ( texture.isVideoTexture === true ) {
+
+			snippet = this._generateVideoSample( textureProperty, uvSnippet, shaderStage );
+
+		} else {
+
+			snippet = this._generateTextureSampleLevel( texture, textureProperty, uvSnippet, levelSnippet, depthSnippet, shaderStage );
+
+		}
+
+		return snippet;
+
+	}
+
+	getPropertyName( node, shaderStage = this.shaderStage ) {
+
+		if ( node.isNodeVarying === true && node.needsInterpolation === true ) {
+
+			if ( shaderStage === 'vertex' ) {
+
+				return `varyings.${ node.name }`;
+
+			}
+
+		} else if ( node.isNodeUniform === true ) {
+
+			const name = node.name;
+			const type = node.type;
+
+			if ( type === 'texture' || type === 'cubeTexture' || type === 'storageTexture' ) {
+
+				return name;
+
+			} else if ( type === 'buffer' || type === 'storageBuffer' ) {
+
+				return `NodeBuffer_${ node.id }.${name}`;
+
+			} else {
+
+				return node.groupNode.name + '.' + name;
+
+			}
+
+		}
+
+		return super.getPropertyName( node );
+
+	}
+
+	_getUniformGroupCount( shaderStage ) {
+
+		return Object.keys( this.uniforms[ shaderStage ] ).length;
+
+	}
+
+	getFunctionOperator( op ) {
+
+		const fnOp = wgslFnOpLib[ op ];
+
+		if ( fnOp !== undefined ) {
+
+			this._include( fnOp );
+
+			return fnOp;
+
+		}
+
+		return null;
+
+	}
+
+	getUniformFromNode( node, type, shaderStage, name = null ) {
+
+		const uniformNode = super.getUniformFromNode( node, type, shaderStage, name );
+		const nodeData = this.getDataFromNode( node, shaderStage, this.globalCache );
+
+		if ( nodeData.uniformGPU === undefined ) {
+
+			let uniformGPU;
+
+			const bindings = this.bindings[ shaderStage ];
+
+			if ( type === 'texture' || type === 'cubeTexture' || type === 'storageTexture' ) {
+
+				let texture = null;
+
+				if ( type === 'texture' || type === 'storageTexture' ) {
+
+					texture = new NodeSampledTexture( uniformNode.name, uniformNode.node );
+
+				} else if ( type === 'cubeTexture' ) {
+
+					texture = new NodeSampledCubeTexture( uniformNode.name, uniformNode.node );
+
+				}
+
+				texture.store = node.isStoreTextureNode === true;
+				texture.setVisibility( gpuShaderStageLib[ shaderStage ] );
+
+				if ( shaderStage === 'fragment' && this.isUnfilterable( node.value ) === false && texture.store === false ) {
+
+					const sampler = new NodeSampler( `${uniformNode.name}_sampler`, uniformNode.node );
+					sampler.setVisibility( gpuShaderStageLib[ shaderStage ] );
+
+					bindings.push( sampler, texture );
+
+					uniformGPU = [ sampler, texture ];
+
+				} else {
+
+					bindings.push( texture );
+
+					uniformGPU = [ texture ];
+
+				}
+
+			} else if ( type === 'buffer' || type === 'storageBuffer' ) {
+
+				const bufferClass = type === 'storageBuffer' ? NodeStorageBuffer : NodeUniformBuffer;
+				const buffer = new bufferClass( node );
+				buffer.setVisibility( gpuShaderStageLib[ shaderStage ] );
+
+				bindings.push( buffer );
+
+				uniformGPU = buffer;
+
+			} else {
+
+				const group = node.groupNode;
+				const groupName = group.name;
+
+				const uniformsStage = this.uniformGroups[ shaderStage ] || ( this.uniformGroups[ shaderStage ] = {} );
+
+				let uniformsGroup = uniformsStage[ groupName ];
+
+				if ( uniformsGroup === undefined ) {
+
+					uniformsGroup = new NodeUniformsGroup( groupName, group );
+					uniformsGroup.setVisibility( gpuShaderStageLib[ shaderStage ] );
+
+					uniformsStage[ groupName ] = uniformsGroup;
+
+					bindings.push( uniformsGroup );
+
+				}
+
+				uniformGPU = this.getNodeUniform( uniformNode, type );
+
+				uniformsGroup.addUniform( uniformGPU );
+
+			}
+
+			nodeData.uniformGPU = uniformGPU;
+
+			if ( shaderStage === 'vertex' ) {
+
+				this.bindingsOffset[ 'fragment' ] = bindings.length;
+
+			}
+
+		}
+
+		return uniformNode;
+
+	}
+
+	isReference( type ) {
+
+		return super.isReference( type ) || type === 'texture_2d' || type === 'texture_cube' || type === 'texture_depth_2d' || type === 'texture_storage_2d';
+
+	}
+
+	getBuiltin( name, property, type, shaderStage = this.shaderStage ) {
+
+		const map = this.builtins[ shaderStage ] || ( this.builtins[ shaderStage ] = new Map() );
+
+		if ( map.has( name ) === false ) {
+
+			map.set( name, {
+				name,
+				property,
+				type
+			} );
+
+		}
+
+		return property;
+
+	}
+
+	getVertexIndex() {
+
+		if ( this.shaderStage === 'vertex' ) {
+
+			return this.getBuiltin( 'vertex_index', 'vertexIndex', 'u32', 'attribute' );
+
+		}
+
+		return 'vertexIndex';
+
+	}
+
+	buildFunctionCode( shaderNode ) {
+
+		const layout = shaderNode.layout;
+		const flowData = this.flowShaderNode( shaderNode );
+
+		const parameters = [];
+
+		for ( const input of layout.inputs ) {
+
+			parameters.push( input.name + ' : ' + this.getType( input.type ) );
+
+		}
+
+		//
+
+		const code = `fn ${ layout.name }( ${ parameters.join( ', ' ) } ) -> ${ this.getType( layout.type ) } {
+${ flowData.vars }
+${ flowData.code }
+	return ${ flowData.result };
+
+}`;
+
+		//
+
+		return code;
+
+	}
+
+	getInstanceIndex() {
+
+		if ( this.shaderStage === 'vertex' ) {
+
+			return this.getBuiltin( 'instance_index', 'instanceIndex', 'u32', 'attribute' );
+
+		}
+
+		return 'instanceIndex';
+
+	}
+
+	getFrontFacing() {
+
+		return this.getBuiltin( 'front_facing', 'isFront', 'bool' );
+
+	}
+
+	getFragCoord() {
+
+		return this.getBuiltin( 'position', 'fragCoord', 'vec4<f32>' ) + '.xy';
+
+	}
+
+	getFragDepth() {
+
+		return 'output.' + this.getBuiltin( 'frag_depth', 'depth', 'f32', 'output' );
+
+	}
+
+	isFlipY() {
+
+		return false;
+
+	}
+
+	getBuiltins( shaderStage ) {
+
+		const snippets = [];
+		const builtins = this.builtins[ shaderStage ];
+
+		if ( builtins !== undefined ) {
+
+			for ( const { name, property, type } of builtins.values() ) {
+
+				snippets.push( `@builtin( ${name} ) ${property} : ${type}` );
+
+			}
+
+		}
+
+		return snippets.join( ',\n\t' );
+
+	}
+
+	getAttributes( shaderStage ) {
+
+		const snippets = [];
+
+		if ( shaderStage === 'compute' ) {
+
+			this.getBuiltin( 'global_invocation_id', 'id', 'vec3<u32>', 'attribute' );
+
+		}
+
+		if ( shaderStage === 'vertex' || shaderStage === 'compute' ) {
+
+			const builtins = this.getBuiltins( 'attribute' );
+
+			if ( builtins ) snippets.push( builtins );
+
+			const attributes = this.getAttributesArray();
+
+			for ( let index = 0, length = attributes.length; index < length; index ++ ) {
+
+				const attribute = attributes[ index ];
+				const name = attribute.name;
+				const type = this.getType( attribute.type );
+
+				snippets.push( `@location( ${index} ) ${ name } : ${ type }` );
+
+			}
+
+		}
+
+		return snippets.join( ',\n\t' );
+
+	}
+
+	getStructMembers( struct ) {
+
+		const snippets = [];
+		const members = struct.getMemberTypes();
+
+		for ( let i = 0; i < members.length; i ++ ) {
+
+			const member = members[ i ];
+			snippets.push( `\t@location( ${i} ) m${i} : ${ member }<f32>` );
+
+		}
+
+		return snippets.join( ',\n' );
+
+	}
+
+	getStructs( shaderStage ) {
+
+		const snippets = [];
+		const structs = this.structs[ shaderStage ];
+
+		for ( let index = 0, length = structs.length; index < length; index ++ ) {
+
+			const struct = structs[ index ];
+			const name = struct.name;
+
+			let snippet = `\struct ${ name } {\n`;
+			snippet += this.getStructMembers( struct );
+			snippet += '\n}';
+
+			snippets.push( snippet );
+
+		}
+
+		return snippets.join( '\n\n' );
+
+	}
+
+	getVar( type, name ) {
+
+		return `var ${ name } : ${ this.getType( type ) }`;
+
+	}
+
+	getVars( shaderStage ) {
+
+		const snippets = [];
+		const vars = this.vars[ shaderStage ];
+
+		if ( vars !== undefined ) {
+
+			for ( const variable of vars ) {
+
+				snippets.push( `\t${ this.getVar( variable.type, variable.name ) };` );
+
+			}
+
+		}
+
+		return `\n${ snippets.join( '\n' ) }\n`;
+
+	}
+
+	getVaryings( shaderStage ) {
+
+		const snippets = [];
+
+		if ( shaderStage === 'vertex' ) {
+
+			this.getBuiltin( 'position', 'Vertex', 'vec4<f32>', 'vertex' );
+
+		}
+
+		if ( shaderStage === 'vertex' || shaderStage === 'fragment' ) {
+
+			const varyings = this.varyings;
+			const vars = this.vars[ shaderStage ];
+
+			for ( let index = 0; index < varyings.length; index ++ ) {
+
+				const varying = varyings[ index ];
+
+				if ( varying.needsInterpolation ) {
+
+					let attributesSnippet = `@location( ${index} )`;
+
+					if ( /^(int|uint|ivec|uvec)/.test( varying.type ) ) {
+
+						attributesSnippet += ' @interpolate( flat )';
+
+
+					}
+
+					snippets.push( `${ attributesSnippet } ${ varying.name } : ${ this.getType( varying.type ) }` );
+
+				} else if ( shaderStage === 'vertex' && vars.includes( varying ) === false ) {
+
+					vars.push( varying );
+
+				}
+
+			}
+
+		}
+
+		const builtins = this.getBuiltins( shaderStage );
+
+		if ( builtins ) snippets.push( builtins );
+
+		const code = snippets.join( ',\n\t' );
+
+		return shaderStage === 'vertex' ? this._getWGSLStruct( 'VaryingsStruct', '\t' + code ) : code;
+
+	}
+
+	getUniforms( shaderStage ) {
+
+		const uniforms = this.uniforms[ shaderStage ];
+
+		const bindingSnippets = [];
+		const bufferSnippets = [];
+		const structSnippets = [];
+		const uniformGroups = {};
+
+		let index = this.bindingsOffset[ shaderStage ];
+
+		for ( const uniform of uniforms ) {
+
+			if ( uniform.type === 'texture' || uniform.type === 'cubeTexture' || uniform.type === 'storageTexture' ) {
+
+				const texture = uniform.node.value;
+
+				if ( shaderStage === 'fragment' && this.isUnfilterable( texture ) === false && uniform.node.isStoreTextureNode !== true ) {
+
+					if ( texture.isDepthTexture === true && texture.compareFunction !== null ) {
+
+						bindingSnippets.push( `@binding( ${index ++} ) @group( 0 ) var ${uniform.name}_sampler : sampler_comparison;` );
+
+					} else {
+
+						bindingSnippets.push( `@binding( ${index ++} ) @group( 0 ) var ${uniform.name}_sampler : sampler;` );
+
+					}
+
+				}
+
+				let textureType;
+
+				if ( texture.isCubeTexture === true ) {
+
+					textureType = 'texture_cube<f32>';
+
+				} else if ( texture.isDataArrayTexture === true ) {
+
+					textureType = 'texture_2d_array<f32>';
+
+				} else if ( texture.isDepthTexture === true ) {
+
+					textureType = 'texture_depth_2d';
+
+				} else if ( texture.isVideoTexture === true ) {
+
+					textureType = 'texture_external';
+
+				} else if ( uniform.node.isStoreTextureNode === true ) {
+
+					const format = getFormat( texture );
+
+					textureType = 'texture_storage_2d<' + format + ', write>';
+
+				} else {
+
+					textureType = 'texture_2d<f32>';
+
+				}
+
+				bindingSnippets.push( `@binding( ${index ++} ) @group( 0 ) var ${uniform.name} : ${textureType};` );
+
+			} else if ( uniform.type === 'buffer' || uniform.type === 'storageBuffer' ) {
+
+				const bufferNode = uniform.node;
+				const bufferType = this.getType( bufferNode.bufferType );
+				const bufferCount = bufferNode.bufferCount;
+
+				const bufferCountSnippet = bufferCount > 0 ? ', ' + bufferCount : '';
+				const bufferSnippet = `\t${uniform.name} : array< ${bufferType}${bufferCountSnippet} >\n`;
+				const bufferAccessMode = bufferNode.isStorageBufferNode ? 'storage,read_write' : 'uniform';
+
+				bufferSnippets.push( this._getWGSLStructBinding( 'NodeBuffer_' + bufferNode.id, bufferSnippet, bufferAccessMode, index ++ ) );
+
+			} else {
+
+				const vectorType = this.getType( this.getVectorType( uniform.type ) );
+				const groupName = uniform.groupNode.name;
+
+				const group = uniformGroups[ groupName ] || ( uniformGroups[ groupName ] = {
+					index: index ++,
+					snippets: []
+				} );
+
+				group.snippets.push( `\t${ uniform.name } : ${ vectorType }` );
+
+			}
+
+		}
+
+		for ( const name in uniformGroups ) {
+
+			const group = uniformGroups[ name ];
+
+			structSnippets.push( this._getWGSLStructBinding( name, group.snippets.join( ',\n' ), 'uniform', group.index ) );
+
+		}
+
+		let code = bindingSnippets.join( '\n' );
+		code += bufferSnippets.join( '\n' );
+		code += structSnippets.join( '\n' );
+
+		return code;
+
+	}
+
+	buildCode() {
+
+		const shadersData = this.material !== null ? { fragment: {}, vertex: {} } : { compute: {} };
+
+		for ( const shaderStage in shadersData ) {
+
+			const stageData = shadersData[ shaderStage ];
+			stageData.uniforms = this.getUniforms( shaderStage );
+			stageData.attributes = this.getAttributes( shaderStage );
+			stageData.varyings = this.getVaryings( shaderStage );
+			stageData.structs = this.getStructs( shaderStage );
+			stageData.vars = this.getVars( shaderStage );
+			stageData.codes = this.getCodes( shaderStage );
+
+			//
+
+			let flow = '// code\n\n';
+			flow += this.flowCode[ shaderStage ];
+
+			const flowNodes = this.flowNodes[ shaderStage ];
+			const mainNode = flowNodes[ flowNodes.length - 1 ];
+
+			const outputNode = mainNode.outputNode;
+			const isOutputStruct = ( outputNode !== undefined && outputNode.isOutputStructNode === true );
+
+			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\n\t';
+
+					if ( shaderStage === 'vertex' ) {
+
+						flow += `varyings.Vertex = ${ flowSlotData.result };`;
+
+					} else if ( shaderStage === 'fragment' ) {
+
+						if ( isOutputStruct ) {
+
+							stageData.returnType = outputNode.nodeType;
+
+							flow += `return ${ flowSlotData.result };`;
+
+						} else {
+
+							let structSnippet = '\t@location(0) color: vec4<f32>';
+
+							const builtins = this.getBuiltins( 'output' );
+
+							if ( builtins ) structSnippet += ',\n\t' + builtins;
+
+							stageData.returnType = 'OutputStruct';
+							stageData.structs += this._getWGSLStruct( 'OutputStruct', structSnippet );
+							stageData.structs += '\nvar<private> output : OutputStruct;\n\n';
+
+							flow += `output.color = ${ flowSlotData.result };\n\n\treturn output;`;
+
+						}
+
+					}
+
+				}
+
+			}
+
+			stageData.flow = flow;
+
+		}
+
+		if ( this.material !== null ) {
+
+			this.vertexShader = this._getWGSLVertexCode( shadersData.vertex );
+			this.fragmentShader = this._getWGSLFragmentCode( shadersData.fragment );
+
+		} else {
+
+			this.computeShader = this._getWGSLComputeCode( shadersData.compute, ( this.object.workgroupSize || [ 64 ] ).join( ', ' ) );
+
+		}
+
+	}
+
+	getMethod( method, output = null ) {
+
+		let wgslMethod;
+
+		if ( output !== null ) {
+
+			wgslMethod = this._getWGSLMethod( method + '_' + output );
+
+		}
+
+		if ( wgslMethod === undefined ) {
+
+			wgslMethod = this._getWGSLMethod( method );
+
+		}
+
+		return wgslMethod || method;
+
+	}
+
+	getType( type ) {
+
+		return wgslTypeLib[ type ] || type;
+
+	}
+
+	isAvailable( name ) {
+
+		return supports[ name ] === true;
+
+	}
+
+	_getWGSLMethod( method ) {
+
+		if ( wgslPolyfill[ method ] !== undefined ) {
+
+			this._include( method );
+
+		}
+
+		return wgslMethods[ method ];
+
+	}
+
+	_include( name ) {
+
+		const codeNode = wgslPolyfill[ name ];
+		codeNode.build( this );
+
+		if ( this.currentFunctionNode !== null ) {
+
+			this.currentFunctionNode.includes.push( codeNode );
+
+		}
+
+		return codeNode;
+
+	}
+
+	_getWGSLVertexCode( shaderData ) {
+
+		return `${ this.getSignature() }
+
+// uniforms
+${shaderData.uniforms}
+
+// varyings
+${shaderData.varyings}
+var<private> varyings : VaryingsStruct;
+
+// codes
+${shaderData.codes}
+
+@vertex
+fn main( ${shaderData.attributes} ) -> VaryingsStruct {
+
+	// vars
+	${shaderData.vars}
+
+	// flow
+	${shaderData.flow}
+
+	return varyings;
+
+}
+`;
+
+	}
+
+	_getWGSLFragmentCode( shaderData ) {
+
+		return `${ this.getSignature() }
+
+// uniforms
+${shaderData.uniforms}
+
+// structs
+${shaderData.structs}
+
+// codes
+${shaderData.codes}
+
+@fragment
+fn main( ${shaderData.varyings} ) -> ${shaderData.returnType} {
+
+	// vars
+	${shaderData.vars}
+
+	// flow
+	${shaderData.flow}
+
+}
+`;
+
+	}
+
+	_getWGSLComputeCode( shaderData, workgroupSize ) {
+
+		return `${ this.getSignature() }
+// system
+var<private> instanceIndex : u32;
+
+// uniforms
+${shaderData.uniforms}
+
+// codes
+${shaderData.codes}
+
+@compute @workgroup_size( ${workgroupSize} )
+fn main( ${shaderData.attributes} ) {
+
+	// system
+	instanceIndex = id.x;
+
+	// vars
+	${shaderData.vars}
+
+	// flow
+	${shaderData.flow}
+
+}
+`;
+
+	}
+
+	_getWGSLStruct( name, vars ) {
+
+		return `
+struct ${name} {
+${vars}
+};`;
+
+	}
+
+	_getWGSLStructBinding( name, vars, access, binding = 0, group = 0 ) {
+
+		const structName = name + 'Struct';
+		const structSnippet = this._getWGSLStruct( structName, vars );
+
+		return `${structSnippet}
+@binding( ${binding} ) @group( ${group} )
+var<${access}> ${name} : ${structName};`;
+
+	}
+
+}
+
+export default WGSLNodeBuilder;