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

js/stripePass.js

@@ -1,4 +1,4 @@
-import { extractEntries, make1DTexture, makePassFBO, makePass } from "./utils.js";
+import { loadText, extractEntries, make1DTexture, makePassFBO, makePass } from "./utils.js";
 
 const neapolitanStripeColors = [
   [0.4, 0.15, 0.1],
@@ -33,47 +33,29 @@ export default (regl, config, inputs) => {
     stripeColors.slice(0, numStripeColors * 3).map(f => Math.floor(f * 0xff))
   );
 
+  const stripePassFrag = loadText("../shaders/stripePass.frag");
+
+  const render = regl({
+    frag: regl.prop("frag"),
+
+    uniforms: {
+      ...extractEntries(config, [
+        "backgroundColor",
+      ]),
+      tex: inputs.primary,
+      bloomTex: inputs.bloom,
+      stripes,
+      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 stripes;
-      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() {
-        vec3 color = texture2D(stripes, vUV).rgb;
-        float brightness = min(1., texture2D(tex, vUV).r * 2.) + texture2D(bloomTex, vUV).r;
-        float at = brightness - rand( gl_FragCoord.xy, time ) * ditherMagnitude;
-        gl_FragColor = vec4(color * at + backgroundColor, 1.0);
-      }
-    `,
-
-      uniforms: {
-        ...extractEntries(config, [
-          "backgroundColor",
-        ]),
-        tex: inputs.primary,
-        bloomTex: inputs.bloom,
-        stripes,
-        ditherMagnitude: 0.05
-      },
-      framebuffer: output
-    })
+    () => render({frag: stripePassFrag.text()}),
+    null,
+    stripePassFrag.loaded
   );
 };