HalftonePass.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. import {
  2. ShaderMaterial,
  3. UniformsUtils
  4. } from 'three';
  5. import { Pass, FullScreenQuad } from './Pass.js';
  6. import { HalftoneShader } from '../shaders/HalftoneShader.js';
  7. /**
  8. * Pass for creating a RGB halftone effect.
  9. *
  10. * ```js
  11. * const params = {
  12. * shape: 1,
  13. * radius: 4,
  14. * rotateR: Math.PI / 12,
  15. * rotateB: Math.PI / 12 * 2,
  16. * rotateG: Math.PI / 12 * 3,
  17. * scatter: 0,
  18. * blending: 1,
  19. * blendingMode: 1,
  20. * greyscale: false,
  21. * disable: false
  22. * };
  23. * const halftonePass = new HalftonePass( params );
  24. * composer.addPass( halftonePass );
  25. * ```
  26. *
  27. * @augments Pass
  28. * @three_import import { HalftonePass } from 'three/addons/postprocessing/HalftonePass.js';
  29. */
  30. class HalftonePass extends Pass {
  31. /**
  32. * Constructs a new halftone pass.
  33. *
  34. * @param {Object} params - The halftone shader parameter.
  35. */
  36. constructor( params ) {
  37. super();
  38. /**
  39. * The pass uniforms.
  40. *
  41. * @type {Object}
  42. */
  43. this.uniforms = UniformsUtils.clone( HalftoneShader.uniforms );
  44. /**
  45. * The pass material.
  46. *
  47. * @type {ShaderMaterial}
  48. */
  49. this.material = new ShaderMaterial( {
  50. uniforms: this.uniforms,
  51. fragmentShader: HalftoneShader.fragmentShader,
  52. vertexShader: HalftoneShader.vertexShader
  53. } );
  54. for ( const key in params ) {
  55. if ( params.hasOwnProperty( key ) && this.uniforms.hasOwnProperty( key ) ) {
  56. this.uniforms[ key ].value = params[ key ];
  57. }
  58. }
  59. // internals
  60. this._fsQuad = new FullScreenQuad( this.material );
  61. }
  62. /**
  63. * Performs the halftone 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.material.uniforms[ 'tDiffuse' ].value = readBuffer.texture;
  75. if ( this.renderToScreen ) {
  76. renderer.setRenderTarget( null );
  77. this._fsQuad.render( renderer );
  78. } else {
  79. renderer.setRenderTarget( writeBuffer );
  80. if ( this.clear ) renderer.clear();
  81. this._fsQuad.render( renderer );
  82. }
  83. }
  84. /**
  85. * Sets the size of the pass.
  86. *
  87. * @param {number} width - The width to set.
  88. * @param {number} height - The width to set.
  89. */
  90. setSize( width, height ) {
  91. this.uniforms.width.value = width;
  92. this.uniforms.height.value = height;
  93. }
  94. /**
  95. * Frees the GPU-related resources allocated by this instance. Call this
  96. * method whenever the pass is no longer used in your app.
  97. */
  98. dispose() {
  99. this.material.dispose();
  100. this._fsQuad.dispose();
  101. }
  102. }
  103. export { HalftonePass };