WebGLNodeBuilder.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559
  1. import NodeBuilder, { shaderStages } from 'three-nodes/core/NodeBuilder.js';
  2. import NodeFrame from 'three-nodes/core/NodeFrame.js';
  3. import SlotNode from './SlotNode.js';
  4. import GLSLNodeParser from 'three-nodes/parsers/GLSLNodeParser.js';
  5. import WebGLPhysicalContextNode from './WebGLPhysicalContextNode.js';
  6. import { PerspectiveCamera, ShaderChunk, ShaderLib, UniformsUtils, UniformsLib,
  7. LinearEncoding, RGBAFormat, UnsignedByteType, sRGBEncoding } from 'three';
  8. const nodeFrame = new NodeFrame();
  9. nodeFrame.camera = new PerspectiveCamera();
  10. const nodeShaderLib = {
  11. LineBasicNodeMaterial: ShaderLib.basic,
  12. MeshBasicNodeMaterial: ShaderLib.basic,
  13. PointsNodeMaterial: ShaderLib.points,
  14. MeshStandardNodeMaterial: ShaderLib.standard
  15. };
  16. function getIncludeSnippet( name ) {
  17. return `#include <${name}>`;
  18. }
  19. function getShaderStageProperty( shaderStage ) {
  20. return `${shaderStage}Shader`;
  21. }
  22. class WebGLNodeBuilder extends NodeBuilder {
  23. constructor( object, renderer, shader ) {
  24. super( object, renderer, new GLSLNodeParser() );
  25. this.shader = shader;
  26. this.slots = { vertex: [], fragment: [] };
  27. this._parseObject();
  28. }
  29. addSlot( shaderStage, slotNode ) {
  30. this.slots[ shaderStage ].push( slotNode );
  31. return this.addFlow( shaderStage, slotNode );
  32. }
  33. addFlowCode( code ) {
  34. if ( ! /;\s*$/.test( code ) ) {
  35. code += ';';
  36. }
  37. super.addFlowCode( code + '\n\t' );
  38. }
  39. _parseObject() {
  40. const material = this.material;
  41. const type = material.type;
  42. // shader lib
  43. if ( nodeShaderLib[ type ] !== undefined ) {
  44. const shaderLib = nodeShaderLib[ type ];
  45. const shader = this.shader;
  46. shader.vertexShader = shaderLib.vertexShader;
  47. shader.fragmentShader = shaderLib.fragmentShader;
  48. shader.uniforms = UniformsUtils.merge( [ shaderLib.uniforms, UniformsLib.lights ] );
  49. }
  50. // parse inputs
  51. if ( material.colorNode && material.colorNode.isNode ) {
  52. this.addSlot( 'fragment', new SlotNode( material.colorNode, 'COLOR', 'vec4' ) );
  53. }
  54. if ( material.opacityNode && material.opacityNode.isNode ) {
  55. this.addSlot( 'fragment', new SlotNode( material.opacityNode, 'OPACITY', 'float' ) );
  56. }
  57. if ( material.normalNode && material.normalNode.isNode ) {
  58. this.addSlot( 'fragment', new SlotNode( material.normalNode, 'NORMAL', 'vec3' ) );
  59. }
  60. if ( material.emissiveNode && material.emissiveNode.isNode ) {
  61. this.addSlot( 'fragment', new SlotNode( material.emissiveNode, 'EMISSIVE', 'vec3' ) );
  62. }
  63. if ( material.metalnessNode && material.metalnessNode.isNode ) {
  64. this.addSlot( 'fragment', new SlotNode( material.metalnessNode, 'METALNESS', 'float' ) );
  65. }
  66. if ( material.roughnessNode && material.roughnessNode.isNode ) {
  67. this.addSlot( 'fragment', new SlotNode( material.roughnessNode, 'ROUGHNESS', 'float' ) );
  68. }
  69. if ( material.clearcoatNode && material.clearcoatNode.isNode ) {
  70. this.addSlot( 'fragment', new SlotNode( material.clearcoatNode, 'CLEARCOAT', 'float' ) );
  71. }
  72. if ( material.clearcoatRoughnessNode && material.clearcoatRoughnessNode.isNode ) {
  73. this.addSlot( 'fragment', new SlotNode( material.clearcoatRoughnessNode, 'CLEARCOAT_ROUGHNESS', 'float' ) );
  74. }
  75. if ( material.envNode && material.envNode.isNode ) {
  76. const envRadianceNode = new WebGLPhysicalContextNode( WebGLPhysicalContextNode.RADIANCE, material.envNode );
  77. const envIrradianceNode = new WebGLPhysicalContextNode( WebGLPhysicalContextNode.IRRADIANCE, material.envNode );
  78. this.addSlot( 'fragment', new SlotNode( envRadianceNode, 'RADIANCE', 'vec3' ) );
  79. this.addSlot( 'fragment', new SlotNode( envIrradianceNode, 'IRRADIANCE', 'vec3' ) );
  80. }
  81. if ( material.positionNode && material.positionNode.isNode ) {
  82. this.addSlot( 'vertex', new SlotNode( material.positionNode, 'POSITION', 'vec3' ) );
  83. }
  84. if ( material.sizeNode && material.sizeNode.isNode ) {
  85. this.addSlot( 'vertex', new SlotNode( material.sizeNode, 'SIZE', 'float' ) );
  86. }
  87. }
  88. getTexture( textureProperty, uvSnippet, biasSnippet = null ) {
  89. if ( biasSnippet !== null ) {
  90. return `texture2D( ${textureProperty}, ${uvSnippet}, ${biasSnippet} )`;
  91. } else {
  92. return `texture2D( ${textureProperty}, ${uvSnippet} )`;
  93. }
  94. }
  95. getCubeTexture( textureProperty, uvSnippet, biasSnippet = null ) {
  96. const textureCube = 'textureCubeLodEXT'; // textureCubeLodEXT textureLod
  97. if ( biasSnippet !== null ) {
  98. return `${textureCube}( ${textureProperty}, ${uvSnippet}, ${biasSnippet} )`;
  99. } else {
  100. return `${textureCube}( ${textureProperty}, ${uvSnippet} )`;
  101. }
  102. }
  103. getUniforms( shaderStage ) {
  104. const uniforms = this.uniforms[ shaderStage ];
  105. let snippet = '';
  106. for ( const uniform of uniforms ) {
  107. if ( uniform.type === 'texture' ) {
  108. snippet += `uniform sampler2D ${uniform.name}; `;
  109. } else if ( uniform.type === 'cubeTexture' ) {
  110. snippet += `uniform samplerCube ${uniform.name}; `;
  111. } else {
  112. const vectorType = this.getVectorType( uniform.type );
  113. snippet += `uniform ${vectorType} ${uniform.name}; `;
  114. }
  115. }
  116. return snippet;
  117. }
  118. getAttributes( shaderStage ) {
  119. let snippet = '';
  120. if ( shaderStage === 'vertex' ) {
  121. const attributes = this.attributes;
  122. for ( let index = 0; index < attributes.length; index ++ ) {
  123. const attribute = attributes[ index ];
  124. // ignore common attributes to prevent redefinitions
  125. if ( attribute.name === 'uv' || attribute.name === 'position' || attribute.name === 'normal' )
  126. continue;
  127. snippet += `attribute ${attribute.type} ${attribute.name}; `;
  128. }
  129. }
  130. return snippet;
  131. }
  132. getVarys( /* shaderStage */ ) {
  133. let snippet = '';
  134. const varys = this.varys;
  135. for ( let index = 0; index < varys.length; index ++ ) {
  136. const vary = varys[ index ];
  137. snippet += `varying ${vary.type} ${vary.name}; `;
  138. }
  139. return snippet;
  140. }
  141. addCodeAfterSnippet( shaderStage, snippet, code ) {
  142. const shaderProperty = getShaderStageProperty( shaderStage );
  143. let source = this[ shaderProperty ];
  144. const index = source.indexOf( snippet );
  145. if ( index !== - 1 ) {
  146. const start = source.substring( 0, index + snippet.length );
  147. const end = source.substring( index + snippet.length );
  148. source = `${start}\n${code}\n${end}`;
  149. }
  150. this[ shaderProperty ] = source;
  151. }
  152. addCodeAfterInclude( shaderStage, includeName, code ) {
  153. const includeSnippet = getIncludeSnippet( includeName );
  154. this.addCodeAfterSnippet( shaderStage, includeSnippet, code );
  155. }
  156. replaceCode( shaderStage, source, target ) {
  157. const shaderProperty = getShaderStageProperty( shaderStage );
  158. this.shader[ shaderProperty ] = this.shader[ shaderProperty ].replaceAll( source, target );
  159. }
  160. parseInclude( shaderStage, ...includes ) {
  161. for ( const name of includes ) {
  162. const includeSnippet = getIncludeSnippet( name );
  163. const code = ShaderChunk[ name ];
  164. this.replaceCode( shaderStage, includeSnippet, code );
  165. }
  166. }
  167. getTextureEncodingFromMap( map ) {
  168. const isWebGL2 = this.renderer.capabilities.isWebGL2;
  169. if ( isWebGL2 && map && map.isTexture && map.format === RGBAFormat && map.type === UnsignedByteType && map.encoding === sRGBEncoding ) {
  170. return LinearEncoding; // disable inline decode for sRGB textures in WebGL 2
  171. }
  172. return super.getTextureEncodingFromMap( map );
  173. }
  174. buildCode() {
  175. const shaderData = {};
  176. for ( const shaderStage of shaderStages ) {
  177. const uniforms = this.getUniforms( shaderStage );
  178. const attributes = this.getAttributes( shaderStage );
  179. const varys = this.getVarys( shaderStage );
  180. const vars = this.getVars( shaderStage );
  181. const codes = this.getCodes( shaderStage );
  182. shaderData[ shaderStage ] = `${this.getSignature()}
  183. // <node_builder>
  184. // uniforms
  185. ${uniforms}
  186. // attributes
  187. ${attributes}
  188. // varys
  189. ${varys}
  190. // vars
  191. ${vars}
  192. // codes
  193. ${codes}
  194. // </node_builder>
  195. ${this.shader[ getShaderStageProperty( shaderStage ) ]}
  196. `;
  197. }
  198. this.vertexShader = shaderData.vertex;
  199. this.fragmentShader = shaderData.fragment;
  200. }
  201. build() {
  202. super.build();
  203. this._addSnippets();
  204. this._addUniforms();
  205. this._updateUniforms();
  206. this.shader.vertexShader = this.vertexShader;
  207. this.shader.fragmentShader = this.fragmentShader;
  208. return this;
  209. }
  210. getSlot( shaderStage, name ) {
  211. const slots = this.slots[ shaderStage ];
  212. for ( const node of slots ) {
  213. if ( node.name === name ) {
  214. return this.getFlowData( shaderStage, node );
  215. }
  216. }
  217. }
  218. _addSnippets() {
  219. this.parseInclude( 'fragment', 'lights_physical_fragment' );
  220. const colorSlot = this.getSlot( 'fragment', 'COLOR' );
  221. const opacityNode = this.getSlot( 'fragment', 'OPACITY' );
  222. const normalSlot = this.getSlot( 'fragment', 'NORMAL' );
  223. const emissiveNode = this.getSlot( 'fragment', 'EMISSIVE' );
  224. const roughnessNode = this.getSlot( 'fragment', 'ROUGHNESS' );
  225. const metalnessNode = this.getSlot( 'fragment', 'METALNESS' );
  226. const clearcoatNode = this.getSlot( 'fragment', 'CLEARCOAT' );
  227. const clearcoatRoughnessNode = this.getSlot( 'fragment', 'CLEARCOAT_ROUGHNESS' );
  228. const positionNode = this.getSlot( 'vertex', 'POSITION' );
  229. const sizeNode = this.getSlot( 'vertex', 'SIZE' );
  230. if ( colorSlot !== undefined ) {
  231. this.addCodeAfterInclude(
  232. 'fragment',
  233. 'color_fragment',
  234. `${colorSlot.code}\n\tdiffuseColor = ${colorSlot.result};`
  235. );
  236. }
  237. if ( opacityNode !== undefined ) {
  238. this.addCodeAfterInclude(
  239. 'fragment',
  240. 'alphatest_fragment',
  241. `${opacityNode.code}\n\tdiffuseColor.a = ${opacityNode.result};`
  242. );
  243. }
  244. if ( normalSlot !== undefined ) {
  245. this.addCodeAfterInclude(
  246. 'fragment',
  247. 'normal_fragment_begin',
  248. `${normalSlot.code}\n\tnormal = ${normalSlot.result};`
  249. );
  250. }
  251. if ( emissiveNode !== undefined ) {
  252. this.addCodeAfterInclude(
  253. 'fragment',
  254. 'emissivemap_fragment',
  255. `${emissiveNode.code}\n\ttotalEmissiveRadiance = ${emissiveNode.result};`
  256. );
  257. }
  258. if ( roughnessNode !== undefined ) {
  259. this.addCodeAfterInclude(
  260. 'fragment',
  261. 'roughnessmap_fragment',
  262. `${roughnessNode.code}\n\troughnessFactor = ${roughnessNode.result};`
  263. );
  264. }
  265. if ( metalnessNode !== undefined ) {
  266. this.addCodeAfterInclude(
  267. 'fragment',
  268. 'metalnessmap_fragment',
  269. `${metalnessNode.code}\n\tmetalnessFactor = ${metalnessNode.result};`
  270. );
  271. }
  272. if ( clearcoatNode !== undefined ) {
  273. this.addCodeAfterSnippet(
  274. 'fragment',
  275. 'material.clearcoatRoughness = clearcoatRoughness;',
  276. `${clearcoatNode.code}\n\tmaterial.clearcoat = ${clearcoatNode.result};`
  277. );
  278. }
  279. if ( clearcoatRoughnessNode !== undefined ) {
  280. this.addCodeAfterSnippet(
  281. 'fragment',
  282. 'material.clearcoatRoughness = clearcoatRoughness;',
  283. `${clearcoatRoughnessNode.code}\n\tmaterial.clearcoatRoughness = ${clearcoatRoughnessNode.result};`
  284. );
  285. }
  286. if ( positionNode !== undefined ) {
  287. this.addCodeAfterInclude(
  288. 'vertex',
  289. 'begin_vertex',
  290. `${positionNode.code}\n\ttransformed = ${positionNode.result};`
  291. );
  292. }
  293. if ( sizeNode !== undefined ) {
  294. this.addCodeAfterSnippet(
  295. 'vertex',
  296. 'gl_PointSize = size;',
  297. `${sizeNode.code}\n\tgl_PointSize = ${sizeNode.result};`
  298. );
  299. }
  300. for ( const shaderStage of shaderStages ) {
  301. this.addCodeAfterSnippet(
  302. shaderStage,
  303. 'main() {',
  304. this.flowCode[ shaderStage ]
  305. );
  306. }
  307. }
  308. _addUniforms() {
  309. for ( const shaderStage of shaderStages ) {
  310. // uniforms
  311. for ( const uniform of this.uniforms[ shaderStage ] ) {
  312. this.shader.uniforms[ uniform.name ] = uniform;
  313. }
  314. }
  315. }
  316. _updateUniforms() {
  317. nodeFrame.object = this.object;
  318. nodeFrame.renderer = this.renderer;
  319. for ( const node of this.updateNodes ) {
  320. nodeFrame.updateNode( node );
  321. }
  322. }
  323. }
  324. export { WebGLNodeBuilder };