palette-shader 0.18.0 → 0.20.0

package/README.md

@@ -174,10 +174,21 @@ viz.removeColor([0.659, 0.855, 0.863]);
 
 Cancel the animation frame, release all WebGL resources (programs, textures, framebuffer, buffer, VAO), and remove the canvas from the DOM.
 
+### `render()`
+
+Force a synchronous render immediately, bypassing the `requestAnimationFrame` schedule. Use this when the canvas (or its WebGL drawing buffer) must reflect the latest state right now — for example before reading pixels back from the canvas in the same JS tick.
+
+```js
+viz.render();
+// canvas drawing buffer is now up to date — safe to readPixels(...)
+```
+
 ### `getColorAtUV(x, y)`
 
 Returns the current shader result at normalized UV coordinates (`0–1` on both axes) as `[r, g, b]` in `0–1` sRGB. This reads directly from the WebGL render target (or outline source buffer), not from DOM canvas sampling.
 
+When a paint is already pending (state changed since the last frame) it renders first; when the render target is already current it skips the redundant render and reads back directly. If you need to guarantee a fresh render as a side effect, call `render()` explicitly.
+
 ```js
 const color = viz.getColorAtUV(0.5, 0.5); // center
 ```

package/dist/palette-shader.d.ts

@@ -40,6 +40,10 @@ declare abstract class BasePaletteRenderer {
     get width(): number;
     get height(): number;
     resize(width: number, height?: number | null): void;
+    /** Force a synchronous render immediately, bypassing the rAF schedule.
+     *  Use when the canvas/FBO must reflect the latest state right now — e.g.
+     *  before reading pixels back from the canvas. */
+    render(): void;
     set palette(palette: ColorList);
     get palette(): ColorList;
     set pixelRatio(value: number);

package/dist/palette-shader.js

@@ -142,7 +142,7 @@ ${_}`);
 function H(r, t) {
   r.bindTexture(r.TEXTURE_2D, t), r.texParameteri(r.TEXTURE_2D, r.TEXTURE_MIN_FILTER, r.NEAREST), r.texParameteri(r.TEXTURE_2D, r.TEXTURE_MAG_FILTER, r.NEAREST), r.texParameteri(r.TEXTURE_2D, r.TEXTURE_WRAP_S, r.CLAMP_TO_EDGE), r.texParameteri(r.TEXTURE_2D, r.TEXTURE_WRAP_T, r.CLAMP_TO_EDGE);
 }
-function O(r, t, n) {
+function S(r, t, n) {
   if (n.length === 0) throw new Error("Palette must contain at least one color");
   const e = new Float32Array(n.length * 4);
   n.forEach(([a, o, s], i) => {
@@ -1299,7 +1299,7 @@ vec3 closestColor(vec3 color, sampler2D paletteTexture) {
 
   return closest;
 }
-`, S = `
+`, O = `
 precision highp float;
 layout(location = 0) in vec2 a_position;
 out vec2 vUv;
@@ -1750,7 +1750,7 @@ uniform sampler2D paletteTexture;
   return e && (o += `uniform vec2 uvOverride;
 `), o += F(a), o += P + st, o;
 }
-const xt = `
+const Et = `
 precision highp float;
 layout(location = 0) in vec3 a_position;
 out vec3 vColorCoord;
@@ -1772,7 +1772,7 @@ void main() {
     vColorCoord = pos;
   #endif
   gl_Position = uMVP * vec4(pos - 0.5, 1.0);
-}`, Et = `
+}`, xt = `
 precision highp float;
 layout(location = 0) in vec3 a_position;
 out vec3 vColorCoord;
@@ -1950,7 +1950,7 @@ void main() {
     return;
   }
   fragColor = center;
-}`, w = { x: 0, y: 1, z: 2 }, Mt = 31, yt = 32, x = {
+}`, w = { x: 0, y: 1, z: 2 }, Mt = 31, yt = 32, E = {
   rgb: 0,
   rgb12bit: 1,
   rgb8bit: 2,
@@ -1984,7 +1984,7 @@ void main() {
   spectrum: 28,
   oklchDiag: 29,
   oklrchDiag: 30
-}, E = {
+}, x = {
   rgb: 0,
   oklab: 1,
   deltaE76: 2,
@@ -2024,7 +2024,7 @@ class lt {
     this.paletteState = t, this.cssWidth = n, this.cssHeight = e, this.pixelRatioState = a, this.observeResize = o, this.containerElement = s, this.canvasElement = document.createElement("canvas"), this.canvasElement.classList.add(i);
     const l = this.canvasElement.getContext("webgl2");
     if (!l) throw new Error("WebGL2 not supported");
-    this.glContext = l, this.paletteTexture = l.createTexture(), H(l, this.paletteTexture), O(l, this.paletteTexture, this.paletteState), this.metricTexture = l.createTexture(), H(l, this.metricTexture);
+    this.glContext = l, this.paletteTexture = l.createTexture(), H(l, this.paletteTexture), S(l, this.paletteTexture, this.paletteState), this.metricTexture = l.createTexture(), H(l, this.metricTexture);
   }
   normalizeInvertAxes(t) {
     const n = /* @__PURE__ */ new Set();
@@ -2088,9 +2088,15 @@ class lt {
     const { pw: e, ph: a } = this.syncCanvasSize(t, n ?? t);
     this.onSurfaceResized(e, a), this.schedulePaint();
   }
+  /** Force a synchronous render immediately, bypassing the rAF schedule.
+   *  Use when the canvas/FBO must reflect the latest state right now — e.g.
+   *  before reading pixels back from the canvas. */
+  render() {
+    this.destroyed || (this.flushScheduledPaint(), this.renderFrame());
+  }
   set palette(t) {
     if (t.length === 0) throw new Error("Palette must contain at least one color");
-    this.paletteState = t, O(this.glContext, this.paletteTexture, t), this.metricPaletteDirty = !0, this.schedulePaint();
+    this.paletteState = t, S(this.glContext, this.paletteTexture, t), this.metricPaletteDirty = !0, this.schedulePaint();
   }
   get palette() {
     return this.paletteState.slice();
@@ -2129,8 +2135,8 @@ class Xt extends lt {
   #s = null;
   #g = null;
   #C = null;
-  #M = null;
   #y = null;
+  #S = null;
   // 1×1 float FBO for getColorAtUV_float (lazily created)
   #m = null;
   #p = null;
@@ -2138,9 +2144,9 @@ class Xt extends lt {
   #I = null;
   #D = null;
   #O = null;
-  #S = null;
+  #P = null;
   #w = null;
-  #P = !0;
+  #A = !0;
   constructor({
     palette: t = J(),
     width: n = 512,
@@ -2167,13 +2173,13 @@ class Xt extends lt {
       canvasClassName: "palette-viz"
     }), this.#o = i, this.#c = l, this.#i = _, this.#d = b, this.#f = this.normalizeInvertAxes(C), this.#_ = f, this.#v = h, this.#n = d;
     const c = this.glContext;
-    this.#l = c.createBuffer(), c.bindBuffer(c.ARRAY_BUFFER, this.#l), c.bufferData(c.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), c.STATIC_DRAW), this.#a = c.createVertexArray(), c.bindVertexArray(this.#a), c.enableVertexAttribArray(0), c.vertexAttribPointer(0, 2, c.FLOAT, !1, 0, 0), c.bindVertexArray(null), this.#x(), this.syncCanvasSize(this.width, this.height), this.#E(), this.attachCanvas(), this.schedulePaint();
+    this.#l = c.createBuffer(), c.bindBuffer(c.ARRAY_BUFFER, this.#l), c.bufferData(c.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), c.STATIC_DRAW), this.#a = c.createVertexArray(), c.bindVertexArray(this.#a), c.enableVertexAttribArray(0), c.vertexAttribPointer(0, 2, c.FLOAT, !1, 0, 0), c.bindVertexArray(null), this.#E(), this.syncCanvasSize(this.width, this.height), this.#x(), this.attachCanvas(), this.schedulePaint();
   }
   #k() {
     const t = this.#o.endsWith("Polar") && this.#f.includes("y");
     return {
-      DISTANCE_METRIC: E[this.#c],
-      COLOR_MODEL: x[this.#o],
+      DISTANCE_METRIC: x[this.#c],
+      COLOR_MODEL: E[this.#o],
       PROGRESS_AXIS: w[this.#i],
       INVERT_X: this.#f.includes("x") ? 1 : !1,
       INVERT_Y: this.#f.includes("y") && !t ? 1 : !1,
@@ -2183,19 +2189,19 @@ class Xt extends lt {
       GAMUT_CLIP: this.#n ? 1 : !1
     };
   }
-  #x() {
+  #E() {
     const t = this.glContext;
     this.#t && t.deleteProgram(this.#t);
     const n = V(
-      x[this.#o],
-      E[this.#c],
+      E[this.#o],
+      x[this.#c],
       this.#_
     );
-    this.#t = y(t, this.#k(), n, S), this.#u = t.getUniformLocation(this.#t, "progress"), this.#T = t.getUniformLocation(this.#t, "paletteTexture"), this.#b = t.getUniformLocation(this.#t, "paletteMetricTexture"), this.#R = t.getUniformLocation(this.#t, "uPaletteSize"), this.metricPaletteDirty = !0, this.#P = !0;
+    this.#t = y(t, this.#k(), n, O), this.#u = t.getUniformLocation(this.#t, "progress"), this.#T = t.getUniformLocation(this.#t, "paletteTexture"), this.#b = t.getUniformLocation(this.#t, "paletteMetricTexture"), this.#R = t.getUniformLocation(this.#t, "uPaletteSize"), this.metricPaletteDirty = !0, this.#A = !0;
   }
-  #E() {
+  #x() {
     const t = this.glContext;
-    this.#g = y(t, {}, it, S), this.#C = t.getUniformLocation(this.#g, "colorMap"), this.#M = t.getUniformLocation(this.#g, "outlineWidth"), this.#y = t.getUniformLocation(this.#g, "resolution"), this.#s = t.createTexture(), this.#e = t.createFramebuffer(), this.#L(this.canvas.width, this.canvas.height);
+    this.#g = y(t, {}, it, O), this.#C = t.getUniformLocation(this.#g, "colorMap"), this.#y = t.getUniformLocation(this.#g, "outlineWidth"), this.#S = t.getUniformLocation(this.#g, "resolution"), this.#s = t.createTexture(), this.#e = t.createFramebuffer(), this.#L(this.canvas.width, this.canvas.height);
   }
   #L(t, n) {
     const e = this.glContext;
@@ -2208,15 +2214,15 @@ class Xt extends lt {
     ), e.bindFramebuffer(e.FRAMEBUFFER, null);
   }
   currentMetricCode() {
-    return E[this.#c];
+    return x[this.#c];
   }
   onSurfaceResized(t, n) {
     this.#s && this.#L(t, n);
   }
   renderFrame() {
-    this.#r && (this.#x(), this.#r = !1);
+    this.#r && (this.#E(), this.#r = !1);
     const t = this.glContext;
-    t.bindFramebuffer(t.FRAMEBUFFER, this.#e), t.useProgram(this.#t), this.uploadMetricPalette(this.#R), t.uniform1f(this.#u, this.#d), t.activeTexture(t.TEXTURE0), t.bindTexture(t.TEXTURE_2D, this.paletteTexture), t.uniform1i(this.#T, 0), t.activeTexture(t.TEXTURE1), t.bindTexture(t.TEXTURE_2D, this.metricTexture), t.uniform1i(this.#b, 1), t.clearColor(0, 0, 0, 0), t.clear(t.COLOR_BUFFER_BIT), t.bindVertexArray(this.#a), t.drawArrays(t.TRIANGLE_STRIP, 0, 4), t.flush(), t.bindFramebuffer(t.FRAMEBUFFER, null), t.useProgram(this.#g), t.activeTexture(t.TEXTURE0), t.bindTexture(t.TEXTURE_2D, this.#s), t.uniform1i(this.#C, 0), t.uniform1f(this.#M, this.#_ ? 0 : this.#v), t.uniform2f(this.#y, this.canvas.width, this.canvas.height), t.clearColor(0, 0, 0, 0), t.clear(t.COLOR_BUFFER_BIT), t.drawArrays(t.TRIANGLE_STRIP, 0, 4), t.bindVertexArray(null);
+    t.bindFramebuffer(t.FRAMEBUFFER, this.#e), t.useProgram(this.#t), this.uploadMetricPalette(this.#R), t.uniform1f(this.#u, this.#d), t.activeTexture(t.TEXTURE0), t.bindTexture(t.TEXTURE_2D, this.paletteTexture), t.uniform1i(this.#T, 0), t.activeTexture(t.TEXTURE1), t.bindTexture(t.TEXTURE_2D, this.metricTexture), t.uniform1i(this.#b, 1), t.clearColor(0, 0, 0, 0), t.clear(t.COLOR_BUFFER_BIT), t.bindVertexArray(this.#a), t.drawArrays(t.TRIANGLE_STRIP, 0, 4), t.bindFramebuffer(t.FRAMEBUFFER, null), t.useProgram(this.#g), t.activeTexture(t.TEXTURE0), t.bindTexture(t.TEXTURE_2D, this.#s), t.uniform1i(this.#C, 0), t.uniform1f(this.#y, this.#_ ? 0 : this.#v), t.uniform2f(this.#S, this.canvas.width, this.canvas.height), t.clearColor(0, 0, 0, 0), t.clear(t.COLOR_BUFFER_BIT), t.drawArrays(t.TRIANGLE_STRIP, 0, 4), t.bindVertexArray(null);
   }
   // ── Public API ──────────────────────────────────────────────────────────────
   destroy() {
@@ -2228,10 +2234,10 @@ class Xt extends lt {
   setColor(t, n) {
     if (n < 0 || n >= this.paletteState.length)
       throw new Error(`Index ${n} out of range`);
-    this.paletteState[n] = t, O(this.glContext, this.paletteTexture, this.paletteState), this.metricPaletteDirty = !0, this.schedulePaint();
+    this.paletteState[n] = t, S(this.glContext, this.paletteTexture, this.paletteState), this.metricPaletteDirty = !0, this.schedulePaint();
   }
   addColor(t, n) {
-    this.paletteState.splice(n ?? this.paletteState.length, 0, t), O(this.glContext, this.paletteTexture, this.paletteState), this.metricPaletteDirty = !0, this.schedulePaint();
+    this.paletteState.splice(n ?? this.paletteState.length, 0, t), S(this.glContext, this.paletteTexture, this.paletteState), this.metricPaletteDirty = !0, this.schedulePaint();
   }
   removeColor(t) {
     const n = typeof t == "number" ? t : this.paletteState.findIndex(
@@ -2241,13 +2247,13 @@ class Xt extends lt {
     if (n < 0 || n >= this.paletteState.length)
       throw new Error(`Index ${n} out of range`);
     if (this.paletteState.length === 1) throw new Error("Palette must contain at least one color");
-    this.paletteState.splice(n, 1), O(this.glContext, this.paletteTexture, this.paletteState), this.metricPaletteDirty = !0, this.schedulePaint();
+    this.paletteState.splice(n, 1), S(this.glContext, this.paletteTexture, this.paletteState), this.metricPaletteDirty = !0, this.schedulePaint();
   }
   getColorAtUV(t, n) {
     if (!Number.isFinite(t) || !Number.isFinite(n))
       throw new Error("x and y must be finite numbers");
     if (t < 0 || t > 1 || n < 0 || n > 1) throw new Error("x and y must be in the range [0, 1]");
-    this.flushScheduledPaint(), this.renderFrame();
+    this.animationFrameId !== null && (this.flushScheduledPaint(), this.renderFrame());
     const e = this.glContext, a = Math.min(
       this.canvas.width - 1,
       Math.max(0, Math.round(t * (this.canvas.width - 1)))
@@ -2255,7 +2261,7 @@ class Xt extends lt {
       this.canvas.height - 1,
       Math.max(0, Math.round(n * (this.canvas.height - 1)))
     );
-    e.bindFramebuffer(e.FRAMEBUFFER, this.#e);
+    e.bindFramebuffer(e.FRAMEBUFFER, this.#e), e.flush();
     const s = new Uint8Array(4);
     return e.readPixels(a, o, 1, 1, e.RGBA, e.UNSIGNED_BYTE, s), e.bindFramebuffer(e.FRAMEBUFFER, null), [s[0] / 255, s[1] / 255, s[2] / 255];
   }
@@ -2265,27 +2271,27 @@ class Xt extends lt {
     if (t < 0 || t > 1 || n < 0 || n > 1) throw new Error("x and y must be in the range [0, 1]");
     this.flushScheduledPaint();
     const e = this.glContext;
-    if (this.#m || (this.#p = e.createTexture(), e.bindTexture(e.TEXTURE_2D, this.#p), e.texImage2D(e.TEXTURE_2D, 0, e.RGBA16F, 1, 1, 0, e.RGBA, e.HALF_FLOAT, null), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MIN_FILTER, e.NEAREST), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MAG_FILTER, e.NEAREST), e.bindTexture(e.TEXTURE_2D, null), this.#m = e.createFramebuffer(), e.bindFramebuffer(e.FRAMEBUFFER, this.#m), e.framebufferTexture2D(
+    if (this.#m || (e.getExtension("EXT_color_buffer_float"), this.#p = e.createTexture(), e.bindTexture(e.TEXTURE_2D, this.#p), e.texImage2D(e.TEXTURE_2D, 0, e.RGBA16F, 1, 1, 0, e.RGBA, e.HALF_FLOAT, null), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MIN_FILTER, e.NEAREST), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MAG_FILTER, e.NEAREST), e.bindTexture(e.TEXTURE_2D, null), this.#m = e.createFramebuffer(), e.bindFramebuffer(e.FRAMEBUFFER, this.#m), e.framebufferTexture2D(
       e.FRAMEBUFFER,
       e.COLOR_ATTACHMENT0,
       e.TEXTURE_2D,
       this.#p,
       0
-    ), e.bindFramebuffer(e.FRAMEBUFFER, null)), this.#P) {
+    ), e.bindFramebuffer(e.FRAMEBUFFER, null)), this.#r && (this.#A = !0), this.#A) {
       this.#h && e.deleteProgram(this.#h);
       const s = { ...this.#k(), OUTPUT_LINEAR: 1 }, i = V(
-        x[this.#o],
-        E[this.#c],
+        E[this.#o],
+        x[this.#c],
         this.#_,
         !0
       );
-      this.#h = y(e, s, i, S), this.#I = e.getUniformLocation(this.#h, "progress"), this.#D = e.getUniformLocation(this.#h, "paletteTexture"), this.#O = e.getUniformLocation(
+      this.#h = y(e, s, i, O), this.#I = e.getUniformLocation(this.#h, "progress"), this.#D = e.getUniformLocation(this.#h, "paletteTexture"), this.#O = e.getUniformLocation(
         this.#h,
         "paletteMetricTexture"
-      ), this.#S = e.getUniformLocation(this.#h, "uPaletteSize"), this.#w = e.getUniformLocation(this.#h, "uvOverride"), this.#P = !1;
+      ), this.#P = e.getUniformLocation(this.#h, "uPaletteSize"), this.#w = e.getUniformLocation(this.#h, "uvOverride"), this.#A = !1;
     }
     const a = e.getParameter(e.VIEWPORT);
-    e.bindFramebuffer(e.FRAMEBUFFER, this.#m), e.viewport(0, 0, 1, 1), e.useProgram(this.#h), e.uniform2f(this.#w, t, n), e.uniform1f(this.#I, this.#d), this.uploadMetricPalette(this.#S), e.activeTexture(e.TEXTURE0), e.bindTexture(e.TEXTURE_2D, this.paletteTexture), e.uniform1i(this.#D, 0), e.activeTexture(e.TEXTURE1), e.bindTexture(e.TEXTURE_2D, this.metricTexture), e.uniform1i(this.#O, 1), e.clearColor(0, 0, 0, 0), e.clear(e.COLOR_BUFFER_BIT), e.bindVertexArray(this.#a), e.drawArrays(e.TRIANGLE_STRIP, 0, 4), e.flush();
+    e.bindFramebuffer(e.FRAMEBUFFER, this.#m), e.viewport(0, 0, 1, 1), e.useProgram(this.#h), e.uniform2f(this.#w, t, n), e.uniform1f(this.#I, this.#d), e.uniform1i(this.#P, this.paletteState.length), e.activeTexture(e.TEXTURE0), e.bindTexture(e.TEXTURE_2D, this.paletteTexture), e.uniform1i(this.#D, 0), e.activeTexture(e.TEXTURE1), e.bindTexture(e.TEXTURE_2D, this.metricTexture), e.uniform1i(this.#O, 1), e.clearColor(0, 0, 0, 0), e.clear(e.COLOR_BUFFER_BIT), e.bindVertexArray(this.#a), e.drawArrays(e.TRIANGLE_STRIP, 0, 4), e.flush();
     const o = new Float32Array(4);
     return e.readPixels(0, 0, 1, 1, e.RGBA, e.FLOAT, o), e.bindFramebuffer(e.FRAMEBUFFER, null), e.bindVertexArray(null), e.viewport(a[0], a[1], a[2], a[3]), [o[0], o[1], o[2]];
   }
@@ -2304,14 +2310,14 @@ class Xt extends lt {
     return this.#i;
   }
   set colorModel(t) {
-    if (!(t in x)) throw new Error(`colorModel '${t}' is not supported`);
+    if (!(t in E)) throw new Error(`colorModel '${t}' is not supported`);
     this.#o = t, this.#r = !0, this.schedulePaint();
   }
   get colorModel() {
     return this.#o;
   }
   set distanceMetric(t) {
-    if (!(t in E))
+    if (!(t in x))
       throw new Error(`distanceMetric '${t}' is not supported`);
     this.#c = t, this.#r = !0, this.schedulePaint();
   }
@@ -2346,7 +2352,7 @@ class Xt extends lt {
   /** @deprecated use PaletteViz.paletteToRGBA */
   static paletteToTexture = D;
 }
-function Ot(r) {
+function St(r) {
   const t = [], n = [], e = r, a = [
     // axisIndex, sign, uAxis, vAxis, uSign, vSign
     // +X face
@@ -2377,7 +2383,7 @@ function Ot(r) {
   }
   return { vertices: new Float32Array(t), indices: new Uint32Array(n) };
 }
-function St(r, t, n = 0) {
+function Ot(r, t, n = 0) {
   const e = [], a = [], o = r, s = -n, l = 1 + n - s;
   for (let _ = t; _ >= 0; _--) {
     const b = s + l * _ / t, C = e.length / 3;
@@ -2546,22 +2552,22 @@ class Ht extends lt {
   #s = 0;
   #g = 0;
   #C = null;
-  #M = null;
   #y = null;
+  #S = null;
   #m = null;
   #p = null;
   #h = null;
   #I = null;
   #D = null;
   #O = null;
-  #S = null;
-  #w = null;
   #P = null;
+  #w = null;
+  #A = null;
   #k = new Float32Array(9);
-  #x = null;
   #E = null;
+  #x = null;
   #L = null;
-  #A = null;
+  #M = null;
   #F = null;
   #B = null;
   #X = null;
@@ -2591,7 +2597,7 @@ class Ht extends lt {
       observeResize: o,
       container: s,
       canvasClassName: "palette-viz-3d"
-    }), this.#o = i, this.#c = l, this.#f = this.normalizeInvertAxes(_), this.#_ = b, this.#v = C, this.#n = f, this.#d = h, this.#e = W.has(x[this.#o]), d ? this.#i = new Float32Array(d) : this.#i = new Float32Array(p(M(0.45), A(0.65))), this.#W(), this.#j(), this.syncCanvasSize(this.width, this.height), this.#N(), this.glContext.enable(this.glContext.DEPTH_TEST), this.#Q(), this.attachCanvas(), this.schedulePaint();
+    }), this.#o = i, this.#c = l, this.#f = this.normalizeInvertAxes(_), this.#_ = b, this.#v = C, this.#n = f, this.#d = h, this.#e = W.has(E[this.#o]), d ? this.#i = new Float32Array(d) : this.#i = new Float32Array(p(M(0.45), A(0.65))), this.#W(), this.#j(), this.syncCanvasSize(this.width, this.height), this.#N(), this.glContext.enable(this.glContext.DEPTH_TEST), this.#Q(), this.attachCanvas(), this.schedulePaint();
   }
   #W() {
     const t = this.glContext;
@@ -2602,7 +2608,7 @@ class Ht extends lt {
       return;
     }
     this.#s = this.#n ? this.#U() : 0;
-    const { vertices: n, indices: e } = this.#n ? St(2, this.#s, Y) : Ot(64);
+    const { vertices: n, indices: e } = this.#n ? Ot(2, this.#s, Y) : St(64);
     this.#T = e.length, this.#r = t.createBuffer(), t.bindBuffer(t.ARRAY_BUFFER, this.#r), t.bufferData(t.ARRAY_BUFFER, n, t.STATIC_DRAW), this.#u = t.createBuffer(), t.bindBuffer(t.ELEMENT_ARRAY_BUFFER, this.#u), t.bufferData(t.ELEMENT_ARRAY_BUFFER, e, t.STATIC_DRAW), this.#a = t.createVertexArray(), t.bindVertexArray(this.#a), t.bindBuffer(t.ARRAY_BUFFER, this.#r), t.enableVertexAttribArray(0), t.vertexAttribPointer(0, 3, t.FLOAT, !1, 0, 0), t.bindBuffer(t.ELEMENT_ARRAY_BUFFER, this.#u), t.bindVertexArray(null);
   }
   #U() {
@@ -2641,10 +2647,10 @@ class Ht extends lt {
     s.bindVertexArray(null);
   }
   #J() {
-    const t = x[this.#o];
+    const t = E[this.#o];
     return {
       COLOR_MODEL: t,
-      DISTANCE_METRIC: E[this.#c],
+      DISTANCE_METRIC: x[this.#c],
       INVERT_X: this.#f.includes("x") ? 1 : !1,
       INVERT_Y: this.#f.includes("y") ? 1 : !1,
       INVERT_Z: this.#f.includes("z") ? 1 : !1,
@@ -2660,14 +2666,14 @@ class Ht extends lt {
     const t = this.glContext;
     this.#t && t.deleteProgram(this.#t), this.#l && t.deleteProgram(this.#l);
     const n = Lt(
-      x[this.#o],
-      E[this.#c],
+      E[this.#o],
+      x[this.#c],
       this.#_
     ), e = At(
-      x[this.#o],
+      E[this.#o],
       this.#n
-    ), a = this.#e ? Et : xt;
-    this.#t = y(t, this.#J(), n, a), this.#l = y(t, this.#J(), e, a), this.#M = t.getUniformLocation(this.#t, "uMVP"), this.#y = t.getUniformLocation(this.#l, "uMVP"), this.#m = t.getUniformLocation(this.#t, "uPosition"), this.#p = t.getUniformLocation(this.#l, "uPosition"), this.#h = t.getUniformLocation(this.#t, "paletteTexture"), this.#I = t.getUniformLocation(this.#t, "paletteMetricTexture"), this.#D = t.getUniformLocation(this.#t, "uPaletteSize"), this.#O = t.getUniformLocation(this.#t, "uColorRotation"), this.#S = t.getUniformLocation(this.#l, "uColorRotation"), this.#w = t.getUniformLocation(this.#t, "uSliceOffset"), this.#P = t.getUniformLocation(this.#l, "uSliceOffset"), this.metricPaletteDirty = !0;
+    ), a = this.#e ? xt : Et;
+    this.#t = y(t, this.#J(), n, a), this.#l = y(t, this.#J(), e, a), this.#y = t.getUniformLocation(this.#t, "uMVP"), this.#S = t.getUniformLocation(this.#l, "uMVP"), this.#m = t.getUniformLocation(this.#t, "uPosition"), this.#p = t.getUniformLocation(this.#l, "uPosition"), this.#h = t.getUniformLocation(this.#t, "paletteTexture"), this.#I = t.getUniformLocation(this.#t, "paletteMetricTexture"), this.#D = t.getUniformLocation(this.#t, "uPaletteSize"), this.#O = t.getUniformLocation(this.#t, "uColorRotation"), this.#P = t.getUniformLocation(this.#l, "uColorRotation"), this.#w = t.getUniformLocation(this.#t, "uSliceOffset"), this.#A = t.getUniformLocation(this.#l, "uSliceOffset"), this.metricPaletteDirty = !0;
   }
   #G(t, n, e, a) {
     const o = this.glContext;
@@ -2678,15 +2684,15 @@ class Ht extends lt {
   }
   #Q() {
     const t = this.glContext;
-    this.#E = t.createTexture(), this.#L = t.createRenderbuffer(), this.#x = t.createFramebuffer(), this.#K(this.canvas.width, this.canvas.height), this.#B = t.createBuffer(), t.bindBuffer(t.ARRAY_BUFFER, this.#B), t.bufferData(t.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), t.STATIC_DRAW), this.#F = t.createVertexArray(), t.bindVertexArray(this.#F), t.enableVertexAttribArray(0), t.vertexAttribPointer(0, 2, t.FLOAT, !1, 0, 0), t.bindVertexArray(null), this.#A = y(t, {}, it, S), this.#X = t.getUniformLocation(this.#A, "colorMap"), this.#H = t.getUniformLocation(this.#A, "outlineWidth"), this.#V = t.getUniformLocation(this.#A, "resolution");
+    this.#x = t.createTexture(), this.#L = t.createRenderbuffer(), this.#E = t.createFramebuffer(), this.#K(this.canvas.width, this.canvas.height), this.#B = t.createBuffer(), t.bindBuffer(t.ARRAY_BUFFER, this.#B), t.bufferData(t.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), t.STATIC_DRAW), this.#F = t.createVertexArray(), t.bindVertexArray(this.#F), t.enableVertexAttribArray(0), t.vertexAttribPointer(0, 2, t.FLOAT, !1, 0, 0), t.bindVertexArray(null), this.#M = y(t, {}, it, O), this.#X = t.getUniformLocation(this.#M, "colorMap"), this.#H = t.getUniformLocation(this.#M, "outlineWidth"), this.#V = t.getUniformLocation(this.#M, "resolution");
   }
   #K(t, n) {
     const e = this.glContext;
-    e.bindTexture(e.TEXTURE_2D, this.#E), e.texImage2D(e.TEXTURE_2D, 0, e.RGBA8, t, n, 0, e.RGBA, e.UNSIGNED_BYTE, null), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MIN_FILTER, e.NEAREST), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MAG_FILTER, e.NEAREST), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_S, e.CLAMP_TO_EDGE), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_T, e.CLAMP_TO_EDGE), e.bindTexture(e.TEXTURE_2D, null), e.bindRenderbuffer(e.RENDERBUFFER, this.#L), e.renderbufferStorage(e.RENDERBUFFER, e.DEPTH_COMPONENT16, t, n), e.bindRenderbuffer(e.RENDERBUFFER, null), e.bindFramebuffer(e.FRAMEBUFFER, this.#x), e.framebufferTexture2D(
+    e.bindTexture(e.TEXTURE_2D, this.#x), e.texImage2D(e.TEXTURE_2D, 0, e.RGBA8, t, n, 0, e.RGBA, e.UNSIGNED_BYTE, null), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MIN_FILTER, e.NEAREST), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_MAG_FILTER, e.NEAREST), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_S, e.CLAMP_TO_EDGE), e.texParameteri(e.TEXTURE_2D, e.TEXTURE_WRAP_T, e.CLAMP_TO_EDGE), e.bindTexture(e.TEXTURE_2D, null), e.bindRenderbuffer(e.RENDERBUFFER, this.#L), e.renderbufferStorage(e.RENDERBUFFER, e.DEPTH_COMPONENT16, t, n), e.bindRenderbuffer(e.RENDERBUFFER, null), e.bindFramebuffer(e.FRAMEBUFFER, this.#E), e.framebufferTexture2D(
       e.FRAMEBUFFER,
       e.COLOR_ATTACHMENT0,
       e.TEXTURE_2D,
-      this.#E,
+      this.#x,
       0
     ), e.framebufferRenderbuffer(
       e.FRAMEBUFFER,
@@ -2705,38 +2711,38 @@ class Ht extends lt {
     return p(n, p(e, this.#i));
   }
   currentMetricCode() {
-    return E[this.#c];
+    return x[this.#c];
   }
   onSurfaceResized(t, n) {
-    this.#N(), this.#E && this.#K(t, n);
+    this.#N(), this.#x && this.#K(t, n);
   }
   renderFrame() {
-    this.#N(), this.#R && (this.#e = W.has(x[this.#o]), this.#W(), this.#R = !1), this.#b && (this.#j(), this.#b = !1);
+    this.#N(), this.#R && (this.#e = W.has(E[this.#o]), this.#W(), this.#R = !1), this.#b && (this.#j(), this.#b = !1);
     const t = this.glContext;
-    t.bindFramebuffer(t.FRAMEBUFFER, this.#x), t.clearColor(0, 0, 0, 0), t.clear(t.COLOR_BUFFER_BIT | t.DEPTH_BUFFER_BIT), (this.#n || this.#e) && (t.colorMask(!1, !1, !1, !1), this.#n ? this.#Y(
+    t.bindFramebuffer(t.FRAMEBUFFER, this.#E), t.clearColor(0, 0, 0, 0), t.clear(t.COLOR_BUFFER_BIT | t.DEPTH_BUFFER_BIT), (this.#n || this.#e) && (t.colorMask(!1, !1, !1, !1), this.#n ? this.#Y(
       this.#l,
-      this.#y,
-      this.#p,
       this.#S,
-      this.#P
+      this.#p,
+      this.#P,
+      this.#A
     ) : (this.#G(
       this.#l,
-      this.#y,
+      this.#S,
       this.#p,
-      this.#S
-    ), t.bindVertexArray(this.#a), t.drawElements(t.TRIANGLES, this.#T, t.UNSIGNED_INT, 0), t.bindVertexArray(null)), t.colorMask(!0, !0, !0, !0), t.clear(t.COLOR_BUFFER_BIT), t.depthFunc(t.EQUAL), t.depthMask(!1)), this.#n ? t.useProgram(this.#t) : this.#G(this.#t, this.#M, this.#m, this.#O), this.uploadMetricPalette(this.#D), t.activeTexture(t.TEXTURE0), t.bindTexture(t.TEXTURE_2D, this.paletteTexture), t.uniform1i(this.#h, 0), t.activeTexture(t.TEXTURE1), t.bindTexture(t.TEXTURE_2D, this.metricTexture), t.uniform1i(this.#I, 1), this.#n ? this.#Y(
+      this.#P
+    ), t.bindVertexArray(this.#a), t.drawElements(t.TRIANGLES, this.#T, t.UNSIGNED_INT, 0), t.bindVertexArray(null)), t.colorMask(!0, !0, !0, !0), t.clear(t.COLOR_BUFFER_BIT), t.depthFunc(t.EQUAL), t.depthMask(!1)), this.#n ? t.useProgram(this.#t) : this.#G(this.#t, this.#y, this.#m, this.#O), this.uploadMetricPalette(this.#D), t.activeTexture(t.TEXTURE0), t.bindTexture(t.TEXTURE_2D, this.paletteTexture), t.uniform1i(this.#h, 0), t.activeTexture(t.TEXTURE1), t.bindTexture(t.TEXTURE_2D, this.metricTexture), t.uniform1i(this.#I, 1), this.#n ? this.#Y(
       this.#t,
-      this.#M,
+      this.#y,
       this.#m,
       this.#O,
       this.#w
-    ) : (t.bindVertexArray(this.#a), t.drawElements(t.TRIANGLES, this.#T, t.UNSIGNED_INT, 0), t.bindVertexArray(null)), (this.#n || this.#e) && (t.depthMask(!0), t.depthFunc(t.LESS)), t.bindFramebuffer(t.FRAMEBUFFER, null), t.disable(t.DEPTH_TEST), t.useProgram(this.#A), t.activeTexture(t.TEXTURE0), t.bindTexture(t.TEXTURE_2D, this.#E), t.uniform1i(this.#X, 0), t.uniform1f(this.#H, this.#_ ? 0 : this.#v), t.uniform2f(this.#V, this.canvas.width, this.canvas.height), t.clearColor(0, 0, 0, 0), t.clear(t.COLOR_BUFFER_BIT), t.bindVertexArray(this.#F), t.drawArrays(t.TRIANGLE_STRIP, 0, 4), t.bindVertexArray(null), t.enable(t.DEPTH_TEST);
+    ) : (t.bindVertexArray(this.#a), t.drawElements(t.TRIANGLES, this.#T, t.UNSIGNED_INT, 0), t.bindVertexArray(null)), (this.#n || this.#e) && (t.depthMask(!0), t.depthFunc(t.LESS)), t.bindFramebuffer(t.FRAMEBUFFER, null), t.disable(t.DEPTH_TEST), t.useProgram(this.#M), t.activeTexture(t.TEXTURE0), t.bindTexture(t.TEXTURE_2D, this.#x), t.uniform1i(this.#X, 0), t.uniform1f(this.#H, this.#_ ? 0 : this.#v), t.uniform2f(this.#V, this.canvas.width, this.canvas.height), t.clearColor(0, 0, 0, 0), t.clear(t.COLOR_BUFFER_BIT), t.bindVertexArray(this.#F), t.drawArrays(t.TRIANGLE_STRIP, 0, 4), t.bindVertexArray(null), t.enable(t.DEPTH_TEST);
   }
   getColorAtUV(t, n) {
     if (!Number.isFinite(t) || !Number.isFinite(n))
       throw new Error("x and y must be finite numbers");
     if (t < 0 || t > 1 || n < 0 || n > 1) throw new Error("x and y must be in the range [0, 1]");
-    this.flushScheduledPaint(), this.renderFrame();
+    this.animationFrameId !== null && (this.flushScheduledPaint(), this.renderFrame());
     const e = this.glContext, a = Math.min(
       this.canvas.width - 1,
       Math.max(0, Math.round(t * (this.canvas.width - 1)))
@@ -2744,7 +2750,7 @@ class Ht extends lt {
       this.canvas.height - 1,
       Math.max(0, Math.round((1 - n) * (this.canvas.height - 1)))
     );
-    e.bindFramebuffer(e.FRAMEBUFFER, this.#x);
+    e.bindFramebuffer(e.FRAMEBUFFER, this.#E);
     const s = new Uint8Array(4);
     return e.readPixels(a, o, 1, 1, e.RGBA, e.UNSIGNED_BYTE, s), e.bindFramebuffer(e.FRAMEBUFFER, null), s[3] === 0 ? null : [s[0] / 255, s[1] / 255, s[2] / 255];
   }
@@ -2755,17 +2761,17 @@ class Ht extends lt {
     if (!this.beginDestroy()) return;
     this.#C !== null && (window.clearTimeout(this.#C), this.#C = null);
     const t = this.glContext;
-    this.#A && t.deleteProgram(this.#A), this.#l && t.deleteProgram(this.#l), this.#F && t.deleteVertexArray(this.#F), this.#B && t.deleteBuffer(this.#B), this.#E && t.deleteTexture(this.#E), this.#L && t.deleteRenderbuffer(this.#L), this.#x && t.deleteFramebuffer(this.#x), this.#t && t.deleteProgram(this.#t), this.#r && t.deleteBuffer(this.#r), this.#u && t.deleteBuffer(this.#u), this.#a && t.deleteVertexArray(this.#a), this.destroyBaseResources();
+    this.#M && t.deleteProgram(this.#M), this.#l && t.deleteProgram(this.#l), this.#F && t.deleteVertexArray(this.#F), this.#B && t.deleteBuffer(this.#B), this.#x && t.deleteTexture(this.#x), this.#L && t.deleteRenderbuffer(this.#L), this.#E && t.deleteFramebuffer(this.#E), this.#t && t.deleteProgram(this.#t), this.#r && t.deleteBuffer(this.#r), this.#u && t.deleteBuffer(this.#u), this.#a && t.deleteVertexArray(this.#a), this.destroyBaseResources();
   }
   set colorModel(t) {
-    if (!(t in x)) throw new Error(`colorModel '${t}' is not supported`);
+    if (!(t in E)) throw new Error(`colorModel '${t}' is not supported`);
     this.#o = t, this.#b = !0, this.#R = !0, this.schedulePaint();
   }
   get colorModel() {
     return this.#o;
   }
   set distanceMetric(t) {
-    if (!(t in E))
+    if (!(t in x))
       throw new Error(`distanceMetric '${t}' is not supported`);
     this.#c = t, this.#b = !0, this.schedulePaint();
   }