BloomPass.js 3.6 KB

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