AfterImageNode.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. import TempNode from '../core/TempNode.js';
  2. import { nodeObject, addNodeElement, tslFn, float, vec4 } from '../shadernode/ShaderNode.js';
  3. import { NodeUpdateType } from '../core/constants.js';
  4. import { uv } from '../accessors/UVNode.js';
  5. import { texture } from '../accessors/TextureNode.js';
  6. import { uniform } from '../core/UniformNode.js';
  7. import { RenderTarget } from 'three';
  8. import { sign, max } from '../math/MathNode.js';
  9. import QuadMesh from '../../objects/QuadMesh.js';
  10. const quadMeshComp = new QuadMesh();
  11. class AfterImageNode extends TempNode {
  12. constructor( textureNode, damp = 0.96 ) {
  13. super( textureNode );
  14. this.textureNode = textureNode;
  15. this.textureNodeOld = texture();
  16. this.damp = uniform( damp );
  17. this._compRT = new RenderTarget();
  18. this._oldRT = new RenderTarget();
  19. this.updateBeforeType = NodeUpdateType.RENDER;
  20. }
  21. setSize( width, height ) {
  22. this._compRT.setSize( width, height );
  23. this._oldRT.setSize( width, height );
  24. }
  25. updateBefore( frame ) {
  26. const { renderer } = frame;
  27. const textureNode = this.textureNode;
  28. const currentRenderTarget = renderer.getRenderTarget();
  29. const currentTexture = textureNode.value;
  30. this.textureNodeOld.value = this._oldRT.texture;
  31. // comp
  32. renderer.setRenderTarget( this._compRT );
  33. quadMeshComp.render( renderer );
  34. // Swap the textures
  35. const temp = this._oldRT;
  36. this._oldRT = this._compRT;
  37. this._compRT = temp;
  38. // set size before swapping fails
  39. const map = currentTexture;
  40. this.setSize( map.image.width, map.image.height );
  41. renderer.setRenderTarget( currentRenderTarget );
  42. textureNode.value = currentTexture;
  43. }
  44. setup( builder ) {
  45. const textureNode = this.textureNode;
  46. const textureNodeOld = this.textureNodeOld;
  47. if ( textureNode.isTextureNode !== true ) {
  48. console.error( 'AfterImageNode requires a TextureNode.' );
  49. return vec4();
  50. }
  51. //
  52. const uvNode = textureNode.uvNode || uv();
  53. textureNodeOld.uvNode = uvNode;
  54. const sampleTexture = ( uv ) => textureNode.cache().context( { getUV: () => uv, forceUVContext: true } );
  55. const when_gt = tslFn( ( [ x_immutable, y_immutable ] ) => {
  56. const y = float( y_immutable ).toVar();
  57. const x = vec4( x_immutable ).toVar();
  58. return max( sign( x.sub( y ) ), 0.0 );
  59. } );
  60. const afterImg = tslFn( () => {
  61. const texelOld = vec4( textureNodeOld );
  62. const texelNew = vec4( sampleTexture( uvNode ) );
  63. texelOld.mulAssign( this.damp.mul( when_gt( texelOld, 0.1 ) ) );
  64. return max( texelNew, texelOld );
  65. } );
  66. //
  67. const materialComposed = this._materialComposed || ( this._materialComposed = builder.createNodeMaterial( 'MeshBasicNodeMaterial' ) );
  68. materialComposed.fragmentNode = afterImg();
  69. quadMeshComp.material = materialComposed;
  70. //
  71. const properties = builder.getNodeProperties( this );
  72. properties.textureNode = textureNode;
  73. //
  74. return texture( this._compRT.texture );
  75. }
  76. }
  77. export const afterImage = ( node, damp ) => nodeObject( new AfterImageNode( nodeObject( node ), damp ) );
  78. addNodeElement( 'afterImage', afterImage );
  79. export default AfterImageNode;