import { extractEntries, makePassFBO, makePyramid, resizePyramid, makePass } from "./utils.js"; // The bloom pass is basically an added high-pass blur. const pyramidHeight = 5; const levelStrengths = Array(pyramidHeight) .fill() .map((_, index) => Math.pow(index / (pyramidHeight * 2) + 0.5, 1 / 3).toPrecision(5) ) .reverse(); export default (regl, config, inputs) => { const enabled = config.bloomSize > 0 && config.bloomStrength > 0; if (!enabled) { return makePass( { primary: inputs.primary, bloom: makePassFBO(regl) } ); } const uniforms = extractEntries(config, [ "bloomStrength", "highPassThreshold" ]); const highPassPyramid = makePyramid(regl, pyramidHeight, config.useHalfFloat); const hBlurPyramid = makePyramid(regl, pyramidHeight, config.useHalfFloat); const vBlurPyramid = makePyramid(regl, pyramidHeight, config.useHalfFloat); const output = makePassFBO(regl, config.useHalfFloat); // The high pass restricts the blur to bright things in our input texture. const highPass = regl({ frag: ` precision mediump float; varying vec2 vUV; uniform sampler2D tex; uniform float highPassThreshold; void main() { vec3 lumaColor = texture2D(tex, vUV).rgb; if (lumaColor.r < highPassThreshold) lumaColor.r = 0.0; if (lumaColor.g < highPassThreshold) lumaColor.g = 0.0; if (lumaColor.b < highPassThreshold) lumaColor.b = 0.0; gl_FragColor = vec4(lumaColor, 1.0); } `, uniforms: { ...uniforms, tex: regl.prop("tex") }, framebuffer: regl.prop("fbo") }); // A 2D gaussian blur is just a 1D blur done horizontally, then done vertically. // The FBO pyramid's levels represent separate levels of detail; // by blurring them all, this 3x1 blur approximates a more complex gaussian. const blur = regl({ frag: ` precision mediump float; uniform float width, height; uniform sampler2D tex; uniform vec2 direction; varying vec2 vUV; void main() { vec2 size = width > height ? vec2(width / height, 1.) : vec2(1., height / width); gl_FragColor = texture2D(tex, vUV) * 0.442 + ( texture2D(tex, vUV + direction / max(width, height) * size) + texture2D(tex, vUV - direction / max(width, height) * size) ) * 0.279; // gl_FragColor = // texture2D(tex, vUV) * 0.38774 + // ( // texture2D(tex, vUV + direction / max(width, height) * size * 0.5) + // texture2D(tex, vUV - direction / max(width, height) * size * 0.5) // ) * 0.24477 + // ( // texture2D(tex, vUV + direction / max(width, height) * size) + // texture2D(tex, vUV - direction / max(width, height) * size) // ) * 0.06136; } `, uniforms: { ...uniforms, tex: regl.prop("tex"), direction: regl.prop("direction"), height: regl.context("viewportWidth"), width: regl.context("viewportHeight") }, framebuffer: regl.prop("fbo") }); // The pyramid of textures gets flattened onto the source texture. const flattenPyramid = regl({ frag: ` precision mediump float; varying vec2 vUV; ${vBlurPyramid .map((_, index) => `uniform sampler2D pyr_${index};`) .join("\n")} uniform float bloomStrength; void main() { vec4 total = vec4(0.); ${vBlurPyramid .map( (_, index) => `total += texture2D(pyr_${index}, vUV) * ${levelStrengths[index]};` ) .join("\n")} gl_FragColor = total * bloomStrength; } `, uniforms: { ...uniforms, ...Object.fromEntries( vBlurPyramid.map((fbo, index) => [`pyr_${index}`, fbo]) ) }, framebuffer: output }); return makePass( { primary: inputs.primary, bloom: output }, () => { for (let i = 0; i < pyramidHeight; i++) { const highPassFBO = highPassPyramid[i]; const hBlurFBO = hBlurPyramid[i]; const vBlurFBO = vBlurPyramid[i]; highPass({ fbo: highPassFBO, tex: inputs.primary }); blur({ fbo: hBlurFBO, tex: highPassFBO, direction: [1, 0] }); blur({ fbo: vBlurFBO, tex: hBlurFBO, direction: [0, 1] }); } flattenPyramid(); }, (w, h) => { // The blur pyramids can be lower resolution than the screen. resizePyramid(highPassPyramid, w, h, config.bloomSize); resizePyramid(hBlurPyramid, w, h, config.bloomSize); resizePyramid(vBlurPyramid, w, h, config.bloomSize); output.resize(w, h); } ); };