BloomPass.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. import {
  2. AdditiveBlending,
  3. LinearFilter,
  4. RGBAFormat,
  5. ShaderMaterial,
  6. UniformsUtils,
  7. Vector2,
  8. WebGLRenderTarget
  9. } from '../../../build/three.module.js';
  10. import { Pass, FullScreenQuad } from './Pass.js';
  11. import { CopyShader } from '../shaders/CopyShader.js';
  12. import { ConvolutionShader } from '../shaders/ConvolutionShader.js';
  13. class BloomPass extends Pass {
  14. constructor( strength = 1, kernelSize = 25, sigma = 4, resolution = 256 ) {
  15. super();
  16. // render targets
  17. const pars = { minFilter: LinearFilter, magFilter: LinearFilter, format: RGBAFormat };
  18. this.renderTargetX = new WebGLRenderTarget( resolution, resolution, pars );
  19. this.renderTargetX.texture.name = 'BloomPass.x';
  20. this.renderTargetY = new WebGLRenderTarget( resolution, resolution, pars );
  21. this.renderTargetY.texture.name = 'BloomPass.y';
  22. // copy material
  23. if ( CopyShader === undefined ) console.error( 'THREE.BloomPass relies on CopyShader' );
  24. const copyShader = CopyShader;
  25. this.copyUniforms = UniformsUtils.clone( copyShader.uniforms );
  26. this.copyUniforms[ 'opacity' ].value = strength;
  27. this.materialCopy = new ShaderMaterial( {
  28. uniforms: this.copyUniforms,
  29. vertexShader: copyShader.vertexShader,
  30. fragmentShader: copyShader.fragmentShader,
  31. blending: AdditiveBlending,
  32. transparent: true
  33. } );
  34. // convolution material
  35. if ( ConvolutionShader === undefined ) console.error( 'THREE.BloomPass relies on ConvolutionShader' );
  36. const convolutionShader = ConvolutionShader;
  37. this.convolutionUniforms = UniformsUtils.clone( convolutionShader.uniforms );
  38. this.convolutionUniforms[ 'uImageIncrement' ].value = BloomPass.blurX;
  39. this.convolutionUniforms[ 'cKernel' ].value = ConvolutionShader.buildKernel( sigma );
  40. this.materialConvolution = new ShaderMaterial( {
  41. uniforms: this.convolutionUniforms,
  42. vertexShader: convolutionShader.vertexShader,
  43. fragmentShader: convolutionShader.fragmentShader,
  44. defines: {
  45. 'KERNEL_SIZE_FLOAT': kernelSize.toFixed( 1 ),
  46. 'KERNEL_SIZE_INT': kernelSize.toFixed( 0 )
  47. }
  48. } );
  49. this.needsSwap = false;
  50. this.fsQuad = new FullScreenQuad( null );
  51. }
  52. render( renderer, writeBuffer, readBuffer, deltaTime, maskActive ) {
  53. if ( maskActive ) renderer.state.buffers.stencil.setTest( false );
  54. // Render quad with blured scene into texture (convolution pass 1)
  55. this.fsQuad.material = this.materialConvolution;
  56. this.convolutionUniforms[ 'tDiffuse' ].value = readBuffer.texture;
  57. this.convolutionUniforms[ 'uImageIncrement' ].value = BloomPass.blurX;
  58. renderer.setRenderTarget( this.renderTargetX );
  59. renderer.clear();
  60. this.fsQuad.render( renderer );
  61. // Render quad with blured scene into texture (convolution pass 2)
  62. this.convolutionUniforms[ 'tDiffuse' ].value = this.renderTargetX.texture;
  63. this.convolutionUniforms[ 'uImageIncrement' ].value = BloomPass.blurY;
  64. renderer.setRenderTarget( this.renderTargetY );
  65. renderer.clear();
  66. this.fsQuad.render( renderer );
  67. // Render original scene with superimposed blur to texture
  68. this.fsQuad.material = this.materialCopy;
  69. this.copyUniforms[ 'tDiffuse' ].value = this.renderTargetY.texture;
  70. if ( maskActive ) renderer.state.buffers.stencil.setTest( true );
  71. renderer.setRenderTarget( readBuffer );
  72. if ( this.clear ) renderer.clear();
  73. this.fsQuad.render( renderer );
  74. }
  75. }
  76. BloomPass.blurX = new Vector2( 0.001953125, 0.0 );
  77. BloomPass.blurY = new Vector2( 0.0, 0.001953125 );
  78. export { BloomPass };