WebGPUNodeBuilder.js 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432
  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 NodeSlot from '../../nodes/core/NodeSlot.js';
  9. import VarNode from '../../nodes/core/VarNode.js';
  10. import NodeBuilder from '../../nodes/core/NodeBuilder.js';
  11. import MaterialNode from '../../nodes/accessors/MaterialNode.js';
  12. import NormalNode from '../../nodes/accessors/NormalNode.js';
  13. import ModelViewProjectionNode from '../../nodes/accessors/ModelViewProjectionNode.js';
  14. import LightContextNode from '../../nodes/lights/LightContextNode.js';
  15. import ShaderLib from './ShaderLib.js';
  16. class WebGPUNodeBuilder extends NodeBuilder {
  17. constructor( material, renderer, lightNode = null ) {
  18. super( material, renderer );
  19. this.lightNode = lightNode;
  20. this.bindings = { vertex: [], fragment: [] };
  21. this.bindingsOffset = { vertex: 0, fragment: 0 };
  22. this.uniformsGroup = {};
  23. this.nativeShader = null;
  24. this._parseMaterial();
  25. }
  26. _parseMaterial() {
  27. const material = this.material;
  28. // get shader
  29. let shader = null;
  30. if ( material.isMeshStandardMaterial ) {
  31. shader = ShaderLib.standard;
  32. } else {
  33. shader = ShaderLib.common;
  34. }
  35. this.nativeShader = shader;
  36. // parse inputs
  37. if ( material.isMeshStandardMaterial || material.isMeshPhongMaterial || material.isMeshBasicMaterial || material.isPointsMaterial || material.isLineBasicMaterial ) {
  38. const mvpNode = new ModelViewProjectionNode();
  39. let lightNode = material.lightNode;
  40. if ( lightNode === undefined && this.lightNode && this.lightNode.hasLights === true ) {
  41. lightNode = this.lightNode;
  42. }
  43. if ( material.positionNode !== undefined ) {
  44. mvpNode.position = material.positionNode;
  45. }
  46. this.addSlot( 'vertex', new NodeSlot( mvpNode, 'MVP', 'vec4' ) );
  47. if ( material.alphaTestNode !== undefined ) {
  48. this.addSlot( 'fragment', new NodeSlot( material.alphaTestNode, 'ALPHA_TEST', 'float' ) );
  49. } else {
  50. this.addSlot( 'fragment', new NodeSlot( new MaterialNode( MaterialNode.ALPHA_TEST ), 'ALPHA_TEST', 'float' ) );
  51. }
  52. if ( material.colorNode !== undefined ) {
  53. this.addSlot( 'fragment', new NodeSlot( material.colorNode, 'COLOR', 'vec4' ) );
  54. } else {
  55. this.addSlot( 'fragment', new NodeSlot( new MaterialNode( MaterialNode.COLOR ), 'COLOR', 'vec4' ) );
  56. }
  57. if ( material.opacityNode !== undefined ) {
  58. this.addSlot( 'fragment', new NodeSlot( material.opacityNode, 'OPACITY', 'float' ) );
  59. } else {
  60. this.addSlot( 'fragment', new NodeSlot( new MaterialNode( MaterialNode.OPACITY ), 'OPACITY', 'float' ) );
  61. }
  62. if ( material.isMeshStandardMaterial ) {
  63. if ( material.metalnessNode !== undefined ) {
  64. this.addSlot( 'fragment', new NodeSlot( material.metalnessNode, 'METALNESS', 'float' ) );
  65. } else {
  66. this.addSlot( 'fragment', new NodeSlot( new MaterialNode( MaterialNode.METALNESS ), 'METALNESS', 'float' ) );
  67. }
  68. if ( material.roughnessNode !== undefined ) {
  69. this.addSlot( 'fragment', new NodeSlot( material.roughnessNode, 'ROUGHNESS', 'float' ) );
  70. } else {
  71. this.addSlot( 'fragment', new NodeSlot( new MaterialNode( MaterialNode.ROUGHNESS ), 'ROUGHNESS', 'float' ) );
  72. }
  73. let normalNode = null;
  74. if ( material.normalNode !== undefined ) {
  75. normalNode = material.normalNode;
  76. } else {
  77. normalNode = new NormalNode( NormalNode.VIEW );
  78. }
  79. this.addSlot( 'fragment', new NodeSlot( new VarNode( normalNode, 'TransformedNormalView', 'vec3' ), 'NORMAL', 'vec3' ) );
  80. } else if ( material.isMeshPhongMaterial ) {
  81. if ( material.specularNode !== undefined ) {
  82. this.addSlot( 'fragment', new NodeSlot( material.specularNode, 'SPECULAR', 'vec3' ) );
  83. } else {
  84. this.addSlot( 'fragment', new NodeSlot( new MaterialNode( MaterialNode.SPECULAR ), 'SPECULAR', 'vec3' ) );
  85. }
  86. if ( material.shininessNode !== undefined ) {
  87. this.addSlot( 'fragment', new NodeSlot( material.shininessNode, 'SHININESS', 'float' ) );
  88. } else {
  89. this.addSlot( 'fragment', new NodeSlot( new MaterialNode( MaterialNode.SHININESS ), 'SHININESS', 'float' ) );
  90. }
  91. }
  92. if ( lightNode && lightNode.isNode ) {
  93. const lightContextNode = new LightContextNode( lightNode );
  94. this.addSlot( 'fragment', new NodeSlot( lightContextNode, 'LIGHT', 'vec3' ) );
  95. }
  96. }
  97. }
  98. getTexture( textureProperty, uvSnippet, biasSnippet = null ) {
  99. if ( biasSnippet !== null ) {
  100. return `texture( sampler2D( ${textureProperty}, ${textureProperty}_sampler ), ${uvSnippet}, ${biasSnippet} )`;
  101. } else {
  102. return `texture( sampler2D( ${textureProperty}, ${textureProperty}_sampler ), ${uvSnippet} )`;
  103. }
  104. }
  105. getPropertyName( node ) {
  106. if ( node.isNodeUniform === true ) {
  107. const name = node.name;
  108. const type = node.type;
  109. if ( type === 'texture' ) {
  110. return name;
  111. } else {
  112. return `nodeUniforms.${name}`;
  113. }
  114. }
  115. return super.getPropertyName( node );
  116. }
  117. getBindings() {
  118. const bindings = this.bindings;
  119. return [ ...bindings.vertex, ...bindings.fragment ];
  120. }
  121. getUniformFromNode( node, shaderStage, type ) {
  122. const uniformNode = super.getUniformFromNode( node, shaderStage, type );
  123. const nodeData = this.getDataFromNode( node, shaderStage );
  124. if ( nodeData.uniformGPU === undefined ) {
  125. let uniformGPU;
  126. const bindings = this.bindings[ shaderStage ];
  127. if ( type === 'texture' ) {
  128. const sampler = new WebGPUNodeSampler( `${uniformNode.name}_sampler`, uniformNode.node );
  129. const texture = new WebGPUNodeSampledTexture( uniformNode.name, uniformNode.node );
  130. // add first textures in sequence and group for last
  131. const lastBinding = bindings[ bindings.length - 1 ];
  132. const index = lastBinding && lastBinding.isUniformsGroup ? bindings.length - 1 : bindings.length;
  133. bindings.splice( index, 0, sampler, texture );
  134. uniformGPU = { sampler, texture };
  135. } else {
  136. let uniformsGroup = this.uniformsGroup[ shaderStage ];
  137. if ( uniformsGroup === undefined ) {
  138. uniformsGroup = new WebGPUNodeUniformsGroup( shaderStage );
  139. this.uniformsGroup[ shaderStage ] = uniformsGroup;
  140. bindings.push( uniformsGroup );
  141. }
  142. if ( type === 'float' ) {
  143. uniformGPU = new FloatNodeUniform( uniformNode );
  144. } else if ( type === 'vec2' ) {
  145. uniformGPU = new Vector2NodeUniform( uniformNode );
  146. } else if ( type === 'vec3' ) {
  147. uniformGPU = new Vector3NodeUniform( uniformNode );
  148. } else if ( type === 'vec4' ) {
  149. uniformGPU = new Vector4NodeUniform( uniformNode );
  150. } else if ( type === 'color' ) {
  151. uniformGPU = new ColorNodeUniform( uniformNode );
  152. } else if ( type === 'mat3' ) {
  153. uniformGPU = new Matrix3NodeUniform( uniformNode );
  154. } else if ( type === 'mat4' ) {
  155. uniformGPU = new Matrix4NodeUniform( uniformNode );
  156. } else {
  157. throw new Error( `Uniform "${type}" not declared.` );
  158. }
  159. uniformsGroup.addUniform( uniformGPU );
  160. }
  161. nodeData.uniformGPU = uniformGPU;
  162. if ( shaderStage === 'vertex' ) {
  163. this.bindingsOffset[ 'fragment' ] = bindings.length;
  164. }
  165. }
  166. return uniformNode;
  167. }
  168. getAttributes( shaderStage ) {
  169. let snippet = '';
  170. if ( shaderStage === 'vertex' ) {
  171. const attributes = this.attributes;
  172. for ( let index = 0; index < attributes.length; index ++ ) {
  173. const attribute = attributes[ index ];
  174. snippet += `layout(location = ${index}) in ${attribute.type} ${attribute.name}; `;
  175. }
  176. }
  177. return snippet;
  178. }
  179. getVarys( shaderStage ) {
  180. let snippet = '';
  181. const varys = this.varys;
  182. const ioStage = shaderStage === 'vertex' ? 'out' : 'in';
  183. for ( let index = 0; index < varys.length; index ++ ) {
  184. const vary = varys[ index ];
  185. snippet += `layout(location = ${index}) ${ioStage} ${vary.type} ${vary.name}; `;
  186. }
  187. return snippet;
  188. }
  189. getUniforms( shaderStage ) {
  190. const uniforms = this.uniforms[ shaderStage ];
  191. let snippet = '';
  192. let groupSnippet = '';
  193. let index = this.bindingsOffset[ shaderStage ];
  194. for ( const uniform of uniforms ) {
  195. if ( uniform.type === 'texture' ) {
  196. snippet += `layout(set = 0, binding = ${index ++}) uniform sampler ${uniform.name}_sampler; `;
  197. snippet += `layout(set = 0, binding = ${index ++}) uniform texture2D ${uniform.name}; `;
  198. } else {
  199. const vectorType = this.getVectorType( uniform.type );
  200. groupSnippet += `uniform ${vectorType} ${uniform.name}; `;
  201. }
  202. }
  203. if ( groupSnippet ) {
  204. snippet += `layout(set = 0, binding = ${index ++}) uniform NodeUniforms { ${groupSnippet} } nodeUniforms; `;
  205. }
  206. return snippet;
  207. }
  208. composeShaderCode( code, snippet ) {
  209. // use regex maybe for security?
  210. const versionStrIndex = code.indexOf( '\n' );
  211. let finalCode = code.substr( 0, versionStrIndex ) + '\n\n';
  212. finalCode += snippet;
  213. finalCode += code.substr( versionStrIndex );
  214. return finalCode;
  215. }
  216. build() {
  217. const keywords = this.getContextValue( 'keywords' );
  218. for ( const shaderStage of [ 'vertex', 'fragment' ] ) {
  219. this.shaderStage = shaderStage;
  220. keywords.include( this, this.nativeShader.fragmentShader );
  221. }
  222. super.build();
  223. this.vertexShader = this.composeShaderCode( this.nativeShader.vertexShader, this.vertexShader );
  224. this.fragmentShader = this.composeShaderCode( this.nativeShader.fragmentShader, this.fragmentShader );
  225. return this;
  226. }
  227. }
  228. export default WebGPUNodeBuilder;