matrix/js/palettePass.js

import { extractEntries, make1DTexture, makePassFBO, makePass } from "./utils.js";

const colorToRGB = ([hue, saturation, lightness]) => {
  const a = saturation * Math.min(lightness, 1 - lightness);
  const f = (n) => {
    const k = (n + hue * 12) % 12;
    return lightness - a * Math.max(-1, Math.min(k - 3, 9 - k, 1));
  };
  return [f(0), f(8), f(4)];
};

const makePalette = (regl, entries) => {
  const PALETTE_SIZE = 2048;
  const paletteColors = Array(PALETTE_SIZE);
  const sortedEntries = entries
    .slice()
    .sort((e1, e2) => e1.at - e2.at)
    .map(entry => ({
      rgb: colorToRGB(entry.hsl),
      arrayIndex: Math.floor(
        Math.max(Math.min(1, entry.at), 0) * (PALETTE_SIZE - 1)
      )
    }));
  sortedEntries.unshift({ rgb: sortedEntries[0].rgb, arrayIndex: 0 });
  sortedEntries.push({
    rgb: sortedEntries[sortedEntries.length - 1].rgb,
    arrayIndex: PALETTE_SIZE - 1
  });
  sortedEntries.forEach((entry, index) => {
    paletteColors[entry.arrayIndex] = entry.rgb.slice();
    if (index + 1 < sortedEntries.length) {
      const nextEntry = sortedEntries[index + 1];
      const diff = nextEntry.arrayIndex - entry.arrayIndex;
      for (let i = 0; i < diff; i++) {
        const ratio = i / diff;
        paletteColors[entry.arrayIndex + i] = [
          entry.rgb[0] * (1 - ratio) + nextEntry.rgb[0] * ratio,
          entry.rgb[1] * (1 - ratio) + nextEntry.rgb[1] * ratio,
          entry.rgb[2] * (1 - ratio) + nextEntry.rgb[2] * ratio
        ];
      }
    }
  });

  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, config.useHalfFloat);
  const palette = makePalette(regl, config.paletteEntries);

  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
    })
  );
};