GLSLNodeBuilder.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603
  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. if ( vars !== undefined ) {
  68. for ( const variable of vars ) {
  69. if ( variable.isOutputStructVar ) continue;
  70. snippets.push( `${ this.getVar( variable.type, variable.name ) };` );
  71. }
  72. }
  73. return snippets.join( '\n\t' );
  74. }
  75. getUniforms( shaderStage ) {
  76. const uniforms = this.uniforms[ shaderStage ];
  77. const bindingSnippets = [];
  78. const groupSnippets = [];
  79. for ( const uniform of uniforms ) {
  80. let snippet = null;
  81. let group = false;
  82. if ( uniform.type === 'texture' ) {
  83. if ( uniform.node.value.compareFunction ) {
  84. snippet = `sampler2DShadow ${uniform.name};`;
  85. } else {
  86. snippet = `sampler2D ${uniform.name};`;
  87. }
  88. } else if ( uniform.type === 'cubeTexture' ) {
  89. snippet = `samplerCube ${uniform.name};`;
  90. } else if ( uniform.type === 'buffer' ) {
  91. const bufferNode = uniform.node;
  92. const bufferType = this.getType( bufferNode.bufferType );
  93. const bufferCount = bufferNode.bufferCount;
  94. const bufferCountSnippet = bufferCount > 0 ? bufferCount : '';
  95. snippet = `${bufferNode.name} {\n\t${bufferType} ${uniform.name}[${bufferCountSnippet}];\n};\n`;
  96. } else {
  97. const vectorType = this.getVectorType( uniform.type );
  98. snippet = `${vectorType} ${uniform.name};`;
  99. group = true;
  100. }
  101. const precision = uniform.node.precision;
  102. if ( precision !== null ) {
  103. snippet = precisionLib[ precision ] + ' ' + snippet;
  104. }
  105. if ( group ) {
  106. snippet = '\t' + snippet;
  107. groupSnippets.push( snippet );
  108. } else {
  109. snippet = 'uniform ' + snippet;
  110. bindingSnippets.push( snippet );
  111. }
  112. }
  113. let output = '';
  114. if ( groupSnippets.length > 0 ) {
  115. output += this._getGLSLUniformStruct( shaderStage + 'NodeUniforms', groupSnippets.join( '\n' ) ) + '\n';
  116. }
  117. output += bindingSnippets.join( '\n' );
  118. return output;
  119. }
  120. getAttributes( shaderStage ) {
  121. let snippet = '';
  122. if ( shaderStage === 'vertex' ) {
  123. const attributes = this.getAttributesArray();
  124. let location = 0;
  125. for ( const attribute of attributes ) {
  126. snippet += `layout( location = ${ location ++ } ) in ${ attribute.type } ${ attribute.name };\n`;
  127. }
  128. }
  129. return snippet;
  130. }
  131. getStructMembers( struct ) {
  132. const snippets = [];
  133. const members = struct.getMemberTypes();
  134. for ( let i = 0; i < members.length; i ++ ) {
  135. const member = members[ i ];
  136. snippets.push( `layout( location = ${i} ) out ${ member} m${i};` );
  137. }
  138. return snippets.join( '\n' );
  139. }
  140. getStructs( shaderStage ) {
  141. const snippets = [];
  142. const structs = this.structs[ shaderStage ];
  143. if ( structs.length === 0 ) {
  144. return 'layout( location = 0 ) out vec4 fragColor;\n';
  145. }
  146. for ( let index = 0, length = structs.length; index < length; index ++ ) {
  147. const struct = structs[ index ];
  148. let snippet = '\n';
  149. snippet += this.getStructMembers( struct );
  150. snippet += '\n';
  151. snippets.push( snippet );
  152. }
  153. return snippets.join( '\n\n' );
  154. }
  155. getVaryings( shaderStage ) {
  156. let snippet = '';
  157. const varyings = this.varyings;
  158. if ( shaderStage === 'vertex' ) {
  159. for ( const varying of varyings ) {
  160. const type = varying.type;
  161. const flat = type === 'int' || type === 'uint' ? 'flat ' : '';
  162. snippet += `${flat}${varying.needsInterpolation ? 'out' : '/*out*/'} ${type} ${varying.name};\n`;
  163. }
  164. } else if ( shaderStage === 'fragment' ) {
  165. for ( const varying of varyings ) {
  166. if ( varying.needsInterpolation ) {
  167. const type = varying.type;
  168. const flat = type === 'int' || type === 'uint' ? 'flat ' : '';
  169. snippet += `${flat}in ${type} ${varying.name};\n`;
  170. }
  171. }
  172. }
  173. return snippet;
  174. }
  175. getVertexIndex() {
  176. return 'gl_VertexID';
  177. }
  178. getInstanceIndex() {
  179. return 'uint( gl_InstanceID )';
  180. }
  181. getFrontFacing() {
  182. return 'gl_FrontFacing';
  183. }
  184. getFragCoord() {
  185. return 'gl_FragCoord';
  186. }
  187. isAvailable( name ) {
  188. return supports[ name ] === true;
  189. }
  190. isFlipY() {
  191. return true;
  192. }
  193. _getGLSLUniformStruct( name, vars ) {
  194. return `
  195. layout( std140 ) uniform ${name} {
  196. ${vars}
  197. };`;
  198. }
  199. _getGLSLVertexCode( shaderData ) {
  200. return `#version 300 es
  201. ${ this.getSignature() }
  202. // precision
  203. precision highp float;
  204. precision highp int;
  205. // uniforms
  206. ${shaderData.uniforms}
  207. // varyings
  208. ${shaderData.varyings}
  209. // attributes
  210. ${shaderData.attributes}
  211. // codes
  212. ${shaderData.codes}
  213. void main() {
  214. // vars
  215. ${shaderData.vars}
  216. // flow
  217. ${shaderData.flow}
  218. gl_PointSize = 1.0;
  219. }
  220. `;
  221. }
  222. _getGLSLFragmentCode( shaderData ) {
  223. return `#version 300 es
  224. ${ this.getSignature() }
  225. // precision
  226. precision highp float;
  227. precision highp int;
  228. precision lowp sampler2DShadow;
  229. // uniforms
  230. ${shaderData.uniforms}
  231. // varyings
  232. ${shaderData.varyings}
  233. // codes
  234. ${shaderData.codes}
  235. ${shaderData.structs}
  236. void main() {
  237. // vars
  238. ${shaderData.vars}
  239. // flow
  240. ${shaderData.flow}
  241. }
  242. `;
  243. }
  244. buildCode() {
  245. const shadersData = this.material !== null ? { fragment: {}, vertex: {} } : { compute: {} };
  246. for ( const shaderStage in shadersData ) {
  247. let flow = '// code\n\n';
  248. flow += this.flowCode[ shaderStage ];
  249. const flowNodes = this.flowNodes[ shaderStage ];
  250. const mainNode = flowNodes[ flowNodes.length - 1 ];
  251. for ( const node of flowNodes ) {
  252. const flowSlotData = this.getFlowData( node/*, shaderStage*/ );
  253. const slotName = node.name;
  254. if ( slotName ) {
  255. if ( flow.length > 0 ) flow += '\n';
  256. flow += `\t// flow -> ${ slotName }\n\t`;
  257. }
  258. flow += `${ flowSlotData.code }\n\t`;
  259. if ( node === mainNode && shaderStage !== 'compute' ) {
  260. flow += '// result\n\t';
  261. if ( shaderStage === 'vertex' ) {
  262. flow += 'gl_Position = ';
  263. flow += `${ flowSlotData.result };`;
  264. } else if ( shaderStage === 'fragment' ) {
  265. if ( ! node.outputNode.isOutputStructNode ) {
  266. flow += 'fragColor = ';
  267. flow += `${ flowSlotData.result };`;
  268. }
  269. }
  270. }
  271. }
  272. const stageData = shadersData[ shaderStage ];
  273. stageData.uniforms = this.getUniforms( shaderStage );
  274. stageData.attributes = this.getAttributes( shaderStage );
  275. stageData.varyings = this.getVaryings( shaderStage );
  276. stageData.vars = this.getVars( shaderStage );
  277. stageData.structs = this.getStructs( shaderStage );
  278. stageData.codes = this.getCodes( shaderStage );
  279. stageData.flow = flow;
  280. }
  281. if ( this.material !== null ) {
  282. this.vertexShader = this._getGLSLVertexCode( shadersData.vertex );
  283. this.fragmentShader = this._getGLSLFragmentCode( shadersData.fragment );
  284. } else {
  285. console.warn( 'GLSLNodeBuilder: compute shaders are not supported.' );
  286. //this.computeShader = this._getGLSLComputeCode( shadersData.compute );
  287. }
  288. }
  289. getUniformFromNode( node, type, shaderStage, name = null ) {
  290. const uniformNode = super.getUniformFromNode( node, type, shaderStage, name );
  291. const nodeData = this.getDataFromNode( node, shaderStage );
  292. let uniformGPU = nodeData.uniformGPU;
  293. if ( uniformGPU === undefined ) {
  294. if ( type === 'texture' ) {
  295. uniformGPU = new NodeSampledTexture( uniformNode.name, uniformNode.node );
  296. this.bindings[ shaderStage ].push( uniformGPU );
  297. } else if ( type === 'cubeTexture' ) {
  298. uniformGPU = new NodeSampledCubeTexture( uniformNode.name, uniformNode.node );
  299. this.bindings[ shaderStage ].push( uniformGPU );
  300. } else if ( type === 'buffer' ) {
  301. node.name = `NodeBuffer_${node.id}`;
  302. const buffer = new UniformBuffer( node.name, node.value );
  303. uniformNode.name = `buffer${node.id}`;
  304. this.bindings[ shaderStage ].push( buffer );
  305. uniformGPU = buffer;
  306. } else {
  307. let uniformsGroup = this.uniformsGroup[ shaderStage ];
  308. if ( uniformsGroup === undefined ) {
  309. uniformsGroup = new UniformsGroup( shaderStage + 'NodeUniforms' );
  310. //uniformsGroup.setVisibility( gpuShaderStageLib[ shaderStage ] );
  311. this.uniformsGroup[ shaderStage ] = uniformsGroup;
  312. this.bindings[ shaderStage ].push( uniformsGroup );
  313. }
  314. uniformGPU = this.getNodeUniform( uniformNode, type );
  315. uniformsGroup.addUniform( uniformGPU );
  316. }
  317. nodeData.uniformGPU = uniformGPU;
  318. }
  319. return uniformNode;
  320. }
  321. build() {
  322. // @TODO: Move this code to super.build()
  323. const { object, material } = this;
  324. if ( material !== null ) {
  325. NodeMaterial.fromMaterial( material ).build( this );
  326. } else {
  327. this.addFlow( 'compute', object );
  328. }
  329. return super.build();
  330. }
  331. }
  332. export default GLSLNodeBuilder;