811 lines
16 KiB
JavaScript
811 lines
16 KiB
JavaScript
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;
|