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', vec2: 'vec2', ivec2: 'vec2', uvec2: 'vec2', bvec2: 'vec2', vec3: 'vec3', ivec3: 'vec3', uvec3: 'vec3', bvec3: 'vec3', vec4: 'vec4', ivec4: 'vec4', uvec4: 'vec4', bvec4: 'vec4', mat2: 'mat2x2', imat2: 'mat2x2', umat2: 'mat2x2', bmat2: 'mat2x2', mat3: 'mat3x3', imat3: 'mat3x3', umat3: 'mat3x3', bmat3: 'mat3x3', mat4: 'mat4x4', imat4: 'mat4x4', umat4: 'mat4x4', bmat4: 'mat4x4' }; 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' }; 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, b : vec3 ) -> vec3 { return vec3( a.x <= b.x, a.y <= b.y, a.z <= b.z ); } ` ), greaterThan: new CodeNode( ` fn threejs_greaterThan( a : vec3, b : vec3 ) -> vec3 { return vec3( 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 { return vec2( a.x == b.x, a.y == b.y ); }' ), equals_bvec3: new CodeNode( 'fn threejs_equals_bvec3( a : vec3f, b : vec3f ) -> vec3 { return vec3( 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 { return vec4( a.x == b.x, a.y == b.y, a.z == b.z, a.w == b.w ); }' ), repeatWrapping: new CodeNode( ` fn threejs_repeatWrapping( uv : vec2, dimension : vec2 ) -> vec2 { let uvScaled = vec2( uv * vec2( 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( ${ 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 this.getComponentTypeFromTexture( texture ) !== 'float' || ( 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; } generateTextureGrad( texture, textureProperty, uvSnippet, gradSnippet, depthSnippet, shaderStage = this.shaderStage ) { if ( shaderStage === 'fragment' ) { // TODO handle i32 or u32 --> uvSnippet, array_index: A, ddx, ddy return `textureSampleGrad( ${ textureProperty }, ${ textureProperty }_sampler, ${ uvSnippet }, ${ gradSnippet[ 0 ] }, ${ gradSnippet[ 1 ] } )`; } else { console.error( `WebGPURenderer: THREE.TextureNode.gradient() does not support ${ shaderStage } shader.` ); } } 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' ) + '.xyz'; } 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', '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 }` ); } 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', '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'; } else if ( texture.isDataArrayTexture === true ) { textureType = 'texture_2d_array'; } 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 { const componentPrefix = this.getComponentTypeFromTexture( texture ).charAt( 0 ); textureType = `texture_2d<${ componentPrefix }32>`; } 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'; const builtins = this.getBuiltins( 'output' ); if ( builtins ) structSnippet += ',\n\t' + builtins; stageData.returnType = 'OutputStruct'; stageData.structs += this._getWGSLStruct( 'OutputStruct', structSnippet ); stageData.structs += '\nvar 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 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 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;