BloomPass.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. ( function () {
  2. class BloomPass extends THREE.Pass {
  3. constructor( strength = 1, kernelSize = 25, sigma = 4 ) {
  4. super();
  5. // render targets
  6. this.renderTargetX = new THREE.WebGLRenderTarget(); // will be resized later
  7. this.renderTargetX.texture.name = 'BloomPass.x';
  8. this.renderTargetY = new THREE.WebGLRenderTarget(); // will be resized later
  9. this.renderTargetY.texture.name = 'BloomPass.y';
  10. // combine material
  11. this.combineUniforms = THREE.UniformsUtils.clone( CombineShader.uniforms );
  12. this.combineUniforms[ 'strength' ].value = strength;
  13. this.materialCombine = new THREE.ShaderMaterial( {
  14. uniforms: this.combineUniforms,
  15. vertexShader: CombineShader.vertexShader,
  16. fragmentShader: CombineShader.fragmentShader,
  17. blending: THREE.AdditiveBlending,
  18. transparent: true
  19. } );
  20. // convolution material
  21. if ( THREE.ConvolutionShader === undefined ) console.error( 'THREE.BloomPass relies on THREE.ConvolutionShader' );
  22. const convolutionShader = THREE.ConvolutionShader;
  23. this.convolutionUniforms = THREE.UniformsUtils.clone( convolutionShader.uniforms );
  24. this.convolutionUniforms[ 'uImageIncrement' ].value = BloomPass.blurX;
  25. this.convolutionUniforms[ 'cKernel' ].value = THREE.ConvolutionShader.buildKernel( sigma );
  26. this.materialConvolution = new THREE.ShaderMaterial( {
  27. uniforms: this.convolutionUniforms,
  28. vertexShader: convolutionShader.vertexShader,
  29. fragmentShader: convolutionShader.fragmentShader,
  30. defines: {
  31. 'KERNEL_SIZE_FLOAT': kernelSize.toFixed( 1 ),
  32. 'KERNEL_SIZE_INT': kernelSize.toFixed( 0 )
  33. }
  34. } );
  35. this.needsSwap = false;
  36. this.fsQuad = new THREE.FullScreenQuad( null );
  37. }
  38. render( renderer, writeBuffer, readBuffer, deltaTime, maskActive ) {
  39. if ( maskActive ) renderer.state.buffers.stencil.setTest( false );
  40. // Render quad with blured scene into texture (convolution pass 1)
  41. this.fsQuad.material = this.materialConvolution;
  42. this.convolutionUniforms[ 'tDiffuse' ].value = readBuffer.texture;
  43. this.convolutionUniforms[ 'uImageIncrement' ].value = BloomPass.blurX;
  44. renderer.setRenderTarget( this.renderTargetX );
  45. renderer.clear();
  46. this.fsQuad.render( renderer );
  47. // Render quad with blured scene into texture (convolution pass 2)
  48. this.convolutionUniforms[ 'tDiffuse' ].value = this.renderTargetX.texture;
  49. this.convolutionUniforms[ 'uImageIncrement' ].value = BloomPass.blurY;
  50. renderer.setRenderTarget( this.renderTargetY );
  51. renderer.clear();
  52. this.fsQuad.render( renderer );
  53. // Render original scene with superimposed blur to texture
  54. this.fsQuad.material = this.materialCombine;
  55. this.combineUniforms[ 'tDiffuse' ].value = this.renderTargetY.texture;
  56. if ( maskActive ) renderer.state.buffers.stencil.setTest( true );
  57. renderer.setRenderTarget( readBuffer );
  58. if ( this.clear ) renderer.clear();
  59. this.fsQuad.render( renderer );
  60. }
  61. setSize( width, height ) {
  62. this.renderTargetX.setSize( width, height );
  63. this.renderTargetY.setSize( width, height );
  64. }
  65. dispose() {
  66. this.renderTargetX.dispose();
  67. this.renderTargetY.dispose();
  68. this.materialCombine.dispose();
  69. this.materialConvolution.dispose();
  70. this.fsQuad.dispose();
  71. }
  72. }
  73. const CombineShader = {
  74. uniforms: {
  75. 'tDiffuse': {
  76. value: null
  77. },
  78. 'strength': {
  79. value: 1.0
  80. }
  81. },
  82. vertexShader: /* glsl */`
  83. varying vec2 vUv;
  84. void main() {
  85. vUv = uv;
  86. gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  87. }`,
  88. fragmentShader: /* glsl */`
  89. uniform float strength;
  90. uniform sampler2D tDiffuse;
  91. varying vec2 vUv;
  92. void main() {
  93. vec4 texel = texture2D( tDiffuse, vUv );
  94. gl_FragColor = strength * texel;
  95. }`
  96. };
  97. BloomPass.blurX = new THREE.Vector2( 0.001953125, 0.0 );
  98. BloomPass.blurY = new THREE.Vector2( 0.0, 0.001953125 );
  99. THREE.BloomPass = BloomPass;
  100. } )();