Experimenting with a more expensive bloom.

TODO.txt

@@ -5,6 +5,8 @@ Experiment with varying the colors in the palette pass
   Maybe dim and widen the bloom
   Just make sure the changes to non-default configurations are acceptable
 
+  Maybe try and accomplish the effect in Photoshop, to get a sense of what's going on
+
 Deja vu effect: flashing rows
   Make them flash all the time
   Then use a thunder-like pattern to show and hide the flash

js/bloomPass.js

@@ -69,6 +69,16 @@ export default (regl, config, inputs) => {
             texture2D(tex, vUV + direction / max(width, height) * size) +
             texture2D(tex, vUV - direction / max(width, height) * size)
           ) * 0.279;
+        // gl_FragColor =
+        //   texture2D(tex, vUV) * 0.38774 +
+        //   (
+        //     texture2D(tex, vUV + direction / max(width, height) * size * 0.5) +
+        //     texture2D(tex, vUV - direction / max(width, height) * size * 0.5)
+        //   ) * 0.24477 +
+        //   (
+        //     texture2D(tex, vUV + direction / max(width, height) * size) +
+        //     texture2D(tex, vUV - direction / max(width, height) * size)
+        //   ) * 0.06136;
       }
     `,
     uniforms: {

js/palettePass.js

@@ -1,17 +1,9 @@
 import { make1DTexture, makePassFBO, makePass } from "./utils.js";
 
-// The rendered texture's values are mapped to colors in a palette texture.
-// A little noise is introduced, to hide the banding that appears
-// in subtle gradients. The noise is also time-driven, so its grain
-// won't persist across subsequent frames. This is a safe trick
-// in screen space.
-
-export default (regl, config, inputs) => {
-  const output = makePassFBO(regl);
-
+const makePalette = (regl, entries) => {
   const PALETTE_SIZE = 2048;
   const paletteColors = Array(PALETTE_SIZE);
-  const sortedEntries = config.paletteEntries
+  const sortedEntries = entries
     .slice()
     .sort((e1, e2) => e1.at - e2.at)
     .map(entry => ({
@@ -41,10 +33,21 @@ export default (regl, config, inputs) => {
     }
   });
 
-  const palette = make1DTexture(
+  return make1DTexture(
     regl,
     paletteColors.flat().map(i => i * 0xff)
   );
+};
+
+// The rendered texture's values are mapped to colors in a palette texture.
+// A little noise is introduced, to hide the banding that appears
+// in subtle gradients. The noise is also time-driven, so its grain
+// won't persist across subsequent frames. This is a safe trick
+// in screen space.
+
+export default (regl, config, inputs) => {
+  const output = makePassFBO(regl);
+  const palette = makePalette(regl, config.paletteEntries);
 
   return makePass(
     {