AfterimagePass.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  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.uniforms[ 'damp' ].value = 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. * Performs the after image pass.
  79. *
  80. * @param {WebGLRenderer} renderer - The renderer.
  81. * @param {WebGLRenderTarget} writeBuffer - The write buffer. This buffer is intended as the rendering
  82. * destination for the pass.
  83. * @param {WebGLRenderTarget} readBuffer - The read buffer. The pass can access the result from the
  84. * previous pass from this buffer.
  85. * @param {number} deltaTime - The delta time in seconds.
  86. * @param {boolean} maskActive - Whether masking is active or not.
  87. */
  88. render( renderer, writeBuffer, readBuffer/*, deltaTime, maskActive*/ ) {
  89. this.uniforms[ 'tOld' ].value = this._textureOld.texture;
  90. this.uniforms[ 'tNew' ].value = readBuffer.texture;
  91. renderer.setRenderTarget( this._textureComp );
  92. this._compFsQuad.render( renderer );
  93. this._copyFsQuad.material.uniforms.tDiffuse.value = this._textureComp.texture;
  94. if ( this.renderToScreen ) {
  95. renderer.setRenderTarget( null );
  96. this._copyFsQuad.render( renderer );
  97. } else {
  98. renderer.setRenderTarget( writeBuffer );
  99. if ( this.clear ) renderer.clear();
  100. this._copyFsQuad.render( renderer );
  101. }
  102. // Swap buffers.
  103. const temp = this._textureOld;
  104. this._textureOld = this._textureComp;
  105. this._textureComp = temp;
  106. // Now textureOld contains the latest image, ready for the next frame.
  107. }
  108. /**
  109. * Sets the size of the pass.
  110. *
  111. * @param {number} width - The width to set.
  112. * @param {number} height - The width to set.
  113. */
  114. setSize( width, height ) {
  115. this._textureComp.setSize( width, height );
  116. this._textureOld.setSize( width, height );
  117. }
  118. /**
  119. * Frees the GPU-related resources allocated by this instance. Call this
  120. * method whenever the pass is no longer used in your app.
  121. */
  122. dispose() {
  123. this._textureComp.dispose();
  124. this._textureOld.dispose();
  125. this.compFsMaterial.dispose();
  126. this.copyFsMaterial.dispose();
  127. this._compFsQuad.dispose();
  128. this._copyFsQuad.dispose();
  129. }
  130. }
  131. export { AfterimagePass };