All non-trivial shaders are now loaded from files.

TODO.txt

@@ -1,8 +1,6 @@
 TODO:
 
 Seems like bloom size and resolution impact the REGL and WebGPU bloom implementations differently
-  Ossify the REGL bloom
-    Load all the GLSL from files
   Move high pass into WebGPU bloom
 
 Live config update roadmap

js/regl/bloomPass.js

@@ -38,7 +38,7 @@ export default ({ regl, config }, inputs) => {
 	const output = makePassFBO(regl, config.useHalfFloat);
 
 	// The high pass restricts the blur to bright things in our input texture.
-	const highPassFrag = loadText("shaders/glsl/highPass.frag.glsl");
+	const highPassFrag = loadText("shaders/glsl/bloomPass.highPass.frag.glsl");
 	const highPass = regl({
 		frag: regl.prop("frag"),
 		uniforms: {
@@ -53,7 +53,7 @@ export default ({ regl, config }, inputs) => {
 	// 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 blurFrag = loadText("shaders/glsl/blur.frag.glsl");
+	const blurFrag = loadText("shaders/glsl/bloomPass.blur.frag.glsl");
 	const blur = regl({
 		frag: regl.prop("frag"),
 		uniforms: {
@@ -66,18 +66,9 @@ export default ({ regl, config }, inputs) => {
 	});
 
 	// The pyramid of textures gets flattened (summed) into a final blurry "bloom" texture
-	const sumPyramid = 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;
-			}
-		`,
+	const combineFrag = loadText("shaders/glsl/bloomPass.combine.frag.glsl");
+	const combine = regl({
+		frag: regl.prop("frag"),
 		uniforms: {
 			bloomStrength,
 			...Object.fromEntries(vBlurPyramid.map((fbo, index) => [`pyr_${index}`, fbo])),
@@ -112,7 +103,7 @@ export default ({ regl, config }, inputs) => {
 				blur({ fbo: vBlurFBO, frag: blurFrag.text(), tex: hBlurFBO, direction: [0, 1] });
 			}
 
-			sumPyramid();
+			combine({ frag: combineFrag.text() });
 		}
 	);
 };

shaders/glsl/bloomPass.blur.frag.glsl

@@ -1,8 +1,11 @@
 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 =
@@ -11,14 +14,4 @@ void main() {
 			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;
 }

shaders/glsl/bloomPass.combine.frag.glsl

@@ -0,0 +1,20 @@
+precision mediump float;
+
+uniform sampler2D pyr_0;
+uniform sampler2D pyr_1;
+uniform sampler2D pyr_2;
+uniform sampler2D pyr_3;
+uniform sampler2D 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;
+}

shaders/glsl/bloomPass.highPass.frag.glsl

@@ -1,7 +1,10 @@
 precision mediump float;
-varying vec2 vUV;
+
 uniform sampler2D tex;
 uniform float highPassThreshold;
+
+varying vec2 vUV;
+
 void main() {
 	vec4 color = texture2D(tex, vUV);
 	if (color.r < highPassThreshold) color.r = 0.0;