WebGPUNodeBuilder.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799
  1. import WebGPUUniformsGroup from '../WebGPUUniformsGroup.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, WebGPUNodeSampledCubeTexture } from './WebGPUNodeSampledTexture.js';
  8. import WebGPUUniformBuffer from '../WebGPUUniformBuffer.js';
  9. import WebGPUStorageBuffer from '../WebGPUStorageBuffer.js';
  10. import { getVectorLength, getStrideLength } from '../WebGPUBufferUtils.js';
  11. import { NodeBuilder, WGSLNodeParser, CodeNode, NodeMaterial } from 'three/nodes';
  12. const gpuShaderStageLib = {
  13. 'vertex': GPUShaderStage.VERTEX,
  14. 'fragment': GPUShaderStage.FRAGMENT,
  15. 'compute': GPUShaderStage.COMPUTE
  16. };
  17. const supports = {
  18. instance: true
  19. };
  20. const wgslTypeLib = {
  21. float: 'f32',
  22. int: 'i32',
  23. uint: 'u32',
  24. bool: 'bool',
  25. vec2: 'vec2<f32>',
  26. ivec2: 'vec2<i32>',
  27. uvec2: 'vec2<u32>',
  28. bvec2: 'vec2<bool>',
  29. vec3: 'vec3<f32>',
  30. ivec3: 'vec3<i32>',
  31. uvec3: 'vec3<u32>',
  32. bvec3: 'vec3<bool>',
  33. vec4: 'vec4<f32>',
  34. ivec4: 'vec4<i32>',
  35. uvec4: 'vec4<u32>',
  36. bvec4: 'vec4<bool>',
  37. mat3: 'mat3x3<f32>',
  38. imat3: 'mat3x3<i32>',
  39. umat3: 'mat3x3<u32>',
  40. bmat3: 'mat3x3<bool>',
  41. mat4: 'mat4x4<f32>',
  42. imat4: 'mat4x4<i32>',
  43. umat4: 'mat4x4<u32>',
  44. bmat4: 'mat4x4<bool>'
  45. };
  46. const wgslMethods = {
  47. dFdx: 'dpdx',
  48. dFdy: 'dpdy',
  49. inversesqrt: 'inverseSqrt'
  50. };
  51. const wgslPolyfill = {
  52. lessThanEqual: new CodeNode( `
  53. fn lessThanEqual( a : vec3<f32>, b : vec3<f32> ) -> vec3<bool> {
  54. return vec3<bool>( a.x <= b.x, a.y <= b.y, a.z <= b.z );
  55. }
  56. ` ),
  57. mod: new CodeNode( `
  58. fn mod( x : f32, y : f32 ) -> f32 {
  59. return x - y * floor( x / y );
  60. }
  61. ` ),
  62. repeatWrapping: new CodeNode( `
  63. fn repeatWrapping( uv : vec2<f32>, dimension : vec2<i32> ) -> vec2<i32> {
  64. let uvScaled = vec2<i32>( uv * vec2<f32>( dimension ) );
  65. return ( ( uvScaled % dimension ) + dimension ) % dimension;
  66. }
  67. ` )
  68. };
  69. class WebGPUNodeBuilder extends NodeBuilder {
  70. constructor( object, renderer ) {
  71. super( object, renderer, new WGSLNodeParser() );
  72. this.bindings = { vertex: [], fragment: [], compute: [] };
  73. this.bindingsOffset = { vertex: 0, fragment: 0, compute: 0 };
  74. this.uniformsGroup = {};
  75. this.builtins = {
  76. vertex: new Map(),
  77. fragment: new Map(),
  78. compute: new Map(),
  79. attribute: new Map()
  80. };
  81. }
  82. build() {
  83. const { object, material } = this;
  84. if ( material !== null ) {
  85. NodeMaterial.fromMaterial( material ).build( this );
  86. } else {
  87. this.addFlow( 'compute', object );
  88. }
  89. return super.build();
  90. }
  91. addFlowCode( code ) {
  92. if ( ! /;\s*$/.test( code ) ) {
  93. code += ';';
  94. }
  95. super.addFlowCode( code + '\n\t' );
  96. }
  97. getSampler( textureProperty, uvSnippet, shaderStage = this.shaderStage ) {
  98. if ( shaderStage === 'fragment' ) {
  99. return `textureSample( ${textureProperty}, ${textureProperty}_sampler, ${uvSnippet} )`;
  100. } else {
  101. this._include( 'repeatWrapping' );
  102. const dimension = `textureDimensions( ${textureProperty}, 0 )`;
  103. return `textureLoad( ${textureProperty}, repeatWrapping( ${uvSnippet}, ${dimension} ), 0 )`;
  104. }
  105. }
  106. getSamplerLevel( textureProperty, uvSnippet, biasSnippet, shaderStage = this.shaderStage ) {
  107. if ( shaderStage === 'fragment' ) {
  108. return `textureSampleLevel( ${textureProperty}, ${textureProperty}_sampler, ${uvSnippet}, ${biasSnippet} )`;
  109. } else {
  110. this._include( 'repeatWrapping' );
  111. const dimension = `textureDimensions( ${textureProperty}, 0 )`;
  112. return `textureLoad( ${textureProperty}, repeatWrapping( ${uvSnippet}, ${dimension} ), i32( ${biasSnippet} ) )`;
  113. }
  114. }
  115. getTexture( textureProperty, uvSnippet, shaderStage = this.shaderStage ) {
  116. return this.getSampler( textureProperty, uvSnippet, shaderStage );
  117. }
  118. getTextureLevel( textureProperty, uvSnippet, biasSnippet, shaderStage = this.shaderStage ) {
  119. return this.getSamplerLevel( textureProperty, uvSnippet, biasSnippet, shaderStage );
  120. }
  121. getCubeTexture( textureProperty, uvSnippet, shaderStage = this.shaderStage ) {
  122. return this.getSampler( textureProperty, uvSnippet, shaderStage );
  123. }
  124. getCubeTextureLevel( textureProperty, uvSnippet, biasSnippet, shaderStage = this.shaderStage ) {
  125. return this.getSamplerLevel( textureProperty, uvSnippet, biasSnippet, shaderStage );
  126. }
  127. getPropertyName( node, shaderStage = this.shaderStage ) {
  128. if ( node.isNodeVarying === true ) {
  129. if ( shaderStage === 'vertex' ) {
  130. return `NodeVaryings.${ node.name }`;
  131. }
  132. } else if ( node.isNodeUniform === true ) {
  133. const name = node.name;
  134. const type = node.type;
  135. if ( type === 'texture' || type === 'cubeTexture' ) {
  136. return name;
  137. } else if ( type === 'buffer' || type === 'storageBuffer' ) {
  138. return `NodeBuffer_${node.node.id}.${name}`;
  139. } else {
  140. return `NodeUniforms.${name}`;
  141. }
  142. }
  143. return super.getPropertyName( node );
  144. }
  145. getBindings() {
  146. const bindings = this.bindings;
  147. return this.material !== null ? [ ...bindings.vertex, ...bindings.fragment ] : bindings.compute;
  148. }
  149. getUniformFromNode( node, shaderStage, type ) {
  150. const uniformNode = super.getUniformFromNode( node, shaderStage, type );
  151. const nodeData = this.getDataFromNode( node, shaderStage );
  152. if ( nodeData.uniformGPU === undefined ) {
  153. let uniformGPU;
  154. const bindings = this.bindings[ shaderStage ];
  155. if ( type === 'texture' || type === 'cubeTexture' ) {
  156. const sampler = new WebGPUNodeSampler( `${uniformNode.name}_sampler`, uniformNode.node );
  157. let texture = null;
  158. if ( type === 'texture' ) {
  159. texture = new WebGPUNodeSampledTexture( uniformNode.name, uniformNode.node );
  160. } else if ( type === 'cubeTexture' ) {
  161. texture = new WebGPUNodeSampledCubeTexture( uniformNode.name, uniformNode.node );
  162. }
  163. // add first textures in sequence and group for last
  164. const lastBinding = bindings[ bindings.length - 1 ];
  165. const index = lastBinding && lastBinding.isUniformsGroup ? bindings.length - 1 : bindings.length;
  166. if ( shaderStage === 'fragment' ) {
  167. bindings.splice( index, 0, sampler, texture );
  168. uniformGPU = [ sampler, texture ];
  169. } else {
  170. bindings.splice( index, 0, texture );
  171. uniformGPU = [ texture ];
  172. }
  173. } else if ( type === 'buffer' || type === 'storageBuffer' ) {
  174. const bufferClass = type === 'storageBuffer' ? WebGPUStorageBuffer : WebGPUUniformBuffer;
  175. const buffer = new bufferClass( 'NodeBuffer_' + node.id, node.value );
  176. buffer.setVisibility( gpuShaderStageLib[ shaderStage ] );
  177. // add first textures in sequence and group for last
  178. const lastBinding = bindings[ bindings.length - 1 ];
  179. const index = lastBinding && lastBinding.isUniformsGroup ? bindings.length - 1 : bindings.length;
  180. bindings.splice( index, 0, buffer );
  181. uniformGPU = buffer;
  182. } else {
  183. let uniformsGroup = this.uniformsGroup[ shaderStage ];
  184. if ( uniformsGroup === undefined ) {
  185. uniformsGroup = new WebGPUUniformsGroup( 'nodeUniforms' );
  186. uniformsGroup.setVisibility( gpuShaderStageLib[ shaderStage ] );
  187. this.uniformsGroup[ shaderStage ] = uniformsGroup;
  188. bindings.push( uniformsGroup );
  189. }
  190. if ( node.isArrayUniformNode === true ) {
  191. uniformGPU = [];
  192. for ( const uniformNode of node.nodes ) {
  193. const uniformNodeGPU = this._getNodeUniform( uniformNode, type );
  194. // fit bounds to buffer
  195. uniformNodeGPU.boundary = getVectorLength( uniformNodeGPU.itemSize );
  196. uniformNodeGPU.itemSize = getStrideLength( uniformNodeGPU.itemSize );
  197. uniformsGroup.addUniform( uniformNodeGPU );
  198. uniformGPU.push( uniformNodeGPU );
  199. }
  200. } else {
  201. uniformGPU = this._getNodeUniform( uniformNode, type );
  202. uniformsGroup.addUniform( uniformGPU );
  203. }
  204. }
  205. nodeData.uniformGPU = uniformGPU;
  206. if ( shaderStage === 'vertex' ) {
  207. this.bindingsOffset[ 'fragment' ] = bindings.length;
  208. }
  209. }
  210. return uniformNode;
  211. }
  212. isReference( type ) {
  213. return super.isReference( type ) || type === 'texture_2d' || type === 'texture_cube';
  214. }
  215. getBuiltin( name, property, type, shaderStage = this.shaderStage ) {
  216. const map = this.builtins[ shaderStage ];
  217. if ( map.has( name ) === false ) {
  218. map.set( name, {
  219. name,
  220. property,
  221. type
  222. } );
  223. }
  224. return property;
  225. }
  226. getInstanceIndex() {
  227. if ( this.shaderStage === 'vertex' ) {
  228. return this.getBuiltin( 'instance_index', 'instanceIndex', 'u32', 'attribute' );
  229. }
  230. return 'instanceIndex';
  231. }
  232. getFrontFacing() {
  233. return this.getBuiltin( 'front_facing', 'isFront', 'bool' );
  234. }
  235. getAttributes( shaderStage ) {
  236. const snippets = [];
  237. if ( shaderStage === 'vertex' || shaderStage === 'compute' ) {
  238. if ( shaderStage === 'compute' ) {
  239. this.getBuiltin( 'global_invocation_id', 'id', 'vec3<u32>', 'attribute' );
  240. }
  241. for ( const { name, property, type } of this.builtins.attribute.values() ) {
  242. snippets.push( `@builtin( ${name} ) ${property} : ${type}` );
  243. }
  244. const attributes = this.attributes;
  245. const length = attributes.length;
  246. for ( let index = 0; index < length; index ++ ) {
  247. const attribute = attributes[ index ];
  248. const name = attribute.name;
  249. const type = this.getType( attribute.type );
  250. snippets.push( `@location( ${index} ) ${ name } : ${ type }` );
  251. }
  252. }
  253. return snippets.join( ',\n\t' );
  254. }
  255. getVars( shaderStage ) {
  256. const snippets = [];
  257. const vars = this.vars[ shaderStage ];
  258. for ( const variable of vars ) {
  259. const name = variable.name;
  260. const type = this.getType( variable.type );
  261. snippets.push( `\tvar ${name} : ${type};` );
  262. }
  263. return `\n${ snippets.join( '\n' ) }\n`;
  264. }
  265. getVaryings( shaderStage ) {
  266. const snippets = [];
  267. if ( shaderStage === 'vertex' ) {
  268. this.getBuiltin( 'position', 'Vertex', 'vec4<f32>', 'vertex' );
  269. const varyings = this.varyings;
  270. for ( let index = 0; index < varyings.length; index ++ ) {
  271. const varying = varyings[ index ];
  272. snippets.push( `@location( ${index} ) ${ varying.name } : ${ this.getType( varying.type ) }` );
  273. }
  274. } else if ( shaderStage === 'fragment' ) {
  275. const varyings = this.varyings;
  276. for ( let index = 0; index < varyings.length; index ++ ) {
  277. const varying = varyings[ index ];
  278. snippets.push( `@location( ${index} ) ${ varying.name } : ${ this.getType( varying.type ) }` );
  279. }
  280. }
  281. for ( const { name, property, type } of this.builtins[ shaderStage ].values() ) {
  282. snippets.push( `@builtin( ${name} ) ${property} : ${type}` );
  283. }
  284. const code = snippets.join( ',\n\t' );
  285. return shaderStage === 'vertex' ? this._getWGSLStruct( 'NodeVaryingsStruct', '\t' + code ) : code;
  286. }
  287. getUniforms( shaderStage ) {
  288. const uniforms = this.uniforms[ shaderStage ];
  289. const bindingSnippets = [];
  290. const bufferSnippets = [];
  291. const groupSnippets = [];
  292. let index = this.bindingsOffset[ shaderStage ];
  293. for ( const uniform of uniforms ) {
  294. if ( uniform.type === 'texture' ) {
  295. if ( shaderStage === 'fragment' ) {
  296. bindingSnippets.push( `@group( 0 ) @binding( ${index ++} ) var ${uniform.name}_sampler : sampler;` );
  297. }
  298. bindingSnippets.push( `@group( 0 ) @binding( ${index ++} ) var ${uniform.name} : texture_2d<f32>;` );
  299. } else if ( uniform.type === 'cubeTexture' ) {
  300. if ( shaderStage === 'fragment' ) {
  301. bindingSnippets.push( `@group( 0 ) @binding( ${index ++} ) var ${uniform.name}_sampler : sampler;` );
  302. }
  303. bindingSnippets.push( `@group( 0 ) @binding( ${index ++} ) var ${uniform.name} : texture_cube<f32>;` );
  304. } else if ( uniform.type === 'buffer' || uniform.type === 'storageBuffer' ) {
  305. const bufferNode = uniform.node;
  306. const bufferType = this.getType( bufferNode.bufferType );
  307. const bufferCount = bufferNode.bufferCount;
  308. const bufferCountSnippet = bufferCount > 0 ? ', ' + bufferCount : '';
  309. const bufferSnippet = `\t${uniform.name} : array< ${bufferType}${bufferCountSnippet} >\n`;
  310. const bufferAccessMode = bufferNode.isStorageBufferNode ? 'storage,read_write' : 'uniform';
  311. bufferSnippets.push( this._getWGSLStructBinding( 'NodeBuffer_' + bufferNode.id, bufferSnippet, bufferAccessMode, index ++ ) );
  312. } else {
  313. const vectorType = this.getType( this.getVectorType( uniform.type ) );
  314. if ( Array.isArray( uniform.value ) === true ) {
  315. const length = uniform.value.length;
  316. groupSnippets.push( `uniform ${vectorType}[ ${length} ] ${uniform.name}` );
  317. } else {
  318. groupSnippets.push( `\t${uniform.name} : ${ vectorType}` );
  319. }
  320. }
  321. }
  322. let code = bindingSnippets.join( '\n' );
  323. code += bufferSnippets.join( '\n' );
  324. if ( groupSnippets.length > 0 ) {
  325. code += this._getWGSLStructBinding( 'NodeUniforms', groupSnippets.join( ',\n' ), 'uniform', index ++ );
  326. }
  327. return code;
  328. }
  329. buildCode() {
  330. const shadersData = this.material !== null ? { fragment: {}, vertex: {} } : { compute: {} };
  331. for ( const shaderStage in shadersData ) {
  332. let flow = '// code\n';
  333. flow += `\t${ this.flowCode[ shaderStage ] }`;
  334. flow += '\n\t';
  335. const flowNodes = this.flowNodes[ shaderStage ];
  336. const mainNode = flowNodes[ flowNodes.length - 1 ];
  337. for ( const node of flowNodes ) {
  338. const flowSlotData = this.getFlowData( node/*, shaderStage*/ );
  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 && shaderStage !== 'compute' ) {
  346. flow += '// FLOW RESULT\n\t';
  347. if ( shaderStage === 'vertex' ) {
  348. flow += 'NodeVaryings.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.varyings = this.getVaryings( shaderStage );
  359. stageData.vars = this.getVars( shaderStage );
  360. stageData.codes = this.getCodes( shaderStage );
  361. stageData.flow = flow;
  362. }
  363. if ( this.material !== null ) {
  364. this.vertexShader = this._getWGSLVertexCode( shadersData.vertex );
  365. this.fragmentShader = this._getWGSLFragmentCode( shadersData.fragment );
  366. } else {
  367. this.computeShader = this._getWGSLComputeCode( shadersData.compute, ( this.object.workgroupSize || [ 64 ] ).join( ', ' ) );
  368. }
  369. }
  370. getMethod( method ) {
  371. if ( wgslPolyfill[ method ] !== undefined ) {
  372. this._include( method );
  373. }
  374. return wgslMethods[ method ] || method;
  375. }
  376. getType( type ) {
  377. return wgslTypeLib[ type ] || type;
  378. }
  379. isAvailable( name ) {
  380. return supports[ name ] === true;
  381. }
  382. _include( name ) {
  383. wgslPolyfill[ name ].build( this );
  384. }
  385. _getNodeUniform( uniformNode, type ) {
  386. if ( type === 'float' ) return new FloatNodeUniform( uniformNode );
  387. if ( type === 'vec2' ) return new Vector2NodeUniform( uniformNode );
  388. if ( type === 'vec3' ) return new Vector3NodeUniform( uniformNode );
  389. if ( type === 'vec4' ) return new Vector4NodeUniform( uniformNode );
  390. if ( type === 'color' ) return new ColorNodeUniform( uniformNode );
  391. if ( type === 'mat3' ) return new Matrix3NodeUniform( uniformNode );
  392. if ( type === 'mat4' ) return new Matrix4NodeUniform( uniformNode );
  393. throw new Error( `Uniform "${type}" not declared.` );
  394. }
  395. _getWGSLVertexCode( shaderData ) {
  396. return `${ this.getSignature() }
  397. // uniforms
  398. ${shaderData.uniforms}
  399. // varyings
  400. ${shaderData.varyings}
  401. // codes
  402. ${shaderData.codes}
  403. @vertex
  404. fn main( ${shaderData.attributes} ) -> NodeVaryingsStruct {
  405. // system
  406. var NodeVaryings: NodeVaryingsStruct;
  407. // vars
  408. ${shaderData.vars}
  409. // flow
  410. ${shaderData.flow}
  411. return NodeVaryings;
  412. }
  413. `;
  414. }
  415. _getWGSLFragmentCode( shaderData ) {
  416. return `${ this.getSignature() }
  417. // uniforms
  418. ${shaderData.uniforms}
  419. // codes
  420. ${shaderData.codes}
  421. @fragment
  422. fn main( ${shaderData.varyings} ) -> @location( 0 ) vec4<f32> {
  423. // vars
  424. ${shaderData.vars}
  425. // flow
  426. ${shaderData.flow}
  427. }
  428. `;
  429. }
  430. _getWGSLComputeCode( shaderData, workgroupSize ) {
  431. return `${ this.getSignature() }
  432. // system
  433. var<private> instanceIndex : u32;
  434. // uniforms
  435. ${shaderData.uniforms}
  436. // codes
  437. ${shaderData.codes}
  438. @compute @workgroup_size( ${workgroupSize} )
  439. fn main( ${shaderData.attributes} ) {
  440. // system
  441. instanceIndex = id.x;
  442. // vars
  443. ${shaderData.vars}
  444. // flow
  445. ${shaderData.flow}
  446. }
  447. `;
  448. }
  449. _getWGSLStruct( name, vars ) {
  450. return `
  451. struct ${name} {
  452. ${vars}
  453. };`;
  454. }
  455. _getWGSLStructBinding( name, vars, access, binding = 0, group = 0 ) {
  456. const structName = name + 'Struct';
  457. const structSnippet = this._getWGSLStruct( structName, vars );
  458. return `${structSnippet}
  459. @binding( ${binding} ) @group( ${group} )
  460. var<${access}> ${name} : ${structName};`;
  461. }
  462. }
  463. export default WebGPUNodeBuilder;