palette-shader 0.1.0

package/src/index.ts

@@ -0,0 +1,485 @@
+import {
+  ColorString,
+  ColorList,
+  PaletteVizOptions,
+  SupportedColorModels,
+  Axis,
+  DistanceMetric,
+} from "./types.ts";
+
+// @ts-ignore
+import shaderSRGB2RGB from "./shaders/srgb2rgb.frag.glsl?raw" assert { type: "raw" };
+// @ts-ignore
+import shaderOKLab from "./shaders/oklab.frag.glsl?raw" assert { type: "raw" };
+// @ts-ignore
+import shaderHSL2RGB from "./shaders/hsl2rgb.frag.glsl?raw" assert { type: "raw" };
+// @ts-ignore
+import shaderHSV2RGB from "./shaders/hsv2rgb.frag.glsl?raw" assert { type: "raw" };
+// @ts-ignore
+import shaderLCH2RGB from "./shaders/lch2rgb.frag.glsl?raw" assert { type: "raw" };
+// @ts-ignore
+import shaderDeltaE from "./shaders/deltaE.frag.glsl?raw" assert { type: "raw" };
+// @ts-ignore
+import shaderClosestColor from "./shaders/closestColor.frag.glsl?raw" assert { type: "raw" };
+
+// Include order matters:
+//   srgb2rgb     – srgb2rgb()
+//   oklab        – M_PI, cbrt(), srgb_transfer_function(), okhsv/okhsl_to_srgb(), …
+//   hsl2rgb, hsv2rgb, lch2rgb – color model conversions (lch2rgb uses M_PI + srgb_transfer_function)
+//   deltaE       – srgb_to_cielab(), deltaE76/94/2000() (uses srgb2rgb, cbrt, M_PI, TWO_PI)
+//   closestColor – branches on DISTANCE_METRIC define; uses everything above
+//
+// Defines (compile-time, prepended to shader source — trigger recompile, no runtime branching):
+//   DISTANCE_METRIC  int  0=rgb 1=oklab 2=deltaE76 3=deltaE2000 4=kotsarenkoRamos 5=deltaE94
+//   COLOR_MODEL      int  0=hsv 1=okhsv 2=hsl 3=okhsl 4=oklch
+//   PROGRESS_AXIS    int  0=x 1=y 2=z
+//   IS_POLAR         flag (defined = true)
+//   INVERT_Z         flag (defined = true)
+//   SHOW_RAW         flag (defined = true)
+
+const vertexShaderSrc = `
+precision highp float;
+layout(location = 0) in vec2 a_position;
+out vec2 vUv;
+void main() {
+  vUv = a_position * 0.5 + 0.5;
+  gl_Position = vec4(a_position, 0.0, 1.0);
+}`;
+
+// fragmentShader is exported so users can inspect or reuse the GLSL source.
+// Defines are NOT embedded here — they are prepended at compile time via buildProgram().
+// Note: #version 300 es is prepended by buildProgram() (must be first line,
+// before defines). Do not add it here.
+export const fragmentShader = `
+precision highp float;
+#define TWO_PI 6.28318530718
+in vec2 vUv;
+out vec4 fragColor;
+uniform float progress;
+uniform sampler2D paletteTexture;
+
+${shaderSRGB2RGB}
+${shaderOKLab}
+${shaderHSL2RGB}
+${shaderHSV2RGB}
+${shaderLCH2RGB}
+${shaderDeltaE}
+${shaderClosestColor}
+
+// COLOR_MODEL: 0=hsv, 1=okhsv, 2=hsl, 3=okhsl, 4=oklch
+vec3 polarToRGB(vec3 colorCoords) {
+  #if COLOR_MODEL == 0
+    return hsv2rgb(colorCoords);
+  #elif COLOR_MODEL == 2
+    return hsl2rgb(colorCoords);
+  #elif COLOR_MODEL == 3
+    return okhsl_to_srgb(colorCoords);
+  #elif COLOR_MODEL == 4
+    return lch2rgb(vec3(colorCoords.z, colorCoords.y, colorCoords.x));
+  #else
+    return okhsv_to_srgb(colorCoords);
+  #endif
+}
+
+void main(){
+  #if PROGRESS_AXIS == 1
+    vec3 colorCoords = vec3(vUv.x, progress, vUv.y);
+  #elif PROGRESS_AXIS == 2
+    vec3 colorCoords = vec3(vUv.x, vUv.y, 1. - progress);
+  #else
+    vec3 colorCoords = vec3(progress, vUv.x, vUv.y);
+  #endif
+
+  #ifdef IS_POLAR
+    vec2 toCenter = vUv - 0.5;
+    float angle = atan(toCenter.y, toCenter.x);
+    float radius = length(toCenter) * 2.0;
+
+    #if PROGRESS_AXIS == 2
+      colorCoords = vec3((angle / TWO_PI), radius, 1. - progress);
+    #elif PROGRESS_AXIS == 1
+      colorCoords = vec3((angle / TWO_PI), 1. - progress, radius);
+      if (radius > 1.0) { discard; }
+    #else
+      float hue = 1.0 - abs(0.5 - progress * .5) * 2.0;
+      if (vUv.x > 0.5) { hue += 0.5; }
+      colorCoords = vec3(hue, abs(0.5 - vUv.x) * 2.0, vUv.y);
+    #endif
+  #endif
+
+  #ifdef INVERT_Z
+    colorCoords.z = 1. - colorCoords.z;
+  #endif
+
+  vec3 rgb = polarToRGB(colorCoords);
+
+  #ifdef SHOW_RAW
+    fragColor = vec4(rgb, 1.);
+  #else
+    fragColor = vec4(closestColor(rgb, paletteTexture), 1.);
+  #endif
+}`;
+
+// ── Color parsing ──────────────────────────────────────────────────────────────
+// Use a canvas 2D context as a free CSS color parser — handles hex, rgb(),
+// hsl(), named colors, etc. Lazy-initialised to avoid issues at module load time.
+
+let _colorCtx: CanvasRenderingContext2D | null = null;
+
+function cssToSRGB(color: string): [number, number, number] {
+  if (!_colorCtx) {
+    const c = document.createElement("canvas");
+    c.width = c.height = 1;
+    _colorCtx = c.getContext("2d")!;
+  }
+  _colorCtx.fillStyle = "#000000"; // reset before setting
+  _colorCtx.fillStyle = color;
+  const v = _colorCtx.fillStyle; // browser normalises to '#rrggbb' or 'rgba(...)'
+  if (v[0] === "#") {
+    return [
+      parseInt(v.slice(1, 3), 16) / 255,
+      parseInt(v.slice(3, 5), 16) / 255,
+      parseInt(v.slice(5, 7), 16) / 255,
+    ];
+  }
+  // rgba(r, g, b, a) fallback
+  const m = v.match(/[\d.]+/g)!;
+  return [+m[0] / 255, +m[1] / 255, +m[2] / 255];
+}
+
+// ── Palette helpers ────────────────────────────────────────────────────────────
+
+// Returns the palette as a flat RGBA Uint8Array (sRGB, 1×N texture row).
+// Useful for building your own WebGL texture or inspecting raw color data.
+export const paletteToRGBA = (palette: ColorList): Uint8Array => {
+  const data = new Uint8Array(palette.length * 4);
+  palette.forEach((color, i) => {
+    try {
+      const [r, g, b] = cssToSRGB(color);
+      data[i * 4 + 0] = Math.round(r * 255);
+      data[i * 4 + 1] = Math.round(g * 255);
+      data[i * 4 + 2] = Math.round(b * 255);
+      data[i * 4 + 3] = 255;
+    } catch {
+      console.error(`Invalid color: ${color}`);
+    }
+  });
+  return data;
+};
+
+// Backwards-compatible alias (previously returned a Three.js DataTexture)
+export const paletteToTexture = paletteToRGBA;
+
+export const randomPalette = (size = 20): ColorList =>
+  Array.from({ length: size }, () =>
+    `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`
+  );
+
+// ── WebGL helpers ──────────────────────────────────────────────────────────────
+
+type Defines = Record<string, number | false>;
+
+function compileShader(gl: WebGL2RenderingContext, type: number, src: string): WebGLShader {
+  const shader = gl.createShader(type)!;
+  gl.shaderSource(shader, src);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    const log = gl.getShaderInfoLog(shader);
+    gl.deleteShader(shader);
+    throw new Error(`Shader compile error:\n${log}`);
+  }
+  return shader;
+}
+
+function buildProgram(gl: WebGL2RenderingContext, defines: Defines, fragSrc: string, vertSrc: string): WebGLProgram {
+  // #version 300 es must be the very first line — prepend it before defines.
+  const defineStr = Object.entries(defines)
+    .filter(([, v]) => v !== false)
+    .map(([k, v]) => `#define ${k} ${v}`)
+    .join("\n") + "\n";
+  const prefix = "#version 300 es\n" + defineStr;
+
+  const vert = compileShader(gl, gl.VERTEX_SHADER, prefix + vertSrc);
+  const frag = compileShader(gl, gl.FRAGMENT_SHADER, prefix + fragSrc);
+
+  const prog = gl.createProgram()!;
+  gl.attachShader(prog, vert);
+  gl.attachShader(prog, frag);
+  gl.linkProgram(prog);
+  gl.deleteShader(vert);
+  gl.deleteShader(frag);
+
+  if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
+    const log = gl.getProgramInfoLog(prog);
+    gl.deleteProgram(prog);
+    throw new Error(`Program link error:\n${log}`);
+  }
+  return prog;
+}
+
+function uploadPaletteTexture(gl: WebGL2RenderingContext, tex: WebGLTexture, palette: ColorList): void {
+  gl.bindTexture(gl.TEXTURE_2D, tex);
+  // RGBA8: sized internal format required by WebGL2 spec
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, palette.length, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, paletteToRGBA(palette));
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+}
+
+// ── PaletteViz ─────────────────────────────────────────────────────────────────
+
+export class PaletteViz {
+  #palette: ColorList = [];
+  #width = 512;
+  #height = 512;
+  #pixelRatio = 1;
+
+  // shader state
+  #position = 0.0;
+  #axis: Axis = "y";
+  #colorModel: SupportedColorModels = "okhsv";
+  #distanceMetric: DistanceMetric = "oklab";
+  #isPolar = true;
+  #invertLightness = false;
+  #showRaw = false;
+
+  // uniform value maps
+  readonly #axisMap           = { x: 0, y: 1, z: 2 } as const;
+  readonly #colorModelMap     = { hsv: 0, okhsv: 1, hsl: 2, okhsl: 3, oklch: 4 } as const;
+  readonly #distanceMetricMap = { rgb: 0, oklab: 1, deltaE76: 2, deltaE2000: 3, kotsarenkoRamos: 4, deltaE94: 5 } as const;
+
+  // WebGL
+  #canvas: HTMLCanvasElement;
+  #gl: WebGL2RenderingContext;
+  #program: WebGLProgram | null = null;
+  #texture: WebGLTexture | null = null;
+  #quadBuffer: WebGLBuffer | null = null;
+  #vao: WebGLVertexArrayObject | null = null;
+  #animationFrame: number | null = null;
+
+  // cached uniform locations (re-queried after each program rebuild)
+  #uProgress: WebGLUniformLocation | null = null;
+  #uPaletteTexture: WebGLUniformLocation | null = null;
+
+  // dom
+  #container: HTMLElement | undefined;
+
+  constructor({
+    palette = randomPalette(),
+    width = 512,
+    height = 512,
+    pixelRatio = window.devicePixelRatio,
+    container,
+    colorModel = "okhsv",
+    distanceMetric = "oklab",
+    isPolar = true,
+    axis = "y",
+    position = 0.0,
+    invertLightness = false,
+    showRaw = false,
+  }: PaletteVizOptions = {}) {
+    this.#palette = palette;
+    this.#width = width;
+    this.#height = height;
+    this.#pixelRatio = pixelRatio;
+    this.#colorModel = colorModel;
+    this.#distanceMetric = distanceMetric;
+    this.#isPolar = isPolar;
+    this.#axis = axis;
+    this.#position = position;
+    this.#invertLightness = invertLightness;
+    this.#showRaw = showRaw;
+    this.#container = container;
+
+    this.#canvas = document.createElement("canvas");
+    this.#canvas.classList.add("palette-viz");
+    const gl = this.#canvas.getContext("webgl2");
+    if (!gl) throw new Error("WebGL2 not supported");
+    this.#gl = gl;
+
+    // Quad buffer + VAO — set up once, reused every frame.
+    // layout(location=0) in the vertex shader pins a_position to slot 0,
+    // so the VAO remains valid across shader recompiles.
+    this.#quadBuffer = gl.createBuffer()!;
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.#quadBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);
+
+    this.#vao = gl.createVertexArray()!;
+    gl.bindVertexArray(this.#vao);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+    gl.bindVertexArray(null);
+
+    this.#texture = gl.createTexture()!;
+    uploadPaletteTexture(gl, this.#texture, this.#palette);
+
+    this.#buildProgram();
+    this.#setSize(this.#width, this.#height);
+    this.#container?.appendChild(this.#canvas);
+    this.#paint();
+  }
+
+  #defines(): Defines {
+    return {
+      DISTANCE_METRIC: this.#distanceMetricMap[this.#distanceMetric],
+      COLOR_MODEL:     this.#colorModelMap[this.#colorModel],
+      PROGRESS_AXIS:   this.#axisMap[this.#axis],
+      IS_POLAR:        this.#isPolar ? 1 : false,
+      INVERT_Z:        this.#invertLightness ? 1 : false,
+      SHOW_RAW:        this.#showRaw ? 1 : false,
+    };
+  }
+
+  #buildProgram(): void {
+    const gl = this.#gl;
+    if (this.#program) gl.deleteProgram(this.#program);
+    this.#program = buildProgram(gl, this.#defines(), fragmentShader, vertexShaderSrc);
+    this.#uProgress       = gl.getUniformLocation(this.#program, "progress");
+    this.#uPaletteTexture = gl.getUniformLocation(this.#program, "paletteTexture");
+  }
+
+  #setSize(w: number, h: number): void {
+    const pw = Math.round(w * this.#pixelRatio);
+    const ph = Math.round(h * this.#pixelRatio);
+    this.#canvas.width = pw;
+    this.#canvas.height = ph;
+    this.#canvas.style.width = `${w}px`;
+    this.#canvas.style.height = `${h}px`;
+    this.#gl.viewport(0, 0, pw, ph);
+  }
+
+  #paint(): void {
+    if (this.#animationFrame !== null) cancelAnimationFrame(this.#animationFrame);
+    this.#animationFrame = requestAnimationFrame(() => {
+      const gl = this.#gl;
+      gl.useProgram(this.#program);
+
+      gl.uniform1f(this.#uProgress, this.#position);
+
+      gl.activeTexture(gl.TEXTURE0);
+      gl.bindTexture(gl.TEXTURE_2D, this.#texture);
+      gl.uniform1i(this.#uPaletteTexture, 0);
+
+      gl.bindVertexArray(this.#vao);
+      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+      gl.bindVertexArray(null);
+    });
+  }
+
+  // ── Public API ──────────────────────────────────────────────────────────────
+
+  get canvas(): HTMLCanvasElement { return this.#canvas; }
+  get width()  { return this.#width; }
+  get height() { return this.#height; }
+
+  resize(width: number, height: number | null = null): void {
+    this.#width  = width;
+    this.#height = height ?? width;
+    this.#setSize(this.#width, this.#height);
+    this.#paint();
+  }
+
+  destroy(): void {
+    if (this.#animationFrame !== null) {
+      cancelAnimationFrame(this.#animationFrame);
+      this.#animationFrame = null;
+    }
+    const gl = this.#gl;
+    gl.deleteProgram(this.#program);
+    gl.deleteTexture(this.#texture);
+    gl.deleteBuffer(this.#quadBuffer);
+    gl.deleteVertexArray(this.#vao);
+    this.#canvas.remove();
+    gl.getExtension("WEBGL_lose_context")?.loseContext();
+  }
+
+  // ── Palette ─────────────────────────────────────────────────────────────────
+
+  set palette(palette: ColorList) {
+    this.#palette = palette;
+    uploadPaletteTexture(this.#gl, this.#texture!, palette);
+    this.#paint();
+  }
+  get palette() { return this.#palette; }
+
+  setColor(color: ColorString, index: number): void {
+    if (index < 0 || index >= this.#palette.length) throw new Error(`Index ${index} out of range`);
+    this.#palette[index] = color;
+    uploadPaletteTexture(this.#gl, this.#texture!, this.#palette);
+    this.#paint();
+  }
+
+  addColor(color: ColorString, index?: number): void {
+    this.#palette.splice(index ?? this.#palette.length, 0, color);
+    uploadPaletteTexture(this.#gl, this.#texture!, this.#palette);
+    this.#paint();
+  }
+
+  removeColor(index: number): void;
+  removeColor(color: ColorString): void;
+  removeColor(indexOrColor: number | ColorString): void {
+    const index = typeof indexOrColor === "number"
+      ? indexOrColor
+      : this.#palette.indexOf(indexOrColor);
+    if (index === -1) throw new Error("Color not found in palette");
+    if (index < 0 || index >= this.#palette.length) throw new Error(`Index ${index} out of range`);
+    this.#palette.splice(index, 1);
+    uploadPaletteTexture(this.#gl, this.#texture!, this.#palette);
+    this.#paint();
+  }
+
+  // ── Shader properties ────────────────────────────────────────────────────────
+
+  set position(value: number) { this.#position = value; this.#paint(); }
+  get position() { return this.#position; }
+
+  set axis(axis: Axis) {
+    if (!(axis in this.#axisMap)) throw new Error("axis must be 'x', 'y', or 'z'");
+    this.#axis = axis;
+    this.#buildProgram();
+    this.#paint();
+  }
+  get axis() { return this.#axis; }
+
+  set colorModel(model: SupportedColorModels) {
+    if (!(model in this.#colorModelMap)) throw new Error("colorModel must be 'hsv', 'okhsv', 'hsl', 'okhsl', or 'oklch'");
+    this.#colorModel = model;
+    this.#buildProgram();
+    this.#paint();
+  }
+  get colorModel() { return this.#colorModel; }
+
+  set distanceMetric(metric: DistanceMetric) {
+    if (!(metric in this.#distanceMetricMap)) throw new Error("distanceMetric must be 'rgb', 'oklab', 'deltaE76', 'deltaE94', 'deltaE2000', or 'kotsarenkoRamos'");
+    this.#distanceMetric = metric;
+    this.#buildProgram();
+    this.#paint();
+  }
+  get distanceMetric() { return this.#distanceMetric; }
+
+  set isPolar(value: boolean) {
+    this.#isPolar = value;
+    this.#buildProgram();
+    this.#paint();
+  }
+  get isPolar() { return this.#isPolar; }
+
+  set invertLightness(value: boolean) {
+    this.#invertLightness = value;
+    this.#buildProgram();
+    this.#paint();
+  }
+  get invertLightness() { return this.#invertLightness; }
+
+  set showRaw(value: boolean) {
+    this.#showRaw = value;
+    this.#buildProgram();
+    this.#paint();
+  }
+  get showRaw() { return this.#showRaw; }
+
+  static paletteToRGBA = paletteToRGBA;
+  /** @deprecated use PaletteViz.paletteToRGBA */
+  static paletteToTexture = paletteToRGBA;
+}

package/src/shaders/closestColor.frag.glsl

@@ -0,0 +1,41 @@
+// DISTANCE_METRIC define: 0=rgb, 1=oklab, 2=deltaE76, 3=deltaE2000, 4=kotsarenkoRamos, 5=deltaE94
+vec3 closestColor(vec3 color, sampler2D paletteTexture) {
+  int paletteSize = textureSize(paletteTexture, 0).x;
+  float minDist = 1000000.0;
+  vec3 closest = vec3(0.0);
+
+  // Pre-convert the input color once — palette entries are converted inside the loop.
+  #if DISTANCE_METRIC == 1
+    vec3 colorConverted = linear_srgb_to_oklab(srgb2rgb(color));
+  #elif DISTANCE_METRIC == 2 || DISTANCE_METRIC == 3 || DISTANCE_METRIC == 5
+    vec3 colorConverted = srgb_to_cielab(color);
+  #else
+    vec3 colorConverted = color;
+  #endif
+
+  for (int i = 0; i < paletteSize; i++) {
+    vec3 paletteColor = texelFetch(paletteTexture, ivec2(i, 0), 0).rgb;
+
+    float dist;
+    #if DISTANCE_METRIC == 1
+      dist = distance(colorConverted, linear_srgb_to_oklab(srgb2rgb(paletteColor)));
+    #elif DISTANCE_METRIC == 2
+      dist = deltaE76(colorConverted, srgb_to_cielab(paletteColor));
+    #elif DISTANCE_METRIC == 3
+      dist = deltaE2000(colorConverted, srgb_to_cielab(paletteColor));
+    #elif DISTANCE_METRIC == 4
+      dist = kotsarenkoRamos(color, paletteColor);
+    #elif DISTANCE_METRIC == 5
+      dist = deltaE94(colorConverted, srgb_to_cielab(paletteColor));
+    #else
+      dist = distance(colorConverted, paletteColor);
+    #endif
+
+    if (dist < minDist) {
+      minDist = dist;
+      closest = paletteColor;
+    }
+  }
+
+  return closest;
+}

package/src/shaders/deltaE.frag.glsl

@@ -0,0 +1,146 @@
+// Kotsarenko/Ramos weighted RGB distance.
+// Operates on sRGB values directly (no linearisation needed).
+// Weights red and blue channels by the mean red value, which improves
+// perceptual uniformity compared to plain Euclidean RGB at minimal cost.
+float kotsarenkoRamos(vec3 c1, vec3 c2) {
+    float rMean = (c1.r + c2.r) * 0.5;
+    vec3 d = c1 - c2;
+    return sqrt((2.0 + rMean) * d.r*d.r + 4.0 * d.g*d.g + (3.0 - rMean) * d.b*d.b);
+}
+
+// ── CIELab ────────────────────────────────────────────────────────────────────
+// sRGB -> XYZ (D65) -> CIELab
+// Depends on: srgb2rgb() from srgb2rgb.frag.glsl, cbrt() from oklab.frag.glsl
+
+float _lab_f(float t) {
+    float delta = 6.0 / 29.0;
+    return t > delta * delta * delta
+        ? cbrt(t)
+        : t / (3.0 * delta * delta) + 4.0 / 29.0;
+}
+
+vec3 srgb_to_cielab(vec3 srgb) {
+    vec3 lin = srgb2rgb(srgb);
+
+    // Linear sRGB -> XYZ (D65 illuminant)
+    vec3 xyz = vec3(
+        0.4124564 * lin.r + 0.3575761 * lin.g + 0.1804375 * lin.b,
+        0.2126729 * lin.r + 0.7151522 * lin.g + 0.0721750 * lin.b,
+        0.0193339 * lin.r + 0.1191920 * lin.g + 0.9503041 * lin.b
+    );
+
+    // XYZ -> Lab (D65 white point: 0.95047, 1.00000, 1.08883)
+    float fx = _lab_f(xyz.x / 0.95047);
+    float fy = _lab_f(xyz.y);
+    float fz = _lab_f(xyz.z / 1.08883);
+
+    return vec3(
+        116.0 * fy - 16.0,   // L*
+        500.0 * (fx - fy),   // a*
+        200.0 * (fy - fz)    // b*
+    );
+}
+
+// CIE76: plain Euclidean distance in CIELab
+float deltaE76(vec3 lab1, vec3 lab2) {
+    return distance(lab1, lab2);
+}
+
+// CIE94: weighted chroma/hue corrections, cheaper than CIEDE2000
+// Uses graphics application constants: kL=1, K1=0.045, K2=0.015
+float deltaE94(vec3 lab1, vec3 lab2) {
+    float dL = lab1.x - lab2.x;
+    float da = lab1.y - lab2.y;
+    float db = lab1.z - lab2.z;
+    float C1 = sqrt(lab1.y * lab1.y + lab1.z * lab1.z);
+    float C2 = sqrt(lab2.y * lab2.y + lab2.z * lab2.z);
+    float dC = C1 - C2;
+    float dH = sqrt(max(0.0, da*da + db*db - dC*dC));
+    float SC = 1.0 + 0.045 * C1;
+    float SH = 1.0 + 0.015 * C1;
+    return sqrt(dL*dL + (dC/SC)*(dC/SC) + (dH/SH)*(dH/SH));
+}
+
+// CIEDE2000
+float deltaE2000(vec3 lab1, vec3 lab2) {
+    float L1 = lab1.x, a1 = lab1.y, b1 = lab1.z;
+    float L2 = lab2.x, a2 = lab2.y, b2 = lab2.z;
+
+    // Chroma
+    float C1 = sqrt(a1*a1 + b1*b1);
+    float C2 = sqrt(a2*a2 + b2*b2);
+    float Cavg = (C1 + C2) * 0.5;
+    float Cavg7 = pow(Cavg, 7.0);
+
+    // G factor: adjustment to a* axis
+    float G = 0.5 * (1.0 - sqrt(Cavg7 / (Cavg7 + 6103515625.0))); // 25^7
+
+    float a1p = a1 * (1.0 + G);
+    float a2p = a2 * (1.0 + G);
+    float C1p = sqrt(a1p*a1p + b1*b1);
+    float C2p = sqrt(a2p*a2p + b2*b2);
+
+    // Guard atan(0,0): GLSL ES leaves that undefined, so skip it for achromatic colors.
+    // When a color has no chroma its hue angle is meaningless — we just need it to
+    // be a well-defined number so it doesn't corrupt the rest of the formula.
+    bool c1Achromatic = C1p < 1e-6;
+    bool c2Achromatic = C2p < 1e-6;
+
+    float h1p = c1Achromatic ? 0.0 : atan(b1, a1p);
+    if (h1p < 0.0) h1p += TWO_PI;
+    float h2p = c2Achromatic ? 0.0 : atan(b2, a2p);
+    if (h2p < 0.0) h2p += TWO_PI;
+
+    // Deltas
+    float dLp = L2 - L1;
+    float dCp = C2p - C1p;
+
+    float dhp = 0.0;
+    if (!c1Achromatic && !c2Achromatic) {
+        dhp = h2p - h1p;
+        if      (dhp >  M_PI) dhp -= TWO_PI;
+        else if (dhp < -M_PI) dhp += TWO_PI;
+    }
+    float dHp = 2.0 * sqrt(C1p * C2p) * sin(dhp * 0.5);
+
+    // Averages
+    float Lp = (L1 + L2) * 0.5;
+    float Cp = (C1p + C2p) * 0.5;
+
+    // When one color is achromatic, its hue is 0 and the average is simply the other's hue
+    float hp;
+    if (c1Achromatic || c2Achromatic) {
+        hp = h1p + h2p;
+    } else if (abs(h1p - h2p) <= M_PI) {
+        hp = (h1p + h2p) * 0.5;
+    } else if (h1p + h2p < TWO_PI) {
+        hp = (h1p + h2p + TWO_PI) * 0.5;
+    } else {
+        hp = (h1p + h2p - TWO_PI) * 0.5;
+    }
+
+    float T = 1.0
+        - 0.17 * cos(hp - radians(30.0))
+        + 0.24 * cos(2.0 * hp)
+        + 0.32 * cos(3.0 * hp + radians(6.0))
+        - 0.20 * cos(4.0 * hp - radians(63.0));
+
+    // Weighting functions
+    float Lpm50sq = (Lp - 50.0) * (Lp - 50.0);
+    float SL = 1.0 + 0.015 * Lpm50sq / sqrt(20.0 + Lpm50sq);
+    float SC = 1.0 + 0.045 * Cp;
+    float SH = 1.0 + 0.015 * Cp * T;
+
+    // Rotation term
+    float Cp7 = pow(Cp, 7.0);
+    float RC = 2.0 * sqrt(Cp7 / (Cp7 + 6103515625.0));
+    float hpDeg = degrees(hp);
+    float dTheta = radians(30.0) * exp(-((hpDeg - 275.0) / 25.0) * ((hpDeg - 275.0) / 25.0));
+    float RT = -sin(2.0 * dTheta) * RC;
+
+    float dLn = dLp / SL;
+    float dCn = dCp / SC;
+    float dHn = dHp / SH;
+
+    return sqrt(dLn*dLn + dCn*dCn + dHn*dHn + RT * dCn * dHn);
+}

package/src/shaders/hsl2rgb.frag.glsl

@@ -0,0 +1,4 @@
+vec3 hsl2rgb( in vec3 c ) {
+  vec3 rgb = clamp( abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0, 0.0, 1.0 );
+  return c.z + c.y * (rgb-0.5)*(1.0-abs(2.0*c.z-1.0));
+}

package/src/shaders/hsv2rgb.frag.glsl

@@ -0,0 +1,5 @@
+vec3 hsv2rgb(vec3 c) {
+  vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
+  vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
+  return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
+}