Renaming renderer to rainPass, renaming its shaders, and cleaning up the main code a little.

js/main.js

@@ -1,6 +1,6 @@
 import { makeFullScreenQuad, makePipeline } from "./utils.js";
 import makeConfig from "./config.js";
-import makeMatrixRenderer from "./renderer.js";
+import makeRain from "./rainPass.js";
 import makeBloomPass from "./bloomPass.js";
 import makePalettePass from "./palettePass.js";
 import makeStripePass from "./stripePass.js";
@@ -49,12 +49,11 @@ const dimensions = { width: 1, height: 1 };
 document.body.onload = async () => {
 	// All this takes place in a full screen quad.
 	const fullScreenQuad = makeFullScreenQuad(regl);
-	const pipeline = makePipeline([makeMatrixRenderer, effect === "none" ? null : makeBloomPass, effects[effect]], (p) => p.outputs, regl, config);
-	const drawToScreen = regl({
-		uniforms: {
-			tex: pipeline[pipeline.length - 1].outputs.primary,
-		},
-	});
+
+	const bloomPass = effect === "none" ? null : makeBloomPass;
+	const pipeline = makePipeline([makeRain, bloomPass, effects[effect]], (p) => p.outputs, regl, config);
+	const uniforms = { tex: pipeline[pipeline.length - 1].outputs.primary };
+	const drawToScreen = regl({ uniforms });
 	await Promise.all(pipeline.map(({ ready }) => ready));
 	const tick = regl.frame(({ viewportWidth, viewportHeight }) => {
 		// tick.cancel();

js/rainPass.js

@@ -35,10 +35,10 @@ export default (regl, config) => {
 
 	const uniforms = {
 		...extractEntries(config, [
-			// rain general
+			// general
 			"glyphHeightToWidth",
 			"glyphTextureColumns",
-			// rain update
+			// compute
 			"animationSpeed",
 			"brightnessMinimum",
 			"brightnessMix",
@@ -55,9 +55,9 @@ export default (regl, config) => {
 			"rippleSpeed",
 			"rippleThickness",
 			"resurrectingCodeRatio",
-			// rain render vertex
+			// render vertex
 			"forwardSpeed",
-			// rain render fragment
+			// render fragment
 			"glyphEdgeCrop",
 			"isPolar",
 		]),
@@ -94,7 +94,7 @@ export default (regl, config) => {
 
 	const output = makePassFBO(regl, config.useHalfFloat);
 
-	const updateFrag = loadText("../shaders/update.frag");
+	const updateFrag = loadText("../shaders/compute.frag");
 	const update = regl({
 		frag: regl.prop("frag"),
 		uniforms: {
@@ -114,8 +114,8 @@ export default (regl, config) => {
 		);
 
 	// We render the code into an FBO using MSDFs: https://github.com/Chlumsky/msdfgen
-	const renderVert = loadText("../shaders/render.vert");
-	const renderFrag = loadText("../shaders/render.frag");
+	const renderVert = loadText("../shaders/rain.vert");
+	const renderFrag = loadText("../shaders/rain.frag");
 	const render = regl({
 		blend: {
 			enable: true,