Rearranging the shaders and scripts to hopefully make the project easier to work on

js/main.js

@@ -1,6 +1,6 @@
 import makeConfig from "./config.js";
-import initWebGPU from "./webgpu_main.js";
-import initREGL from "./regl_main.js";
+import initWebGPU from "./webgpu/main.js";
+import initREGL from "./regl/main.js";
 
 const canvas = document.createElement("canvas");
 document.body.appendChild(canvas);

js/regl/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.glsl");
+	const highPassFrag = loadText("shaders/glsl/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.glsl");
+	const blurFrag = loadText("shaders/glsl/blur.frag.glsl");
 	const blur = regl({
 		frag: regl.prop("frag"),
 		uniforms: {

js/regl/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.glsl");
+	const imagePassFrag = loadText("shaders/glsl/imagePass.frag.glsl");
 	const render = regl({
 		frag: regl.prop("frag"),
 		uniforms: {

js/regl/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.glsl");
+	const palettePassFrag = loadText("shaders/glsl/palettePass.frag.glsl");
 
 	const render = regl({
 		frag: regl.prop("frag"),

js/regl/rainPass.js

@@ -59,7 +59,7 @@ export default (regl, config) => {
 		wrapT: "clamp",
 		type: "half float",
 	});
-	const rainPassCompute = loadText("shaders/rainPass.compute.frag.glsl");
+	const rainPassCompute = loadText("shaders/glsl/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.glsl");
-	const rainPassFrag = loadText("shaders/rainPass.frag.glsl");
+	const rainPassVert = loadText("shaders/glsl/rainPass.vert.glsl");
+	const rainPassFrag = loadText("shaders/glsl/rainPass.frag.glsl");
 	const output = makePassFBO(regl, config.useHalfFloat);
 	const renderUniforms = {
 		...commonUniforms,

js/regl/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.glsl");
+	const resurrectionPassFrag = loadText("shaders/glsl/resurrectionPass.frag.glsl");
 
 	const render = regl({
 		frag: regl.prop("frag"),

js/regl/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.glsl");
+	const stripePassFrag = loadText("shaders/glsl/stripePass.frag.glsl");
 
 	const render = regl({
 		frag: regl.prop("frag"),

js/webgpu/main.js

@@ -122,7 +122,7 @@ export default async (canvas, config) => {
 	};
 	updateCameraBuffer();
 
-	const [rainRenderShader] = await Promise.all(["shaders/rainRenderPass.wgsl"].map(async (path) => (await fetch(path)).text()));
+	const [rainRenderShader] = await Promise.all(["shaders/wgsl/rainRenderPass.wgsl"].map(async (path) => (await fetch(path)).text()));
 
 	const rainRenderShaderModule = device.createShaderModule({ code: rainRenderShader });