GlitchPass.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. import {
  2. DataTexture,
  3. FloatType,
  4. MathUtils,
  5. RedFormat,
  6. ShaderMaterial,
  7. UniformsUtils
  8. } from 'three';
  9. import { Pass, FullScreenQuad } from './Pass.js';
  10. import { DigitalGlitch } from '../shaders/DigitalGlitch.js';
  11. /**
  12. * Pass for creating a glitch effect.
  13. *
  14. * ```js
  15. * const glitchPass = new GlitchPass();
  16. * composer.addPass( glitchPass );
  17. * ```
  18. *
  19. * @augments Pass
  20. * @three_import import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';
  21. */
  22. class GlitchPass extends Pass {
  23. /**
  24. * Constructs a new glitch pass.
  25. *
  26. * @param {number} [dt_size=64] - The size of the displacement texture
  27. * for digital glitch squares.
  28. */
  29. constructor( dt_size = 64 ) {
  30. super();
  31. /**
  32. * The pass uniforms.
  33. *
  34. * @type {Object}
  35. */
  36. this.uniforms = UniformsUtils.clone( DigitalGlitch.uniforms );
  37. /**
  38. * The pass material.
  39. *
  40. * @type {ShaderMaterial}
  41. */
  42. this.material = new ShaderMaterial( {
  43. uniforms: this.uniforms,
  44. vertexShader: DigitalGlitch.vertexShader,
  45. fragmentShader: DigitalGlitch.fragmentShader
  46. } );
  47. /**
  48. * Whether to noticeably increase the effect intensity or not.
  49. *
  50. * @type {boolean}
  51. * @default false
  52. */
  53. this.goWild = false;
  54. // internals
  55. this._heightMap = this._generateHeightmap( dt_size );
  56. this.uniforms[ 'tDisp' ].value = this.heightMap;
  57. this._fsQuad = new FullScreenQuad( this.material );
  58. this._curF = 0;
  59. this._randX = 0;
  60. this._generateTrigger();
  61. }
  62. /**
  63. * Performs the glitch pass.
  64. *
  65. * @param {WebGLRenderer} renderer - The renderer.
  66. * @param {WebGLRenderTarget} writeBuffer - The write buffer. This buffer is intended as the rendering
  67. * destination for the pass.
  68. * @param {WebGLRenderTarget} readBuffer - The read buffer. The pass can access the result from the
  69. * previous pass from this buffer.
  70. * @param {number} deltaTime - The delta time in seconds.
  71. * @param {boolean} maskActive - Whether masking is active or not.
  72. */
  73. render( renderer, writeBuffer, readBuffer /*, deltaTime, maskActive */ ) {
  74. this.uniforms[ 'tDiffuse' ].value = readBuffer.texture;
  75. this.uniforms[ 'seed' ].value = Math.random(); // default seeding
  76. this.uniforms[ 'byp' ].value = 0;
  77. if ( this._curF % this._randX == 0 || this.goWild == true ) {
  78. this.uniforms[ 'amount' ].value = Math.random() / 30;
  79. this.uniforms[ 'angle' ].value = MathUtils.randFloat( - Math.PI, Math.PI );
  80. this.uniforms[ 'seed_x' ].value = MathUtils.randFloat( - 1, 1 );
  81. this.uniforms[ 'seed_y' ].value = MathUtils.randFloat( - 1, 1 );
  82. this.uniforms[ 'distortion_x' ].value = MathUtils.randFloat( 0, 1 );
  83. this.uniforms[ 'distortion_y' ].value = MathUtils.randFloat( 0, 1 );
  84. this._curF = 0;
  85. this._generateTrigger();
  86. } else if ( this._curF % this._randX < this._randX / 5 ) {
  87. this.uniforms[ 'amount' ].value = Math.random() / 90;
  88. this.uniforms[ 'angle' ].value = MathUtils.randFloat( - Math.PI, Math.PI );
  89. this.uniforms[ 'distortion_x' ].value = MathUtils.randFloat( 0, 1 );
  90. this.uniforms[ 'distortion_y' ].value = MathUtils.randFloat( 0, 1 );
  91. this.uniforms[ 'seed_x' ].value = MathUtils.randFloat( - 0.3, 0.3 );
  92. this.uniforms[ 'seed_y' ].value = MathUtils.randFloat( - 0.3, 0.3 );
  93. } else if ( this.goWild == false ) {
  94. this.uniforms[ 'byp' ].value = 1;
  95. }
  96. this._curF ++;
  97. if ( this.renderToScreen ) {
  98. renderer.setRenderTarget( null );
  99. this._fsQuad.render( renderer );
  100. } else {
  101. renderer.setRenderTarget( writeBuffer );
  102. if ( this.clear ) renderer.clear();
  103. this._fsQuad.render( renderer );
  104. }
  105. }
  106. /**
  107. * Frees the GPU-related resources allocated by this instance. Call this
  108. * method whenever the pass is no longer used in your app.
  109. */
  110. dispose() {
  111. this.material.dispose();
  112. this.heightMap.dispose();
  113. this._fsQuad.dispose();
  114. }
  115. // internals
  116. _generateTrigger() {
  117. this._randX = MathUtils.randInt( 120, 240 );
  118. }
  119. _generateHeightmap( dt_size ) {
  120. const data_arr = new Float32Array( dt_size * dt_size );
  121. const length = dt_size * dt_size;
  122. for ( let i = 0; i < length; i ++ ) {
  123. const val = MathUtils.randFloat( 0, 1 );
  124. data_arr[ i ] = val;
  125. }
  126. const texture = new DataTexture( data_arr, dt_size, dt_size, RedFormat, FloatType );
  127. texture.needsUpdate = true;
  128. return texture;
  129. }
  130. }
  131. export { GlitchPass };