matrix/js/bloomPass.js

import { loadText, makePassFBO, makePass } from "./utils.js";

const pyramidHeight = 5;

const makePyramid = (regl, height, halfFloat) =>
	Array(height)
		.fill()
		.map((_) => makePassFBO(regl, halfFloat));

const resizePyramid = (pyramid, vw, vh, scale) =>
	pyramid.forEach((fbo, index) => fbo.resize(Math.floor((vw * scale) / 2 ** index), Math.floor((vh * scale) / 2 ** index)));

export default ({ regl }, inputs) => {
	const bloomStrength = 0.7; // The intensity of the bloom
	const bloomSize = 0.4; // The amount the bloom calculation is scaled
	const highPassThreshold = 0.1; // The minimum brightness that is still blurred

	const highPassPyramid = makePyramid(regl, pyramidHeight);
	const hBlurPyramid = makePyramid(regl, pyramidHeight);
	const vBlurPyramid = makePyramid(regl, pyramidHeight);
	const output = makePassFBO(regl);

	const highPass = regl({
		frag: `
			precision mediump float;

			uniform sampler2D tex;
			uniform float highPassThreshold;

			varying vec2 vUV;

			void main() {
				vec4 color = texture2D(tex, vUV);
				if (color.r < highPassThreshold) color.r = 0.0;
				if (color.g < highPassThreshold) color.g = 0.0;
				if (color.b < highPassThreshold) color.b = 0.0;
				gl_FragColor = color;
			}
		`,
		uniforms: {
			highPassThreshold,
			tex: regl.prop("tex"),
		},
		framebuffer: regl.prop("fbo"),
	});

	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;
			}
		`,
		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 (summed) into a final blurry "bloom" texture
	const combine = regl({
		frag: `
			precision mediump float;

			uniform sampler2D pyr_0, pyr_1, pyr_2, pyr_3, pyr_4;
			uniform float bloomStrength;
			varying vec2 vUV;

			void main() {
				vec4 total = vec4(0.);
				total += texture2D(pyr_0, vUV) * 0.96549;
				total += texture2D(pyr_1, vUV) * 0.92832;
				total += texture2D(pyr_2, vUV) * 0.88790;
				total += texture2D(pyr_3, vUV) * 0.84343;
				total += texture2D(pyr_4, vUV) * 0.79370;
				gl_FragColor = total * bloomStrength;
			}
		`,
		uniforms: {
			bloomStrength,
			...Object.fromEntries(vBlurPyramid.map((fbo, index) => [`pyr_${index}`, fbo])),
		},
		framebuffer: output,
	});

	return makePass(
		{
			primary: inputs.primary,
			bloom: output,
		},
		null,
		(w, h) => {
			// The blur pyramids can be lower resolution than the screen.
			resizePyramid(highPassPyramid, w, h, bloomSize);
			resizePyramid(hBlurPyramid, w, h, bloomSize);
			resizePyramid(vBlurPyramid, w, h, bloomSize);
			output.resize(w, h);
		},
		() => {
			for (let i = 0; i < pyramidHeight; i++) {
				const highPassFBO = highPassPyramid[i];
				const hBlurFBO = hBlurPyramid[i];
				const vBlurFBO = vBlurPyramid[i];
				highPass({ fbo: highPassFBO, tex: i === 0 ? inputs.primary : highPassPyramid[i - 1] });
				blur({ fbo: hBlurFBO, tex: highPassFBO, direction: [1, 0] });
				blur({ fbo: vBlurFBO, tex: hBlurFBO, direction: [0, 1] });
			}

			combine();
		}
	);
};