palette-shader 0.12.0 → 0.13.0

package/README.md

@@ -35,7 +35,10 @@ import { PaletteViz } from 'palette-shader';
 import { converter } from 'culori';
 
 const toSRGB = converter('srgb');
-const toRGB = (hex) => { const c = toSRGB(hex); return [c.r, c.g, c.b]; };
+const toRGB = (hex) => {
+  const c = toSRGB(hex);
+  return [c.r, c.g, c.b];
+};
 
 // option A — pass a container, canvas is appended automatically
 const viz = new PaletteViz({
@@ -50,6 +53,8 @@ const viz = new PaletteViz({ palette: ['#264653', '#2a9d8f', '#e9c46a'].map(toRG
 document.querySelector('#app').appendChild(viz.canvas);
 ```
 
+If you only use the 2D renderer, import `PaletteViz` and let your bundler tree-shake the rest. `PaletteViz3D` pulls in substantially more code for mesh generation, extra shaders, and interaction handling, so it is worth avoiding in apps that never render the 3-D view.
+
 ---
 
 ## Constructor
@@ -60,20 +65,21 @@ new PaletteViz(options?: PaletteVizOptions)
 
 All options are optional. The palette defaults to a random 20-color set.
 
-| Option           | Type                | Default            | Description                                                                                                  |
-| ---------------- | ------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------ |
-| `palette`        | `[number, number, number][]` | random   | sRGB colors as `[r, g, b]` arrays, each component in the `0–1` range                                        |
-| `container`      | `HTMLElement`       | `undefined`        | Element the canvas is appended to. Omit and use `viz.canvas` to place it yourself                            |
-| `width`          | `number`            | `512`              | Canvas width in CSS pixels                                                                                   |
-| `height`         | `number`            | `512`              | Canvas height in CSS pixels                                                                                  |
-| `pixelRatio`     | `number`            | `devicePixelRatio` | Renderer pixel ratio                                                                                         |
-| `colorModel`     | `string`            | `'okhsv'`          | Color space for the visualization (see [Color models](#color-models))                                        |
-| `distanceMetric` | `string`            | `'oklab'`          | Distance function for nearest-color matching (see [Distance metrics](#distance-metrics))                     |
-| `axis`           | `'x' \| 'y' \| 'z'` | `'y'`              | Which axis the `position` value controls                                                                     |
-| `position`       | `number`            | `0`                | 0–1 position along the chosen axis                                                                           |
-| `invertZ`        | `boolean`           | `false`            | Flip the lightness/value axis                                                                                |
-| `showRaw`        | `boolean`           | `false`            | Bypass nearest-color matching (shows the raw color space)                                                    |
-| `outlineWidth`   | `number`            | `0`                | Draw a transparent outline where palette regions meet. Width in physical pixels. `0` disables (no overhead). |
+| Option           | Type                         | Default            | Description                                                                                                  |
+| ---------------- | ---------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------ |
+| `palette`        | `[number, number, number][]` | random             | sRGB colors as `[r, g, b]` arrays, each component in the `0–1` range                                         |
+| `container`      | `HTMLElement`                | `undefined`        | Element the canvas is appended to. Omit and use `viz.canvas` to place it yourself                            |
+| `width`          | `number`                     | `512`              | Canvas width in CSS pixels                                                                                   |
+| `height`         | `number`                     | `512`              | Canvas height in CSS pixels                                                                                  |
+| `pixelRatio`     | `number`                     | `devicePixelRatio` | Renderer pixel ratio                                                                                         |
+| `colorModel`     | `string`                     | `'okhsv'`          | Color space for the visualization (see [Color models](#color-models))                                        |
+| `distanceMetric` | `string`                     | `'oklab'`          | Distance function for nearest-color matching (see [Distance metrics](#distance-metrics))                     |
+| `axis`           | `'x' \| 'y' \| 'z'`          | `'y'`              | Which axis the `position` value controls                                                                     |
+| `position`       | `number`                     | `0`                | 0–1 position along the chosen axis                                                                           |
+| `invertZ`        | `boolean`                    | `false`            | Flip the lightness/value axis                                                                                |
+| `showRaw`        | `boolean`                    | `false`            | Bypass nearest-color matching (shows the raw color space)                                                    |
+| `outlineWidth`   | `number`                     | `0`                | Draw a transparent outline where palette regions meet. Width in physical pixels. `0` disables (no overhead). |
+| `gamutClip`      | `boolean`                    | `false`            | Discard out-of-sRGB-gamut pixels instead of clamping. Reveals the true gamut boundary of the color model.    |
 
 ---
 
@@ -82,13 +88,18 @@ All options are optional. The palette defaults to a random 20-color set.
 Every constructor option is also a live setter/getter. Assigning any of them re-renders immediately via `requestAnimationFrame`.
 
 ```js
-viz.palette = [[1, 0, 0], [0, 1, 0], [0, 0, 1]];
+viz.palette = [
+  [1, 0, 0],
+  [0, 1, 0],
+  [0, 0, 1],
+];
 viz.position = 0.5;
 viz.colorModel = 'okhslPolar';
 viz.distanceMetric = 'deltaE2000';
 viz.invertZ = true;
 viz.showRaw = true;
 viz.outlineWidth = 2; // transparent border between regions, in physical pixels
+viz.gamutClip = true; // discard out-of-gamut pixels
 viz.pixelRatio = window.devicePixelRatio; // update after display changes
 ```
 
@@ -178,11 +189,11 @@ Controls the 3-D color space the visualization is rendered in. Polar variants (`
 
 **CIE Lab / LCH — D65**
 
-| Value           | Shape | Description                                                     |
-| --------------- | ----- | --------------------------------------------------------------- |
-| `'cielab'`      | cube  | CIELab D65: x→a, y→b, z→L. The classic perceptual color space.  |
-| `'cielch'`      | cube  | CIELab D65 in cylindrical LCH coordinates.                      |
-| `'cielchPolar'` | wheel | Polar form of CIELch D65.                                       |
+| Value           | Shape | Description                                                    |
+| --------------- | ----- | -------------------------------------------------------------- |
+| `'cielab'`      | cube  | CIELab D65: x→a, y→b, z→L. The classic perceptual color space. |
+| `'cielch'`      | cube  | CIELab D65 in cylindrical LCH coordinates.                     |
+| `'cielchPolar'` | wheel | Polar form of CIELch D65.                                      |
 
 **CIE Lab / LCH — D50**
 
@@ -313,7 +324,11 @@ import { paletteToRGBA, randomPalette, fragmentShader } from 'palette-shader';
 
 // Get raw RGBA bytes (Uint8Array, sRGB, 4 bytes per color)
 // Useful for building your own WebGL texture or processing palette data
-const rgba = paletteToRGBA([[1, 0, 0], [0, 1, 0], [0, 0, 1]]);
+const rgba = paletteToRGBA([
+  [1, 0, 0],
+  [0, 1, 0],
+  [0, 0, 1],
+]);
 
 // Quick random palette for prototyping
 const palette = randomPalette(16);
@@ -337,7 +352,7 @@ const viz3d = new PaletteViz3D({
   palette: ['#264653', '#2a9d8f', '#e9c46a', '#f4a261', '#e76f51'].map(toRGB),
   container: document.querySelector('#app'),
   colorModel: 'okhsv',
-  position: 1.0,        // 1 = full volume, 0 = fully sliced
+  position: 1.0, // 1 = full volume, 0 = fully sliced
   outlineWidth: 2,
 });
 ```
@@ -350,7 +365,7 @@ new PaletteViz3D(options?: PaletteViz3DOptions)
 
 | Option           | Type                         | Default               | Description                                                                  |
 | ---------------- | ---------------------------- | --------------------- | ---------------------------------------------------------------------------- |
-| `palette`        | `[number, number, number][]` | random                | sRGB colors as `[r, g, b]`, each in `0–1`                                   |
+| `palette`        | `[number, number, number][]` | random                | sRGB colors as `[r, g, b]`, each in `0–1`                                    |
 | `container`      | `HTMLElement`                | `undefined`           | Element the canvas is appended to                                            |
 | `width`          | `number`                     | `512`                 | Canvas width in CSS pixels                                                   |
 | `height`         | `number`                     | `512`                 | Canvas height in CSS pixels                                                  |
@@ -361,7 +376,8 @@ new PaletteViz3D(options?: PaletteViz3DOptions)
 | `invertZ`        | `boolean`                    | `false`               | Flip the lightness/value axis                                                |
 | `showRaw`        | `boolean`                    | `false`               | Bypass nearest-color matching                                                |
 | `outlineWidth`   | `number`                     | `0`                   | Transparent outline width (physical px). `0` disables                        |
-| `modelMatrix`    | `Float32Array`               | slight tilt (default) | Initial 4×4 column-major model rotation matrix                              |
+| `gamutClip`      | `boolean`                    | `false`               | Discard out-of-sRGB-gamut pixels instead of clamping                         |
+| `modelMatrix`    | `Float32Array`               | slight tilt (default) | Initial 4×4 column-major model rotation matrix                               |
 
 ### Properties (3D)
 
@@ -369,13 +385,39 @@ All constructor options except `modelMatrix` are live setter/getters (re-render
 
 Additional properties:
 
-| Property      | Type           | Description                                                     |
-| ------------- | -------------- | --------------------------------------------------------------- |
-| `canvas`      | `HTMLCanvasElement` | The canvas (read-only)                                     |
-| `modelMatrix` | `Float32Array` | Get/set the 4×4 model rotation matrix (copies on read & write) |
+| Property      | Type                | Description                                                    |
+| ------------- | ------------------- | -------------------------------------------------------------- |
+| `canvas`      | `HTMLCanvasElement` | The canvas (read-only)                                         |
+| `modelMatrix` | `Float32Array`      | Get/set the 4×4 model rotation matrix (copies on read & write) |
 
 ### Methods (3D)
 
+#### `getColorAtUV(x, y)`
+
+Returns the rendered color at normalised screen coordinates (`0–1` on both axes, y=0 is top) as `[r, g, b]` in `0–1` sRGB, or `null` if the cursor is over a transparent pixel (i.e. outside the 3D geometry). Flushes any pending rAF frame so the reading is always current.
+
+```js
+canvas.addEventListener('mousemove', (e) => {
+  const rect = canvas.getBoundingClientRect();
+  const color = viz3d.getColorAtUV(
+    (e.clientX - rect.left) / rect.width,
+    (e.clientY - rect.top) / rect.height,
+  );
+  if (color) {
+    const hex =
+      '#' +
+      color
+        .map((c) =>
+          Math.round(c * 255)
+            .toString(16)
+            .padStart(2, '0'),
+        )
+        .join('');
+    console.log(hex);
+  }
+});
+```
+
 #### `rotate(dx, dy)`
 
 Apply an incremental trackball rotation. `dx` and `dy` are in radians (screen-space). Left-multiplies incremental X/Y rotations onto the accumulated model matrix.
@@ -413,13 +455,13 @@ const model = mat4Multiply(mat4RotateX(0.4), mat4RotateY(0.6));
 viz3d.modelMatrix = model;
 ```
 
-| Function         | Signature                                              | Description                           |
-| ---------------- | ------------------------------------------------------ | ------------------------------------- |
-| `mat4Perspective`| `(fov, aspect, near, far) → Float32Array`              | Perspective projection matrix         |
-| `mat4Multiply`   | `(a, b) → Float32Array`                                | Matrix multiplication `a × b`         |
-| `mat4RotateX`    | `(angle) → Float32Array`                               | Rotation around X axis (radians)      |
-| `mat4RotateY`    | `(angle) → Float32Array`                               | Rotation around Y axis (radians)      |
-| `mat4Translate`  | `(x, y, z) → Float32Array`                             | Translation matrix                    |
+| Function          | Signature                                 | Description                      |
+| ----------------- | ----------------------------------------- | -------------------------------- |
+| `mat4Perspective` | `(fov, aspect, near, far) → Float32Array` | Perspective projection matrix    |
+| `mat4Multiply`    | `(a, b) → Float32Array`                   | Matrix multiplication `a × b`    |
+| `mat4RotateX`     | `(angle) → Float32Array`                  | Rotation around X axis (radians) |
+| `mat4RotateY`     | `(angle) → Float32Array`                  | Rotation around Y axis (radians) |
+| `mat4Translate`   | `(x, y, z) → Float32Array`                | Translation matrix               |
 
 ---
 

package/dist/palette-shader.d.ts

@@ -63,6 +63,12 @@ export declare class PaletteViz {
 export declare class PaletteViz3D {
     #private;
     constructor({ palette, width, height, pixelRatio, container, colorModel, distanceMetric, invertZ, showRaw, outlineWidth, gamutClip, position, modelMatrix, }?: PaletteViz3DOptions);
+    /**
+     * Read the rendered colour at normalised screen coordinates (0–1, y=0 is top).
+     * Returns [r, g, b] in [0, 1], or null if the pixel is transparent (no geometry).
+     * Flushes any pending rAF frame to ensure the reading is up to date.
+     */
+    getColorAtUV(x: number, y: number): [number, number, number] | null;
     get canvas(): HTMLCanvasElement;
     get width(): number;
     get height(): number;