import { MathNode, GLSLNodeParser, NodeBuilder, UniformNode, vectorComponents } from '../../../nodes/Nodes.js'; import NodeUniformBuffer from '../../common/nodes/NodeUniformBuffer.js'; import NodeUniformsGroup from '../../common/nodes/NodeUniformsGroup.js'; import { NodeSampledTexture, NodeSampledCubeTexture } from '../../common/nodes/NodeSampledTexture.js'; import { RedFormat, RGFormat, IntType, DataTexture, RGBFormat, RGBAFormat, FloatType } from 'three'; const glslMethods = { [ MathNode.ATAN2 ]: 'atan', textureDimensions: 'textureSize', equals: 'equal' }; const precisionLib = { low: 'lowp', medium: 'mediump', high: 'highp' }; const supports = { instance: true, swizzleAssign: true }; const defaultPrecisions = ` precision highp float; precision highp int; precision mediump sampler2DArray; precision lowp sampler2DShadow; `; class GLSLNodeBuilder extends NodeBuilder { constructor( object, renderer, scene = null ) { super( object, renderer, new GLSLNodeParser(), scene ); this.uniformGroups = {}; this.transforms = []; } getMethod( method ) { return glslMethods[ method ] || method; } getPropertyName( node, shaderStage ) { if ( node.isOutputStructVar ) return ''; return super.getPropertyName( node, shaderStage ); } buildFunctionCode( shaderNode ) { const layout = shaderNode.layout; const flowData = this.flowShaderNode( shaderNode ); const parameters = []; for ( const input of layout.inputs ) { parameters.push( this.getType( input.type ) + ' ' + input.name ); } // const code = `${ this.getType( layout.type ) } ${ layout.name }( ${ parameters.join( ', ' ) } ) { ${ flowData.vars } ${ flowData.code } return ${ flowData.result }; }`; // return code; } setupPBO( storageBufferNode ) { const attribute = storageBufferNode.value; if ( attribute.pbo === undefined ) { const originalArray = attribute.array; const numElements = attribute.count * attribute.itemSize; const { itemSize } = attribute; let format = RedFormat; if ( itemSize === 2 ) { format = RGFormat; } else if ( itemSize === 3 ) { format = RGBFormat; } else if ( itemSize === 4 ) { format = RGBAFormat; } const width = Math.pow( 2, Math.ceil( Math.log2( Math.sqrt( numElements / itemSize ) ) ) ); let height = Math.ceil( ( numElements / itemSize ) / width ); if ( width * height * itemSize < numElements ) height ++; // Ensure enough space const newSize = width * height * itemSize; const newArray = new Float32Array( newSize ); newArray.set( originalArray, 0 ); attribute.array = newArray; const pboTexture = new DataTexture( attribute.array, width, height, format, FloatType ); pboTexture.needsUpdate = true; pboTexture.isPBOTexture = true; const pbo = new UniformNode( pboTexture ); pbo.setPrecision( 'high' ); attribute.pboNode = pbo; attribute.pbo = pbo.value; this.getUniformFromNode( attribute.pboNode, 'texture', this.shaderStage, this.context.label ); } } generatePBO( storageArrayElementNode ) { const { node, indexNode } = storageArrayElementNode; const attribute = node.value; if ( this.renderer.backend.has( attribute ) ) { const attributeData = this.renderer.backend.get( attribute ); attributeData.pbo = attribute.pbo; } const nodeUniform = this.getUniformFromNode( attribute.pboNode, 'texture', this.shaderStage, this.context.label ); const textureName = this.getPropertyName( nodeUniform ); indexNode.increaseUsage( this ); // force cache generate to be used as index in x,y const indexSnippet = indexNode.build( this, 'uint' ); const elementNodeData = this.getDataFromNode( storageArrayElementNode ); let propertyName = elementNodeData.propertyName; if ( propertyName === undefined ) { // property element const nodeVar = this.getVarFromNode( storageArrayElementNode ); propertyName = this.getPropertyName( nodeVar ); // property size const bufferNodeData = this.getDataFromNode( node ); let propertySizeName = bufferNodeData.propertySizeName; if ( propertySizeName === undefined ) { propertySizeName = propertyName + 'Size'; this.getVarFromNode( node, propertySizeName, 'uint' ); this.addLineFlowCode( `${ propertySizeName } = uint( textureSize( ${ textureName }, 0 ).x )` ); bufferNodeData.propertySizeName = propertySizeName; } // const { itemSize } = attribute; const channel = '.' + vectorComponents.join( '' ).slice( 0, itemSize ); const uvSnippet = `ivec2(${indexSnippet} % ${ propertySizeName }, ${indexSnippet} / ${ propertySizeName })`; const snippet = this.generateTextureLoad( null, textureName, uvSnippet, null, '0' ); // this.addLineFlowCode( `${ propertyName } = ${ snippet + channel }` ); elementNodeData.propertyName = propertyName; } return propertyName; } generateTextureLoad( texture, textureProperty, uvIndexSnippet, depthSnippet, levelSnippet = '0' ) { if ( depthSnippet ) { return `texelFetch( ${ textureProperty }, ivec3( ${ uvIndexSnippet }, ${ depthSnippet } ), ${ levelSnippet } )`; } else { return `texelFetch( ${ textureProperty }, ${ uvIndexSnippet }, ${ levelSnippet } )`; } } generateTexture( texture, textureProperty, uvSnippet, depthSnippet ) { if ( texture.isDepthTexture ) { return `texture( ${ textureProperty }, ${ uvSnippet } ).x`; } else { if ( depthSnippet ) uvSnippet = `vec3( ${ uvSnippet }, ${ depthSnippet } )`; return `texture( ${ textureProperty }, ${ uvSnippet } )`; } } generateTextureLevel( texture, textureProperty, uvSnippet, levelSnippet ) { return `textureLod( ${ textureProperty }, ${ uvSnippet }, ${ levelSnippet } )`; } generateTextureGrad( texture, textureProperty, uvSnippet, gradSnippet ) { return `textureGrad( ${ textureProperty }, ${ uvSnippet }, ${ gradSnippet[ 0 ] }, ${ gradSnippet[ 1 ] } )`; } generateTextureCompare( texture, textureProperty, uvSnippet, compareSnippet, depthSnippet, shaderStage = this.shaderStage ) { if ( shaderStage === 'fragment' ) { return `texture( ${ textureProperty }, vec3( ${ uvSnippet }, ${ compareSnippet } ) )`; } else { console.error( `WebGPURenderer: THREE.DepthTexture.compareFunction() does not support ${ shaderStage } shader.` ); } } getVars( shaderStage ) { const snippets = []; const vars = this.vars[ shaderStage ]; if ( vars !== undefined ) { for ( const variable of vars ) { if ( variable.isOutputStructVar ) continue; snippets.push( `${ this.getVar( variable.type, variable.name ) };` ); } } return snippets.join( '\n\t' ); } getUniforms( shaderStage ) { const uniforms = this.uniforms[ shaderStage ]; const bindingSnippets = []; const uniformGroups = {}; for ( const uniform of uniforms ) { let snippet = null; let group = false; if ( uniform.type === 'texture' ) { const texture = uniform.node.value; if ( texture.compareFunction ) { snippet = `sampler2DShadow ${ uniform.name };`; } else if ( texture.isDataArrayTexture === true ) { snippet = `sampler2DArray ${ uniform.name };`; } else { snippet = `sampler2D ${ uniform.name };`; } } else if ( uniform.type === 'cubeTexture' ) { snippet = `samplerCube ${ uniform.name };`; } else if ( uniform.type === 'buffer' ) { const bufferNode = uniform.node; const bufferType = this.getType( bufferNode.bufferType ); const bufferCount = bufferNode.bufferCount; const bufferCountSnippet = bufferCount > 0 ? bufferCount : ''; snippet = `${bufferNode.name} {\n\t${ bufferType } ${ uniform.name }[${ bufferCountSnippet }];\n};\n`; } else { const vectorType = this.getVectorType( uniform.type ); snippet = `${vectorType} ${uniform.name};`; group = true; } const precision = uniform.node.precision; if ( precision !== null ) { snippet = precisionLib[ precision ] + ' ' + snippet; } if ( group ) { snippet = '\t' + snippet; const groupName = uniform.groupNode.name; const groupSnippets = uniformGroups[ groupName ] || ( uniformGroups[ groupName ] = [] ); groupSnippets.push( snippet ); } else { snippet = 'uniform ' + snippet; bindingSnippets.push( snippet ); } } let output = ''; for ( const name in uniformGroups ) { const groupSnippets = uniformGroups[ name ]; output += this._getGLSLUniformStruct( shaderStage + '_' + name, groupSnippets.join( '\n' ) ) + '\n'; } output += bindingSnippets.join( '\n' ); return output; } getTypeFromAttribute( attribute ) { let nodeType = super.getTypeFromAttribute( attribute ); if ( /^[iu]/.test( nodeType ) && attribute.gpuType !== IntType ) { let dataAttribute = attribute; if ( attribute.isInterleavedBufferAttribute ) dataAttribute = attribute.data; const array = dataAttribute.array; if ( ( array instanceof Uint32Array || array instanceof Int32Array || array instanceof Uint16Array || array instanceof Int16Array ) === false ) { nodeType = nodeType.slice( 1 ); } } return nodeType; } getAttributes( shaderStage ) { let snippet = ''; if ( shaderStage === 'vertex' || shaderStage === 'compute' ) { const attributes = this.getAttributesArray(); let location = 0; for ( const attribute of attributes ) { snippet += `layout( location = ${ location ++ } ) in ${ attribute.type } ${ attribute.name };\n`; } } return snippet; } getStructMembers( struct ) { const snippets = []; const members = struct.getMemberTypes(); for ( let i = 0; i < members.length; i ++ ) { const member = members[ i ]; snippets.push( `layout( location = ${i} ) out ${ member} m${i};` ); } return snippets.join( '\n' ); } getStructs( shaderStage ) { const snippets = []; const structs = this.structs[ shaderStage ]; if ( structs.length === 0 ) { return 'layout( location = 0 ) out vec4 fragColor;\n'; } for ( let index = 0, length = structs.length; index < length; index ++ ) { const struct = structs[ index ]; let snippet = '\n'; snippet += this.getStructMembers( struct ); snippet += '\n'; snippets.push( snippet ); } return snippets.join( '\n\n' ); } getVaryings( shaderStage ) { let snippet = ''; const varyings = this.varyings; if ( shaderStage === 'vertex' || shaderStage === 'compute' ) { for ( const varying of varyings ) { if ( shaderStage === 'compute' ) varying.needsInterpolation = true; const type = varying.type; const flat = type === 'int' || type === 'uint' ? 'flat ' : ''; snippet += `${flat}${varying.needsInterpolation ? 'out' : '/*out*/'} ${type} ${varying.name};\n`; } } else if ( shaderStage === 'fragment' ) { for ( const varying of varyings ) { if ( varying.needsInterpolation ) { const type = varying.type; const flat = type === 'int' || type === 'uint' ? 'flat ' : ''; snippet += `${flat}in ${type} ${varying.name};\n`; } } } return snippet; } getVertexIndex() { return 'uint( gl_VertexID )'; } getInstanceIndex() { return 'uint( gl_InstanceID )'; } getFrontFacing() { return 'gl_FrontFacing'; } getFragCoord() { return 'gl_FragCoord'; } getFragDepth() { return 'gl_FragDepth'; } isAvailable( name ) { return supports[ name ] === true; } isFlipY() { return true; } registerTransform( varyingName, attributeNode ) { this.transforms.push( { varyingName, attributeNode } ); } getTransforms( /* shaderStage */ ) { const transforms = this.transforms; let snippet = ''; for ( let i = 0; i < transforms.length; i ++ ) { const transform = transforms[ i ]; const attributeName = this.getPropertyName( transform.attributeNode ); snippet += `${ transform.varyingName } = ${ attributeName };\n\t`; } return snippet; } _getGLSLUniformStruct( name, vars ) { return ` layout( std140 ) uniform ${name} { ${vars} };`; } _getGLSLVertexCode( shaderData ) { return `#version 300 es ${ this.getSignature() } // precision ${ defaultPrecisions } // uniforms ${shaderData.uniforms} // varyings ${shaderData.varyings} // attributes ${shaderData.attributes} // codes ${shaderData.codes} void main() { // vars ${shaderData.vars} // transforms ${shaderData.transforms} // flow ${shaderData.flow} gl_PointSize = 1.0; } `; } _getGLSLFragmentCode( shaderData ) { return `#version 300 es ${ this.getSignature() } // precision ${ defaultPrecisions } // uniforms ${shaderData.uniforms} // varyings ${shaderData.varyings} // codes ${shaderData.codes} ${shaderData.structs} void main() { // vars ${shaderData.vars} // flow ${shaderData.flow} } `; } buildCode() { const shadersData = this.material !== null ? { fragment: {}, vertex: {} } : { compute: {} }; for ( const shaderStage in shadersData ) { let flow = '// code\n\n'; flow += this.flowCode[ shaderStage ]; const flowNodes = this.flowNodes[ shaderStage ]; const mainNode = flowNodes[ flowNodes.length - 1 ]; for ( const node of flowNodes ) { const flowSlotData = this.getFlowData( node/*, shaderStage*/ ); const slotName = node.name; if ( slotName ) { if ( flow.length > 0 ) flow += '\n'; flow += `\t// flow -> ${ slotName }\n\t`; } flow += `${ flowSlotData.code }\n\t`; if ( node === mainNode && shaderStage !== 'compute' ) { flow += '// result\n\t'; if ( shaderStage === 'vertex' ) { flow += 'gl_Position = '; flow += `${ flowSlotData.result };`; } else if ( shaderStage === 'fragment' ) { if ( ! node.outputNode.isOutputStructNode ) { flow += 'fragColor = '; flow += `${ flowSlotData.result };`; } } } } const stageData = shadersData[ shaderStage ]; stageData.uniforms = this.getUniforms( shaderStage ); stageData.attributes = this.getAttributes( shaderStage ); stageData.varyings = this.getVaryings( shaderStage ); stageData.vars = this.getVars( shaderStage ); stageData.structs = this.getStructs( shaderStage ); stageData.codes = this.getCodes( shaderStage ); stageData.transforms = this.getTransforms( shaderStage ); stageData.flow = flow; } if ( this.material !== null ) { this.vertexShader = this._getGLSLVertexCode( shadersData.vertex ); this.fragmentShader = this._getGLSLFragmentCode( shadersData.fragment ); } else { this.computeShader = this._getGLSLVertexCode( shadersData.compute ); } } getUniformFromNode( node, type, shaderStage, name = null ) { const uniformNode = super.getUniformFromNode( node, type, shaderStage, name ); const nodeData = this.getDataFromNode( node, shaderStage, this.globalCache ); let uniformGPU = nodeData.uniformGPU; if ( uniformGPU === undefined ) { if ( type === 'texture' ) { uniformGPU = new NodeSampledTexture( uniformNode.name, uniformNode.node ); this.bindings[ shaderStage ].push( uniformGPU ); } else if ( type === 'cubeTexture' ) { uniformGPU = new NodeSampledCubeTexture( uniformNode.name, uniformNode.node ); this.bindings[ shaderStage ].push( uniformGPU ); } else if ( type === 'buffer' ) { node.name = `NodeBuffer_${ node.id }`; uniformNode.name = `buffer${ node.id }`; const buffer = new NodeUniformBuffer( node ); buffer.name = node.name; this.bindings[ shaderStage ].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( shaderStage + '_' + groupName, group ); //uniformsGroup.setVisibility( gpuShaderStageLib[ shaderStage ] ); uniformsStage[ groupName ] = uniformsGroup; this.bindings[ shaderStage ].push( uniformsGroup ); } uniformGPU = this.getNodeUniform( uniformNode, type ); uniformsGroup.addUniform( uniformGPU ); } nodeData.uniformGPU = uniformGPU; } return uniformNode; } } export default GLSLNodeBuilder;