AfterimagePass.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. import {
  2. HalfFloatType,
  3. NearestFilter,
  4. NoBlending,
  5. ShaderMaterial,
  6. UniformsUtils,
  7. WebGLRenderTarget
  8. } from 'three';
  9. import { Pass, FullScreenQuad } from './Pass.js';
  10. import { CopyShader } from '../shaders/CopyShader.js';
  11. import { AfterimageShader } from '../shaders/AfterimageShader.js';
  12. /**
  13. * Pass for a basic after image effect.
  14. *
  15. * ```js
  16. * const afterimagePass = new AfterimagePass( 0.9 );
  17. * composer.addPass( afterimagePass );
  18. * ```
  19. *
  20. * @augments Pass
  21. * @three_import import { AfterimagePass } from 'three/addons/postprocessing/AfterimagePass.js';
  22. */
  23. class AfterimagePass extends Pass {
  24. /**
  25. * Constructs a new after image pass.
  26. *
  27. * @param {number} [damp=0.96] - The damping intensity. A higher value means a stronger after image effect.
  28. */
  29. constructor( damp = 0.96 ) {
  30. super();
  31. /**
  32. * The pass uniforms. Use this object if you want to update the
  33. * `damp` value at runtime.
  34. * ```js
  35. * pass.uniforms.damp.value = 0.9;
  36. * ```
  37. *
  38. * @type {Object}
  39. */
  40. this.uniforms = UniformsUtils.clone( AfterimageShader.uniforms );
  41. this.damp = damp;
  42. /**
  43. * The composition material.
  44. *
  45. * @type {ShaderMaterial}
  46. */
  47. this.compFsMaterial = new ShaderMaterial( {
  48. uniforms: this.uniforms,
  49. vertexShader: AfterimageShader.vertexShader,
  50. fragmentShader: AfterimageShader.fragmentShader
  51. } );
  52. /**
  53. * The copy material.
  54. *
  55. * @type {ShaderMaterial}
  56. */
  57. this.copyFsMaterial = new ShaderMaterial( {
  58. uniforms: UniformsUtils.clone( CopyShader.uniforms ),
  59. vertexShader: CopyShader.vertexShader,
  60. fragmentShader: CopyShader.fragmentShader,
  61. blending: NoBlending,
  62. depthTest: false,
  63. depthWrite: false
  64. } );
  65. // internals
  66. this._textureComp = new WebGLRenderTarget( window.innerWidth, window.innerHeight, {
  67. magFilter: NearestFilter,
  68. type: HalfFloatType
  69. } );
  70. this._textureOld = new WebGLRenderTarget( window.innerWidth, window.innerHeight, {
  71. magFilter: NearestFilter,
  72. type: HalfFloatType
  73. } );
  74. this._compFsQuad = new FullScreenQuad( this.compFsMaterial );
  75. this._copyFsQuad = new FullScreenQuad( this.copyFsMaterial );
  76. }
  77. /**
  78. * The damping intensity, from 0.0 to 1.0. A higher value means a stronger after image effect.
  79. *
  80. * @type {number}
  81. */
  82. get damp() {
  83. return this.uniforms[ 'damp' ].value;
  84. }
  85. set damp( value ) {
  86. this.uniforms[ 'damp' ].value = value;
  87. }
  88. /**
  89. * Performs the after image pass.
  90. *
  91. * @param {WebGLRenderer} renderer - The renderer.
  92. * @param {WebGLRenderTarget} writeBuffer - The write buffer. This buffer is intended as the rendering
  93. * destination for the pass.
  94. * @param {WebGLRenderTarget} readBuffer - The read buffer. The pass can access the result from the
  95. * previous pass from this buffer.
  96. * @param {number} deltaTime - The delta time in seconds.
  97. * @param {boolean} maskActive - Whether masking is active or not.
  98. */
  99. render( renderer, writeBuffer, readBuffer/*, deltaTime, maskActive*/ ) {
  100. this.uniforms[ 'tOld' ].value = this._textureOld.texture;
  101. this.uniforms[ 'tNew' ].value = readBuffer.texture;
  102. renderer.setRenderTarget( this._textureComp );
  103. this._compFsQuad.render( renderer );
  104. this._copyFsQuad.material.uniforms.tDiffuse.value = this._textureComp.texture;
  105. if ( this.renderToScreen ) {
  106. renderer.setRenderTarget( null );
  107. this._copyFsQuad.render( renderer );
  108. } else {
  109. renderer.setRenderTarget( writeBuffer );
  110. if ( this.clear ) renderer.clear();
  111. this._copyFsQuad.render( renderer );
  112. }
  113. // Swap buffers.
  114. const temp = this._textureOld;
  115. this._textureOld = this._textureComp;
  116. this._textureComp = temp;
  117. // Now textureOld contains the latest image, ready for the next frame.
  118. }
  119. /**
  120. * Sets the size of the pass.
  121. *
  122. * @param {number} width - The width to set.
  123. * @param {number} height - The height to set.
  124. */
  125. setSize( width, height ) {
  126. this._textureComp.setSize( width, height );
  127. this._textureOld.setSize( width, height );
  128. }
  129. /**
  130. * Frees the GPU-related resources allocated by this instance. Call this
  131. * method whenever the pass is no longer used in your app.
  132. */
  133. dispose() {
  134. this._textureComp.dispose();
  135. this._textureOld.dispose();
  136. this.compFsMaterial.dispose();
  137. this.copyFsMaterial.dispose();
  138. this._compFsQuad.dispose();
  139. this._copyFsQuad.dispose();
  140. }
  141. }
  142. export { AfterimagePass };