GLSLNodeBuilder.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599
  1. import { MathNode, GLSLNodeParser, NodeBuilder, NodeMaterial, FunctionNode } from '../../../nodes/Nodes.js';
  2. import UniformBuffer from '../../common/UniformBuffer.js';
  3. import UniformsGroup from '../../common/UniformsGroup.js';
  4. import { NodeSampledTexture, NodeSampledCubeTexture } from '../../common/nodes/NodeSampledTexture.js';
  5. const glslMethods = {
  6. [ MathNode.ATAN2 ]: 'atan',
  7. textureDimensions: 'textureSize'
  8. };
  9. const precisionLib = {
  10. low: 'lowp',
  11. medium: 'mediump',
  12. high: 'highp'
  13. };
  14. const supports = {
  15. instance: true
  16. };
  17. class GLSLNodeBuilder extends NodeBuilder {
  18. constructor( object, renderer, scene = null ) {
  19. super( object, renderer, new GLSLNodeParser(), scene );
  20. this.uniformsGroup = {};
  21. }
  22. getMethod( method ) {
  23. return glslMethods[ method ] || method;
  24. }
  25. getPropertyName( node, shaderStage ) {
  26. if ( node.isOutputStructVar ) return '';
  27. return super.getPropertyName( node, shaderStage );
  28. }
  29. buildFunctionNode( shaderNode ) {
  30. const layout = shaderNode.layout;
  31. const flowData = this.flowShaderNode( shaderNode );
  32. const parameters = [];
  33. for ( const input of layout.inputs ) {
  34. parameters.push( this.getType( input.type ) + ' ' + input.name );
  35. }
  36. //
  37. const code = `${ this.getType( layout.type ) } ${ layout.name }( ${ parameters.join( ', ' ) } ) {
  38. ${ flowData.vars }
  39. ${ flowData.code }
  40. return ${ flowData.result };
  41. }`;
  42. //
  43. return new FunctionNode( code );
  44. }
  45. getTexture( texture, textureProperty, uvSnippet ) {
  46. if ( texture.isTextureCube ) {
  47. return `textureCube( ${textureProperty}, ${uvSnippet} )`;
  48. } else if ( texture.isDepthTexture ) {
  49. return `texture( ${textureProperty}, ${uvSnippet} ).x`;
  50. } else {
  51. return `texture( ${textureProperty}, ${uvSnippet} )`;
  52. }
  53. }
  54. getTextureLevel( texture, textureProperty, uvSnippet, biasSnippet ) {
  55. return `textureLod( ${textureProperty}, ${uvSnippet}, ${biasSnippet} )`;
  56. }
  57. getTextureCompare( texture, textureProperty, uvSnippet, compareSnippet, shaderStage = this.shaderStage ) {
  58. if ( shaderStage === 'fragment' ) {
  59. return `texture( ${textureProperty}, vec3( ${uvSnippet}, ${compareSnippet} ) )`;
  60. } else {
  61. console.error( `WebGPURenderer: THREE.DepthTexture.compareFunction() does not support ${ shaderStage } shader.` );
  62. }
  63. }
  64. getVars( shaderStage ) {
  65. const snippets = [];
  66. const vars = this.vars[ shaderStage ];
  67. for ( const variable of vars ) {
  68. if ( variable.isOutputStructVar ) continue;
  69. snippets.push( `${ this.getVar( variable.type, variable.name ) };` );
  70. }
  71. return snippets.join( '\n\t' );
  72. }
  73. getUniforms( shaderStage ) {
  74. const uniforms = this.uniforms[ shaderStage ];
  75. const bindingSnippets = [];
  76. const groupSnippets = [];
  77. for ( const uniform of uniforms ) {
  78. let snippet = null;
  79. let group = false;
  80. if ( uniform.type === 'texture' ) {
  81. if ( uniform.node.value.compareFunction ) {
  82. snippet = `sampler2DShadow ${uniform.name};`;
  83. } else {
  84. snippet = `sampler2D ${uniform.name};`;
  85. }
  86. } else if ( uniform.type === 'cubeTexture' ) {
  87. snippet = `samplerCube ${uniform.name};`;
  88. } else if ( uniform.type === 'buffer' ) {
  89. const bufferNode = uniform.node;
  90. const bufferType = this.getType( bufferNode.bufferType );
  91. const bufferCount = bufferNode.bufferCount;
  92. const bufferCountSnippet = bufferCount > 0 ? bufferCount : '';
  93. snippet = `${bufferNode.name} {\n\t${bufferType} ${uniform.name}[${bufferCountSnippet}];\n};\n`;
  94. } else {
  95. const vectorType = this.getVectorType( uniform.type );
  96. snippet = `${vectorType} ${uniform.name};`;
  97. group = true;
  98. }
  99. const precision = uniform.node.precision;
  100. if ( precision !== null ) {
  101. snippet = precisionLib[ precision ] + ' ' + snippet;
  102. }
  103. if ( group ) {
  104. snippet = '\t' + snippet;
  105. groupSnippets.push( snippet );
  106. } else {
  107. snippet = 'uniform ' + snippet;
  108. bindingSnippets.push( snippet );
  109. }
  110. }
  111. let output = '';
  112. if ( groupSnippets.length > 0 ) {
  113. output += this._getGLSLUniformStruct( shaderStage + 'NodeUniforms', groupSnippets.join( '\n' ) ) + '\n';
  114. }
  115. output += bindingSnippets.join( '\n' );
  116. return output;
  117. }
  118. getAttributes( shaderStage ) {
  119. let snippet = '';
  120. if ( shaderStage === 'vertex' ) {
  121. const attributes = this.getAttributesArray();
  122. let location = 0;
  123. for ( const attribute of attributes ) {
  124. snippet += `layout( location = ${ location ++ } ) in ${ attribute.type } ${ attribute.name };\n`;
  125. }
  126. }
  127. return snippet;
  128. }
  129. getStructMembers( struct ) {
  130. const snippets = [];
  131. const members = struct.getMemberTypes();
  132. for ( let i = 0; i < members.length; i ++ ) {
  133. const member = members[ i ];
  134. snippets.push( `layout( location = ${i} ) out ${ member} m${i};` );
  135. }
  136. return snippets.join( '\n' );
  137. }
  138. getStructs( shaderStage ) {
  139. const snippets = [];
  140. const structs = this.structs[ shaderStage ];
  141. if ( structs.length === 0 ) {
  142. return "layout( location = 0 ) out vec4 fragColor;\n";
  143. }
  144. for ( let index = 0, length = structs.length; index < length; index ++ ) {
  145. const struct = structs[ index ];
  146. let snippet = `\n`;
  147. snippet += this.getStructMembers( struct );
  148. snippet += '\n';
  149. snippets.push( snippet );
  150. }
  151. return snippets.join( '\n\n' );
  152. }
  153. getVaryings( shaderStage ) {
  154. let snippet = '';
  155. const varyings = this.varyings;
  156. if ( shaderStage === 'vertex' ) {
  157. for ( const varying of varyings ) {
  158. const type = varying.type;
  159. const flat = type === 'int' || type === 'uint' ? 'flat ' : '';
  160. snippet += `${flat}${varying.needsInterpolation ? 'out' : '/*out*/'} ${type} ${varying.name};\n`;
  161. }
  162. } else if ( shaderStage === 'fragment' ) {
  163. for ( const varying of varyings ) {
  164. if ( varying.needsInterpolation ) {
  165. const type = varying.type;
  166. const flat = type === 'int' || type === 'uint' ? 'flat ' : '';
  167. snippet += `${flat}in ${type} ${varying.name};\n`;
  168. }
  169. }
  170. }
  171. return snippet;
  172. }
  173. getVertexIndex() {
  174. return 'gl_VertexID';
  175. }
  176. getInstanceIndex() {
  177. return 'uint( gl_InstanceID )';
  178. }
  179. getFrontFacing() {
  180. return 'gl_FrontFacing';
  181. }
  182. getFragCoord() {
  183. return 'gl_FragCoord';
  184. }
  185. isAvailable( name ) {
  186. return supports[ name ] === true;
  187. }
  188. isFlipY() {
  189. return true;
  190. }
  191. _getGLSLUniformStruct( name, vars ) {
  192. return `
  193. layout( std140 ) uniform ${name} {
  194. ${vars}
  195. };`;
  196. }
  197. _getGLSLVertexCode( shaderData ) {
  198. return `#version 300 es
  199. ${ this.getSignature() }
  200. // precision
  201. precision highp float;
  202. precision highp int;
  203. // uniforms
  204. ${shaderData.uniforms}
  205. // varyings
  206. ${shaderData.varyings}
  207. // attributes
  208. ${shaderData.attributes}
  209. // codes
  210. ${shaderData.codes}
  211. void main() {
  212. // vars
  213. ${shaderData.vars}
  214. // flow
  215. ${shaderData.flow}
  216. gl_PointSize = 1.0;
  217. }
  218. `;
  219. }
  220. _getGLSLFragmentCode( shaderData ) {
  221. return `#version 300 es
  222. ${ this.getSignature() }
  223. // precision
  224. precision highp float;
  225. precision highp int;
  226. precision lowp sampler2DShadow;
  227. // uniforms
  228. ${shaderData.uniforms}
  229. // varyings
  230. ${shaderData.varyings}
  231. // codes
  232. ${shaderData.codes}
  233. ${shaderData.structs}
  234. void main() {
  235. // vars
  236. ${shaderData.vars}
  237. // flow
  238. ${shaderData.flow}
  239. }
  240. `;
  241. }
  242. buildCode() {
  243. const shadersData = this.material !== null ? { fragment: {}, vertex: {} } : { compute: {} };
  244. for ( const shaderStage in shadersData ) {
  245. let flow = '// code\n\n';
  246. flow += this.flowCode[ shaderStage ];
  247. const flowNodes = this.flowNodes[ shaderStage ];
  248. const mainNode = flowNodes[ flowNodes.length - 1 ];
  249. for ( const node of flowNodes ) {
  250. const flowSlotData = this.getFlowData( node/*, shaderStage*/ );
  251. const slotName = node.name;
  252. if ( slotName ) {
  253. if ( flow.length > 0 ) flow += '\n';
  254. flow += `\t// flow -> ${ slotName }\n\t`;
  255. }
  256. flow += `${ flowSlotData.code }\n\t`;
  257. if ( node === mainNode && shaderStage !== 'compute' ) {
  258. flow += '// result\n\t';
  259. if ( shaderStage === 'vertex' ) {
  260. flow += 'gl_Position = ';
  261. flow += `${ flowSlotData.result };`;
  262. } else if ( shaderStage === 'fragment' ) {
  263. if ( ! node.outputNode.isOutputStructNode ) {
  264. flow += 'fragColor = ';
  265. flow += `${ flowSlotData.result };`;
  266. }
  267. }
  268. }
  269. }
  270. const stageData = shadersData[ shaderStage ];
  271. stageData.uniforms = this.getUniforms( shaderStage );
  272. stageData.attributes = this.getAttributes( shaderStage );
  273. stageData.varyings = this.getVaryings( shaderStage );
  274. stageData.vars = this.getVars( shaderStage );
  275. stageData.structs = this.getStructs( shaderStage );
  276. stageData.codes = this.getCodes( shaderStage );
  277. stageData.flow = flow;
  278. }
  279. if ( this.material !== null ) {
  280. this.vertexShader = this._getGLSLVertexCode( shadersData.vertex );
  281. this.fragmentShader = this._getGLSLFragmentCode( shadersData.fragment );
  282. } else {
  283. console.warn( 'GLSLNodeBuilder: compute shaders are not supported.' );
  284. //this.computeShader = this._getGLSLComputeCode( shadersData.compute );
  285. }
  286. }
  287. getUniformFromNode( node, type, shaderStage, name = null ) {
  288. const uniformNode = super.getUniformFromNode( node, type, shaderStage, name );
  289. const nodeData = this.getDataFromNode( node, shaderStage );
  290. let uniformGPU = nodeData.uniformGPU;
  291. if ( uniformGPU === undefined ) {
  292. if ( type === 'texture' ) {
  293. uniformGPU = new NodeSampledTexture( uniformNode.name, uniformNode.node );
  294. this.bindings[ shaderStage ].push( uniformGPU );
  295. } else if ( type === 'cubeTexture' ) {
  296. uniformGPU = new NodeSampledCubeTexture( uniformNode.name, uniformNode.node );
  297. this.bindings[ shaderStage ].push( uniformGPU );
  298. } else if ( type === 'buffer' ) {
  299. node.name = `NodeBuffer_${node.id}`;
  300. const buffer = new UniformBuffer( node.name, node.value );
  301. uniformNode.name = `buffer${node.id}`;
  302. this.bindings[ shaderStage ].push( buffer );
  303. uniformGPU = buffer;
  304. } else {
  305. let uniformsGroup = this.uniformsGroup[ shaderStage ];
  306. if ( uniformsGroup === undefined ) {
  307. uniformsGroup = new UniformsGroup( shaderStage + 'NodeUniforms' );
  308. //uniformsGroup.setVisibility( gpuShaderStageLib[ shaderStage ] );
  309. this.uniformsGroup[ shaderStage ] = uniformsGroup;
  310. this.bindings[ shaderStage ].push( uniformsGroup );
  311. }
  312. uniformGPU = this.getNodeUniform( uniformNode, type );
  313. uniformsGroup.addUniform( uniformGPU );
  314. }
  315. nodeData.uniformGPU = uniformGPU;
  316. }
  317. return uniformNode;
  318. }
  319. build() {
  320. // @TODO: Move this code to super.build()
  321. const { object, material } = this;
  322. if ( material !== null ) {
  323. NodeMaterial.fromMaterial( material ).build( this );
  324. } else {
  325. this.addFlow( 'compute', object );
  326. }
  327. return super.build();
  328. }
  329. }
  330. export default GLSLNodeBuilder;