WebGPUNodeBuilder.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780
  1. import WebGPUNodeUniformsGroup from './WebGPUNodeUniformsGroup.js';
  2. import {
  3. FloatNodeUniform, Vector2NodeUniform, Vector3NodeUniform, Vector4NodeUniform,
  4. ColorNodeUniform, Matrix3NodeUniform, Matrix4NodeUniform
  5. } from './WebGPUNodeUniform.js';
  6. import WebGPUNodeSampler from './WebGPUNodeSampler.js';
  7. import { WebGPUNodeSampledTexture } from './WebGPUNodeSampledTexture.js';
  8. import WebGPUUniformBuffer from '../WebGPUUniformBuffer.js';
  9. import { getVectorLength, getStrideLength } from '../WebGPUBufferUtils.js';
  10. import VarNode from '../../nodes/core/VarNode.js';
  11. import CodeNode from '../../nodes/core/CodeNode.js';
  12. import BypassNode from '../../nodes/core/BypassNode.js';
  13. import ExpressionNode from '../../nodes/core/ExpressionNode.js';
  14. import NodeBuilder from '../../nodes/core/NodeBuilder.js';
  15. import MaterialNode from '../../nodes/accessors/MaterialNode.js';
  16. import PositionNode from '../../nodes/accessors/PositionNode.js';
  17. import NormalNode from '../../nodes/accessors/NormalNode.js';
  18. import ModelViewProjectionNode from '../../nodes/accessors/ModelViewProjectionNode.js';
  19. import SkinningNode from '../../nodes/accessors/SkinningNode.js';
  20. import LightContextNode from '../../nodes/lights/LightContextNode.js';
  21. import OperatorNode from '../../nodes/math/OperatorNode.js';
  22. import WGSLNodeParser from '../../nodes/parsers/WGSLNodeParser.js';
  23. const wgslTypeLib = {
  24. float: 'f32',
  25. int: 'i32',
  26. vec2: 'vec2<f32>',
  27. vec3: 'vec3<f32>',
  28. vec4: 'vec4<f32>',
  29. uvec4: 'vec4<u32>',
  30. mat3: 'mat3x3<f32>',
  31. mat4: 'mat4x4<f32>'
  32. };
  33. const wgslMethods = {
  34. dFdx: 'dpdx',
  35. dFdy: 'dpdy'
  36. };
  37. const wgslPolyfill = {
  38. mod: new CodeNode( `
  39. fn mod( x : f32, y : f32 ) -> f32 {
  40. return x - y * floor( x / y );
  41. }
  42. ` ),
  43. repeatWrapping: new CodeNode( `
  44. fn repeatWrapping( uv : vec2<f32>, dimension : vec2<i32> ) -> vec2<i32> {
  45. let uvScaled = vec2<i32>( uv * vec2<f32>( dimension ) );
  46. return ( ( uvScaled % dimension ) + dimension ) % dimension;
  47. }
  48. ` ),
  49. inversesqrt: new CodeNode( `
  50. fn inversesqrt( x : f32 ) -> f32 {
  51. return 1.0 / sqrt( x );
  52. }
  53. ` )
  54. };
  55. class WebGPUNodeBuilder extends NodeBuilder {
  56. constructor( object, renderer, lightNode = null ) {
  57. super( object, renderer, new WGSLNodeParser() );
  58. this.lightNode = lightNode;
  59. this.bindings = { vertex: [], fragment: [] };
  60. this.bindingsOffset = { vertex: 0, fragment: 0 };
  61. this.uniformsGroup = {};
  62. this._parseObject();
  63. }
  64. _parseObject() {
  65. const object = this.object;
  66. const material = this.material;
  67. // parse inputs
  68. if ( material.isMeshStandardMaterial || material.isMeshBasicMaterial || material.isPointsMaterial || material.isLineBasicMaterial ) {
  69. let lightNode = material.lightNode;
  70. // VERTEX STAGE
  71. let vertex = new PositionNode( PositionNode.GEOMETRY );
  72. if ( lightNode === null && this.lightNode && this.lightNode.hasLights === true ) {
  73. lightNode = this.lightNode;
  74. }
  75. if ( material.positionNode && material.positionNode.isNode ) {
  76. const assignPositionNode = new OperatorNode( '=', new PositionNode( PositionNode.LOCAL ), material.positionNode );
  77. vertex = new BypassNode( vertex, assignPositionNode );
  78. }
  79. if ( object.isSkinnedMesh === true ) {
  80. vertex = new BypassNode( vertex, new SkinningNode( object ) );
  81. }
  82. this.context.vertex = vertex;
  83. this.addFlow( 'vertex', new VarNode( new ModelViewProjectionNode(), 'MVP', 'vec4' ) );
  84. // COLOR
  85. let colorNode = null;
  86. if ( material.colorNode && material.colorNode.isNode ) {
  87. colorNode = material.colorNode;
  88. } else {
  89. colorNode = new MaterialNode( MaterialNode.COLOR );
  90. }
  91. colorNode = this.addFlow( 'fragment', new VarNode( colorNode, 'DiffuseColor', 'vec4' ) );
  92. // OPACITY
  93. let opacityNode = null;
  94. if ( material.opacityNode && material.opacityNode.isNode ) {
  95. opacityNode = material.opacityNode;
  96. } else {
  97. opacityNode = new VarNode( new MaterialNode( MaterialNode.OPACITY ) );
  98. }
  99. this.addFlow( 'fragment', new VarNode( opacityNode, 'OPACITY', 'float' ) );
  100. this.addFlow( 'fragment', new ExpressionNode( 'DiffuseColor.a = DiffuseColor.a * OPACITY;' ) );
  101. // ALPHA TEST
  102. let alphaTest = null;
  103. if ( material.alphaTestNode && material.alphaTestNode.isNode ) {
  104. alphaTest = material.alphaTestNode;
  105. } else if ( material.alphaTest > 0 ) {
  106. alphaTest = new MaterialNode( MaterialNode.ALPHA_TEST );
  107. }
  108. if ( alphaTest !== null ) {
  109. this.addFlow( 'fragment', new VarNode( alphaTest, 'AlphaTest', 'float' ) );
  110. this.addFlow( 'fragment', new ExpressionNode( 'if ( DiffuseColor.a <= AlphaTest ) { discard; }' ) );
  111. }
  112. if ( material.isMeshStandardMaterial ) {
  113. // METALNESS
  114. let metalnessNode = null;
  115. if ( material.metalnessNode && material.metalnessNode.isNode ) {
  116. metalnessNode = material.metalnessNode;
  117. } else {
  118. metalnessNode = new MaterialNode( MaterialNode.METALNESS );
  119. }
  120. this.addFlow( 'fragment', new VarNode( metalnessNode, 'Metalness', 'float' ) );
  121. this.addFlow( 'fragment', new ExpressionNode( 'DiffuseColor = vec4<f32>( DiffuseColor.rgb * ( 1.0 - Metalness ), DiffuseColor.a );' ) );
  122. // ROUGHNESS
  123. let roughnessNode = null;
  124. if ( material.roughnessNode && material.roughnessNode.isNode ) {
  125. roughnessNode = material.roughnessNode;
  126. } else {
  127. roughnessNode = new MaterialNode( MaterialNode.ROUGHNESS );
  128. }
  129. this.addFlow( 'fragment', new VarNode( roughnessNode, 'Roughness', 'float' ) );
  130. // SPECULAR_TINT
  131. this.addFlow( 'fragment', new VarNode( new ExpressionNode( 'mix( vec3<f32>( 0.04 ), DiffuseColor.rgb, Metalness )', 'vec3' ), 'SpecularColor', 'color' ) );
  132. // NORMAL_VIEW
  133. let normalNode = null;
  134. if ( material.normalNode && material.normalNode.isNode ) {
  135. normalNode = material.normalNode;
  136. } else {
  137. normalNode = new NormalNode( NormalNode.VIEW );
  138. }
  139. this.addFlow( 'fragment', new VarNode( normalNode, 'TransformedNormalView', 'vec3' ) );
  140. }
  141. // LIGHT
  142. let outputNode = colorNode;
  143. if ( lightNode && lightNode.isNode ) {
  144. const lightContextNode = new LightContextNode( lightNode );
  145. outputNode = this.addFlow( 'fragment', new VarNode( lightContextNode, 'Light', 'vec3' ) );
  146. }
  147. // RESULT
  148. this.addFlow( 'fragment', new VarNode( outputNode, 'Output', 'vec4' ) );
  149. }
  150. }
  151. addFlowCode( code ) {
  152. if ( ! /;\s*$/.test( code ) ) {
  153. code += ';';
  154. }
  155. super.addFlowCode( code + '\n\t' );
  156. }
  157. getTexture( textureProperty, uvSnippet, biasSnippet = null, shaderStage = this.shaderStage ) {
  158. if ( shaderStage === 'fragment' ) {
  159. return `textureSample( ${textureProperty}, ${textureProperty}_sampler, ${uvSnippet} )`;
  160. } else {
  161. this._include( 'repeatWrapping' );
  162. const dimension = `textureDimensions( ${textureProperty}, 0 )`;
  163. return `textureLoad( ${textureProperty}, repeatWrapping( ${uvSnippet}, ${dimension} ), 0 )`;
  164. }
  165. }
  166. getPropertyName( node, shaderStage = this.shaderStage ) {
  167. if ( node.isNodeVary === true ) {
  168. if ( shaderStage === 'vertex' ) {
  169. return `NodeVarys.${ node.name }`;
  170. }
  171. } else if ( node.isNodeUniform === true ) {
  172. const name = node.name;
  173. const type = node.type;
  174. if ( type === 'texture' ) {
  175. return name;
  176. } else if ( type === 'buffer' ) {
  177. return `NodeBuffer.${name}`;
  178. } else {
  179. return `NodeUniforms.${name}`;
  180. }
  181. }
  182. return super.getPropertyName( node );
  183. }
  184. getBindings() {
  185. const bindings = this.bindings;
  186. return [ ...bindings.vertex, ...bindings.fragment ];
  187. }
  188. getUniformFromNode( node, shaderStage, type ) {
  189. const uniformNode = super.getUniformFromNode( node, shaderStage, type );
  190. const nodeData = this.getDataFromNode( node, shaderStage );
  191. if ( nodeData.uniformGPU === undefined ) {
  192. let uniformGPU;
  193. const bindings = this.bindings[ shaderStage ];
  194. if ( type === 'texture' ) {
  195. const sampler = new WebGPUNodeSampler( `${uniformNode.name}_sampler`, uniformNode.node );
  196. const texture = new WebGPUNodeSampledTexture( uniformNode.name, uniformNode.node );
  197. // add first textures in sequence and group for last
  198. const lastBinding = bindings[ bindings.length - 1 ];
  199. const index = lastBinding && lastBinding.isUniformsGroup ? bindings.length - 1 : bindings.length;
  200. if ( shaderStage === 'fragment' ) {
  201. bindings.splice( index, 0, sampler, texture );
  202. uniformGPU = [ sampler, texture ];
  203. } else {
  204. bindings.splice( index, 0, texture );
  205. uniformGPU = [ texture ];
  206. }
  207. } else if ( type === 'buffer' ) {
  208. const buffer = new WebGPUUniformBuffer( 'NodeBuffer', node.value );
  209. // add first textures in sequence and group for last
  210. const lastBinding = bindings[ bindings.length - 1 ];
  211. const index = lastBinding && lastBinding.isUniformsGroup ? bindings.length - 1 : bindings.length;
  212. bindings.splice( index, 0, buffer );
  213. uniformGPU = buffer;
  214. } else {
  215. let uniformsGroup = this.uniformsGroup[ shaderStage ];
  216. if ( uniformsGroup === undefined ) {
  217. uniformsGroup = new WebGPUNodeUniformsGroup( shaderStage );
  218. this.uniformsGroup[ shaderStage ] = uniformsGroup;
  219. bindings.push( uniformsGroup );
  220. }
  221. if ( node.isArrayInputNode === true ) {
  222. uniformGPU = [];
  223. for ( const inputNode of node.nodes ) {
  224. const uniformNodeGPU = this._getNodeUniform( inputNode, type );
  225. // fit bounds to buffer
  226. uniformNodeGPU.boundary = getVectorLength( uniformNodeGPU.itemSize );
  227. uniformNodeGPU.itemSize = getStrideLength( uniformNodeGPU.itemSize );
  228. uniformsGroup.addUniform( uniformNodeGPU );
  229. uniformGPU.push( uniformNodeGPU );
  230. }
  231. } else {
  232. uniformGPU = this._getNodeUniform( uniformNode, type );
  233. uniformsGroup.addUniform( uniformGPU );
  234. }
  235. }
  236. nodeData.uniformGPU = uniformGPU;
  237. if ( shaderStage === 'vertex' ) {
  238. this.bindingsOffset[ 'fragment' ] = bindings.length;
  239. }
  240. }
  241. return uniformNode;
  242. }
  243. getAttributes( shaderStage ) {
  244. let snippet = '';
  245. if ( shaderStage === 'vertex' ) {
  246. const attributes = this.attributes;
  247. const length = attributes.length;
  248. snippet += '\n';
  249. for ( let index = 0; index < length; index ++ ) {
  250. const attribute = attributes[ index ];
  251. const name = attribute.name;
  252. const type = this.getType( attribute.type );
  253. snippet += `\t[[ location( ${index} ) ]] ${ name } : ${ type }`;
  254. if ( index + 1 < length ) {
  255. snippet += ',\n';
  256. }
  257. }
  258. snippet += '\n';
  259. }
  260. return snippet;
  261. }
  262. getVars( shaderStage ) {
  263. let snippet = '';
  264. const vars = this.vars[ shaderStage ];
  265. for ( let index = 0; index < vars.length; index ++ ) {
  266. const variable = vars[ index ];
  267. const name = variable.name;
  268. const type = this.getType( variable.type );
  269. snippet += `var ${name} : ${type}; `;
  270. }
  271. return snippet;
  272. }
  273. getVarys( shaderStage ) {
  274. let snippet = '';
  275. if ( shaderStage === 'vertex' ) {
  276. snippet += '\t[[ builtin( position ) ]] Vertex: vec4<f32>;\n';
  277. const varys = this.varys;
  278. for ( let index = 0; index < varys.length; index ++ ) {
  279. const vary = varys[ index ];
  280. snippet += `\t[[ location( ${index} ) ]] ${ vary.name } : ${ this.getType( vary.type ) };\n`;
  281. }
  282. snippet = this._getWGSLStruct( 'NodeVarysStruct', snippet );
  283. } else if ( shaderStage === 'fragment' ) {
  284. const varys = this.varys;
  285. snippet += '\n';
  286. for ( let index = 0; index < varys.length; index ++ ) {
  287. const vary = varys[ index ];
  288. snippet += `\t[[ location( ${index} ) ]] ${ vary.name } : ${ this.getType( vary.type ) }`;
  289. if ( index + 1 < varys.length ) {
  290. snippet += ',\n';
  291. }
  292. }
  293. snippet += '\n';
  294. }
  295. return snippet;
  296. }
  297. getUniforms( shaderStage ) {
  298. const uniforms = this.uniforms[ shaderStage ];
  299. let snippet = '';
  300. let groupSnippet = '';
  301. let index = this.bindingsOffset[ shaderStage ];
  302. for ( const uniform of uniforms ) {
  303. if ( uniform.type === 'texture' ) {
  304. if ( shaderStage === 'fragment' ) {
  305. snippet += `[[ group( 0 ), binding( ${index ++} ) ]] var ${uniform.name}_sampler : sampler; `;
  306. }
  307. snippet += `[[ group( 0 ), binding( ${index ++} ) ]] var ${uniform.name} : texture_2d<f32>; `;
  308. } else if ( uniform.type === 'buffer' ) {
  309. const bufferNode = uniform.node;
  310. const bufferType = this.getType( bufferNode.bufferType );
  311. const bufferCount = bufferNode.bufferCount;
  312. const bufferSnippet = `\t${uniform.name} : array< ${bufferType}, ${bufferCount} >;\n`;
  313. snippet += this._getWGSLUniforms( 'NodeBuffer', bufferSnippet, index ++ ) + '\n\n';
  314. } else {
  315. const vectorType = this.getType( this.getVectorType( uniform.type ) );
  316. if ( Array.isArray( uniform.value ) === true ) {
  317. const length = uniform.value.length;
  318. groupSnippet += `uniform ${vectorType}[ ${length} ] ${uniform.name}; `;
  319. } else {
  320. groupSnippet += `\t${uniform.name} : ${ vectorType};\n`;
  321. }
  322. }
  323. }
  324. if ( groupSnippet ) {
  325. snippet += this._getWGSLUniforms( 'NodeUniforms', groupSnippet, index ++ );
  326. }
  327. return snippet;
  328. }
  329. buildCode() {
  330. const shadersData = { fragment: {}, vertex: {} };
  331. for ( const shaderStage in shadersData ) {
  332. let flow = '// code\n';
  333. flow += `\t${ this.flowCode[ shaderStage ] }`;
  334. flow += '\n';
  335. const flowNodes = this.flowNodes[ shaderStage ];
  336. const mainNode = flowNodes[ flowNodes.length - 1 ];
  337. for ( const node of flowNodes ) {
  338. const flowSlotData = this.getFlowData( shaderStage, node );
  339. const slotName = node.name;
  340. if ( slotName ) {
  341. if ( flow.length > 0 ) flow += '\n';
  342. flow += `\t// FLOW -> ${ slotName }\n\t`;
  343. }
  344. flow += `${ flowSlotData.code }\n\t`;
  345. if ( node === mainNode ) {
  346. flow += '// FLOW RESULT\n\t';
  347. if ( shaderStage === 'vertex' ) {
  348. flow += 'NodeVarys.Vertex = ';
  349. } else if ( shaderStage === 'fragment' ) {
  350. flow += 'return ';
  351. }
  352. flow += `${ flowSlotData.result };`;
  353. }
  354. }
  355. const stageData = shadersData[ shaderStage ];
  356. stageData.uniforms = this.getUniforms( shaderStage );
  357. stageData.attributes = this.getAttributes( shaderStage );
  358. stageData.varys = this.getVarys( shaderStage );
  359. stageData.vars = this.getVars( shaderStage );
  360. stageData.codes = this.getCodes( shaderStage );
  361. stageData.flow = flow;
  362. }
  363. this.vertexShader = this._getWGSLVertexCode( shadersData.vertex );
  364. this.fragmentShader = this._getWGSLFragmentCode( shadersData.fragment );
  365. }
  366. getMethod( method ) {
  367. if ( wgslPolyfill[ method ] !== undefined ) {
  368. this._include( method );
  369. }
  370. return wgslMethods[ method ] || method;
  371. }
  372. getType( type ) {
  373. return wgslTypeLib[ type ] || type;
  374. }
  375. _include( name ) {
  376. wgslPolyfill[ name ].build( this );
  377. }
  378. _getNodeUniform( uniformNode, type ) {
  379. if ( type === 'float' ) return new FloatNodeUniform( uniformNode );
  380. if ( type === 'vec2' ) return new Vector2NodeUniform( uniformNode );
  381. if ( type === 'vec3' ) return new Vector3NodeUniform( uniformNode );
  382. if ( type === 'vec4' ) return new Vector4NodeUniform( uniformNode );
  383. if ( type === 'color' ) return new ColorNodeUniform( uniformNode );
  384. if ( type === 'mat3' ) return new Matrix3NodeUniform( uniformNode );
  385. if ( type === 'mat4' ) return new Matrix4NodeUniform( uniformNode );
  386. throw new Error( `Uniform "${type}" not declared.` );
  387. }
  388. _getWGSLVertexCode( shaderData ) {
  389. return `${ this.getSignature() }
  390. // uniforms
  391. ${shaderData.uniforms}
  392. // varys
  393. ${shaderData.varys}
  394. // codes
  395. ${shaderData.codes}
  396. [[ stage( vertex ) ]]
  397. fn main( ${shaderData.attributes} ) -> NodeVarysStruct {
  398. // system
  399. var NodeVarys: NodeVarysStruct;
  400. // vars
  401. ${shaderData.vars}
  402. // flow
  403. ${shaderData.flow}
  404. return NodeVarys;
  405. }
  406. `;
  407. }
  408. _getWGSLFragmentCode( shaderData ) {
  409. return `${ this.getSignature() }
  410. // uniforms
  411. ${shaderData.uniforms}
  412. // codes
  413. ${shaderData.codes}
  414. [[ stage( fragment ) ]]
  415. fn main( ${shaderData.varys} ) -> [[ location( 0 ) ]] vec4<f32> {
  416. // vars
  417. ${shaderData.vars}
  418. // flow
  419. ${shaderData.flow}
  420. }
  421. `;
  422. }
  423. _getWGSLStruct( name, vars ) {
  424. return `[[ block ]]
  425. struct ${name} {
  426. \n${vars}
  427. };`;
  428. }
  429. _getWGSLUniforms( name, vars, binding = 0, group = 0 ) {
  430. const structName = name + 'Struct';
  431. const structSnippet = this._getWGSLStruct( structName, vars );
  432. return `${structSnippet}
  433. [[ binding( ${binding} ), group( ${group} ) ]]
  434. var<uniform> ${name} : ${structName};`;
  435. }
  436. }
  437. export default WebGPUNodeBuilder;