WebGLNodeBuilder.js 11 KB

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