diff --git a/js/main.js b/js/main.js
index 468e338..dde8c45 100644
--- a/js/main.js
+++ b/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);
diff --git a/js/bloomPass.js b/js/regl/bloomPass.js
similarity index 96%
rename from js/bloomPass.js
rename to js/regl/bloomPass.js
index 3730a4a..6cdcece 100644
--- a/js/bloomPass.js
+++ b/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: {
diff --git a/js/imagePass.js b/js/regl/imagePass.js
similarity index 91%
rename from js/imagePass.js
rename to js/regl/imagePass.js
index dd94b6f..66c9c5c 100644
--- a/js/imagePass.js
+++ b/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: {
diff --git a/js/regl_main.js b/js/regl/main.js
similarity index 100%
rename from js/regl_main.js
rename to js/regl/main.js
diff --git a/js/palettePass.js b/js/regl/palettePass.js
similarity index 97%
rename from js/palettePass.js
rename to js/regl/palettePass.js
index c14f8d1..64d0a78 100644
--- a/js/palettePass.js
+++ b/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"),
diff --git a/js/rainPass.js b/js/regl/rainPass.js
similarity index 96%
rename from js/rainPass.js
rename to js/regl/rainPass.js
index fd4f79e..ccc6226 100644
--- a/js/rainPass.js
+++ b/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,
diff --git a/js/resurrectionPass.js b/js/regl/resurrectionPass.js
similarity index 91%
rename from js/resurrectionPass.js
rename to js/regl/resurrectionPass.js
index 7667ce8..cb5d9ee 100644
--- a/js/resurrectionPass.js
+++ b/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"),
diff --git a/js/stripePass.js b/js/regl/stripePass.js
similarity index 95%
rename from js/stripePass.js
rename to js/regl/stripePass.js
index 8616b55..da10505 100644
--- a/js/stripePass.js
+++ b/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"),
diff --git a/js/utils.js b/js/regl/utils.js
similarity index 100%
rename from js/utils.js
rename to js/regl/utils.js
diff --git a/js/webgpu_main.js b/js/webgpu/main.js
similarity index 97%
rename from js/webgpu_main.js
rename to js/webgpu/main.js
index 585fac4..0a24942 100644
--- a/js/webgpu_main.js
+++ b/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 });
 
diff --git a/js/std140.js b/js/webgpu/std140.js
similarity index 100%
rename from js/std140.js
rename to js/webgpu/std140.js
diff --git a/shaders/blur.frag.glsl b/shaders/glsl/blur.frag.glsl
similarity index 100%
rename from shaders/blur.frag.glsl
rename to shaders/glsl/blur.frag.glsl
diff --git a/shaders/highPass.frag.glsl b/shaders/glsl/highPass.frag.glsl
similarity index 100%
rename from shaders/highPass.frag.glsl
rename to shaders/glsl/highPass.frag.glsl
diff --git a/shaders/imagePass.frag.glsl b/shaders/glsl/imagePass.frag.glsl
similarity index 100%
rename from shaders/imagePass.frag.glsl
rename to shaders/glsl/imagePass.frag.glsl
diff --git a/shaders/palettePass.frag.glsl b/shaders/glsl/palettePass.frag.glsl
similarity index 100%
rename from shaders/palettePass.frag.glsl
rename to shaders/glsl/palettePass.frag.glsl
diff --git a/shaders/rainPass.compute.frag.glsl b/shaders/glsl/rainPass.compute.frag.glsl
similarity index 100%
rename from shaders/rainPass.compute.frag.glsl
rename to shaders/glsl/rainPass.compute.frag.glsl
diff --git a/shaders/rainPass.frag.glsl b/shaders/glsl/rainPass.frag.glsl
similarity index 100%
rename from shaders/rainPass.frag.glsl
rename to shaders/glsl/rainPass.frag.glsl
diff --git a/shaders/rainPass.vert.glsl b/shaders/glsl/rainPass.vert.glsl
similarity index 100%
rename from shaders/rainPass.vert.glsl
rename to shaders/glsl/rainPass.vert.glsl
diff --git a/shaders/resurrectionPass.frag.glsl b/shaders/glsl/resurrectionPass.frag.glsl
similarity index 100%
rename from shaders/resurrectionPass.frag.glsl
rename to shaders/glsl/resurrectionPass.frag.glsl
diff --git a/shaders/stripePass.frag.glsl b/shaders/glsl/stripePass.frag.glsl
similarity index 100%
rename from shaders/stripePass.frag.glsl
rename to shaders/glsl/stripePass.frag.glsl
diff --git a/shaders/rainRenderPass.wgsl b/shaders/wgsl/rainRenderPass.wgsl
similarity index 100%
rename from shaders/rainRenderPass.wgsl
rename to shaders/wgsl/rainRenderPass.wgsl