eric/matrix
1
0
Fork 0
mirror of https://github.com/Rezmason/matrix.git synced 2026-04-21 07:19:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Repairing the bloom

Browse Source
This commit is contained in:
Rezmason
2025-05-04 22:00:53 -07:00
parent 42011c3c19
commit 6183accac5
2 changed files with 78 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
js/regl/bloomPass.js
View File

@@ -2,8 +2,6 @@ import { makePassFBO, makePass } from "./utils";
import highPassFrag from '../../shaders/glsl/bloomPass.highPass.frag.glsl'; import highPassFrag from '../../shaders/glsl/bloomPass.highPass.frag.glsl';
import blurFrag from '../../shaders/glsl/bloomPass.blur.frag.glsl'; import blurFrag from '../../shaders/glsl/bloomPass.blur.frag.glsl';
import combineFrag from '../../shaders/glsl/bloomPass.combine.frag.glsl'; import combineFrag from '../../shaders/glsl/bloomPass.combine.frag.glsl';
import fsVert from '../../shaders/glsl/bloomPass.vert.glsl';
// The bloom pass is basically an added high-pass blur. // The bloom pass is basically an added high-pass blur.
// The blur approximation is the sum of a pyramid of downscaled, blurred textures. // The blur approximation is the sum of a pyramid of downscaled, blurred textures.
@@ -13,136 +11,95 @@ const pyramidHeight = 5;
// A pyramid is just an array of FBOs, where each FBO is half the width // A pyramid is just an array of FBOs, where each FBO is half the width
// and half the height of the FBO below it. // and half the height of the FBO below it.
const makePyramid = (regl, height, halfFloat) => const makePyramid = (regl, height, halfFloat) =>
Array(height) Array(height)
.fill() .fill()
.map((_) => makePassFBO(regl, halfFloat)); .map((_) => makePassFBO(regl, halfFloat));
const resizePyramid = (pyramid, vw, vh, scale) => const resizePyramid = (pyramid, vw, vh, scale) =>
pyramid.forEach((fbo, index) => pyramid.forEach((fbo, index) => fbo.resize(Math.floor((vw * scale) / 2 ** index), Math.floor((vh * scale) / 2 ** index)));
fbo.resize(
Math.floor((vw * scale) / 2 ** index),
Math.floor((vh * scale) / 2 ** index)
)
);
export default ({ regl, config }, inputs) => { export default ({ regl, config }, inputs) => {
const { bloomStrength, bloomSize, highPassThreshold } = config; const { bloomStrength, bloomSize, highPassThreshold } = config;
const enabled = bloomSize > 0 && bloomStrength > 0; const enabled = bloomSize > 0 && bloomStrength > 0;
// If there's no bloom to apply, return a no-op pass with an empty bloom texture // If there's no bloom to apply, return a no-op pass with an empty bloom texture
if (!enabled) { if (!enabled) {
return makePass({ return makePass({
primary: inputs.primary, primary: inputs.primary,
bloom: makePassFBO(regl), bloom: makePassFBO(regl),
}); });
} }
// Build three pyramids of FBOs, one for each step in the process // Build three pyramids of FBOs, one for each step in the process
const highPassPyramid = makePyramid(regl, pyramidHeight, config.useHalfFloat); const highPassPyramid = makePyramid(regl, pyramidHeight, config.useHalfFloat);
const hBlurPyramid = makePyramid(regl, pyramidHeight, config.useHalfFloat); const hBlurPyramid = makePyramid(regl, pyramidHeight, config.useHalfFloat);
const vBlurPyramid = makePyramid(regl, pyramidHeight, config.useHalfFloat); const vBlurPyramid = makePyramid(regl, pyramidHeight, config.useHalfFloat);
const output = makePassFBO(regl, config.useHalfFloat); const output = makePassFBO(regl, config.useHalfFloat);
// one big triangle that covers the whole screen // The high pass restricts the blur to bright things in our input texture.
const fullScreenTriangle = regl.buffer([ const highPass = regl({
-1, -1, frag: regl.prop("frag"),
3, -1, uniforms: {
-1, 3, highPassThreshold,
]); tex: regl.prop("tex"),
},
const commonDrawProps = { framebuffer: regl.prop("fbo"),
attributes: { aPosition: fullScreenTriangle }, });
count: 3,
};
// The high pass restricts the blur to bright things in our input texture.
const highPass = regl({
...commonDrawProps,
vert: fsVert,
frag: regl.prop("frag"),
uniforms: {
highPassThreshold,
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 basic blur approximates a more complex gaussian:
// https://web.archive.org/web/20191124072602/https://software.intel.com/en-us/articles/compute-shader-hdr-and-bloom
const blur = regl({
frag: regl.prop("frag"),
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: regl.prop("frag"),
uniforms: {
bloomStrength,
...Object.fromEntries(vBlurPyramid.map((fbo, index) => [`pyr_${index}`, fbo])),
},
framebuffer: output,
});
// A 2D gaussian blur is just a 1D blur done horizontally, then done vertically. return makePass(
// The FBO pyramid's levels represent separate levels of detail; {
// by blurring them all, this basic blur approximates a more complex gaussian: primary: inputs.primary,
// https://web.archive.org/web/20191124072602/https://software.intel.com/en-us/articles/compute-shader-hdr-and-bloom bloom: output,
},
Promise.all([highPassFrag.loaded, blurFrag.loaded]),
(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);
},
(shouldRender) => {
if (!shouldRender) {
return;
}
const blur = regl({ for (let i = 0; i < pyramidHeight; i++) {
...commonDrawProps, const highPassFBO = highPassPyramid[i];
vert: fsVert, const hBlurFBO = hBlurPyramid[i];
frag: regl.prop("frag"), const vBlurFBO = vBlurPyramid[i];
uniforms: { highPass({ fbo: highPassFBO, frag: highPassFrag, tex: i === 0 ? inputs.primary : highPassPyramid[i - 1] });
tex: regl.prop("tex"), blur({ fbo: hBlurFBO, frag: blurFrag, tex: highPassFBO, direction: [1, 0] });
direction: regl.prop("direction"), blur({ fbo: vBlurFBO, frag: blurFrag, tex: hBlurFBO, direction: [0, 1] });
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 combine({ frag: combineFrag });
const combine = regl({ }
...commonDrawProps, );
vert: fsVert,
frag: regl.prop("frag"),
uniforms: {
bloomStrength,
...Object.fromEntries(
vBlurPyramid.map((fbo, index) => [`pyr_${index}`, fbo])
),
},
framebuffer: output,
});
return makePass(
{
primary: inputs.primary,
bloom: output,
},
// Promise.all([highPassFrag.loaded, blurFrag.loaded]),
(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);
},
(shouldRender) => {
if (!shouldRender) {
return;
}
for (let i = 0; i < pyramidHeight; i++) {
const highPassFBO = highPassPyramid[i];
const hBlurFBO = hBlurPyramid[i];
const vBlurFBO = vBlurPyramid[i];
highPass({
fbo: highPassFBO,
frag: highPassFrag,
tex: i === 0 ? inputs.primary : highPassPyramid[i - 1],
});
blur({
fbo: hBlurFBO,
frag: blurFrag,
tex: highPassFBO,
direction: [1, 0],
});
blur({
fbo: vBlurFBO,
frag: blurFrag,
tex: hBlurFBO,
direction: [0, 1],
});
}
combine({ frag: combineFrag });
}
);
}; };

10
shaders/glsl/bloomPass.vert.glsl
View File

@@ -1,10 +0,0 @@
/* shaders/glsl/fullscreen.vert.glsl */
precision mediump float;
attribute vec2 aPosition; // will come from JS buffer
varying vec2 vUV;
void main () {
vUV = aPosition * 0.5 + 0.5; // (‑1…1) → (0…1)
gl_Position = vec4(aPosition, 0.0, 1.0);
}