Pushed virtually all the shader source into shader files that load as assets.

js/palettePass.js

@@ -1,4 +1,4 @@
-import { extractEntries, make1DTexture, makePassFBO, makePass } from "./utils.js";
+import { loadText, extractEntries, make1DTexture, makePassFBO, makePass } from "./utils.js";
 
 const colorToRGB = ([hue, saturation, lightness]) => {
   const a = saturation * Math.min(lightness, 1 - lightness);
@@ -58,47 +58,29 @@ export default (regl, config, inputs) => {
   const output = makePassFBO(regl, config.useHalfFloat);
   const palette = makePalette(regl, config.paletteEntries);
 
+  const palettePassFrag = loadText("../shaders/palettePass.frag");
+
+  const render = regl({
+    frag: regl.prop("frag"),
+
+    uniforms: {
+      ...extractEntries(config, [
+        "backgroundColor",
+      ]),
+      tex: inputs.primary,
+      bloomTex: inputs.bloom,
+      palette,
+      ditherMagnitude: 0.05
+    },
+    framebuffer: output
+  });
+
   return makePass(
     {
       primary: output
     },
-    regl({
-      frag: `
-      precision mediump float;
-      #define PI 3.14159265359
-
-      uniform sampler2D tex;
-      uniform sampler2D bloomTex;
-      uniform sampler2D palette;
-      uniform float ditherMagnitude;
-      uniform float time;
-      uniform vec3 backgroundColor;
-      varying vec2 vUV;
-
-      highp float rand( const in vec2 uv, const in float t ) {
-        const highp float a = 12.9898, b = 78.233, c = 43758.5453;
-        highp float dt = dot( uv.xy, vec2( a,b ) ), sn = mod( dt, PI );
-        return fract(sin(sn) * c + t);
-      }
-
-      void main() {
-        vec4 brightnessRGB = texture2D( tex, vUV ) + texture2D( bloomTex, vUV );
-        float brightness = brightnessRGB.r + brightnessRGB.g + brightnessRGB.b;
-        float at = brightness - rand( gl_FragCoord.xy, time ) * ditherMagnitude;
-        gl_FragColor = texture2D( palette, vec2(at, 0.0)) + vec4(backgroundColor, 0.0);
-      }
-    `,
-
-      uniforms: {
-        ...extractEntries(config, [
-          "backgroundColor",
-        ]),
-        tex: inputs.primary,
-        bloomTex: inputs.bloom,
-        palette,
-        ditherMagnitude: 0.05
-      },
-      framebuffer: output
-    })
+    () => render({ frag: palettePassFrag.text() }),
+    null,
+    palettePassFrag.loaded
   );
 };