@colordx/gpu 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Dmitrii Kriaklin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,125 @@
+# @colordx/gpu
+
+[![npm version](https://img.shields.io/npm/v/@colordx/gpu?labelColor=764be5&color=ffc200)](https://www.npmjs.com/package/@colordx/gpu)
+[![bundle size](https://img.shields.io/bundlejs/size/@colordx/gpu?labelColor=764be5&color=ffc200)](https://bundlejs.com/?q=@colordx/gpu)
+[![zero dependencies](https://img.shields.io/badge/dependencies-0-ffc200?labelColor=764be5)](https://github.com/dkryaklin/colordx-gpu/blob/main/package.json)
+[![MIT license](https://img.shields.io/badge/license-MIT-ffc200?labelColor=764be5)](https://github.com/dkryaklin/colordx-gpu/blob/main/LICENSE)
+
+GPU companion for [**@colordx/core**](https://github.com/dkryaklin/colordx) — renders OKLCH / CIE LCH gamut-slice charts in a single WebGL2 draw call, with sRGB / Display-P3 / Rec.2020 classification and crisp gamut-boundary lines. The shader math is generated from colordx's own constants, so the GPU renders exactly the colors the library computes.
+
+A full chart repaint — every pixel converted from OKLCH, classified against three gamuts, boundary lines drawn — takes **well under a millisecond** on the GPU. The same work on the CPU costs tens of milliseconds across a whole worker pool. That turns "repaint after the slider settles" into "repaint every frame while dragging", and removes pixel count as a constraint: charts can be fullscreen.
+
+## Performance
+
+Measured in the [oklch-picker](https://github.com/evilmartians/oklch-picker) integration (three charts, full repaint on a component change), using the picker's built-in `?bench` overlay. Headless Chrome with software GL — real GPUs are faster still:
+
+| | Chart paint | Worker time |
+|---|---|---|
+| **@colordx/gpu** | **~5 ms** | — (single main-thread draw, ~1 ms submit) |
+| CPU worker pool | 30 ms (warm) – 950 ms (cold) | 30–930 ms across all cores |
+
+## Install
+
+```bash
+npm install @colordx/gpu
+```
+
+No runtime dependencies. `@colordx/core` is not required at runtime — the relevant math is baked into the generated shader and verified against the library by the test suite.
+
+## Quick start
+
+```js
+import { createChartRenderer } from '@colordx/gpu';
+
+const renderer = createChartRenderer(canvas, { model: 'oklch' });
+if (!renderer) {
+  // WebGL2 unavailable — fall back to your CPU painting path.
+}
+
+renderer.paint({
+  plane: 'cl',            // x: lightness, y: chroma, fixed hue
+  value: 264,             // the fixed component (hue here)
+  xMax: 1,                // lightness at the right edge
+  yMax: 0.37,             // chroma at the top edge
+  showP3: true,
+  showRec2020: false,
+  borderP3: [1, 1, 1, 1],         // RGBA 0–1 for the sRGB↔P3 line
+  borderRec2020: [1, 1, 1, 1],    // RGBA 0–1 for the P3↔Rec2020 line
+  p3Output: true,         // encode for a display-p3 drawing buffer
+});
+```
+
+Each `paint()` is one full-canvas draw — call it as often as you like (every frame during a slider drag is fine).
+
+## API
+
+### `createChartRenderer(canvas, options?)`
+
+Creates a WebGL2 renderer on the canvas. Returns `null` when WebGL2 is unavailable — keep a CPU fallback for that case.
+
+> **One-way door:** a canvas that has handed out a WebGL context can never provide a `'2d'` context again. Decide GPU vs CPU per canvas *before* the first paint.
+
+| Option | Default | Description |
+|---|---|---|
+| `model` | `'oklch'` | `'oklch'` or `'lch'` (CIE LCH, D50 white point, CSS Color 4 semantics) |
+
+### `renderer.paint(opts)`
+
+Renders one gamut slice. Returns `false` while the WebGL context is lost (it re-initializes automatically on restore).
+
+| Option | Description |
+|---|---|
+| `plane` | `'cl'` (x: L, y: C, fixed H) · `'ch'` (x: H, y: C, fixed L) · `'lh'` (x: H, y: L, fixed C) |
+| `value` | The fixed component, in the model's native scale (OKLCH: L 0–1, C ~0–0.4; LCH: L 0–100, C ~0–150) |
+| `xMax`, `yMax` | Component values at the right / top edges |
+| `showP3` | Also paint the P3-only region (sRGB-only pixels otherwise) |
+| `showRec2020` | Also paint the Rec.2020-only region |
+| `borderP3`, `borderRec2020` | RGBA arrays (0–1) for the boundary lines |
+| `p3Output` | Encode output as Display-P3 and switch the drawing buffer to `display-p3` (Chrome 104+, Safari 16.4+; silently stays sRGB elsewhere) |
+
+Pixels outside every enabled gamut are transparent. Boundary lines are analytic contours of the gamut overflow field (`fwidth`-based), so they stay ~1.5 px crisp at any canvas size or DPR.
+
+### `renderer.destroy()`
+
+Releases the WebGL context.
+
+### `math`
+
+The JS twin of the shader math, exported for reference and testing:
+
+```js
+import { math } from '@colordx/gpu';
+math.oklchToLinearSrgb(0.7, 0.1, 150);  // [r, g, b] linear, unclamped
+```
+
+## Parity with @colordx/core
+
+The GLSL is generated from [`src/constants.js`](src/constants.js), which mirrors colordx's source constants — OKLab matrices, the Lab D50 path with Bradford adaptation, P3 and Rec.2020 primaries. `npm test` verifies the constants-based math against `@colordx/core` itself over a dense sample grid (agreement < 1e-9; the GPU then runs the same math in float32, more than enough for rendering). If colordx's math ever changes, the parity test fails before the shader can drift.
+
+## Demo
+
+```bash
+npm run demo
+```
+
+opens a live three-plane chart demo (vite). Or see it in production shape inside [oklch-picker](https://github.com/evilmartians/oklch-picker), where this package replaces a `hardwareConcurrency`-wide worker pool — add `?bench` to compare, `?nogpu` to force the CPU path.
+
+## Browser support
+
+WebGL2 — all evergreen browsers (~98% global). `display-p3` output additionally needs Chrome 104+ / Safari 16.4+; on other browsers wide-gamut colors are clipped to sRGB for display (classification is unaffected). `createChartRenderer` returns `null` rather than throwing when unsupported.
+
+## Roadmap
+
+- **v0.2 — `@colordx/gpu/glsl`**: the conversion and gamut-test shader chunks as documented public API, so you can compose colordx math into your own shaders.
+- **v0.3 — gradient strips**: a 1D renderer for slider tracks and gradient previews (the other half of every color-picker UI).
+- **v0.4 — `@colordx/gpu/batch`**: WebGPU compute path — `convertBatch(Float32Array, from, to)` for bulk numeric conversion with async readback, for workloads that need numbers back, not pixels.
+- **Later**: 3D gamut-body renderer, WGSL chunk variants, OffscreenCanvas/worker rendering, generated-from-source constants (import directly from `@colordx/core` at build time).
+
+## Ecosystem
+
+- [**@colordx/core**](https://github.com/dkryaklin/colordx) — the color library this package renders for: parsing, conversion, manipulation, gamut mapping. [colordx.dev](https://colordx.dev)
+- [**oklch-picker**](https://github.com/evilmartians/oklch-picker) — OKLCH color picker; first production consumer of this renderer.
+
+## License
+
+[MIT](LICENSE) © Dmitrii Kriaklin

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@colordx/gpu",
+  "version": "0.1.0",
+  "description": "GPU companion for @colordx/core — WebGL2 gamut-slice chart rendering with sRGB/Display-P3/Rec.2020 classification, generated from colordx's own color math",
+  "author": "Dmitrii Kriaklin",
+  "license": "MIT",
+  "homepage": "https://colordx.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dkryaklin/colordx-gpu.git"
+  },
+  "bugs": {
+    "url": "https://github.com/dkryaklin/colordx-gpu/issues"
+  },
+  "type": "module",
+  "main": "./src/index.js",
+  "types": "./src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.d.ts",
+      "default": "./src/index.js"
+    }
+  },
+  "files": [
+    "src"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "demo": "npx -y vite --open /demo/",
+    "prepublishOnly": "npm test",
+    "test": "node --test 'test/*.test.mjs'"
+  },
+  "keywords": [
+    "color",
+    "oklch",
+    "oklab",
+    "lch",
+    "webgl",
+    "webgl2",
+    "gpu",
+    "shader",
+    "display-p3",
+    "rec2020",
+    "wide-gamut",
+    "gamut",
+    "color-picker",
+    "colordx"
+  ],
+  "devDependencies": {
+    "@colordx/core": "^5.4.2"
+  }
+}

package/src/constants.js

@@ -0,0 +1,60 @@
+// Numeric constants mirrored from @colordx/core source. The parity test in
+// test/parity.test.mjs asserts these stay byte-identical with the library, so
+// the GPU and CPU pipelines can never silently drift apart.
+
+// src/colorModels/oklab.ts — OKLab → LMS' (a/b contributions) and LMS → linear sRGB
+export const OKLAB = {
+  M2I_A_L: 0.3963377774,
+  M2I_B_L: 0.2158037573,
+  M2I_A_M: -0.1055613458,
+  M2I_B_M: -0.0638541728,
+  M2I_A_S: -0.0894841775,
+  M2I_B_S: -1.291485548,
+  M1I_L_R: 4.0767416613,
+  M1I_M_R: -3.3077115904,
+  M1I_S_R: 0.2309699287,
+  M1I_L_G: -1.2684380041,
+  M1I_M_G: 2.6097574007,
+  M1I_S_G: -0.3413193963,
+  M1I_L_B: -0.0041960865,
+  M1I_M_B: -0.7034186145,
+  M1I_S_B: 1.7076147009,
+}
+
+// src/colorModels/lab.ts + xyz.ts — CIE Lab (D50) path
+export const LAB = {
+  EPSILON: 216 / 24389,
+  KAPPA: 24389 / 27,
+  WX: 96.42956752983539,
+  WY: 100,
+  WZ: 82.51046025104603,
+}
+
+// src/colorModels/xyz.ts — Bradford D50 → D65 (CSS Color 4), row-major
+export const D50_TO_D65 = [
+  0.955473421488075, -0.02309845494876471, 0.06325924320057072,
+  -0.0283697093338637, 1.0099953980813041, 0.021041441191917323,
+  0.012314014864481998, -0.020507649298898964, 1.330365926242124,
+]
+
+// src/colorModels/xyz.ts — XYZ D65 (0–100 scale) → linear sRGB, row-major
+export const XYZ_TO_SRGB = [
+  0.032409699419045213, -0.015373831775700935, -0.0049861076029300327,
+  -0.0096924363628087984, 0.018759675015077206, 0.00041555057407175612,
+  0.00055630079696993608, -0.0020397695888897657, 0.010569715142428786,
+]
+
+// src/colorModels/p3.ts — linear sRGB → linear Display-P3, row-major
+// (zero blue contributions on the r/g rows are correct per spec)
+export const SRGB_TO_P3 = [
+  0.8224619687, 0.1775380313, 0,
+  0.0331941989, 0.9668058011, 0,
+  0.0170826307, 0.0723974407, 0.9105199286,
+]
+
+// src/colorModels/rec2020.ts — linear sRGB → linear Rec.2020, row-major
+export const SRGB_TO_REC2020 = [
+  0.6274038959, 0.3292830384, 0.0433130657,
+  0.0690972894, 0.9195403951, 0.0113623156,
+  0.0163914389, 0.0880133079, 0.8955952532,
+]

package/src/glsl.js

@@ -0,0 +1,119 @@
+// GLSL sources, generated from the same constants module as the JS twin so
+// shader math is colordx math by construction.
+
+import { D50_TO_D65, LAB, OKLAB, SRGB_TO_P3, SRGB_TO_REC2020, XYZ_TO_SRGB } from './constants.js'
+
+// format a JS number as a GLSL float literal
+const f = n => {
+  const s = String(n)
+  return /[.e]/.test(s) ? s : s + '.0'
+}
+
+// row-major 3x3 → GLSL expression applying it to vec3 `v`
+const mulRow = (M, v, row) =>
+  `${f(M[row * 3])} * ${v}.x + ${f(M[row * 3 + 1])} * ${v}.y + ${f(M[row * 3 + 2])} * ${v}.z`
+const mul3 = (M, v) =>
+  `vec3(${mulRow(M, v, 0)}, ${mulRow(M, v, 1)}, ${mulRow(M, v, 2)})`
+
+export const VERTEX = `#version 300 es
+void main() {
+  vec2 p = vec2(gl_VertexID == 1 ? 3.0 : -1.0, gl_VertexID == 2 ? 3.0 : -1.0);
+  gl_Position = vec4(p, 0.0, 1.0);
+}`
+
+const OKLCH_TO_LINEAR = `
+vec3 toLinearSrgb(float l, float c, float h) {
+  float hr = radians(h);
+  float a = c * cos(hr);
+  float b = c * sin(hr);
+  float l_ = l + ${f(OKLAB.M2I_A_L)} * a + ${f(OKLAB.M2I_B_L)} * b;
+  float m_ = l + ${f(OKLAB.M2I_A_M)} * a + ${f(OKLAB.M2I_B_M)} * b;
+  float s_ = l + ${f(OKLAB.M2I_A_S)} * a + ${f(OKLAB.M2I_B_S)} * b;
+  float l3 = l_ * l_ * l_;
+  float m3 = m_ * m_ * m_;
+  float s3 = s_ * s_ * s_;
+  return vec3(
+    ${f(OKLAB.M1I_L_R)} * l3 + ${f(OKLAB.M1I_M_R)} * m3 + ${f(OKLAB.M1I_S_R)} * s3,
+    ${f(OKLAB.M1I_L_G)} * l3 + ${f(OKLAB.M1I_M_G)} * m3 + ${f(OKLAB.M1I_S_G)} * s3,
+    ${f(OKLAB.M1I_L_B)} * l3 + ${f(OKLAB.M1I_M_B)} * m3 + ${f(OKLAB.M1I_S_B)} * s3);
+}`
+
+const LCH_TO_LINEAR = `
+vec3 toLinearSrgb(float l, float c, float h) {
+  float hr = radians(h);
+  float a = c * cos(hr);
+  float b = c * sin(hr);
+  float fy = (l + 16.0) / 116.0;
+  float fx = a / 500.0 + fy;
+  float fz = fy - b / 200.0;
+  vec3 xyz = vec3(
+    (fx * fx * fx > ${f(LAB.EPSILON)} ? fx * fx * fx : (116.0 * fx - 16.0) / ${f(LAB.KAPPA)}) * ${f(LAB.WX)},
+    (l > 8.0 ? fy * fy * fy : l / ${f(LAB.KAPPA)}) * ${f(LAB.WY)},
+    (fz * fz * fz > ${f(LAB.EPSILON)} ? fz * fz * fz : (116.0 * fz - 16.0) / ${f(LAB.KAPPA)}) * ${f(LAB.WZ)});
+  vec3 d65 = ${mul3(D50_TO_D65, 'xyz')};
+  return ${mul3(XYZ_TO_SRGB, 'd65')};
+}`
+
+export function buildFragment(model) {
+  return `#version 300 es
+precision highp float;
+out vec4 frag;
+uniform vec2 u_res;
+uniform int u_plane;          // 0 = cl, 1 = ch, 2 = lh
+uniform float u_value;
+uniform float u_xMax, u_yMax;
+uniform bool u_showP3, u_showRec2020, u_p3Out;
+uniform vec4 u_borderP3, u_borderRec2020;
+
+const float GAP = 1e-7;       // RENDER_GAP twin
+
+${model === 'lch' ? LCH_TO_LINEAR : OKLCH_TO_LINEAR}
+
+vec3 srgbEncode(vec3 c) {
+  return mix(12.92 * c, 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055, step(0.0031308, c));
+}
+float overflow(vec3 c) {
+  vec3 d = max(c - 1.0, -c);
+  return max(d.r, max(d.g, d.b));
+}
+
+void main() {
+  // gl_FragCoord y is bottom-up, matching the picker's paintPixel flip
+  vec2 uv = gl_FragCoord.xy / u_res;
+  float l, c, h;
+  if (u_plane == 0)      { l = uv.x * u_xMax; c = uv.y * u_yMax; h = u_value; }
+  else if (u_plane == 1) { h = uv.x * u_xMax; c = uv.y * u_yMax; l = u_value; }
+  else                   { h = uv.x * u_xMax; l = uv.y * u_yMax; c = u_value; }
+
+  vec3 lin = toLinearSrgb(l, c, h);
+  float fs = overflow(lin);
+  vec3 linP3 = ${mul3(SRGB_TO_P3, 'lin')};
+  float fp = overflow(linP3);
+  vec3 linR2 = ${mul3(SRGB_TO_REC2020, 'lin')};
+  float f20 = overflow(linR2);
+
+  bool inS = fs <= GAP;
+  bool inP = fp <= GAP;
+  bool inR = f20 <= GAP;
+
+  vec4 col = vec4(0.0);
+  if (inS || (u_showP3 && inP) || (u_showRec2020 && inR)) {
+    vec3 enc = u_p3Out
+      ? srgbEncode(clamp(linP3, 0.0, 1.0))
+      : srgbEncode(clamp(lin, 0.0, 1.0));
+    col = vec4(enc, 1.0);
+  }
+
+  // boundary lines, ~1.5px crisp contours of the gamut overflow fields
+  float wS = 0.75 * fwidth(fs);
+  float wP = 0.75 * fwidth(fp);
+  if (u_showP3) {
+    if (abs(fs) < wS && inP) col = u_borderP3;
+    if (u_showRec2020 && abs(fp) < wP && inR && !inS) col = u_borderRec2020;
+  } else if (u_showRec2020) {
+    if (abs(fs) < wS && inR) col = u_borderRec2020;
+  }
+
+  frag = vec4(col.rgb * col.a, col.a); // premultiplied alpha
+}`
+}

package/src/index.d.ts

@@ -0,0 +1,52 @@
+/**
+ * The slice plane to render:
+ * - `'cl'` — x: lightness, y: chroma, fixed hue (the H chart)
+ * - `'ch'` — x: hue, y: chroma, fixed lightness (the L chart)
+ * - `'lh'` — x: hue, y: lightness, fixed chroma (the C chart)
+ */
+export type ChartPlane = 'ch' | 'cl' | 'lh'
+
+export type BorderRgba = [number, number, number, number] | Float32Array
+
+export interface ChartPaintOptions {
+  /** RGBA 0–1 for the sRGB↔P3 boundary line */
+  borderP3: BorderRgba
+  /** RGBA 0–1 for the P3↔Rec2020 (or sRGB↔Rec2020) boundary line */
+  borderRec2020: BorderRgba
+  /** Encode output for a display-p3 drawing buffer (wide-gamut displays) */
+  p3Output?: boolean
+  plane: ChartPlane
+  showP3: boolean
+  showRec2020: boolean
+  /** The fixed component, in the model's native scale */
+  value: number
+  /** Component value at the right edge (e.g. 360 for hue, L_MAX for lightness) */
+  xMax: number
+  /** Component value at the top edge (e.g. C_MAX) */
+  yMax: number
+}
+
+export interface ChartRenderer {
+  readonly canvas: HTMLCanvasElement
+  /** Release the WebGL context */
+  destroy(): void
+  /** Render a slice; returns false while the WebGL context is lost */
+  paint(opts: ChartPaintOptions): boolean
+}
+
+export interface ChartRendererOptions {
+  /** Color model: OKLCH (default) or CIE LCH (D50) */
+  model?: 'lch' | 'oklch'
+}
+
+/**
+ * Create a WebGL2 chart renderer on the canvas, or null when WebGL2 is
+ * unavailable. Note: the canvas can no longer provide a '2d' context after
+ * this succeeds — decide GPU vs CPU before the first paint.
+ */
+export function createChartRenderer(
+  canvas: HTMLCanvasElement,
+  options?: ChartRendererOptions
+): ChartRenderer | null
+
+export * as math from './math.js'

package/src/index.js

@@ -0,0 +1,99 @@
+import { buildFragment, VERTEX } from './glsl.js'
+
+export * as math from './math.js'
+
+/**
+ * Create a WebGL2 chart renderer on the given canvas. Returns null when
+ * WebGL2 is unavailable — callers should fall back to a CPU path.
+ *
+ * The canvas becomes a WebGL canvas: it can no longer hand out a '2d'
+ * context, so decide GPU vs CPU before the first paint.
+ */
+export function createChartRenderer(canvas, options = {}) {
+  const model = options.model === 'lch' ? 'lch' : 'oklch'
+  const gl = canvas.getContext('webgl2', {
+    alpha: true,
+    antialias: false,
+    depth: false,
+    premultipliedAlpha: true,
+    stencil: false,
+  })
+  if (!gl) return null
+
+  let program = null
+  let uniforms = null
+  let contextLost = false
+
+  function init() {
+    const compile = (type, src) => {
+      const s = gl.createShader(type)
+      gl.shaderSource(s, src)
+      gl.compileShader(s)
+      if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {
+        throw new Error('[@colordx/gpu] shader: ' + gl.getShaderInfoLog(s))
+      }
+      return s
+    }
+    program = gl.createProgram()
+    gl.attachShader(program, compile(gl.VERTEX_SHADER, VERTEX))
+    gl.attachShader(program, compile(gl.FRAGMENT_SHADER, buildFragment(model)))
+    gl.linkProgram(program)
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+      throw new Error('[@colordx/gpu] link: ' + gl.getProgramInfoLog(program))
+    }
+    gl.useProgram(program)
+    uniforms = {}
+    for (const name of [
+      'u_res', 'u_plane', 'u_value', 'u_xMax', 'u_yMax',
+      'u_showP3', 'u_showRec2020', 'u_p3Out', 'u_borderP3', 'u_borderRec2020',
+    ]) {
+      uniforms[name] = gl.getUniformLocation(program, name)
+    }
+  }
+
+  canvas.addEventListener('webglcontextlost', e => {
+    e.preventDefault()
+    contextLost = true
+  })
+  canvas.addEventListener('webglcontextrestored', () => {
+    contextLost = false
+    init()
+  })
+  init()
+
+  const PLANES = { ch: 1, cl: 0, lh: 2 }
+
+  return {
+    canvas,
+    destroy() {
+      gl.getExtension('WEBGL_lose_context')?.loseContext()
+    },
+    paint(opts) {
+      if (contextLost) return false
+
+      if ('drawingBufferColorSpace' in gl) {
+        try {
+          gl.drawingBufferColorSpace = opts.p3Output ? 'display-p3' : 'srgb'
+        } catch {
+          // browser without display-p3 WebGL support: stay in sRGB
+        }
+      }
+
+      gl.viewport(0, 0, canvas.width, canvas.height)
+      gl.clearColor(0, 0, 0, 0)
+      gl.clear(gl.COLOR_BUFFER_BIT)
+      gl.uniform2f(uniforms.u_res, canvas.width, canvas.height)
+      gl.uniform1i(uniforms.u_plane, PLANES[opts.plane] ?? 0)
+      gl.uniform1f(uniforms.u_value, opts.value)
+      gl.uniform1f(uniforms.u_xMax, opts.xMax)
+      gl.uniform1f(uniforms.u_yMax, opts.yMax)
+      gl.uniform1i(uniforms.u_showP3, opts.showP3 ? 1 : 0)
+      gl.uniform1i(uniforms.u_showRec2020, opts.showRec2020 ? 1 : 0)
+      gl.uniform1i(uniforms.u_p3Out, opts.p3Output ? 1 : 0)
+      gl.uniform4fv(uniforms.u_borderP3, opts.borderP3)
+      gl.uniform4fv(uniforms.u_borderRec2020, opts.borderRec2020)
+      gl.drawArrays(gl.TRIANGLES, 0, 3)
+      return true
+    },
+  }
+}

package/src/math.d.ts

@@ -0,0 +1,5 @@
+export function oklchToLinearSrgb(l: number, c: number, h: number): [number, number, number]
+export function lchToLinearSrgb(l: number, c: number, h: number): [number, number, number]
+export function srgbLinearToP3Linear(r: number, g: number, b: number): [number, number, number]
+export function srgbLinearToRec2020Linear(r: number, g: number, b: number): [number, number, number]
+export function srgbFromLinear(n: number): number

package/src/math.js

@@ -0,0 +1,71 @@
+// JS twin of the shader math, built from the same constants module that
+// generates the GLSL. Used by the parity test (vs @colordx/core) and usable
+// as a reference implementation.
+
+import { D50_TO_D65, LAB, OKLAB, SRGB_TO_P3, SRGB_TO_REC2020, XYZ_TO_SRGB } from './constants.js'
+
+const DEG_TO_RAD = Math.PI / 180
+
+export function oklchToLinearSrgb(l, c, h) {
+  const hr = h * DEG_TO_RAD
+  const a = c * Math.cos(hr)
+  const b = c * Math.sin(hr)
+  const l_ = l + OKLAB.M2I_A_L * a + OKLAB.M2I_B_L * b
+  const m_ = l + OKLAB.M2I_A_M * a + OKLAB.M2I_B_M * b
+  const s_ = l + OKLAB.M2I_A_S * a + OKLAB.M2I_B_S * b
+  const l3 = l_ ** 3
+  const m3 = m_ ** 3
+  const s3 = s_ ** 3
+  return [
+    OKLAB.M1I_L_R * l3 + OKLAB.M1I_M_R * m3 + OKLAB.M1I_S_R * s3,
+    OKLAB.M1I_L_G * l3 + OKLAB.M1I_M_G * m3 + OKLAB.M1I_S_G * s3,
+    OKLAB.M1I_L_B * l3 + OKLAB.M1I_M_B * m3 + OKLAB.M1I_S_B * s3,
+  ]
+}
+
+export function lchToLinearSrgb(l, c, h) {
+  const hr = h * DEG_TO_RAD
+  const a = c * Math.cos(hr)
+  const b = c * Math.sin(hr)
+  const fy = (l + 16) / 116
+  const fx = a / 500 + fy
+  const fz = fy - b / 200
+  const x = (fx ** 3 > LAB.EPSILON ? fx ** 3 : (116 * fx - 16) / LAB.KAPPA) * LAB.WX
+  const y = (l > 8 ? fy ** 3 : l / LAB.KAPPA) * LAB.WY
+  const z = (fz ** 3 > LAB.EPSILON ? fz ** 3 : (116 * fz - 16) / LAB.KAPPA) * LAB.WZ
+  const M = D50_TO_D65
+  const xd65 = M[0] * x + M[1] * y + M[2] * z
+  const yd65 = M[3] * x + M[4] * y + M[5] * z
+  const zd65 = M[6] * x + M[7] * y + M[8] * z
+  const X = XYZ_TO_SRGB
+  return [
+    X[0] * xd65 + X[1] * yd65 + X[2] * zd65,
+    X[3] * xd65 + X[4] * yd65 + X[5] * zd65,
+    X[6] * xd65 + X[7] * yd65 + X[8] * zd65,
+  ]
+}
+
+export function srgbLinearToP3Linear(r, g, b) {
+  const M = SRGB_TO_P3
+  return [
+    M[0] * r + M[1] * g + M[2] * b,
+    M[3] * r + M[4] * g + M[5] * b,
+    M[6] * r + M[7] * g + M[8] * b,
+  ]
+}
+
+export function srgbLinearToRec2020Linear(r, g, b) {
+  const M = SRGB_TO_REC2020
+  return [
+    M[0] * r + M[1] * g + M[2] * b,
+    M[3] * r + M[4] * g + M[5] * b,
+    M[6] * r + M[7] * g + M[8] * b,
+  ]
+}
+
+// sRGB / Display-P3 transfer, extended sign-preserving per CSS Color 4
+export function srgbFromLinear(n) {
+  const abs = Math.abs(n)
+  const encoded = abs <= 0.0031308 ? 12.92 * abs : 1.055 * abs ** (1 / 2.4) - 0.055
+  return n < 0 ? -encoded : encoded
+}