Repairing the bloom

js/regl/bloomPass.js

@@ -2,8 +2,6 @@ import { makePassFBO, makePass } from "./utils";
 import highPassFrag  from '../../shaders/glsl/bloomPass.highPass.frag.glsl';
 import blurFrag      from '../../shaders/glsl/bloomPass.blur.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 blur approximation is the sum of a pyramid of downscaled, blurred textures.
@@ -18,12 +16,7 @@ const makePyramid = (regl, height, halfFloat) =>
 		.map((_) => makePassFBO(regl, halfFloat));
 
 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) => {
 	const { bloomStrength, bloomSize, highPassThreshold } = config;
@@ -43,21 +36,8 @@ export default ({ regl, config }, inputs) => {
 	const vBlurPyramid = makePyramid(regl, pyramidHeight, config.useHalfFloat);
 	const output = makePassFBO(regl, config.useHalfFloat);
 
-    // one big triangle that covers the whole screen
-    const fullScreenTriangle = regl.buffer([
-      -1, -1,
-       3, -1,
-     -1,  3,
-    ]);
-  
-  const commonDrawProps = {
-    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,
@@ -66,17 +46,12 @@ export default ({ regl, config }, inputs) => {
 		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({
-    ...commonDrawProps,
-    vert: fsVert,
 		frag: regl.prop("frag"),
 		uniforms: {
 			tex: regl.prop("tex"),
@@ -89,14 +64,10 @@ export default ({ regl, config }, inputs) => {
 
 	// The pyramid of textures gets flattened (summed) into a final blurry "bloom" texture
 	const combine = regl({
-    ...commonDrawProps,
-    vert: fsVert,
 		frag: regl.prop("frag"),
 		uniforms: {
 			bloomStrength,
-      ...Object.fromEntries(
+			...Object.fromEntries(vBlurPyramid.map((fbo, index) => [`pyr_${index}`, fbo])),
-        vBlurPyramid.map((fbo, index) => [`pyr_${index}`, fbo])
-      ),
 		},
 		framebuffer: output,
 	});
@@ -106,7 +77,7 @@ export default ({ regl, config }, inputs) => {
 			primary: inputs.primary,
 			bloom: output,
 		},
-    // Promise.all([highPassFrag.loaded, blurFrag.loaded]),
+		Promise.all([highPassFrag.loaded, blurFrag.loaded]),
 		(w, h) => {
 			// The blur pyramids can be lower resolution than the screen.
 			resizePyramid(highPassPyramid, w, h, bloomSize);
@@ -123,23 +94,9 @@ export default ({ regl, config }, inputs) => {
 				const highPassFBO = highPassPyramid[i];
 				const hBlurFBO = hBlurPyramid[i];
 				const vBlurFBO = vBlurPyramid[i];
-        highPass({
+				highPass({ fbo: highPassFBO, frag: highPassFrag, tex: i === 0 ? inputs.primary : highPassPyramid[i - 1] });
-          fbo: highPassFBO,
+				blur({ fbo: hBlurFBO, frag: blurFrag, tex: highPassFBO, direction: [1, 0] });
-          frag: highPassFrag,
+				blur({ fbo: vBlurFBO, frag: blurFrag, tex: hBlurFBO, direction: [0, 1] });
-          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 });

shaders/glsl/bloomPass.vert.glsl

@@ -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);
-}