AfterImageNode.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  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._compRT.texture.name = 'AfterImageNode.comp';
  19. this._oldRT = new RenderTarget();
  20. this._oldRT.texture.name = 'AfterImageNode.old';
  21. this.updateBeforeType = NodeUpdateType.RENDER;
  22. }
  23. setSize( width, height ) {
  24. this._compRT.setSize( width, height );
  25. this._oldRT.setSize( width, height );
  26. }
  27. updateBefore( frame ) {
  28. const { renderer } = frame;
  29. const textureNode = this.textureNode;
  30. const currentRenderTarget = renderer.getRenderTarget();
  31. const currentTexture = textureNode.value;
  32. this.textureNodeOld.value = this._oldRT.texture;
  33. // comp
  34. renderer.setRenderTarget( this._compRT );
  35. quadMeshComp.render( renderer );
  36. // Swap the textures
  37. const temp = this._oldRT;
  38. this._oldRT = this._compRT;
  39. this._compRT = temp;
  40. // set size before swapping fails
  41. const map = currentTexture;
  42. this.setSize( map.image.width, map.image.height );
  43. renderer.setRenderTarget( currentRenderTarget );
  44. textureNode.value = currentTexture;
  45. }
  46. setup( builder ) {
  47. const textureNode = this.textureNode;
  48. const textureNodeOld = this.textureNodeOld;
  49. if ( textureNode.isTextureNode !== true ) {
  50. console.error( 'AfterImageNode requires a TextureNode.' );
  51. return vec4();
  52. }
  53. //
  54. const uvNode = textureNode.uvNode || uv();
  55. textureNodeOld.uvNode = uvNode;
  56. const sampleTexture = ( uv ) => textureNode.cache().context( { getUV: () => uv, forceUVContext: true } );
  57. const when_gt = tslFn( ( [ x_immutable, y_immutable ] ) => {
  58. const y = float( y_immutable ).toVar();
  59. const x = vec4( x_immutable ).toVar();
  60. return max( sign( x.sub( y ) ), 0.0 );
  61. } );
  62. const afterImg = tslFn( () => {
  63. const texelOld = vec4( textureNodeOld );
  64. const texelNew = vec4( sampleTexture( uvNode ) );
  65. texelOld.mulAssign( this.damp.mul( when_gt( texelOld, 0.1 ) ) );
  66. return max( texelNew, texelOld );
  67. } );
  68. //
  69. const materialComposed = this._materialComposed || ( this._materialComposed = builder.createNodeMaterial() );
  70. materialComposed.fragmentNode = afterImg();
  71. quadMeshComp.material = materialComposed;
  72. //
  73. const properties = builder.getNodeProperties( this );
  74. properties.textureNode = textureNode;
  75. //
  76. return texture( this._compRT.texture );
  77. }
  78. }
  79. export const afterImage = ( node, damp ) => nodeObject( new AfterImageNode( nodeObject( node ), damp ) );
  80. addNodeElement( 'afterImage', afterImage );
  81. export default AfterImageNode;