123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735 |
- import { defaultShaderStages, NodeFrame, MathNode, GLSLNodeParser, NodeBuilder } from 'three/nodes';
- import SlotNode from './SlotNode.js';
- import { PerspectiveCamera, ShaderChunk, ShaderLib, UniformsUtils, UniformsLib,
- LinearEncoding, RGBAFormat, UnsignedByteType, sRGBEncoding } from 'three';
- const nodeFrame = new NodeFrame();
- nodeFrame.camera = new PerspectiveCamera();
- const nodeShaderLib = {
- LineBasicNodeMaterial: ShaderLib.basic,
- MeshBasicNodeMaterial: ShaderLib.basic,
- PointsNodeMaterial: ShaderLib.points,
- MeshStandardNodeMaterial: ShaderLib.standard,
- MeshPhysicalNodeMaterial: ShaderLib.physical
- };
- const glslMethods = {
- [ MathNode.ATAN2 ]: 'atan'
- };
- function getIncludeSnippet( name ) {
- return `#include <${name}>`;
- }
- function getShaderStageProperty( shaderStage ) {
- return `${shaderStage}Shader`;
- }
- class WebGLNodeBuilder extends NodeBuilder {
- constructor( object, renderer, shader ) {
- super( object, renderer, new GLSLNodeParser() );
- this.shader = shader;
- this.slots = { vertex: [], fragment: [] };
- this._parseShaderLib();
- this._parseInclude( 'fragment', 'lights_physical_fragment', 'clearcoat_normal_fragment_begin', 'transmission_fragment' );
- this._parseObject();
- this._sortSlotsToFlow();
- }
- getMethod( method ) {
- return glslMethods[ method ] || method;
- }
- addSlot( shaderStage, slotNode ) {
- this.slots[ shaderStage ].push( slotNode );
- }
- addFlowCode( code ) {
- if ( ! /;\s*$/.test( code ) ) {
- code += ';';
- }
- super.addFlowCode( code + '\n\t' );
- }
- _parseShaderLib() {
- const type = this.material.type;
- // shader lib
- if ( nodeShaderLib[ type ] !== undefined ) {
- const shaderLib = nodeShaderLib[ type ];
- const shader = this.shader;
- shader.vertexShader = shaderLib.vertexShader;
- shader.fragmentShader = shaderLib.fragmentShader;
- shader.uniforms = UniformsUtils.merge( [ shaderLib.uniforms, UniformsLib.lights ] );
- }
- }
- _parseObject() {
- const { material, renderer } = this;
- if ( renderer.toneMappingNode?.isNode === true ) {
- this.addSlot( 'fragment', new SlotNode( {
- node: material.colorNode,
- nodeType: 'vec4',
- source: getIncludeSnippet( 'tonemapping_fragment' ),
- target: ''
- } ) );
- }
- // parse inputs
- if ( material.colorNode && material.colorNode.isNode ) {
- this.addSlot( 'fragment', new SlotNode( {
- node: material.colorNode,
- nodeType: 'vec4',
- source: getIncludeSnippet( 'color_fragment' ),
- target: 'diffuseColor = %RESULT%;',
- inclusionType: 'append'
- } ) );
- }
- if ( material.opacityNode && material.opacityNode.isNode ) {
- this.addSlot( 'fragment', new SlotNode( {
- node: material.opacityNode,
- nodeType: 'float',
- source: getIncludeSnippet( 'alphatest_fragment' ),
- target: 'diffuseColor.a = %RESULT%;',
- inclusionType: 'append'
- } ) );
- }
- if ( material.normalNode && material.normalNode.isNode ) {
- this.addSlot( 'fragment', new SlotNode( {
- node: material.normalNode,
- nodeType: 'vec3',
- source: getIncludeSnippet( 'normal_fragment_begin' ),
- target: 'normal = %RESULT%;',
- inclusionType: 'append'
- } ) );
- }
- if ( material.emissiveNode && material.emissiveNode.isNode ) {
- this.addSlot( 'fragment', new SlotNode( {
- node: material.emissiveNode,
- nodeType: 'vec3',
- source: getIncludeSnippet( 'emissivemap_fragment' ),
- target: 'totalEmissiveRadiance = %RESULT%;',
- inclusionType: 'append'
- } ) );
- }
- if ( material.isMeshStandardNodeMaterial ) {
- if ( material.metalnessNode && material.metalnessNode.isNode ) {
- this.addSlot( 'fragment', new SlotNode( {
- node: material.metalnessNode,
- nodeType: 'float',
- source: getIncludeSnippet( 'metalnessmap_fragment' ),
- target: 'metalnessFactor = %RESULT%;',
- inclusionType: 'append'
- } ) );
- }
- if ( material.roughnessNode && material.roughnessNode.isNode ) {
- this.addSlot( 'fragment', new SlotNode( {
- node: material.roughnessNode,
- nodeType: 'float',
- source: getIncludeSnippet( 'roughnessmap_fragment' ),
- target: 'roughnessFactor = %RESULT%;',
- inclusionType: 'append'
- } ) );
- }
- if ( material.isMeshPhysicalNodeMaterial ) {
- if ( material.clearcoatNode && material.clearcoatNode.isNode ) {
- this.addSlot( 'fragment', new SlotNode( {
- node: material.clearcoatNode,
- nodeType: 'float',
- source: 'material.clearcoat = clearcoat;',
- target: 'material.clearcoat = %RESULT%;'
- } ) );
- if ( material.clearcoatRoughnessNode && material.clearcoatRoughnessNode.isNode ) {
- this.addSlot( 'fragment', new SlotNode( {
- node: material.clearcoatRoughnessNode,
- nodeType: 'float',
- source: 'material.clearcoatRoughness = clearcoatRoughness;',
- target: 'material.clearcoatRoughness = %RESULT%;'
- } ) );
- }
- if ( material.clearcoatNormalNode && material.clearcoatNormalNode.isNode ) {
- this.addSlot( 'fragment', new SlotNode( {
- node: material.clearcoatNormalNode,
- nodeType: 'vec3',
- source: 'vec3 clearcoatNormal = geometryNormal;',
- target: 'vec3 clearcoatNormal = %RESULT%;'
- } ) );
- }
- material.defines.USE_CLEARCOAT = '';
- } else {
- delete material.defines.USE_CLEARCOAT;
- }
- if ( material.sheenNode && material.sheenNode.isNode ) {
- this.addSlot( 'fragment', new SlotNode( {
- node: material.sheenNode,
- nodeType: 'vec3',
- source: 'material.sheenColor = sheenColor;',
- target: 'material.sheenColor = %RESULT%;'
- } ) );
- if ( material.sheenRoughnessNode && material.sheenRoughnessNode.isNode ) {
- this.addSlot( 'fragment', new SlotNode( {
- node: material.sheenRoughnessNode,
- nodeType: 'float',
- source: 'material.sheenRoughness = clamp( sheenRoughness, 0.07, 1.0 );',
- target: 'material.sheenRoughness = clamp( %RESULT%, 0.07, 1.0 );'
- } ) );
- }
- material.defines.USE_SHEEN = '';
- } else {
- delete material.defines.USE_SHEEN;
- }
- if ( material.iridescenceNode && material.iridescenceNode.isNode ) {
- this.addSlot( 'fragment', new SlotNode( {
- node: material.iridescenceNode,
- nodeType: 'float',
- source: 'material.iridescence = iridescence;',
- target: 'material.iridescence = %RESULT%;'
- } ) );
- if ( material.iridescenceIORNode && material.iridescenceIORNode.isNode ) {
- this.addSlot( 'fragment', new SlotNode( {
- node: material.iridescenceIORNode,
- nodeType: 'float',
- source: 'material.iridescenceIOR = iridescenceIOR;',
- target: 'material.iridescenceIOR = %RESULT%;'
- } ) );
- }
- if ( material.iridescenceThicknessNode && material.iridescenceThicknessNode.isNode ) {
- this.addSlot( 'fragment', new SlotNode( {
- node: material.iridescenceThicknessNode,
- nodeType: 'float',
- source: 'material.iridescenceThickness = iridescenceThicknessMaximum;',
- target: 'material.iridescenceThickness = %RESULT%;'
- } ) );
- }
- material.defines.USE_IRIDESCENCE = '';
- } else {
- delete material.defines.USE_IRIDESCENCE;
- }
- if ( material.iorNode && material.iorNode.isNode ) {
- this.addSlot( 'fragment', new SlotNode( {
- node: material.iorNode,
- nodeType: 'float',
- source: 'material.ior = ior;',
- target: 'material.ior = %RESULT%;'
- } ) );
- }
- if ( material.specularColorNode && material.specularColorNode.isNode ) {
- this.addSlot( 'fragment', new SlotNode( {
- node: material.specularColorNode,
- nodeType: 'vec3',
- source: 'vec3 specularColorFactor = specularColor;',
- target: 'vec3 specularColorFactor = %RESULT%;'
- } ) );
- }
- if ( material.specularIntensityNode && material.specularIntensityNode.isNode ) {
- this.addSlot( 'fragment', new SlotNode( {
- node: material.specularIntensityNode,
- nodeType: 'float',
- source: 'float specularIntensityFactor = specularIntensity;',
- target: 'float specularIntensityFactor = %RESULT%;'
- } ) );
- }
- if ( material.transmissionNode && material.transmissionNode.isNode ) {
- this.addSlot( 'fragment', new SlotNode( {
- node: material.transmissionNode,
- nodeType: 'float',
- source: 'material.transmission = transmission;',
- target: 'material.transmission = %RESULT%;'
- } ) );
- if ( material.thicknessNode && material.thicknessNode.isNode ) {
- this.addSlot( 'fragment', new SlotNode( {
- node: material.thicknessNode,
- nodeType: 'float',
- source: 'material.thickness = thickness;',
- target: 'material.thickness = %RESULT%;'
- } ) );
- }
- if ( material.thicknessNode && material.thicknessNode.isNode ) {
- this.addSlot( 'fragment', new SlotNode( {
- node: material.thicknessNode,
- nodeType: 'float',
- source: 'material.thickness = thickness;',
- target: 'material.thickness = %RESULT%;'
- } ) );
- }
- if ( material.attenuationDistanceNode && material.attenuationDistanceNode.isNode ) {
- this.addSlot( 'fragment', new SlotNode( {
- node: material.attenuationDistanceNode,
- nodeType: 'float',
- source: 'material.attenuationDistance = attenuationDistance;',
- target: 'material.attenuationDistance = %RESULT%;'
- } ) );
- }
- if ( material.attenuationColorNode && material.attenuationColorNode.isNode ) {
- this.addSlot( 'fragment', new SlotNode( {
- node: material.attenuationColorNode,
- nodeType: 'vec3',
- source: 'material.attenuationColor = attenuationColor;',
- target: 'material.attenuationColor = %RESULT%;'
- } ) );
- }
- material.transmission = 1;
- material.defines.USE_TRANSMISSION = '';
- } else {
- material.transmission = 0;
- delete material.defines.USE_TRANSMISSION;
- }
- }
- }
- //
- if ( material.positionNode && material.positionNode.isNode ) {
- this.addSlot( 'vertex', new SlotNode( {
- node: material.positionNode,
- nodeType: 'vec3',
- source: getIncludeSnippet( 'begin_vertex' ),
- target: 'transformed = %RESULT%;',
- inclusionType: 'append'
- } ) );
- }
- if ( material.sizeNode && material.sizeNode.isNode ) {
- this.addSlot( 'vertex', new SlotNode( {
- node: material.sizeNode,
- nodeType: 'float',
- source: 'gl_PointSize = size;',
- target: 'gl_PointSize = %RESULT%;'
- } ) );
- }
- }
- getTexture( textureProperty, uvSnippet ) {
- return `texture2D( ${textureProperty}, ${uvSnippet} )`;
- }
- getTextureBias( textureProperty, uvSnippet, biasSnippet ) {
- if ( this.material.extensions !== undefined ) this.material.extensions.shaderTextureLOD = true;
- return `textureLod( ${textureProperty}, ${uvSnippet}, ${biasSnippet} )`;
- }
- getCubeTexture( textureProperty, uvSnippet ) {
- return `textureCube( ${textureProperty}, ${uvSnippet} )`;
- }
- getCubeTextureBias( textureProperty, uvSnippet, biasSnippet ) {
- if ( this.material.extensions !== undefined ) this.material.extensions.shaderTextureLOD = true;
- return `textureLod( ${textureProperty}, ${uvSnippet}, ${biasSnippet} )`;
- }
- getUniforms( shaderStage ) {
- const uniforms = this.uniforms[ shaderStage ];
- let snippet = '';
- for ( const uniform of uniforms ) {
- if ( uniform.type === 'texture' ) {
- snippet += `uniform sampler2D ${uniform.name}; `;
- } else if ( uniform.type === 'cubeTexture' ) {
- snippet += `uniform samplerCube ${uniform.name}; `;
- } else {
- const vectorType = this.getVectorType( uniform.type );
- snippet += `uniform ${vectorType} ${uniform.name}; `;
- }
- }
- return snippet;
- }
- getAttributes( shaderStage ) {
- let snippet = '';
- if ( shaderStage === 'vertex' ) {
- const attributes = this.attributes;
- for ( const attribute of attributes ) {
- // ignore common attributes to prevent redefinitions
- if ( attribute.name === 'uv' || attribute.name === 'position' || attribute.name === 'normal' )
- continue;
- snippet += `attribute ${attribute.type} ${attribute.name}; `;
- }
- }
- return snippet;
- }
- getVaryings( /* shaderStage */ ) {
- let snippet = '';
- const varyings = this.varyings;
- for ( const varying of varyings ) {
- snippet += `varying ${varying.type} ${varying.name}; `;
- }
- return snippet;
- }
- addCodeAfterCode( shaderStage, snippet, code ) {
- const shaderProperty = getShaderStageProperty( shaderStage );
- let source = this[ shaderProperty ];
- const index = source.indexOf( snippet );
- if ( index !== - 1 ) {
- const start = source.substring( 0, index + snippet.length );
- const end = source.substring( index + snippet.length );
- source = `${start}\n${code}\n${end}`;
- }
- this[ shaderProperty ] = source;
- }
- replaceCode( shaderStage, source, target ) {
- const shaderProperty = getShaderStageProperty( shaderStage );
- this[ shaderProperty ] = this[ shaderProperty ].replaceAll( source, target );
- }
- getTextureEncodingFromMap( map ) {
- const isWebGL2 = this.renderer.capabilities.isWebGL2;
- if ( isWebGL2 && map && map.isTexture && map.format === RGBAFormat && map.type === UnsignedByteType && map.encoding === sRGBEncoding ) {
- return LinearEncoding; // disable inline decode for sRGB textures in WebGL 2
- }
- return super.getTextureEncodingFromMap( map );
- }
- getFrontFacing() {
- return 'gl_FrontFacing';
- }
- buildCode() {
- const shaderData = {};
- for ( const shaderStage of defaultShaderStages ) {
- const uniforms = this.getUniforms( shaderStage );
- const attributes = this.getAttributes( shaderStage );
- const varyings = this.getVaryings( shaderStage );
- const vars = this.getVars( shaderStage );
- const codes = this.getCodes( shaderStage );
- shaderData[ shaderStage ] = `${this.getSignature()}
- // <node_builder>
- // uniforms
- ${uniforms}
- // attributes
- ${attributes}
- // varyings
- ${varyings}
- // vars
- ${vars}
- // codes
- ${codes}
- // </node_builder>
- ${this.shader[ getShaderStageProperty( shaderStage ) ]}
- `;
- }
- this.vertexShader = shaderData.vertex;
- this.fragmentShader = shaderData.fragment;
- }
- build() {
- super.build();
- this._addSnippets();
- this._addUniforms();
- this._updateUniforms();
- this.shader.vertexShader = this.vertexShader;
- this.shader.fragmentShader = this.fragmentShader;
- return this;
- }
- _parseInclude( shaderStage, ...includes ) {
- for ( const name of includes ) {
- const includeSnippet = getIncludeSnippet( name );
- const code = ShaderChunk[ name ];
- const shaderProperty = getShaderStageProperty( shaderStage );
- this.shader[ shaderProperty ] = this.shader[ shaderProperty ].replaceAll( includeSnippet, code );
- }
- }
- _sortSlotsToFlow() {
- for ( const shaderStage of defaultShaderStages ) {
- const sourceCode = this.shader[ getShaderStageProperty( shaderStage ) ];
- const slots = this.slots[ shaderStage ].sort( ( slotA, slotB ) => {
- if ( sourceCode.indexOf( slotA.source ) == - 1 ) {
- //console.log( slotA, sourceCode.indexOf( slotA.source ), sourceCode.indexOf( slotB.source ) );
- //console.log(sourceCode);
- }
- return sourceCode.indexOf( slotA.source ) > sourceCode.indexOf( slotB.source ) ? 1 : - 1;
- } );
- for ( const slotNode of slots ) {
- this.addFlow( shaderStage, slotNode );
- }
- }
- }
- _addSnippets() {
- for ( const shaderStage of defaultShaderStages ) {
- for ( const slotNode of this.slots[ shaderStage ] ) {
- const flowData = this.getFlowData( slotNode/*, shaderStage*/ );
- const inclusionType = slotNode.inclusionType;
- const source = slotNode.source;
- const target = flowData.code + '\n\t' + slotNode.target.replace( '%RESULT%', flowData.result );
- if ( inclusionType === 'append' ) {
- this.addCodeAfterCode( shaderStage, source, target );
- } else if ( inclusionType === 'replace' ) {
- this.replaceCode( shaderStage, source, target );
- } else {
- console.warn( `Inclusion type "${ inclusionType }" not compatible.` );
- }
- }
- this.addCodeAfterCode(
- shaderStage,
- 'main() {',
- this.flowCode[ shaderStage ]
- );
- }
- }
- _addUniforms() {
- for ( const shaderStage of defaultShaderStages ) {
- // uniforms
- for ( const uniform of this.uniforms[ shaderStage ] ) {
- this.shader.uniforms[ uniform.name ] = uniform;
- }
- }
- }
- _updateUniforms() {
- nodeFrame.object = this.object;
- nodeFrame.renderer = this.renderer;
- for ( const node of this.updateNodes ) {
- nodeFrame.updateNode( node );
- }
- }
- }
- export { WebGLNodeBuilder };
|