BloomPass.js 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  1. import {
  2. AdditiveBlending,
  3. HalfFloatType,
  4. ShaderMaterial,
  5. UniformsUtils,
  6. Vector2,
  7. WebGLRenderTarget
  8. } from 'three';
  9. import { Pass, FullScreenQuad } from './Pass.js';
  10. import { ConvolutionShader } from '../shaders/ConvolutionShader.js';
  11. /**
  12. * A pass for a basic Bloom effect.
  13. *
  14. * {@link UnrealBloomPass} produces a more advanced Bloom but is also
  15. * more expensive.
  16. *
  17. * ```js
  18. * const effectBloom = new BloomPass( 0.75 );
  19. * composer.addPass( effectBloom );
  20. * ```
  21. *
  22. * @augments Pass
  23. * @three_import import { BloomPass } from 'three/addons/postprocessing/BloomPass.js';
  24. */
  25. class BloomPass extends Pass {
  26. /**
  27. * Constructs a new Bloom pass.
  28. *
  29. * @param {number} [strength=1] - The Bloom strength.
  30. * @param {number} [kernelSize=25] - The kernel size.
  31. * @param {number} [sigma=4] - The sigma.
  32. */
  33. constructor( strength = 1, kernelSize = 25, sigma = 4 ) {
  34. super();
  35. // combine material
  36. /**
  37. * The combine pass uniforms.
  38. *
  39. * @type {Object}
  40. */
  41. this.combineUniforms = UniformsUtils.clone( CombineShader.uniforms );
  42. this.combineUniforms[ 'strength' ].value = strength;
  43. /**
  44. * The combine pass material.
  45. *
  46. * @type {ShaderMaterial}
  47. */
  48. this.materialCombine = new ShaderMaterial( {
  49. name: CombineShader.name,
  50. uniforms: this.combineUniforms,
  51. vertexShader: CombineShader.vertexShader,
  52. fragmentShader: CombineShader.fragmentShader,
  53. blending: AdditiveBlending,
  54. transparent: true
  55. } );
  56. // convolution material
  57. const convolutionShader = ConvolutionShader;
  58. /**
  59. * The convolution pass uniforms.
  60. *
  61. * @type {Object}
  62. */
  63. this.convolutionUniforms = UniformsUtils.clone( convolutionShader.uniforms );
  64. this.convolutionUniforms[ 'uImageIncrement' ].value = BloomPass.blurX;
  65. this.convolutionUniforms[ 'cKernel' ].value = buildKernel( sigma );
  66. /**
  67. * The convolution pass material.
  68. *
  69. * @type {ShaderMaterial}
  70. */
  71. this.materialConvolution = new ShaderMaterial( {
  72. name: convolutionShader.name,
  73. uniforms: this.convolutionUniforms,
  74. vertexShader: convolutionShader.vertexShader,
  75. fragmentShader: convolutionShader.fragmentShader,
  76. defines: {
  77. 'KERNEL_SIZE_FLOAT': kernelSize.toFixed( 1 ),
  78. 'KERNEL_SIZE_INT': kernelSize.toFixed( 0 )
  79. }
  80. } );
  81. /**
  82. * Overwritten to disable the swap.
  83. *
  84. * @type {boolean}
  85. * @default false
  86. */
  87. this.needsSwap = false;
  88. // internals
  89. this._renderTargetX = new WebGLRenderTarget( 1, 1, { type: HalfFloatType } ); // will be resized later
  90. this._renderTargetX.texture.name = 'BloomPass.x';
  91. this._renderTargetY = new WebGLRenderTarget( 1, 1, { type: HalfFloatType } ); // will be resized later
  92. this._renderTargetY.texture.name = 'BloomPass.y';
  93. this._fsQuad = new FullScreenQuad( null );
  94. }
  95. /**
  96. * Performs the Bloom pass.
  97. *
  98. * @param {WebGLRenderer} renderer - The renderer.
  99. * @param {WebGLRenderTarget} writeBuffer - The write buffer. This buffer is intended as the rendering
  100. * destination for the pass.
  101. * @param {WebGLRenderTarget} readBuffer - The read buffer. The pass can access the result from the
  102. * previous pass from this buffer.
  103. * @param {number} deltaTime - The delta time in seconds.
  104. * @param {boolean} maskActive - Whether masking is active or not.
  105. */
  106. render( renderer, writeBuffer, readBuffer, deltaTime, maskActive ) {
  107. if ( maskActive ) renderer.state.buffers.stencil.setTest( false );
  108. // Render quad with blurred scene into texture (convolution pass 1)
  109. this._fsQuad.material = this.materialConvolution;
  110. this.convolutionUniforms[ 'tDiffuse' ].value = readBuffer.texture;
  111. this.convolutionUniforms[ 'uImageIncrement' ].value = BloomPass.blurX;
  112. renderer.setRenderTarget( this._renderTargetX );
  113. renderer.clear();
  114. this._fsQuad.render( renderer );
  115. // Render quad with blurred scene into texture (convolution pass 2)
  116. this.convolutionUniforms[ 'tDiffuse' ].value = this._renderTargetX.texture;
  117. this.convolutionUniforms[ 'uImageIncrement' ].value = BloomPass.blurY;
  118. renderer.setRenderTarget( this._renderTargetY );
  119. renderer.clear();
  120. this._fsQuad.render( renderer );
  121. // Render original scene with superimposed blur to texture
  122. this._fsQuad.material = this.materialCombine;
  123. this.combineUniforms[ 'tDiffuse' ].value = this._renderTargetY.texture;
  124. if ( maskActive ) renderer.state.buffers.stencil.setTest( true );
  125. renderer.setRenderTarget( readBuffer );
  126. if ( this.clear ) renderer.clear();
  127. this._fsQuad.render( renderer );
  128. }
  129. /**
  130. * Sets the size of the pass.
  131. *
  132. * @param {number} width - The width to set.
  133. * @param {number} height - The width to set.
  134. */
  135. setSize( width, height ) {
  136. this._renderTargetX.setSize( width, height );
  137. this._renderTargetY.setSize( width, height );
  138. }
  139. /**
  140. * Frees the GPU-related resources allocated by this instance. Call this
  141. * method whenever the pass is no longer used in your app.
  142. */
  143. dispose() {
  144. this._renderTargetX.dispose();
  145. this._renderTargetY.dispose();
  146. this.materialCombine.dispose();
  147. this.materialConvolution.dispose();
  148. this._fsQuad.dispose();
  149. }
  150. }
  151. const CombineShader = {
  152. name: 'CombineShader',
  153. uniforms: {
  154. 'tDiffuse': { value: null },
  155. 'strength': { value: 1.0 }
  156. },
  157. vertexShader: /* glsl */`
  158. varying vec2 vUv;
  159. void main() {
  160. vUv = uv;
  161. gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  162. }`,
  163. fragmentShader: /* glsl */`
  164. uniform float strength;
  165. uniform sampler2D tDiffuse;
  166. varying vec2 vUv;
  167. void main() {
  168. vec4 texel = texture2D( tDiffuse, vUv );
  169. gl_FragColor = strength * texel;
  170. }`
  171. };
  172. BloomPass.blurX = new Vector2( 0.001953125, 0.0 );
  173. BloomPass.blurY = new Vector2( 0.0, 0.001953125 );
  174. function gauss( x, sigma ) {
  175. return Math.exp( - ( x * x ) / ( 2.0 * sigma * sigma ) );
  176. }
  177. function buildKernel( sigma ) {
  178. // We loop off the sqrt(2 * pi) * sigma term, since we're going to normalize anyway.
  179. const kMaxKernelSize = 25;
  180. let kernelSize = 2 * Math.ceil( sigma * 3.0 ) + 1;
  181. if ( kernelSize > kMaxKernelSize ) kernelSize = kMaxKernelSize;
  182. const halfWidth = ( kernelSize - 1 ) * 0.5;
  183. const values = new Array( kernelSize );
  184. let sum = 0.0;
  185. for ( let i = 0; i < kernelSize; ++ i ) {
  186. values[ i ] = gauss( i - halfWidth, sigma );
  187. sum += values[ i ];
  188. }
  189. // normalize the kernel
  190. for ( let i = 0; i < kernelSize; ++ i ) values[ i ] /= sum;
  191. return values;
  192. }
  193. export { BloomPass };