1
0

TextureNode.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778
  1. import UniformNode, { uniform } from '../core/UniformNode.js';
  2. import { uv } from './UV.js';
  3. import { textureSize } from './TextureSizeNode.js';
  4. import { colorSpaceToWorking } from '../display/ColorSpaceNode.js';
  5. import { expression } from '../code/ExpressionNode.js';
  6. import { maxMipLevel } from '../utils/MaxMipLevelNode.js';
  7. import { nodeProxy, vec3, nodeObject, int } from '../tsl/TSLBase.js';
  8. import { NodeUpdateType } from '../core/constants.js';
  9. import { IntType, NearestFilter, UnsignedIntType } from '../../constants.js';
  10. /**
  11. * This type of uniform node represents a 2D texture.
  12. *
  13. * @augments UniformNode
  14. */
  15. class TextureNode extends UniformNode {
  16. static get type() {
  17. return 'TextureNode';
  18. }
  19. /**
  20. * Constructs a new texture node.
  21. *
  22. * @param {Texture} value - The texture.
  23. * @param {?Node<vec2|vec3>} [uvNode=null] - The uv node.
  24. * @param {?Node<int>} [levelNode=null] - The level node.
  25. * @param {?Node<float>} [biasNode=null] - The bias node.
  26. */
  27. constructor( value, uvNode = null, levelNode = null, biasNode = null ) {
  28. super( value );
  29. /**
  30. * This flag can be used for type testing.
  31. *
  32. * @type {boolean}
  33. * @readonly
  34. * @default true
  35. */
  36. this.isTextureNode = true;
  37. /**
  38. * Represents the texture coordinates.
  39. *
  40. * @type {?Node<vec2|vec3>}
  41. * @default null
  42. */
  43. this.uvNode = uvNode;
  44. /**
  45. * Represents the mip level that should be selected.
  46. *
  47. * @type {?Node<int>}
  48. * @default null
  49. */
  50. this.levelNode = levelNode;
  51. /**
  52. * Represents the bias to be applied during level-of-detail computation.
  53. *
  54. * @type {?Node<float>}
  55. * @default null
  56. */
  57. this.biasNode = biasNode;
  58. /**
  59. * Represents a reference value a texture sample is compared to.
  60. *
  61. * @type {?Node<float>}
  62. * @default null
  63. */
  64. this.compareNode = null;
  65. /**
  66. * When using texture arrays, the depth node defines the layer to select.
  67. *
  68. * @type {?Node<int>}
  69. * @default null
  70. */
  71. this.depthNode = null;
  72. /**
  73. * When defined, a texture is sampled using explicit gradients.
  74. *
  75. * @type {?Array<Node<vec2>>}
  76. * @default null
  77. */
  78. this.gradNode = null;
  79. /**
  80. * Whether texture values should be sampled or fetched.
  81. *
  82. * @type {boolean}
  83. * @default true
  84. */
  85. this.sampler = true;
  86. /**
  87. * Whether the uv transformation matrix should be
  88. * automatically updated or not. Use `setUpdateMatrix()`
  89. * if you want to change the value of the property.
  90. *
  91. * @type {boolean}
  92. * @default false
  93. */
  94. this.updateMatrix = false;
  95. /**
  96. * By default the `update()` method is not executed. `setUpdateMatrix()`
  97. * sets the value to `frame` when the uv transformation matrix should
  98. * automatically be updated.
  99. *
  100. * @type {string}
  101. * @default 'none'
  102. */
  103. this.updateType = NodeUpdateType.NONE;
  104. /**
  105. * The reference node.
  106. *
  107. * @type {?Node}
  108. * @default null
  109. */
  110. this.referenceNode = null;
  111. /**
  112. * The texture value is stored in a private property.
  113. *
  114. * @private
  115. * @type {Texture}
  116. */
  117. this._value = value;
  118. /**
  119. * The uniform node that represents the uv transformation matrix.
  120. *
  121. * @private
  122. * @type {?UniformNode<mat3>}
  123. */
  124. this._matrixUniform = null;
  125. this.setUpdateMatrix( uvNode === null );
  126. }
  127. set value( value ) {
  128. if ( this.referenceNode ) {
  129. this.referenceNode.value = value;
  130. } else {
  131. this._value = value;
  132. }
  133. }
  134. /**
  135. * The texture value.
  136. *
  137. * @type {Texture}
  138. */
  139. get value() {
  140. return this.referenceNode ? this.referenceNode.value : this._value;
  141. }
  142. /**
  143. * Overwritten since the uniform hash is defined by the texture's UUID.
  144. *
  145. * @param {NodeBuilder} builder - The current node builder.
  146. * @return {string} The uniform hash.
  147. */
  148. getUniformHash( /*builder*/ ) {
  149. return this.value.uuid;
  150. }
  151. /**
  152. * Overwritten since the node type is inferred from the texture type.
  153. *
  154. * @param {NodeBuilder} builder - The current node builder.
  155. * @return {string} The node type.
  156. */
  157. getNodeType( /*builder*/ ) {
  158. if ( this.value.isDepthTexture === true ) return 'float';
  159. if ( this.value.type === UnsignedIntType ) {
  160. return 'uvec4';
  161. } else if ( this.value.type === IntType ) {
  162. return 'ivec4';
  163. }
  164. return 'vec4';
  165. }
  166. /**
  167. * Overwrites the default implementation to return a fixed value `'texture'`.
  168. *
  169. * @param {NodeBuilder} builder - The current node builder.
  170. * @return {string} The input type.
  171. */
  172. getInputType( /*builder*/ ) {
  173. return 'texture';
  174. }
  175. /**
  176. * Returns a default uvs based on the current texture's channel.
  177. *
  178. * @return {AttributeNode<vec2>} The default uvs.
  179. */
  180. getDefaultUV() {
  181. return uv( this.value.channel );
  182. }
  183. /**
  184. * Overwritten to always return the texture reference of the node.
  185. *
  186. * @param {any} state - This method can be invocated in different contexts so `state` can refer to any object type.
  187. * @return {Texture} The texture reference.
  188. */
  189. updateReference( /*state*/ ) {
  190. return this.value;
  191. }
  192. /**
  193. * Transforms the given uv node with the texture transformation matrix.
  194. *
  195. * @param {Node} uvNode - The uv node to transform.
  196. * @return {Node} The transformed uv node.
  197. */
  198. getTransformedUV( uvNode ) {
  199. if ( this._matrixUniform === null ) this._matrixUniform = uniform( this.value.matrix );
  200. return this._matrixUniform.mul( vec3( uvNode, 1 ) ).xy;
  201. }
  202. /**
  203. * Defines whether the uv transformation matrix should automatically be updated or not.
  204. *
  205. * @param {boolean} value - The update toggle.
  206. * @return {TextureNode} A reference to this node.
  207. */
  208. setUpdateMatrix( value ) {
  209. this.updateMatrix = value;
  210. this.updateType = value ? NodeUpdateType.RENDER : NodeUpdateType.NONE;
  211. return this;
  212. }
  213. /**
  214. * Setups the uv node. Depending on the backend as well as texture's image and type, it might be necessary
  215. * to modify the uv node for correct sampling.
  216. *
  217. * @param {NodeBuilder} builder - The current node builder.
  218. * @param {Node} uvNode - The uv node to setup.
  219. * @return {Node} The updated uv node.
  220. */
  221. setupUV( builder, uvNode ) {
  222. const texture = this.value;
  223. if ( builder.isFlipY() && ( ( texture.image instanceof ImageBitmap && texture.flipY === true ) || texture.isRenderTargetTexture === true || texture.isFramebufferTexture === true || texture.isDepthTexture === true ) ) {
  224. if ( this.sampler ) {
  225. uvNode = uvNode.flipY();
  226. } else {
  227. uvNode = uvNode.setY( int( textureSize( this, this.levelNode ).y ).sub( uvNode.y ).sub( 1 ) );
  228. }
  229. }
  230. return uvNode;
  231. }
  232. /**
  233. * Setups texture node by preparing the internal nodes for code generation.
  234. *
  235. * @param {NodeBuilder} builder - The current node builder.
  236. */
  237. setup( builder ) {
  238. const properties = builder.getNodeProperties( this );
  239. properties.referenceNode = this.referenceNode;
  240. //
  241. const texture = this.value;
  242. if ( ! texture || texture.isTexture !== true ) {
  243. throw new Error( 'THREE.TSL: `texture( value )` function expects a valid instance of THREE.Texture().' );
  244. }
  245. //
  246. let uvNode = this.uvNode;
  247. if ( ( uvNode === null || builder.context.forceUVContext === true ) && builder.context.getUV ) {
  248. uvNode = builder.context.getUV( this );
  249. }
  250. if ( ! uvNode ) uvNode = this.getDefaultUV();
  251. if ( this.updateMatrix === true ) {
  252. uvNode = this.getTransformedUV( uvNode );
  253. }
  254. uvNode = this.setupUV( builder, uvNode );
  255. //
  256. let levelNode = this.levelNode;
  257. if ( levelNode === null && builder.context.getTextureLevel ) {
  258. levelNode = builder.context.getTextureLevel( this );
  259. }
  260. //
  261. properties.uvNode = uvNode;
  262. properties.levelNode = levelNode;
  263. properties.biasNode = this.biasNode;
  264. properties.compareNode = this.compareNode;
  265. properties.gradNode = this.gradNode;
  266. properties.depthNode = this.depthNode;
  267. }
  268. /**
  269. * Generates the uv code snippet.
  270. *
  271. * @param {NodeBuilder} builder - The current node builder.
  272. * @param {Node} uvNode - The uv node to generate code for.
  273. * @return {string} The generated code snippet.
  274. */
  275. generateUV( builder, uvNode ) {
  276. return uvNode.build( builder, this.sampler === true ? 'vec2' : 'ivec2' );
  277. }
  278. /**
  279. * Generates the snippet for the texture sampling.
  280. *
  281. * @param {NodeBuilder} builder - The current node builder.
  282. * @param {string} textureProperty - The texture property.
  283. * @param {string} uvSnippet - The uv snippet.
  284. * @param {?string} levelSnippet - The level snippet.
  285. * @param {?string} biasSnippet - The bias snippet.
  286. * @param {?string} depthSnippet - The depth snippet.
  287. * @param {?string} compareSnippet - The compare snippet.
  288. * @param {?Array<string>} gradSnippet - The grad snippet.
  289. * @return {string} The generated code snippet.
  290. */
  291. generateSnippet( builder, textureProperty, uvSnippet, levelSnippet, biasSnippet, depthSnippet, compareSnippet, gradSnippet ) {
  292. const texture = this.value;
  293. let snippet;
  294. if ( levelSnippet ) {
  295. snippet = builder.generateTextureLevel( texture, textureProperty, uvSnippet, levelSnippet, depthSnippet );
  296. } else if ( biasSnippet ) {
  297. snippet = builder.generateTextureBias( texture, textureProperty, uvSnippet, biasSnippet, depthSnippet );
  298. } else if ( gradSnippet ) {
  299. snippet = builder.generateTextureGrad( texture, textureProperty, uvSnippet, gradSnippet, depthSnippet );
  300. } else if ( compareSnippet ) {
  301. snippet = builder.generateTextureCompare( texture, textureProperty, uvSnippet, compareSnippet, depthSnippet );
  302. } else if ( this.sampler === false ) {
  303. snippet = builder.generateTextureLoad( texture, textureProperty, uvSnippet, depthSnippet );
  304. } else {
  305. snippet = builder.generateTexture( texture, textureProperty, uvSnippet, depthSnippet );
  306. }
  307. return snippet;
  308. }
  309. /**
  310. * Generates the code snippet of the texture node.
  311. *
  312. * @param {NodeBuilder} builder - The current node builder.
  313. * @param {string} output - The current output.
  314. * @return {string} The generated code snippet.
  315. */
  316. generate( builder, output ) {
  317. const texture = this.value;
  318. const properties = builder.getNodeProperties( this );
  319. const textureProperty = super.generate( builder, 'property' );
  320. if ( /^sampler/.test( output ) ) {
  321. return textureProperty + '_sampler';
  322. } else if ( builder.isReference( output ) ) {
  323. return textureProperty;
  324. } else {
  325. const nodeData = builder.getDataFromNode( this );
  326. let propertyName = nodeData.propertyName;
  327. if ( propertyName === undefined ) {
  328. const { uvNode, levelNode, biasNode, compareNode, depthNode, gradNode } = properties;
  329. const uvSnippet = this.generateUV( builder, uvNode );
  330. const levelSnippet = levelNode ? levelNode.build( builder, 'float' ) : null;
  331. const biasSnippet = biasNode ? biasNode.build( builder, 'float' ) : null;
  332. const depthSnippet = depthNode ? depthNode.build( builder, 'int' ) : null;
  333. const compareSnippet = compareNode ? compareNode.build( builder, 'float' ) : null;
  334. const gradSnippet = gradNode ? [ gradNode[ 0 ].build( builder, 'vec2' ), gradNode[ 1 ].build( builder, 'vec2' ) ] : null;
  335. const nodeVar = builder.getVarFromNode( this );
  336. propertyName = builder.getPropertyName( nodeVar );
  337. const snippet = this.generateSnippet( builder, textureProperty, uvSnippet, levelSnippet, biasSnippet, depthSnippet, compareSnippet, gradSnippet );
  338. builder.addLineFlowCode( `${propertyName} = ${snippet}`, this );
  339. nodeData.snippet = snippet;
  340. nodeData.propertyName = propertyName;
  341. }
  342. let snippet = propertyName;
  343. const nodeType = this.getNodeType( builder );
  344. if ( builder.needsToWorkingColorSpace( texture ) ) {
  345. snippet = colorSpaceToWorking( expression( snippet, nodeType ), texture.colorSpace ).setup( builder ).build( builder, nodeType );
  346. }
  347. return builder.format( snippet, nodeType, output );
  348. }
  349. }
  350. /**
  351. * Sets the sampler value.
  352. *
  353. * @param {boolean} value - The sampler value to set.
  354. * @return {TextureNode} A reference to this texture node.
  355. */
  356. setSampler( value ) {
  357. this.sampler = value;
  358. return this;
  359. }
  360. /**
  361. * Returns the sampler value.
  362. *
  363. * @return {boolean} The sampler value.
  364. */
  365. getSampler() {
  366. return this.sampler;
  367. }
  368. // @TODO: Move to TSL
  369. /**
  370. * @function
  371. * @deprecated since r172. Use {@link TextureNode#sample} instead.
  372. *
  373. * @param {Node} uvNode - The uv node.
  374. * @return {TextureNode} A texture node representing the texture sample.
  375. */
  376. uv( uvNode ) { // @deprecated, r172
  377. console.warn( 'THREE.TextureNode: .uv() has been renamed. Use .sample() instead.' );
  378. return this.sample( uvNode );
  379. }
  380. /**
  381. * Samples the texture with the given uv node.
  382. *
  383. * @param {Node} uvNode - The uv node.
  384. * @return {TextureNode} A texture node representing the texture sample.
  385. */
  386. sample( uvNode ) {
  387. const textureNode = this.clone();
  388. textureNode.uvNode = nodeObject( uvNode );
  389. textureNode.referenceNode = this.getSelf();
  390. return nodeObject( textureNode );
  391. }
  392. /**
  393. * Samples a blurred version of the texture by defining an internal bias.
  394. *
  395. * @param {Node<float>} amountNode - How blurred the texture should be.
  396. * @return {TextureNode} A texture node representing the texture sample.
  397. */
  398. blur( amountNode ) {
  399. const textureNode = this.clone();
  400. textureNode.biasNode = nodeObject( amountNode ).mul( maxMipLevel( textureNode ) );
  401. textureNode.referenceNode = this.getSelf();
  402. const map = textureNode.value;
  403. if ( textureNode.generateMipmaps === false && ( map && map.generateMipmaps === false || map.minFilter === NearestFilter || map.magFilter === NearestFilter ) ) {
  404. console.warn( 'THREE.TSL: texture().blur() requires mipmaps and sampling. Use .generateMipmaps=true and .minFilter/.magFilter=THREE.LinearFilter in the Texture.' );
  405. textureNode.biasNode = null;
  406. }
  407. return nodeObject( textureNode );
  408. }
  409. /**
  410. * Samples a specific mip of the texture.
  411. *
  412. * @param {Node<int>} levelNode - The mip level to sample.
  413. * @return {TextureNode} A texture node representing the texture sample.
  414. */
  415. level( levelNode ) {
  416. const textureNode = this.clone();
  417. textureNode.levelNode = nodeObject( levelNode );
  418. textureNode.referenceNode = this.getSelf();
  419. return nodeObject( textureNode );
  420. }
  421. /**
  422. * Returns the texture size of the requested level.
  423. *
  424. * @param {Node<int>} levelNode - The level to compute the size for.
  425. * @return {TextureSizeNode} The texture size.
  426. */
  427. size( levelNode ) {
  428. return textureSize( this, levelNode );
  429. }
  430. /**
  431. * Samples the texture with the given bias.
  432. *
  433. * @param {Node<float>} biasNode - The bias node.
  434. * @return {TextureNode} A texture node representing the texture sample.
  435. */
  436. bias( biasNode ) {
  437. const textureNode = this.clone();
  438. textureNode.biasNode = nodeObject( biasNode );
  439. textureNode.referenceNode = this.getSelf();
  440. return nodeObject( textureNode );
  441. }
  442. /**
  443. * Samples the texture by executing a compare operation.
  444. *
  445. * @param {Node<float>} compareNode - The node that defines the compare value.
  446. * @return {TextureNode} A texture node representing the texture sample.
  447. */
  448. compare( compareNode ) {
  449. const textureNode = this.clone();
  450. textureNode.compareNode = nodeObject( compareNode );
  451. textureNode.referenceNode = this.getSelf();
  452. return nodeObject( textureNode );
  453. }
  454. /**
  455. * Samples the texture using an explicit gradient.
  456. *
  457. * @param {Node<vec2>} gradNodeX - The gradX node.
  458. * @param {Node<vec2>} gradNodeY - The gradY node.
  459. * @return {TextureNode} A texture node representing the texture sample.
  460. */
  461. grad( gradNodeX, gradNodeY ) {
  462. const textureNode = this.clone();
  463. textureNode.gradNode = [ nodeObject( gradNodeX ), nodeObject( gradNodeY ) ];
  464. textureNode.referenceNode = this.getSelf();
  465. return nodeObject( textureNode );
  466. }
  467. /**
  468. * Samples the texture by defining a depth node.
  469. *
  470. * @param {Node<int>} depthNode - The depth node.
  471. * @return {TextureNode} A texture node representing the texture sample.
  472. */
  473. depth( depthNode ) {
  474. const textureNode = this.clone();
  475. textureNode.depthNode = nodeObject( depthNode );
  476. textureNode.referenceNode = this.getSelf();
  477. return nodeObject( textureNode );
  478. }
  479. // --
  480. serialize( data ) {
  481. super.serialize( data );
  482. data.value = this.value.toJSON( data.meta ).uuid;
  483. data.sampler = this.sampler;
  484. data.updateMatrix = this.updateMatrix;
  485. data.updateType = this.updateType;
  486. }
  487. deserialize( data ) {
  488. super.deserialize( data );
  489. this.value = data.meta.textures[ data.value ];
  490. this.sampler = data.sampler;
  491. this.updateMatrix = data.updateMatrix;
  492. this.updateType = data.updateType;
  493. }
  494. /**
  495. * The update is used to implement the update of the uv transformation matrix.
  496. */
  497. update() {
  498. const texture = this.value;
  499. const matrixUniform = this._matrixUniform;
  500. if ( matrixUniform !== null ) matrixUniform.value = texture.matrix;
  501. if ( texture.matrixAutoUpdate === true ) {
  502. texture.updateMatrix();
  503. }
  504. }
  505. /**
  506. * Clones the texture node.
  507. *
  508. * @return {TextureNode} The cloned texture node.
  509. */
  510. clone() {
  511. const newNode = new this.constructor( this.value, this.uvNode, this.levelNode, this.biasNode );
  512. newNode.sampler = this.sampler;
  513. return newNode;
  514. }
  515. }
  516. export default TextureNode;
  517. /**
  518. * TSL function for creating a texture node.
  519. *
  520. * @tsl
  521. * @function
  522. * @param {Texture} value - The texture.
  523. * @param {?Node<vec2|vec3>} [uvNode=null] - The uv node.
  524. * @param {?Node<int>} [levelNode=null] - The level node.
  525. * @param {?Node<float>} [biasNode=null] - The bias node.
  526. * @returns {TextureNode}
  527. */
  528. export const texture = /*@__PURE__*/ nodeProxy( TextureNode ).setParameterLength( 1, 4 );
  529. /**
  530. * TSL function for creating a texture node that fetches/loads texels without interpolation.
  531. *
  532. * @tsl
  533. * @function
  534. * @param {Texture} value - The texture.
  535. * @param {?Node<vec2|vec3>} [uvNode=null] - The uv node.
  536. * @param {?Node<int>} [levelNode=null] - The level node.
  537. * @param {?Node<float>} [biasNode=null] - The bias node.
  538. * @returns {TextureNode}
  539. */
  540. export const textureLoad = ( ...params ) => texture( ...params ).setSampler( false );
  541. //export const textureLevel = ( value, uv, level ) => texture( value, uv ).level( level );
  542. /**
  543. * Converts a texture or texture node to a sampler.
  544. *
  545. * @tsl
  546. * @function
  547. * @param {TextureNode|Texture} value - The texture or texture node to convert.
  548. * @returns {Node}
  549. */
  550. export const sampler = ( value ) => ( value.isNode === true ? value : texture( value ) ).convert( 'sampler' );
  551. /**
  552. * Converts a texture or texture node to a sampler comparison.
  553. *
  554. * @tsl
  555. * @function
  556. * @param {TextureNode|Texture} value - The texture or texture node to convert.
  557. * @returns {Node}
  558. */
  559. export const samplerComparison = ( value ) => ( value.isNode === true ? value : texture( value ) ).convert( 'samplerComparison' );
粤ICP备19079148号