| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780 | import WebGPUNodeUniformsGroup from './WebGPUNodeUniformsGroup.js';import {	FloatNodeUniform, Vector2NodeUniform, Vector3NodeUniform, Vector4NodeUniform,	ColorNodeUniform, Matrix3NodeUniform, Matrix4NodeUniform} from './WebGPUNodeUniform.js';import WebGPUNodeSampler from './WebGPUNodeSampler.js';import { WebGPUNodeSampledTexture } from './WebGPUNodeSampledTexture.js';import WebGPUUniformBuffer from '../WebGPUUniformBuffer.js';import { getVectorLength, getStrideLength } from '../WebGPUBufferUtils.js';import VarNode from '../../nodes/core/VarNode.js';import CodeNode from '../../nodes/core/CodeNode.js';import BypassNode from '../../nodes/core/BypassNode.js';import ExpressionNode from '../../nodes/core/ExpressionNode.js';import NodeBuilder from '../../nodes/core/NodeBuilder.js';import MaterialNode from '../../nodes/accessors/MaterialNode.js';import PositionNode from '../../nodes/accessors/PositionNode.js';import NormalNode from '../../nodes/accessors/NormalNode.js';import ModelViewProjectionNode from '../../nodes/accessors/ModelViewProjectionNode.js';import SkinningNode from '../../nodes/accessors/SkinningNode.js';import LightContextNode from '../../nodes/lights/LightContextNode.js';import OperatorNode from '../../nodes/math/OperatorNode.js';import WGSLNodeParser from '../../nodes/parsers/WGSLNodeParser.js';const wgslTypeLib = {	float: 'f32',	int: 'i32',	vec2: 'vec2<f32>',	vec3: 'vec3<f32>',	vec4: 'vec4<f32>',	uvec4: 'vec4<u32>',	mat3: 'mat3x3<f32>',	mat4: 'mat4x4<f32>'};const wgslMethods = {	dFdx: 'dpdx',	dFdy: 'dpdy'};const wgslPolyfill = {	mod: new CodeNode( `fn mod( x : f32, y : f32 ) -> f32 {	return x - y * floor( x / y );}` ),	repeatWrapping: new CodeNode( `fn repeatWrapping( uv : vec2<f32>, dimension : vec2<i32> ) -> vec2<i32> {	let uvScaled = vec2<i32>( uv * vec2<f32>( dimension ) );	return ( ( uvScaled % dimension ) + dimension ) % dimension;}` ),	inversesqrt: new CodeNode( `fn inversesqrt( x : f32 ) -> f32 {	return 1.0 / sqrt( x );}` )};class WebGPUNodeBuilder extends NodeBuilder {	constructor( object, renderer, lightNode = null ) {		super( object, renderer, new WGSLNodeParser() );		this.lightNode = lightNode;		this.bindings = { vertex: [], fragment: [] };		this.bindingsOffset = { vertex: 0, fragment: 0 };		this.uniformsGroup = {};		this._parseObject();	}	_parseObject() {		const object = this.object;		const material = this.material;		// parse inputs		if ( material.isMeshStandardMaterial || material.isMeshBasicMaterial || material.isPointsMaterial || material.isLineBasicMaterial ) {			let lightNode = material.lightNode;			// VERTEX STAGE			let vertex = new PositionNode( PositionNode.GEOMETRY );			if ( lightNode === null && this.lightNode && this.lightNode.hasLights === true ) {				lightNode = this.lightNode;			}			if ( material.positionNode && material.positionNode.isNode ) {				const assignPositionNode = new OperatorNode( '=', new PositionNode( PositionNode.LOCAL ), material.positionNode );				vertex = new BypassNode( vertex, assignPositionNode );			}			if ( object.isSkinnedMesh === true ) {				vertex = new BypassNode( vertex, new SkinningNode( object ) );			}			this.context.vertex = vertex;			this.addFlow( 'vertex', new VarNode( new ModelViewProjectionNode(), 'MVP', 'vec4' ) );			// COLOR			let colorNode = null;			if ( material.colorNode && material.colorNode.isNode ) {				colorNode = material.colorNode;			} else {				colorNode = new MaterialNode( MaterialNode.COLOR );			}			colorNode = this.addFlow( 'fragment', new VarNode( colorNode, 'DiffuseColor', 'vec4' ) );			// OPACITY			let opacityNode = null;			if ( material.opacityNode && material.opacityNode.isNode ) {				opacityNode = material.opacityNode;			} else {				opacityNode = new VarNode( new MaterialNode( MaterialNode.OPACITY ) );			}			this.addFlow( 'fragment', new VarNode( opacityNode, 'OPACITY', 'float' ) );			this.addFlow( 'fragment', new ExpressionNode( 'DiffuseColor.a = DiffuseColor.a * OPACITY;' ) );			// ALPHA TEST			let alphaTest = null;			if ( material.alphaTestNode && material.alphaTestNode.isNode ) {				alphaTest = material.alphaTestNode;			} else if ( material.alphaTest > 0 ) {				alphaTest = new MaterialNode( MaterialNode.ALPHA_TEST );			}			if ( alphaTest !== null ) {				this.addFlow( 'fragment', new VarNode( alphaTest, 'AlphaTest', 'float' ) );				this.addFlow( 'fragment', new ExpressionNode( 'if ( DiffuseColor.a <= AlphaTest ) { discard; }' ) );			}			if ( material.isMeshStandardMaterial ) {				// METALNESS				let metalnessNode = null;				if ( material.metalnessNode && material.metalnessNode.isNode ) {					metalnessNode = material.metalnessNode;				} else {					metalnessNode = new MaterialNode( MaterialNode.METALNESS );				}				this.addFlow( 'fragment', new VarNode( metalnessNode, 'Metalness', 'float' ) );				this.addFlow( 'fragment', new ExpressionNode( 'DiffuseColor = vec4<f32>( DiffuseColor.rgb * ( 1.0 - Metalness ), DiffuseColor.a );' ) );				// ROUGHNESS				let roughnessNode = null;				if ( material.roughnessNode && material.roughnessNode.isNode ) {					roughnessNode = material.roughnessNode;				} else {					roughnessNode = new MaterialNode( MaterialNode.ROUGHNESS );				}				this.addFlow( 'fragment', new VarNode( roughnessNode, 'Roughness', 'float' ) );				// SPECULAR_TINT				this.addFlow( 'fragment', new VarNode( new ExpressionNode( 'mix( vec3<f32>( 0.04 ), DiffuseColor.rgb, Metalness )', 'vec3' ), 'SpecularColor', 'color' ) );				// NORMAL_VIEW				let normalNode = null;				if ( material.normalNode && material.normalNode.isNode ) {					normalNode = material.normalNode;				} else {					normalNode = new NormalNode( NormalNode.VIEW );				}				this.addFlow( 'fragment', new VarNode( normalNode, 'TransformedNormalView', 'vec3' ) );			}			// LIGHT			let outputNode = colorNode;			if ( lightNode && lightNode.isNode ) {				const lightContextNode = new LightContextNode( lightNode );				outputNode = this.addFlow( 'fragment', new VarNode( lightContextNode, 'Light', 'vec3' ) );			}			// RESULT			this.addFlow( 'fragment', new VarNode( outputNode, 'Output', 'vec4' ) );		}	}	addFlowCode( code ) {		if ( ! /;\s*$/.test( code ) ) {			code += ';';		}		super.addFlowCode( code + '\n\t' );	}	getTexture( textureProperty, uvSnippet, biasSnippet = null, shaderStage = this.shaderStage ) {		if ( shaderStage === 'fragment' ) {			return `textureSample( ${textureProperty}, ${textureProperty}_sampler, ${uvSnippet} )`;		} else {			this._include( 'repeatWrapping' );			const dimension = `textureDimensions( ${textureProperty}, 0 )`;			return `textureLoad( ${textureProperty}, repeatWrapping( ${uvSnippet}, ${dimension} ), 0 )`;		}	}	getPropertyName( node, shaderStage = this.shaderStage ) {		if ( node.isNodeVary === true ) {			if ( shaderStage === 'vertex' ) {				return `NodeVarys.${ node.name }`;			}		} else if ( node.isNodeUniform === true ) {			const name = node.name;			const type = node.type;			if ( type === 'texture' ) {				return name;			} else if ( type === 'buffer' ) {				return `NodeBuffer.${name}`;			} else {				return `NodeUniforms.${name}`;			}		}		return super.getPropertyName( node );	}	getBindings() {		const bindings = this.bindings;		return [ ...bindings.vertex, ...bindings.fragment ];	}	getUniformFromNode( node, shaderStage, type ) {		const uniformNode = super.getUniformFromNode( node, shaderStage, type );		const nodeData = this.getDataFromNode( node, shaderStage );		if ( nodeData.uniformGPU === undefined ) {			let uniformGPU;			const bindings = this.bindings[ shaderStage ];			if ( type === 'texture' ) {				const sampler = new WebGPUNodeSampler( `${uniformNode.name}_sampler`, uniformNode.node );				const texture = new WebGPUNodeSampledTexture( uniformNode.name, uniformNode.node );				// add first textures in sequence and group for last				const lastBinding = bindings[ bindings.length - 1 ];				const index = lastBinding && lastBinding.isUniformsGroup ? bindings.length - 1 : bindings.length;				if ( shaderStage === 'fragment' ) {					bindings.splice( index, 0, sampler, texture );					uniformGPU = [ sampler, texture ];				} else {					bindings.splice( index, 0, texture );					uniformGPU = [ texture ];				}			} else if ( type === 'buffer' ) {				const buffer = new WebGPUUniformBuffer( 'NodeBuffer', node.value );				// add first textures in sequence and group for last				const lastBinding = bindings[ bindings.length - 1 ];				const index = lastBinding && lastBinding.isUniformsGroup ? bindings.length - 1 : bindings.length;				bindings.splice( index, 0, buffer );				uniformGPU = buffer;			} else {				let uniformsGroup = this.uniformsGroup[ shaderStage ];				if ( uniformsGroup === undefined ) {					uniformsGroup = new WebGPUNodeUniformsGroup( shaderStage );					this.uniformsGroup[ shaderStage ] = uniformsGroup;					bindings.push( uniformsGroup );				}				if ( node.isArrayInputNode === true ) {					uniformGPU = [];					for ( const inputNode of node.nodes ) {						const uniformNodeGPU = this._getNodeUniform( inputNode, 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;	}	getAttributes( shaderStage ) {		let snippet = '';		if ( shaderStage === 'vertex' ) {			const attributes = this.attributes;			const length = attributes.length;			snippet += '\n';			for ( let index = 0; index < length; index ++ ) {				const attribute = attributes[ index ];				const name = attribute.name;				const type = this.getType( attribute.type );				snippet += `\t[[ location( ${index} ) ]] ${ name } : ${ type }`;				if ( index + 1 < length ) {					snippet += ',\n';				}			}			snippet += '\n';		}		return snippet;	}	getVars( shaderStage ) {		let snippet = '';		const vars = this.vars[ shaderStage ];		for ( let index = 0; index < vars.length; index ++ ) {			const variable = vars[ index ];			const name = variable.name;			const type = this.getType( variable.type );			snippet += `var ${name} : ${type}; `;		}		return snippet;	}	getVarys( shaderStage ) {		let snippet = '';		if ( shaderStage === 'vertex' ) {			snippet += '\t[[ builtin( position ) ]] Vertex: vec4<f32>;\n';			const varys = this.varys;			for ( let index = 0; index < varys.length; index ++ ) {				const vary = varys[ index ];				snippet += `\t[[ location( ${index} ) ]] ${ vary.name } : ${ this.getType( vary.type ) };\n`;			}			snippet = this._getWGSLStruct( 'NodeVarysStruct', snippet );		} else if ( shaderStage === 'fragment' ) {			const varys = this.varys;			snippet += '\n';			for ( let index = 0; index < varys.length; index ++ ) {				const vary = varys[ index ];				snippet += `\t[[ location( ${index} ) ]] ${ vary.name } : ${ this.getType( vary.type ) }`;				if ( index + 1 < varys.length ) {					snippet += ',\n';				}			}			snippet += '\n';		}		return snippet;	}	getUniforms( shaderStage ) {		const uniforms = this.uniforms[ shaderStage ];		let snippet = '';		let groupSnippet = '';		let index = this.bindingsOffset[ shaderStage ];		for ( const uniform of uniforms ) {			if ( uniform.type === 'texture' ) {				if ( shaderStage === 'fragment' ) {					snippet += `[[ group( 0 ), binding( ${index ++} ) ]] var ${uniform.name}_sampler : sampler; `;				}				snippet += `[[ group( 0 ), binding( ${index ++} ) ]] var ${uniform.name} : texture_2d<f32>; `;			} else if ( uniform.type === 'buffer' ) {				const bufferNode = uniform.node;				const bufferType = this.getType( bufferNode.bufferType );				const bufferCount = bufferNode.bufferCount;				const bufferSnippet = `\t${uniform.name} : array< ${bufferType}, ${bufferCount} >;\n`;				snippet += this._getWGSLUniforms( 'NodeBuffer', bufferSnippet, index ++ ) + '\n\n';			} else {				const vectorType = this.getType( this.getVectorType( uniform.type ) );				if ( Array.isArray( uniform.value ) === true ) {					const length = uniform.value.length;					groupSnippet += `uniform ${vectorType}[ ${length} ] ${uniform.name}; `;				} else {					groupSnippet += `\t${uniform.name} : ${ vectorType};\n`;				}			}		}		if ( groupSnippet ) {			snippet += this._getWGSLUniforms( 'NodeUniforms', groupSnippet, index ++ );		}		return snippet;	}	buildCode() {		const shadersData = { fragment: {}, vertex: {} };		for ( const shaderStage in shadersData ) {			let flow = '// code\n';			flow += `\t${ this.flowCode[ shaderStage ] }`;			flow += '\n';			const flowNodes = this.flowNodes[ shaderStage ];			const mainNode = flowNodes[ flowNodes.length - 1 ];			for ( const node of flowNodes ) {				const flowSlotData = this.getFlowData( shaderStage, node );				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 ) {					flow += '// FLOW RESULT\n\t';					if ( shaderStage === 'vertex' ) {						flow += 'NodeVarys.Vertex = ';					} else if ( shaderStage === 'fragment' ) {						flow += 'return ';					}					flow += `${ flowSlotData.result };`;				}			}			const stageData = shadersData[ shaderStage ];			stageData.uniforms = this.getUniforms( shaderStage );			stageData.attributes = this.getAttributes( shaderStage );			stageData.varys = this.getVarys( shaderStage );			stageData.vars = this.getVars( shaderStage );			stageData.codes = this.getCodes( shaderStage );			stageData.flow = flow;		}		this.vertexShader = this._getWGSLVertexCode( shadersData.vertex );		this.fragmentShader = this._getWGSLFragmentCode( shadersData.fragment );	}	getMethod( method ) {		if ( wgslPolyfill[ method ] !== undefined ) {			this._include( method );		}		return wgslMethods[ method ] || method;	}	getType( type ) {		return wgslTypeLib[ type ] || type;	}	_include( name ) {		wgslPolyfill[ name ].build( this );	}	_getNodeUniform( uniformNode, type ) {		if ( type === 'float' ) return new FloatNodeUniform( uniformNode );		if ( type === 'vec2' ) return new Vector2NodeUniform( uniformNode );		if ( type === 'vec3' ) return new Vector3NodeUniform( uniformNode );		if ( type === 'vec4' ) return new Vector4NodeUniform( uniformNode );		if ( type === 'color' ) return new ColorNodeUniform( uniformNode );		if ( type === 'mat3' ) return new Matrix3NodeUniform( uniformNode );		if ( type === 'mat4' ) return new Matrix4NodeUniform( uniformNode );		throw new Error( `Uniform "${type}" not declared.` );	}	_getWGSLVertexCode( shaderData ) {		return `${ this.getSignature() }// uniforms${shaderData.uniforms}// varys${shaderData.varys}// codes${shaderData.codes}[[ stage( vertex ) ]]fn main( ${shaderData.attributes} ) -> NodeVarysStruct {	// system	var NodeVarys: NodeVarysStruct;	// vars	${shaderData.vars}	// flow	${shaderData.flow}	return NodeVarys;}`;	}	_getWGSLFragmentCode( shaderData ) {		return `${ this.getSignature() }// uniforms${shaderData.uniforms}// codes${shaderData.codes}[[ stage( fragment ) ]]fn main( ${shaderData.varys} ) -> [[ location( 0 ) ]] vec4<f32> {	// vars	${shaderData.vars}	// flow	${shaderData.flow}}`;	}	_getWGSLStruct( name, vars ) {		return `[[ block ]]struct ${name} {\n${vars}};`;	}	_getWGSLUniforms( name, vars, binding = 0, group = 0 ) {		const structName = name + 'Struct';		const structSnippet = this._getWGSLStruct( structName, vars );		return `${structSnippet}[[ binding( ${binding} ), group( ${group} ) ]]var<uniform> ${name} : ${structName};`;	}}export default WebGPUNodeBuilder;
 |