DotScreenPass.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. import {
  2. ShaderMaterial,
  3. UniformsUtils
  4. } from 'three';
  5. import { Pass, FullScreenQuad } from './Pass.js';
  6. import { DotScreenShader } from '../shaders/DotScreenShader.js';
  7. /**
  8. * Pass for creating a dot-screen effect.
  9. *
  10. * ```js
  11. * const pass = new DotScreenPass( new THREE.Vector2( 0, 0 ), 0.5, 0.8 );
  12. * composer.addPass( pass );
  13. * ```
  14. *
  15. * @augments Pass
  16. * @three_import import { DotScreenPass } from 'three/addons/postprocessing/DotScreenPass.js';
  17. */
  18. class DotScreenPass extends Pass {
  19. /**
  20. * Constructs a new dot screen pass.
  21. *
  22. * @param {Vector2} center - The center point.
  23. * @param {number} angle - The rotation of the effect in radians.
  24. * @param {number} scale - The scale of the effect. A higher value means smaller dots.
  25. */
  26. constructor( center, angle, scale ) {
  27. super();
  28. /**
  29. * The pass uniforms. Use this object if you want to update the
  30. * `center`, `angle` or `scale` values at runtime.
  31. * ```js
  32. * pass.uniforms.center.value.copy( center );
  33. * pass.uniforms.angle.value = 0;
  34. * pass.uniforms.scale.value = 0.5;
  35. * ```
  36. *
  37. * @type {Object}
  38. */
  39. this.uniforms = UniformsUtils.clone( DotScreenShader.uniforms );
  40. if ( center !== undefined ) this.uniforms[ 'center' ].value.copy( center );
  41. if ( angle !== undefined ) this.uniforms[ 'angle' ].value = angle;
  42. if ( scale !== undefined ) this.uniforms[ 'scale' ].value = scale;
  43. /**
  44. * The pass material.
  45. *
  46. * @type {ShaderMaterial}
  47. */
  48. this.material = new ShaderMaterial( {
  49. name: DotScreenShader.name,
  50. uniforms: this.uniforms,
  51. vertexShader: DotScreenShader.vertexShader,
  52. fragmentShader: DotScreenShader.fragmentShader
  53. } );
  54. // internals
  55. this._fsQuad = new FullScreenQuad( this.material );
  56. }
  57. /**
  58. * Performs the dot screen pass.
  59. *
  60. * @param {WebGLRenderer} renderer - The renderer.
  61. * @param {WebGLRenderTarget} writeBuffer - The write buffer. This buffer is intended as the rendering
  62. * destination for the pass.
  63. * @param {WebGLRenderTarget} readBuffer - The read buffer. The pass can access the result from the
  64. * previous pass from this buffer.
  65. * @param {number} deltaTime - The delta time in seconds.
  66. * @param {boolean} maskActive - Whether masking is active or not.
  67. */
  68. render( renderer, writeBuffer, readBuffer /*, deltaTime, maskActive */ ) {
  69. this.uniforms[ 'tDiffuse' ].value = readBuffer.texture;
  70. this.uniforms[ 'tSize' ].value.set( readBuffer.width, readBuffer.height );
  71. if ( this.renderToScreen ) {
  72. renderer.setRenderTarget( null );
  73. this._fsQuad.render( renderer );
  74. } else {
  75. renderer.setRenderTarget( writeBuffer );
  76. if ( this.clear ) renderer.clear();
  77. this._fsQuad.render( renderer );
  78. }
  79. }
  80. /**
  81. * Frees the GPU-related resources allocated by this instance. Call this
  82. * method whenever the pass is no longer used in your app.
  83. */
  84. dispose() {
  85. this.material.dispose();
  86. this._fsQuad.dispose();
  87. }
  88. }
  89. export { DotScreenPass };