Renaming the shaders again, because the extensions I gave them were confusing GitHub's syntax highlighting.

js/bloomPass.js

@@ -28,7 +28,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/highPass.frag");
+	const highPassFrag = loadText("shaders/highPass.frag.glsl");
 	const highPass = regl({
 		frag: regl.prop("frag"),
 		uniforms: {
@@ -43,7 +43,7 @@ export default (regl, config, inputs) => {
 	// by blurring them all, this basic blur approximates a more complex gaussian:
 	// https://software.intel.com/en-us/articles/compute-shader-hdr-and-bloom
 
-	const blurFrag = loadText("shaders/blur.frag");
+	const blurFrag = loadText("shaders/blur.frag.glsl");
 	const blur = regl({
 		frag: regl.prop("frag"),
 		uniforms: {

js/imagePass.js

@@ -8,7 +8,7 @@ export default (regl, config, inputs) => {
 	const output = makePassFBO(regl, config.useHalfFloat);
 	const bgURL = "bgURL" in config ? config.bgURL : defaultBGURL;
 	const background = loadImage(regl, bgURL);
-	const imagePassFrag = loadText("shaders/imagePass.frag");
+	const imagePassFrag = loadText("shaders/imagePass.frag.glsl");
 	const render = regl({
 		frag: regl.prop("frag"),
 		uniforms: {

js/palettePass.js

@@ -67,7 +67,7 @@ export default (regl, config, inputs) => {
 	const palette = makePalette(regl, config.paletteEntries);
 	const { backgroundColor } = config;
 
-	const palettePassFrag = loadText("shaders/palettePass.frag");
+	const palettePassFrag = loadText("shaders/palettePass.frag.glsl");
 
 	const render = regl({
 		frag: regl.prop("frag"),

js/rainPass.js

@@ -59,7 +59,7 @@ export default (regl, config) => {
 		wrapT: "clamp",
 		type: "half float",
 	});
-	const rainPassCompute = loadText("shaders/rainPass.Compute");
+	const rainPassCompute = loadText("shaders/rainPass.compute.frag.glsl");
 	const computeUniforms = {
 		...commonUniforms,
 		...extractEntries(config, [
@@ -100,8 +100,8 @@ export default (regl, config) => {
 
 	// We render the code into an FBO using MSDFs: https://github.com/Chlumsky/msdfgen
 	const msdf = loadImage(regl, config.glyphTexURL);
-	const rainPassVert = loadText("shaders/rainPass.vert");
+	const rainPassVert = loadText("shaders/rainPass.vert.glsl");
-	const rainPassFrag = loadText("shaders/rainPass.frag");
+	const rainPassFrag = loadText("shaders/rainPass.frag.glsl");
 	const output = makePassFBO(regl, config.useHalfFloat);
 	const renderUniforms = {
 		...commonUniforms,

js/resurrectionPass.js

@@ -11,7 +11,7 @@ import { loadText, make1DTexture, makePassFBO, makePass } from "./utils.js";
 export default (regl, config, inputs) => {
 	const output = makePassFBO(regl, config.useHalfFloat);
 	const { backgroundColor } = config;
-	const resurrectionPassFrag = loadText("shaders/resurrectionPass.frag");
+	const resurrectionPassFrag = loadText("shaders/resurrectionPass.frag.glsl");
 
 	const render = regl({
 		frag: regl.prop("frag"),

js/stripePass.js

@@ -42,7 +42,7 @@ export default (regl, config, inputs) => {
 		stripeColors.slice(0, numStripeColors * 3).map((f) => Math.floor(f * 0xff))
 	);
 
-	const stripePassFrag = loadText("shaders/stripePass.frag");
+	const stripePassFrag = loadText("shaders/stripePass.frag.glsl");
 
 	const render = regl({
 		frag: regl.prop("frag"),