TSLEncoder.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836
  1. import { REVISION } from 'three/webgpu';
  2. import * as TSL from 'three/tsl';
  3. import { VariableDeclaration, Accessor } from './AST.js';
  4. const opLib = {
  5. '=': 'assign',
  6. '+': 'add',
  7. '-': 'sub',
  8. '*': 'mul',
  9. '/': 'div',
  10. '%': 'remainder',
  11. '<': 'lessThan',
  12. '>': 'greaterThan',
  13. '<=': 'lessThanEqual',
  14. '>=': 'greaterThanEqual',
  15. '==': 'equal',
  16. '!=': 'notEqual',
  17. '&&': 'and',
  18. '||': 'or',
  19. '^^': 'xor',
  20. '&': 'bitAnd',
  21. '|': 'bitOr',
  22. '^': 'bitXor',
  23. '<<': 'shiftLeft',
  24. '>>': 'shiftRight',
  25. '+=': 'addAssign',
  26. '-=': 'subAssign',
  27. '*=': 'mulAssign',
  28. '/=': 'divAssign',
  29. '%=': 'remainderAssign',
  30. '^=': 'bitXorAssign',
  31. '&=': 'bitAndAssign',
  32. '|=': 'bitOrAssign',
  33. '<<=': 'shiftLeftAssign',
  34. '>>=': 'shiftRightAssign'
  35. };
  36. const unaryLib = {
  37. '+': '', // positive
  38. '-': 'negate',
  39. '~': 'bitNot',
  40. '!': 'not',
  41. '++': 'increment', // incrementBefore
  42. '--': 'decrement' // decrementBefore
  43. };
  44. const textureLookupFunctions = [ 'texture', 'texture2D', 'texture3D', 'textureCube', 'textureLod', 'texelFetch', 'textureGrad' ];
  45. const isPrimitive = ( value ) => /^(true|false|-?(\d|\.\d))/.test( value );
  46. class TSLEncoder {
  47. constructor() {
  48. this.tab = '';
  49. this.imports = new Set();
  50. this.global = new Set();
  51. this.overloadings = new Map();
  52. this.iife = false;
  53. this.uniqueNames = false;
  54. this.reference = false;
  55. this._currentVariable = null;
  56. this._currentProperties = {};
  57. this._lastStatement = null;
  58. }
  59. addImport( name ) {
  60. // import only if it's a node
  61. name = name.split( '.' )[ 0 ];
  62. if ( TSL[ name ] !== undefined && this.global.has( name ) === false && this._currentProperties[ name ] === undefined ) {
  63. this.imports.add( name );
  64. }
  65. }
  66. emitUniform( node ) {
  67. let code = `const ${ node.name } = `;
  68. this.global.add( node.name );
  69. if ( this.reference === true ) {
  70. this.addImport( 'reference' );
  71. //code += `reference( '${ node.name }', '${ node.type }', uniforms )`;
  72. // legacy
  73. code += `reference( 'value', '${ node.type }', uniforms[ '${ node.name }' ] )`;
  74. } else {
  75. if ( node.type === 'texture' ) {
  76. this.addImport( 'texture' );
  77. code += 'texture( /* <THREE.Texture> */ )';
  78. } else if ( node.type === 'cubeTexture' ) {
  79. this.addImport( 'cubeTexture' );
  80. code += 'cubeTexture( /* <THREE.CubeTexture> */ )';
  81. } else if ( node.type === 'texture3D' ) {
  82. this.addImport( 'texture3D' );
  83. code += 'texture3D( /* <THREE.Data3DTexture> */ )';
  84. } else {
  85. // default uniform
  86. this.addImport( 'uniform' );
  87. code += `uniform( '${ node.type }' )`;
  88. }
  89. }
  90. return code;
  91. }
  92. emitExpression( node ) {
  93. let code;
  94. if ( node.isAccessor ) {
  95. this.addImport( node.property );
  96. code = node.property;
  97. } else if ( node.isNumber ) {
  98. if ( node.type === 'int' || node.type === 'uint' ) {
  99. code = node.type + '( ' + node.value + ' )';
  100. this.addImport( node.type );
  101. } else {
  102. code = node.value;
  103. }
  104. } else if ( node.isString ) {
  105. code = '\'' + node.value + '\'';
  106. } else if ( node.isOperator ) {
  107. const opFn = opLib[ node.type ] || node.type;
  108. const left = this.emitExpression( node.left );
  109. const right = this.emitExpression( node.right );
  110. if ( isPrimitive( left ) && isPrimitive( right ) ) {
  111. return left + ' ' + node.type + ' ' + right;
  112. }
  113. if ( isPrimitive( left ) ) {
  114. code = opFn + '( ' + left + ', ' + right + ' )';
  115. this.addImport( opFn );
  116. } else if ( opFn === '.' ) {
  117. code = left + opFn + right;
  118. } else {
  119. code = left + '.' + opFn + '( ' + right + ' )';
  120. }
  121. } else if ( node.isFunctionCall ) {
  122. const params = [];
  123. for ( const parameter of node.params ) {
  124. params.push( this.emitExpression( parameter ) );
  125. }
  126. // handle texture lookup function calls in separate branch
  127. if ( textureLookupFunctions.includes( node.name ) ) {
  128. code = `${ params[ 0 ] }.sample( ${ params[ 1 ] } )`;
  129. if ( node.name === 'texture' || node.name === 'texture2D' || node.name === 'texture3D' || node.name === 'textureCube' ) {
  130. if ( params.length === 3 ) {
  131. code += `.bias( ${ params[ 2 ] } )`;
  132. }
  133. } else if ( node.name === 'textureLod' ) {
  134. code += `.level( ${ params[ 2 ] } )`;
  135. } else if ( node.name === 'textureGrad' ) {
  136. code += `.grad( ${ params[ 2 ] }, ${ params[ 3 ] } )`;
  137. } else if ( node.name === 'texelFetch' ) {
  138. code += '.setSampler( false )';
  139. }
  140. } else {
  141. this.addImport( node.name );
  142. const paramsStr = params.length > 0 ? ' ' + params.join( ', ' ) + ' ' : '';
  143. code = `${ node.name }(${ paramsStr })`;
  144. }
  145. } else if ( node.isReturn ) {
  146. code = 'return';
  147. if ( node.value ) {
  148. code += ' ' + this.emitExpression( node.value );
  149. }
  150. } else if ( node.isDiscard ) {
  151. this.addImport( 'Discard' );
  152. code = 'Discard()';
  153. } else if ( node.isAccessorElements ) {
  154. code = this.emitExpression( node.object );
  155. for ( const element of node.elements ) {
  156. if ( element.isStaticElement ) {
  157. code += '.' + this.emitExpression( element.value );
  158. } else if ( element.isDynamicElement ) {
  159. const value = this.emitExpression( element.value );
  160. if ( isPrimitive( value ) ) {
  161. code += `[ ${ value } ]`;
  162. } else {
  163. code += `.element( ${ value } )`;
  164. }
  165. }
  166. }
  167. } else if ( node.isDynamicElement ) {
  168. code = this.emitExpression( node.value );
  169. } else if ( node.isStaticElement ) {
  170. code = this.emitExpression( node.value );
  171. } else if ( node.isFor ) {
  172. code = this.emitFor( node );
  173. } else if ( node.isVariableDeclaration ) {
  174. code = this.emitVariables( node );
  175. } else if ( node.isUniform ) {
  176. code = this.emitUniform( node );
  177. } else if ( node.isVarying ) {
  178. code = this.emitVarying( node );
  179. } else if ( node.isTernary ) {
  180. code = this.emitTernary( node );
  181. } else if ( node.isConditional ) {
  182. code = this.emitConditional( node );
  183. } else if ( node.isUnary && node.expression.isNumber ) {
  184. code = node.expression.type + '( ' + node.type + ' ' + node.expression.value + ' )';
  185. this.addImport( node.expression.type );
  186. } else if ( node.isUnary ) {
  187. let type = unaryLib[ node.type ];
  188. if ( node.type === '++' || node.type === '--' ) {
  189. if ( this._currentVariable === null ) {
  190. // optimize increment/decrement operator
  191. // to avoid creating a new variable
  192. node.after = false;
  193. }
  194. if ( node.after === false ) {
  195. type += 'Before';
  196. }
  197. }
  198. const exp = this.emitExpression( node.expression );
  199. if ( isPrimitive( exp ) ) {
  200. this.addImport( type );
  201. code = type + '( ' + exp + ' )';
  202. } else {
  203. code = exp + '.' + type + '()';
  204. }
  205. } else {
  206. console.warn( 'Unknown node type', node );
  207. }
  208. if ( ! code ) code = '/* unknown statement */';
  209. return code;
  210. }
  211. emitBody( body ) {
  212. this.setLastStatement( null );
  213. let code = '';
  214. this.tab += '\t';
  215. for ( const statement of body ) {
  216. code += this.emitExtraLine( statement );
  217. code += this.tab + this.emitExpression( statement );
  218. if ( code.slice( - 1 ) !== '}' ) code += ';';
  219. code += '\n';
  220. this.setLastStatement( statement );
  221. }
  222. code = code.slice( 0, - 1 ); // remove the last extra line
  223. this.tab = this.tab.slice( 0, - 1 );
  224. return code;
  225. }
  226. emitTernary( node ) {
  227. const condStr = this.emitExpression( node.cond );
  228. const leftStr = this.emitExpression( node.left );
  229. const rightStr = this.emitExpression( node.right );
  230. this.addImport( 'select' );
  231. return `select( ${ condStr }, ${ leftStr }, ${ rightStr } )`;
  232. }
  233. emitConditional( node ) {
  234. const condStr = this.emitExpression( node.cond );
  235. const bodyStr = this.emitBody( node.body );
  236. let ifStr = `If( ${ condStr }, () => {
  237. ${ bodyStr }
  238. ${ this.tab }} )`;
  239. let current = node;
  240. while ( current.elseConditional ) {
  241. const elseBodyStr = this.emitBody( current.elseConditional.body );
  242. if ( current.elseConditional.cond ) {
  243. const elseCondStr = this.emitExpression( current.elseConditional.cond );
  244. ifStr += `.ElseIf( ${ elseCondStr }, () => {
  245. ${ elseBodyStr }
  246. ${ this.tab }} )`;
  247. } else {
  248. ifStr += `.Else( () => {
  249. ${ elseBodyStr }
  250. ${ this.tab }} )`;
  251. }
  252. current = current.elseConditional;
  253. }
  254. this.imports.add( 'If' );
  255. return ifStr;
  256. }
  257. emitLoop( node ) {
  258. const start = this.emitExpression( node.initialization.value );
  259. const end = this.emitExpression( node.condition.right );
  260. const name = node.initialization.name;
  261. const type = node.initialization.type;
  262. const condition = node.condition.type;
  263. const nameParam = name !== 'i' ? `, name: '${ name }'` : '';
  264. const typeParam = type !== 'int' ? `, type: '${ type }'` : '';
  265. const conditionParam = condition !== '<' ? `, condition: '${ condition }'` : '';
  266. let updateParam = '';
  267. if ( node.afterthought.isUnary ) {
  268. if ( node.afterthought.type !== '++' ) {
  269. updateParam = `, update: '${ node.afterthought.type }'`;
  270. }
  271. } else if ( node.afterthought.isOperator ) {
  272. if ( node.afterthought.right.isAccessor || node.afterthought.right.isNumber ) {
  273. updateParam = `, update: ${ this.emitExpression( node.afterthought.right ) }`;
  274. } else {
  275. updateParam = `, update: ( { i } ) => ${ this.emitExpression( node.afterthought ) }`;
  276. }
  277. }
  278. let loopStr = `Loop( { start: ${ start }, end: ${ end + nameParam + typeParam + conditionParam + updateParam } }, ( { ${ name } } ) => {\n\n`;
  279. loopStr += this.emitBody( node.body ) + '\n\n';
  280. loopStr += this.tab + '} )';
  281. this.imports.add( 'Loop' );
  282. return loopStr;
  283. }
  284. emitFor( node ) {
  285. const { initialization, condition, afterthought } = node;
  286. if ( ( initialization && initialization.isVariableDeclaration && initialization.next === null ) &&
  287. ( condition && condition.left.isAccessor && condition.left.property === initialization.name ) &&
  288. ( afterthought && (
  289. ( afterthought.isUnary && ( initialization.name === afterthought.expression.property ) ) ||
  290. ( afterthought.isOperator && ( initialization.name === afterthought.left.property ) )
  291. ) )
  292. ) {
  293. return this.emitLoop( node );
  294. }
  295. return this.emitForWhile( node );
  296. }
  297. emitForWhile( node ) {
  298. const initialization = this.emitExpression( node.initialization );
  299. const condition = this.emitExpression( node.condition );
  300. const afterthought = this.emitExpression( node.afterthought );
  301. this.tab += '\t';
  302. let forStr = '{\n\n' + this.tab + initialization + ';\n\n';
  303. forStr += `${ this.tab }Loop( ${ condition }, () => {\n\n`;
  304. forStr += this.emitBody( node.body ) + '\n\n';
  305. forStr += this.tab + '\t' + afterthought + ';\n\n';
  306. forStr += this.tab + '} )\n\n';
  307. this.tab = this.tab.slice( 0, - 1 );
  308. forStr += this.tab + '}';
  309. this.imports.add( 'Loop' );
  310. return forStr;
  311. }
  312. emitVariables( node, isRoot = true ) {
  313. const { name, type, value, next } = node;
  314. this._currentVariable = node;
  315. const valueStr = value ? this.emitExpression( value ) : '';
  316. let varStr = isRoot ? 'const ' : '';
  317. varStr += name;
  318. if ( value ) {
  319. if ( value.isFunctionCall && value.name === type ) {
  320. varStr += ' = ' + valueStr;
  321. } else {
  322. varStr += ` = ${ type }( ${ valueStr } )`;
  323. }
  324. } else {
  325. varStr += ` = ${ type }()`;
  326. }
  327. if ( node.immutable === false ) {
  328. varStr += '.toVar()';
  329. }
  330. if ( next ) {
  331. varStr += ', ' + this.emitVariables( next, false );
  332. }
  333. this.addImport( type );
  334. this._currentVariable = null;
  335. return varStr;
  336. }
  337. emitVarying( node ) {
  338. const { name, type } = node;
  339. this.addImport( 'varying' );
  340. this.addImport( type );
  341. return `const ${ name } = varying( ${ type }(), '${ name }' )`;
  342. }
  343. emitOverloadingFunction( nodes ) {
  344. const { name } = nodes[ 0 ];
  345. this.addImport( 'overloadingFn' );
  346. const prefix = this.iife === false ? 'export ' : '';
  347. return `${ prefix }const ${ name } = /*#__PURE__*/ overloadingFn( [ ${ nodes.map( node => node.name + '_' + nodes.indexOf( node ) ).join( ', ' ) } ] );\n`;
  348. }
  349. emitFunction( node ) {
  350. const { name, type } = node;
  351. this._currentProperties = { name: node };
  352. const params = [];
  353. const inputs = [];
  354. const mutableParams = [];
  355. let hasPointer = false;
  356. for ( const param of node.params ) {
  357. let str = `{ name: '${ param.name }', type: '${ param.type }'`;
  358. let name = param.name;
  359. if ( param.immutable === false && ( param.qualifier !== 'inout' && param.qualifier !== 'out' ) ) {
  360. name = name + '_immutable';
  361. mutableParams.push( param );
  362. }
  363. if ( param.qualifier ) {
  364. if ( param.qualifier === 'inout' || param.qualifier === 'out' ) {
  365. hasPointer = true;
  366. }
  367. str += ', qualifier: \'' + param.qualifier + '\'';
  368. }
  369. inputs.push( str + ' }' );
  370. params.push( name );
  371. this._currentProperties[ name ] = param;
  372. }
  373. for ( const param of mutableParams ) {
  374. node.body.unshift( new VariableDeclaration( param.type, param.name, new Accessor( param.name + '_immutable' ) ) );
  375. }
  376. const paramsStr = params.length > 0 ? ' [ ' + params.join( ', ' ) + ' ] ' : '';
  377. const bodyStr = this.emitBody( node.body );
  378. let fnName = name;
  379. let overloadingNodes = null;
  380. if ( this.overloadings.has( name ) ) {
  381. const overloadings = this.overloadings.get( name );
  382. if ( overloadings.length > 1 ) {
  383. const index = overloadings.indexOf( node );
  384. fnName += '_' + index;
  385. if ( index === overloadings.length - 1 ) {
  386. overloadingNodes = overloadings;
  387. }
  388. }
  389. }
  390. const prefix = this.iife === false ? 'export ' : '';
  391. let funcStr = `${ prefix }const ${ fnName } = /*#__PURE__*/ Fn( (${ paramsStr }) => {
  392. ${ bodyStr }
  393. ${ this.tab }} )`;
  394. const layoutInput = inputs.length > 0 ? '\n\t\t' + this.tab + inputs.join( ',\n\t\t' + this.tab ) + '\n\t' + this.tab : '';
  395. if ( node.layout !== false && hasPointer === false ) {
  396. const uniqueName = this.uniqueNames ? fnName + '_' + Math.random().toString( 36 ).slice( 2 ) : fnName;
  397. funcStr += `.setLayout( {
  398. ${ this.tab }\tname: '${ uniqueName }',
  399. ${ this.tab }\ttype: '${ type }',
  400. ${ this.tab }\tinputs: [${ layoutInput }]
  401. ${ this.tab }} )`;
  402. }
  403. funcStr += ';\n';
  404. this.imports.add( 'Fn' );
  405. this.global.add( node.name );
  406. if ( overloadingNodes !== null ) {
  407. funcStr += '\n' + this.emitOverloadingFunction( overloadingNodes );
  408. }
  409. return funcStr;
  410. }
  411. setLastStatement( statement ) {
  412. this._lastStatement = statement;
  413. }
  414. emitExtraLine( statement ) {
  415. const last = this._lastStatement;
  416. if ( last === null ) return '';
  417. if ( statement.isReturn ) return '\n';
  418. const isExpression = ( st ) => st.isFunctionDeclaration !== true && st.isFor !== true && st.isConditional !== true;
  419. const lastExp = isExpression( last );
  420. const currExp = isExpression( statement );
  421. if ( lastExp !== currExp || ( ! lastExp && ! currExp ) ) return '\n';
  422. return '';
  423. }
  424. emit( ast ) {
  425. let code = '\n';
  426. if ( this.iife ) this.tab += '\t';
  427. const overloadings = this.overloadings;
  428. for ( const statement of ast.body ) {
  429. if ( statement.isFunctionDeclaration ) {
  430. if ( overloadings.has( statement.name ) === false ) {
  431. overloadings.set( statement.name, [] );
  432. }
  433. overloadings.get( statement.name ).push( statement );
  434. }
  435. }
  436. for ( const statement of ast.body ) {
  437. code += this.emitExtraLine( statement );
  438. if ( statement.isFunctionDeclaration ) {
  439. code += this.tab + this.emitFunction( statement );
  440. } else {
  441. code += this.tab + this.emitExpression( statement ) + ';\n';
  442. }
  443. this.setLastStatement( statement );
  444. }
  445. const imports = [ ...this.imports ];
  446. const exports = [ ...this.global ];
  447. let header = '// Three.js Transpiler r' + REVISION + '\n\n';
  448. let footer = '';
  449. if ( this.iife ) {
  450. header += '( function ( TSL, uniforms ) {\n\n';
  451. header += imports.length > 0 ? '\tconst { ' + imports.join( ', ' ) + ' } = TSL;\n' : '';
  452. footer += exports.length > 0 ? '\treturn { ' + exports.join( ', ' ) + ' };\n' : '';
  453. footer += '\n} );';
  454. } else {
  455. header += imports.length > 0 ? 'import { ' + imports.join( ', ' ) + ' } from \'three/tsl\';\n' : '';
  456. }
  457. return header + code + footer;
  458. }
  459. }
  460. export default TSLEncoder;