@ludicon/spark.js 0.0.13 → 0.0.15

package/dist/spark.esm.js

@@ -1,6 +1,6 @@
-const z = /* @__PURE__ */ Object.assign({ "./spark_astc_rgb.wgsl": () => import("./spark_astc_rgb-DaSIMKXW.js"), "./spark_astc_rgba.wgsl": () => import("./spark_astc_rgba-BToA2Rcq.js"), "./spark_bc1_rgb.wgsl": () => import("./spark_bc1_rgb-DZwuM1tO.js"), "./spark_bc4_r.wgsl": () => import("./spark_bc4_r-DjThizCH.js"), "./spark_bc5_rg.wgsl": () => import("./spark_bc5_rg-6bO0Gvo9.js"), "./spark_bc7_rgb.wgsl": () => import("./spark_bc7_rgb-FXpBw9fE.js"), "./spark_bc7_rgba.wgsl": () => import("./spark_bc7_rgba-C8Hi2pUY.js"), "./spark_eac_r.wgsl": () => import("./spark_eac_r-D8HGiglc.js"), "./spark_eac_rg.wgsl": () => import("./spark_eac_rg-DvsrLP9h.js"), "./spark_etc2_rgb.wgsl": () => import("./spark_etc2_rgb-C-j5FZpn.js"), "./utils.wgsl": () => import("./utils-Dw9jXlhw.js") }), k = Object.fromEntries(
-  Object.entries(z).map(([n, e]) => [n.replace("./", ""), async () => (await e()).default])
-), s = {
+const V = /* @__PURE__ */ Object.assign({ "./spark_astc_rgb.wgsl": () => import("./spark_astc_rgb-DaSIMKXW.js"), "./spark_astc_rgba.wgsl": () => import("./spark_astc_rgba-BToA2Rcq.js"), "./spark_bc1_rgb.wgsl": () => import("./spark_bc1_rgb-DZwuM1tO.js"), "./spark_bc4_r.wgsl": () => import("./spark_bc4_r-DjThizCH.js"), "./spark_bc5_rg.wgsl": () => import("./spark_bc5_rg-6bO0Gvo9.js"), "./spark_bc7_rgb.wgsl": () => import("./spark_bc7_rgb-FXpBw9fE.js"), "./spark_bc7_rgba.wgsl": () => import("./spark_bc7_rgba-C8Hi2pUY.js"), "./spark_eac_r.wgsl": () => import("./spark_eac_r-D8HGiglc.js"), "./spark_eac_rg.wgsl": () => import("./spark_eac_rg-DvsrLP9h.js"), "./spark_etc2_rgb.wgsl": () => import("./spark_etc2_rgb-C-j5FZpn.js"), "./utils.wgsl": () => import("./utils-_0JXKkpk.js") }), I = Object.fromEntries(
+  Object.entries(V).map(([u, e]) => [u.replace("./", ""), async () => (await e()).default])
+), i = {
   ASTC_4x4_RGB: 0,
   ASTC_4x4_RGBA: 1,
   // ASTC_4x4_RGBM: 2,
@@ -19,7 +19,7 @@ const z = /* @__PURE__ */ Object.assign({ "./spark_astc_rgb.wgsl": () => import(
   // BC6H_RGB: 15,
   BC7_RGB: 16,
   BC7_RGBA: 17
-}, B = [
+}, G = [
   /* 0  */
   "astc-4x4-rgb",
   // ASTC_4x4_RGB
@@ -113,7 +113,7 @@ const z = /* @__PURE__ */ Object.assign({ "./spark_astc_rgb.wgsl": () => import(
   /* 17 */
   "spark_bc7_rgba.wgsl"
   // BC7_RGBA
-], Y = [
+], W = [
   /* 0  */
   16,
   // ASTC_4x4_RGB
@@ -160,7 +160,7 @@ const z = /* @__PURE__ */ Object.assign({ "./spark_astc_rgb.wgsl": () => import(
   /* 17 */
   16
   // BC7_RGB
-], W = [
+], Y = [
   /* 0  */
   4,
   // ASTC_4x4_RGB
@@ -207,34 +207,34 @@ const z = /* @__PURE__ */ Object.assign({ "./spark_astc_rgb.wgsl": () => import(
   /* 17 */
   4
   // BC7_RGB
-], T = Object.freeze({
-  "astc-4x4-rgb": s.ASTC_4x4_RGB,
-  "astc-4x4-rgba": s.ASTC_4x4_RGBA,
-  "eac-r": s.EAC_R,
-  "eac-rg": s.EAC_RG,
-  "etc2-rgb": s.ETC2_RGB,
-  "bc1-rgb": s.BC1_RGB,
-  "bc4-r": s.BC4_R,
-  "bc5-rg": s.BC5_RG,
-  "bc7-rgb": s.BC7_RGB,
-  "bc7-rgba": s.BC7_RGBA,
+], P = Object.freeze({
+  "astc-4x4-rgb": i.ASTC_4x4_RGB,
+  "astc-4x4-rgba": i.ASTC_4x4_RGBA,
+  "eac-r": i.EAC_R,
+  "eac-rg": i.EAC_RG,
+  "etc2-rgb": i.ETC2_RGB,
+  "bc1-rgb": i.BC1_RGB,
+  "bc4-r": i.BC4_R,
+  "bc5-rg": i.BC5_RG,
+  "bc7-rgb": i.BC7_RGB,
+  "bc7-rgba": i.BC7_RGBA,
   // aliases:
-  "astc-rgb": s.ASTC_4x4_RGB,
-  "astc-rgba": s.ASTC_4x4_RGBA,
+  "astc-rgb": i.ASTC_4x4_RGB,
+  "astc-rgba": i.ASTC_4x4_RGBA,
   // webgpu aliases:
-  "bc1-rgba-unorm": s.BC1_RGB,
-  "bc1-rgba-unorm-srgb": s.BC1_RGB,
-  "bc4-r-unorm": s.BC4_R,
-  "bc5-rg-unorm": s.BC5_RG,
-  "bc7-rgba-unorm": s.BC7_RGBA,
-  "bc7-rgba-unorm-srgb": s.BC7_RGBA,
-  "etc2-rgb8unorm": s.ETC2_RGB,
-  "etc2-rgb8unorm-srgb": s.ETC2_RGB,
-  "eac-r11unorm": s.EAC_R,
-  "eac-rg11unorm": s.EAC_RG,
-  "astc-4x4-unorm": s.ASTC_4x4_RGBA,
-  "astc-4x4-unorm-srgb": s.ASTC_4x4_RGBA
-}), V = [
+  "bc1-rgba-unorm": i.BC1_RGB,
+  "bc1-rgba-unorm-srgb": i.BC1_RGB,
+  "bc4-r-unorm": i.BC4_R,
+  "bc5-rg-unorm": i.BC5_RG,
+  "bc7-rgba-unorm": i.BC7_RGBA,
+  "bc7-rgba-unorm-srgb": i.BC7_RGBA,
+  "etc2-rgb8unorm": i.ETC2_RGB,
+  "etc2-rgb8unorm-srgb": i.ETC2_RGB,
+  "eac-r11unorm": i.EAC_R,
+  "eac-rg11unorm": i.EAC_RG,
+  "astc-4x4-unorm": i.ASTC_4x4_RGBA,
+  "astc-4x4-unorm-srgb": i.ASTC_4x4_RGBA
+}), $ = [
   /* 0  */
   "astc-4x4-unorm",
   // ASTC_4x4_RGB
@@ -281,7 +281,7 @@ const z = /* @__PURE__ */ Object.assign({ "./spark_astc_rgb.wgsl": () => import(
   /* 17 */
   "bc7-rgba-unorm"
   // BC7_RGB
-], $ = [
+], X = [
   /* 0  */
   !0,
   // ASTC_4x4_RGB
@@ -329,63 +329,66 @@ const z = /* @__PURE__ */ Object.assign({ "./spark_astc_rgb.wgsl": () => import(
   !0
   // BC7_RGB
 ];
-function w(n, e) {
-  if (!n)
+function w(u, e) {
+  if (!u)
     throw new Error(e);
 }
-function X(n) {
-  return typeof GPUDevice < "u" && n instanceof GPUDevice;
+function H(u) {
+  return typeof GPUDevice < "u" && u instanceof GPUDevice;
 }
-function F() {
+function j() {
   return ["iPad Simulator", "iPhone Simulator", "iPod Simulator", "iPad", "iPhone", "iPod"].includes(navigator.platform) || // iPad on iOS 13 detection
   navigator.userAgent.includes("Mac") && "ontouchend" in document;
 }
-function j() {
-  const n = navigator.userAgent.match(/Safari\/(\d+(\.\d+)?)/);
-  return n && parseFloat(n[1]);
+function O() {
+  const u = navigator.userAgent;
+  if (u.includes("Chrome") || u.includes("Chromium"))
+    return null;
+  const e = u.match(/Safari\/(\d+(\.\d+)?)/);
+  return e && parseFloat(e[1]);
 }
-function Q() {
-  const n = navigator.userAgent.match(/Firefox\/(\d+(\.\d+)?)/);
-  return n && parseFloat(n[1]);
+function k() {
+  const u = navigator.userAgent.match(/Firefox\/(\d+(\.\d+)?)/);
+  return u && parseFloat(u[1]);
 }
-function H(n) {
+function Q(u) {
   const e = /* @__PURE__ */ new Set(), r = {
     "texture-compression-bc": [
-      s.BC1_RGB,
-      s.BC4_R,
-      s.BC5_RG,
-      s.BC7_RGB,
-      s.BC7_RGBA
+      i.BC1_RGB,
+      i.BC4_R,
+      i.BC5_RG,
+      i.BC7_RGB,
+      i.BC7_RGBA
     ],
-    "texture-compression-etc2": [s.ETC2_RGB, s.EAC_R, s.EAC_RG],
-    "texture-compression-astc": [s.ASTC_4x4_RGB, s.ASTC_4x4_RGBA]
+    "texture-compression-etc2": [i.ETC2_RGB, i.EAC_R, i.EAC_RG],
+    "texture-compression-astc": [i.ASTC_4x4_RGB, i.ASTC_4x4_RGBA]
   };
-  for (const [t, i] of Object.entries(r))
-    if (n.features.has(t))
-      for (const a of i)
-        e.add(a);
+  for (const [t, s] of Object.entries(r))
+    if (u.features.has(t))
+      for (const n of s)
+        e.add(n);
   return e;
 }
-function Z(n) {
+function Z(u) {
   const e = document.createElement("canvas");
-  e.width = n.width, e.height = n.height;
+  e.width = u.width, e.height = u.height;
   const r = e.getContext("2d");
-  r.drawImage(n, 0, 0);
-  const t = r.getImageData(0, 0, n.width, n.height);
+  r.drawImage(u, 0, 0);
+  const t = r.getImageData(0, 0, u.width, u.height);
   return new Uint8Array(t.data.buffer);
 }
-function J(n) {
-  return /\.svg(?:$|\?)/i.test(n) || /^data:image\/svg\+xml[,;]/i.test(n);
+function J(u) {
+  return /\.svg(?:$|\?)/i.test(u) || /^data:image\/svg\+xml[,;]/i.test(u);
 }
-function K(n) {
+function K(u) {
   return new Promise((e, r) => {
     const t = new Image();
-    t.crossOrigin = "anonymous", t.decoding = "async", t.onload = () => e(t), t.onerror = r, t.src = n;
+    t.crossOrigin = "anonymous", t.decoding = "async", t.onload = () => e(t), t.onerror = r, t.src = u;
   });
 }
-async function ee(n, e = {}) {
-  const r = await fetch(n, { mode: "cors" });
-  if (!r.ok) throw new Error(`HTTP ${r.status} for ${n}`);
+async function ee(u, e = {}) {
+  const r = await fetch(u, { mode: "cors" });
+  if (!r.ok) throw new Error(`HTTP ${r.status} for ${u}`);
   const t = await r.blob();
   return createImageBitmap(t, {
     imageOrientation: e.flipY ? "flipY" : "none",
@@ -393,35 +396,36 @@ async function ee(n, e = {}) {
     premultiplyAlpha: "none"
   });
 }
-const te = F();
-function v(n) {
-  return J(n) || te ? K(n) : ee(n);
+const te = O();
+function N(u) {
+  return J(u) || te ? K(u) : ee(u);
 }
-const O = 256, N = 4;
-function re(n, e, r, t) {
-  let i = 0, a = 0;
-  const o = [];
+const L = 256, F = 4;
+function re(u, e, r, t) {
+  let s = 0, n = 0;
+  const a = [];
   do {
-    const c = Math.ceil(n / 4), u = Math.ceil(e / 4), f = Math.ceil(c * r / O) * O, l = u * f;
-    i++, o.push({ offset: a, alignedSize: l, w: n, h: e, bw: c, bh: u, bytesPerRow: f }), a += l, n = Math.max(1, Math.floor(n / 2)), e = Math.max(1, Math.floor(e / 2));
-  } while (t && (n >= N || e >= N));
-  return { mipmapCount: i, outputSize: a, bufferRanges: o };
+    const o = Math.ceil(u / 4), c = Math.ceil(e / 4), l = Math.ceil(o * r / L) * L, f = c * l;
+    s++, a.push({ offset: n, alignedSize: f, w: u, h: e, bw: o, bh: c, bytesPerRow: l }), n += f, u = Math.max(1, Math.floor(u / 2)), e = Math.max(1, Math.floor(e / 2));
+  } while (t && (u >= F || e >= F));
+  return { mipmapCount: s, outputSize: n, bufferRanges: a };
 }
-class L {
+class D {
   #e;
-  #o;
-  #i = [];
-  #l;
-  #c;
-  #m;
+  #f;
+  #l = [];
   #g;
+  #a = !1;
+  #s;
+  #o;
   #u;
-  #a;
+  #m;
+  #i;
   #n = new Array(3);
   #r;
-  #f;
-  #s;
-  #_ = 0;
+  #p;
+  #c;
+  #G = 0;
   /**
    * Initialize the encoder by detecting available compression formats.
    * @param {GPUDevice} device - WebGPU device.
@@ -430,7 +434,7 @@ class L {
    * @returns {Promise<void>} Resolves when initialization is complete.
    */
   static async create(e, r = {}) {
-    const t = new L();
+    const t = new D();
     return await t.#B(e, r.preload ?? !1, r.useTimestampQueries ?? !1), t;
   }
   /**
@@ -461,10 +465,10 @@ class L {
       "bc7-rgba"
     ], r = [];
     for (const t of e) {
-      const i = T[t];
-      if (this.#t(i)) {
-        const a = W[i];
-        r.push({ format: t, ratio: a });
+      const s = P[t];
+      if (this.#t(s)) {
+        const n = Y[s];
+        r.push({ format: t, ratio: n });
       }
     }
     return r;
@@ -489,7 +493,7 @@ class L {
    */
   static getRequiredFeatures(e) {
     const r = [];
-    return !F() && e.features.has("texture-compression-bc") && r.push("texture-compression-bc"), e.features.has("texture-compression-etc2") && r.push("texture-compression-etc2"), e.features.has("texture-compression-astc") && r.push("texture-compression-astc"), e.features.has("shader-f16") && r.push("shader-f16"), e.features.has("timestamp-query") && r.push("timestamp-query"), r;
+    return !j() && e.features.has("texture-compression-bc") && r.push("texture-compression-bc"), e.features.has("texture-compression-etc2") && r.push("texture-compression-etc2"), e.features.has("texture-compression-astc") && r.push("texture-compression-astc"), e.features.has("shader-f16") && r.push("shader-f16"), e.features.has("timestamp-query") && r.push("timestamp-query"), r;
   }
   /**
    * Try to determine the best compression options automatically. Do not use this in production, this is
@@ -501,10 +505,10 @@ class L {
    */
   async selectPreferredOptions(e, r = {}) {
     if (r.format == null || r.format == "auto") {
-      const t = e instanceof Image || e instanceof ImageBitmap || e instanceof GPUTexture ? e : await v(e);
+      const t = e instanceof Image || e instanceof ImageBitmap || e instanceof GPUTexture ? e : await N(e);
       r.format = "auto";
-      const i = await this.#b(r, t);
-      r.format = B[i], t instanceof GPUTexture && t.format.endsWith("-srgb") && (r.srgb = !0), (i == s.EAC_RG || i == s.BC5_RG) && (r.normal = !0);
+      const s = await this.#d(r, t);
+      r.format = G[s], t instanceof GPUTexture && t.format.endsWith("-srgb") && (r.srgb = !0), (s == i.EAC_RG || s == i.BC5_RG) && (r.normal = !0);
     }
     return r;
   }
@@ -549,25 +553,26 @@ class L {
    */
   async encodeTexture(e, r = {}) {
     w(this.#e, "Spark is not initialized");
-    const t = e instanceof Image || e instanceof ImageBitmap || e instanceof GPUTexture ? e : await v(e);
+    const t = e instanceof Image || e instanceof ImageBitmap || e instanceof GPUTexture ? e : await N(e);
     console.log("Loaded image", t);
-    const i = await this.#b(r, t), a = this.#p(i), o = Math.ceil(t.width / 4) * 4, c = Math.ceil(t.height / 4) * 4, u = Y[i], f = r.generateMipmaps || r.mips, { mipmapCount: l, outputSize: d, bufferRanges: m } = re(o, c, u, f), h = (r.srgb || r.format?.endsWith("srgb")) && $[i], _ = h ? 1 : r.normal ? 2 : 0, G = V[i] + (h ? "-srgb" : ""), A = h ? ["rgba8unorm", "rgba8unorm-srgb"] : ["rgba8unorm"], x = this.#_++;
+    const s = await this.#d(r, t), n = this.#h(s), a = Math.ceil(t.width / 4) * 4, o = Math.ceil(t.height / 4) * 4, c = W[s], l = r.generateMipmaps || r.mips, { mipmapCount: f, outputSize: h, bufferRanges: m } = re(a, o, c, l), b = (r.srgb || r.format?.endsWith("srgb")) && X[s], _ = b ? 1 : r.normal ? 2 : 0, B = $[s] + (b ? "-srgb" : ""), A = b ? ["rgba8unorm", "rgba8unorm-srgb"] : ["rgba8unorm"], x = this.#G++;
     console.time("create input texture #" + x);
-    let S = GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.STORAGE_BINDING;
-    const P = r.flipY || o != t.width || c != t.height;
-    !P && !(t instanceof GPUTexture) && (S |= GPUTextureUsage.RENDER_ATTACHMENT);
-    const g = this.#e.createCommandEncoder();
-    g.pushDebugGroup?.("spark process texture"), this.#r && typeof g.writeTimestamp == "function" && g.writeTimestamp(this.#r, 0);
-    let b;
-    (P || !(t instanceof GPUTexture && !f)) && (b = this.#e.createTexture({
-      size: [o, c, 1],
-      mipLevelCount: l,
+    let C = GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST;
+    this.#a ? C |= GPUTextureUsage.RENDER_ATTACHMENT : C |= GPUTextureUsage.STORAGE_BINDING;
+    const y = r.flipY || a != t.width || o != t.height;
+    !y && !(t instanceof GPUTexture) && (C |= GPUTextureUsage.RENDER_ATTACHMENT);
+    const p = this.#e.createCommandEncoder();
+    p.pushDebugGroup?.("spark process texture"), this.#r && typeof p.writeTimestamp == "function" && p.writeTimestamp(this.#r, 0);
+    let d;
+    (y || !(t instanceof GPUTexture && !l)) && (d = this.#e.createTexture({
+      size: [a, o, 1],
+      mipLevelCount: f,
       format: "rgba8unorm",
-      usage: S,
+      usage: C,
       viewFormats: A
     }));
-    let C;
-    P ? t instanceof GPUTexture ? this.#d(g, t, b, o, c, h, r.flipY) : (C = this.#e.createTexture({
+    let R;
+    y ? t instanceof GPUTexture ? this.#_(p, t, d, a, o, b, r.flipY) : (R = this.#e.createTexture({
       size: [t.width, t.height, 1],
       mipLevelCount: 1,
       format: "rgba8unorm",
@@ -576,76 +581,76 @@ class L {
       viewFormats: A
     }), this.#e.queue.copyExternalImageToTexture(
       { source: t },
-      { texture: C },
+      { texture: R },
       { width: t.width, height: t.height }
-    ), this.#d(g, C, b, o, c, _, r.flipY)) : t instanceof GPUTexture ? f ? g.copyTextureToTexture({ texture: t }, { texture: b }, { width: o, height: c }) : b = t : this.#e.queue.copyExternalImageToTexture({ source: t }, { texture: b }, { width: o, height: c }), f && this.#T(g, b, l, o, c, _), g.popDebugGroup?.(), console.timeEnd("create input texture #" + x);
-    const U = this.#e.createTexture({
-      size: [o, c, 1],
-      mipLevelCount: l,
-      format: G,
+    ), this.#_(p, R, d, a, o, _, r.flipY)) : t instanceof GPUTexture ? l ? p.copyTextureToTexture({ texture: t }, { texture: d }, { width: a, height: o }) : d = t : this.#e.queue.copyExternalImageToTexture({ source: t }, { texture: d }, { width: a, height: o }), l && this.#w(p, d, f, a, o, _), p.popDebugGroup?.(), console.timeEnd("create input texture #" + x);
+    const E = this.#e.createTexture({
+      size: [a, o, 1],
+      mipLevelCount: f,
+      format: B,
       usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST
-    }), y = this.#e.createBuffer({
-      size: d,
+    }), U = this.#e.createBuffer({
+      size: h,
       usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC
-    }), E = `dispatch compute shader '${B[i]}' #${x}`;
-    console.time(E), g.pushDebugGroup?.("spark encode texture");
+    }), S = `dispatch compute shader '${G[s]}' #${x}`;
+    console.time(S), p.pushDebugGroup?.("spark encode texture");
     let M = {};
-    this.#r && typeof g.writeTimestamp != "function" && (M = {
+    this.#r && typeof p.writeTimestamp != "function" && (M = {
       writeTimestamps: {
         querySet: this.#r,
         beginningOfPassWriteIndex: 0,
         endOfPassWriteIndex: 1
       }
     });
-    const I = await a, R = g.beginComputePass(M);
-    R.setPipeline(I);
-    for (let p = 0; p < l; p++) {
-      const D = this.#e.createBindGroup({
-        layout: I.getBindGroupLayout(0),
+    const v = await n, T = p.beginComputePass(M);
+    T.setPipeline(v);
+    for (let g = 0; g < f; g++) {
+      const z = this.#e.createBindGroup({
+        layout: v.getBindGroupLayout(0),
         entries: [
           {
             binding: 0,
-            resource: b.createView({
-              baseMipLevel: p,
+            resource: d.createView({
+              baseMipLevel: g,
               mipLevelCount: 1
             })
           },
           {
             binding: 1,
-            resource: this.#a
+            resource: this.#i
           },
           {
             binding: 2,
             resource: {
-              buffer: y,
-              offset: m[p].offset,
-              size: m[p].size
+              buffer: U,
+              offset: m[g].offset,
+              size: m[g].size
             }
           }
         ]
       });
-      R.setBindGroup(0, D), R.dispatchWorkgroups(Math.ceil(m[p].bw / 16), Math.ceil(m[p].bh / 16));
+      T.setBindGroup(0, z), T.dispatchWorkgroups(Math.ceil(m[g].bw / 16), Math.ceil(m[g].bh / 16));
     }
-    R.end();
-    for (let p = 0; p < l; p++)
-      g.copyBufferToTexture(
+    T.end();
+    for (let g = 0; g < f; g++)
+      p.copyBufferToTexture(
         {
-          buffer: y,
-          offset: m[p].offset,
-          bytesPerRow: m[p].bytesPerRow,
-          rowsPerImage: m[p].bh
+          buffer: U,
+          offset: m[g].offset,
+          bytesPerRow: m[g].bytesPerRow,
+          rowsPerImage: m[g].bh
         },
         {
-          texture: U,
-          mipLevel: p
+          texture: E,
+          mipLevel: g
         },
         {
-          width: m[p].bw * 4,
-          height: m[p].bh * 4,
+          width: m[g].bw * 4,
+          height: m[g].bh * 4,
           depthOrArrayLayers: 1
         }
       );
-    return this.#r && typeof g.writeTimestamp == "function" && g.writeTimestamp(this.#r, 1), g.popDebugGroup?.(), this.#e.queue.submit([g.finish()]), console.timeEnd(E), C?.destroy(), b != t && b?.destroy(), y?.destroy(), U;
+    return this.#r && typeof p.writeTimestamp == "function" && p.writeTimestamp(this.#r, 1), p.popDebugGroup?.(), this.#e.queue.submit([p.finish()]), console.timeEnd(S), R?.destroy(), d != t && d?.destroy(), U?.destroy(), E;
   }
   /**
    * Returns the time (in milliseconds) it took to perform the most recent `encodeTexture()` call.
@@ -670,77 +675,132 @@ class L {
     if (!this.#r)
       return 0;
     const e = this.#e.createCommandEncoder();
-    e.resolveQuerySet(this.#r, 0, 2, this.#f, 0), e.copyBufferToBuffer(this.#f, 0, this.#s, 0, 16), this.#e.queue.submit([e.finish()]), await this.#e.queue.onSubmittedWorkDone(), await this.#s.mapAsync(GPUMapMode.READ);
-    const r = this.#s.getMappedRange(), t = new BigUint64Array(r), i = t[0], a = t[1];
-    return this.#s.unmap(), Number(a - i) / 1e6;
+    e.resolveQuerySet(this.#r, 0, 2, this.#p, 0), e.copyBufferToBuffer(this.#p, 0, this.#c, 0, 16), this.#e.queue.submit([e.finish()]), await this.#e.queue.onSubmittedWorkDone(), await this.#c.mapAsync(GPUMapMode.READ);
+    const r = this.#c.getMappedRange(), t = new BigUint64Array(r), s = t[0], n = t[1];
+    return this.#c.unmap(), Number(n - s) / 1e6;
   }
   async #B(e, r, t) {
-    w(e, "device is required"), w(X(e), "device is not a WebGPU device"), this.#e = e, this.#o = H(this.#e), this.#a = this.#e.createSampler({
+    w(e, "device is required"), w(H(e), "device is not a WebGPU device"), this.#e = e, this.#f = Q(this.#e), this.#i = this.#e.createSampler({
       magFilter: "linear",
       minFilter: "linear"
     });
-    for (let i = 0; i < 3; i++)
-      this.#n[i] = this.#e.createBuffer({
+    for (let s = 0; s < 3; s++)
+      this.#n[s] = this.#e.createBuffer({
         size: 4,
         usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
-      }), this.#e.queue.writeBuffer(this.#n[i], 0, new Uint32Array([i]));
+      }), this.#e.queue.writeBuffer(this.#n[s], 0, new Uint32Array([s]));
     if (t && this.#e.features.has("timestamp-query")) {
-      const i = j(), a = Q();
-      (!i || i >= 26) && !a && (this.#r = this.#e.createQuerySet({
+      const s = O(), n = k();
+      (!s || s >= 26) && !n && (this.#r = this.#e.createQuerySet({
         type: "timestamp",
         count: 2
-      }), this.#f = this.#e.createBuffer({
+      }), this.#p = this.#e.createBuffer({
         size: 16,
         // 2 timestamps × 8 bytes each
         usage: GPUBufferUsage.COPY_SRC | GPUBufferUsage.QUERY_RESOLVE
-      }), this.#s = this.#e.createBuffer({
+      }), this.#c = this.#e.createBuffer({
         size: 16,
         // 2 timestamps × 8 bytes each
         usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
       }));
     }
-    if (this.#l = this.#e.features.has("shader-f16"), await this.#G(), r) {
-      let i;
-      Array.isArray(r) ? i = r.map((a) => this.#h(a, !1)) : i = this.#o;
-      for (const a of i)
-        a !== void 0 && !this.#i[a] && this.#p(a).catch((o) => {
-          console.error(`Failed to preload pipeline for format ${a}:`, o);
+    if (this.#g = this.#e.features.has("shader-f16"), await this.#C(), r) {
+      let s;
+      Array.isArray(r) ? s = r.map((n) => this.#b(n, !1)) : s = this.#f;
+      for (const n of s)
+        n !== void 0 && !this.#l[n] && this.#h(n).catch((a) => {
+          console.error(`Failed to preload pipeline for format ${n}:`, a);
         });
     }
   }
-  async #G() {
+  async #C() {
     const e = this.#e.createShaderModule({
-      code: await k["utils.wgsl"](),
+      code: await I["utils.wgsl"](),
       label: "utils"
     });
     if (typeof e.compilationInfo == "function") {
-      const r = await e.compilationInfo();
-      if (r.messages.some((t) => t.type == "error")) {
+      const t = await e.compilationInfo();
+      if (t.messages.some((s) => s.type == "error")) {
         console.error("WGSL compilation errors:");
-        for (const t of r.messages)
-          console.error(t);
+        for (const s of t.messages)
+          console.error(s);
         throw new Error("Shader compilation failed");
       }
     }
-    this.#c = await this.#e.createComputePipelineAsync({
-      layout: "auto",
-      compute: {
-        module: e,
-        entryPoint: "mipmap"
-      }
-    }), this.#m = await this.#e.createComputePipelineAsync({
-      layout: "auto",
-      compute: {
-        module: e,
-        entryPoint: "resize"
-      }
-    }), this.#g = await this.#e.createComputePipelineAsync({
-      layout: "auto",
-      compute: {
-        module: e,
-        entryPoint: "flipy"
-      }
-    }), this.#u = await this.#e.createComputePipelineAsync({
+    if (k() && (this.#a = !0), this.#a) {
+      this.#s = {}, this.#o = {}, this.#u = {};
+      const t = ["rgba8unorm-srgb", "rgba8unorm"];
+      for (const s of t)
+        this.#s[s] = this.#e.createRenderPipeline({
+          label: `mipmap-pipeline-${s}`,
+          layout: "auto",
+          vertex: {
+            module: e,
+            entryPoint: "fullscreen_vs"
+          },
+          fragment: {
+            module: e,
+            entryPoint: "mipmap_fs",
+            targets: [{ format: s }]
+          },
+          primitive: {
+            topology: "triangle-strip",
+            stripIndexFormat: "uint32"
+          }
+        }), this.#o[s] = this.#e.createRenderPipeline({
+          label: `resize-pipeline-${s}`,
+          layout: "auto",
+          vertex: {
+            module: e,
+            entryPoint: "fullscreen_vs"
+          },
+          fragment: {
+            module: e,
+            entryPoint: "resize_fs",
+            targets: [{ format: s }]
+          },
+          primitive: {
+            topology: "triangle-strip",
+            stripIndexFormat: "uint32"
+          }
+        }), this.#u[s] = this.#e.createRenderPipeline({
+          label: `flip-y-pipeline-${s}`,
+          layout: "auto",
+          vertex: {
+            module: e,
+            entryPoint: "fullscreen_vs"
+          },
+          fragment: {
+            module: e,
+            entryPoint: "flipy_fs",
+            targets: [{ format: s }]
+          },
+          primitive: {
+            topology: "triangle-strip",
+            stripIndexFormat: "uint32"
+          }
+        });
+    } else
+      this.#s = this.#e.createComputePipeline({
+        layout: "auto",
+        compute: {
+          module: e,
+          entryPoint: "mipmap"
+        }
+      }), this.#o = this.#e.createComputePipeline({
+        layout: "auto",
+        compute: {
+          module: e,
+          entryPoint: "resize"
+        }
+      }), this.#u = this.#e.createComputePipeline({
+        layout: "auto",
+        compute: {
+          module: e,
+          entryPoint: "flipy"
+        }
+      });
+    this.#m = await this.#e.createComputePipelineAsync({
       layout: "auto",
       compute: {
         module: e,
@@ -748,47 +808,47 @@ class L {
       }
     });
   }
-  async #p(e) {
-    if (this.#i[e])
-      return this.#i[e];
+  async #h(e) {
+    if (this.#l[e])
+      return this.#l[e];
     const r = (async () => {
-      console.time("loadPipeline " + B[e]);
+      console.time("loadPipeline " + G[e]);
       const t = q[e];
-      w(t, `No shader available for format ${B[e]}`);
-      let i = await k[t]();
-      this.#l || (i = i.replace(/^enable f16;\s*/m, "").replace(/\bf16\b/g, "f32").replace(/\bvec([234])h\b/g, "vec$1f").replace(/\bmat([234]x[234])h/g, "mat$1f").replace(/\b(\d*\.\d+|\d+\.)h\b/g, "$1"));
-      const a = this.#e.createShaderModule({
-        code: i,
-        label: B[e]
+      w(t, `No shader available for format ${G[e]}`);
+      let s = await I[t]();
+      this.#g || (s = s.replace(/^enable f16;\s*/m, "").replace(/\bf16\b/g, "f32").replace(/\bvec([234])h\b/g, "vec$1f").replace(/\bmat([234]x[234])h/g, "mat$1f").replace(/\b(\d*\.\d+|\d+\.)h\b/g, "$1"));
+      const n = this.#e.createShaderModule({
+        code: s,
+        label: G[e]
       });
-      if (typeof a.getCompilationInfo == "function") {
-        const c = await a.getCompilationInfo();
-        if (c.messages.some((u) => u.type == "error")) {
+      if (typeof n.getCompilationInfo == "function") {
+        const o = await n.getCompilationInfo();
+        if (o.messages.some((c) => c.type == "error")) {
           console.error("WGSL compilation errors:");
-          for (const u of c.messages)
-            console.error(u);
+          for (const c of o.messages)
+            console.error(c);
           throw new Error("Shader compilation failed");
         }
       }
-      const o = await this.#e.createComputePipelineAsync({
+      const a = await this.#e.createComputePipelineAsync({
         layout: "auto",
         compute: {
-          module: a,
+          module: n,
           entryPoint: "main"
         }
       });
-      return console.timeEnd("loadPipeline " + B[e]), o;
+      return console.timeEnd("loadPipeline " + G[e]), a;
     })();
-    return this.#i[e] = r, r;
+    return this.#l[e] = r, r;
   }
   #t(e) {
-    return this.#o.has(e);
+    return this.#f.has(e);
   }
-  #h(e, r) {
-    const t = T[e];
+  #b(e, r) {
+    const t = P[e];
     if (t != null && this.#t(t))
       return t;
-    const i = r ? [
+    const s = r ? [
       "bc4-r",
       "eac-r",
       "bc5-rg",
@@ -815,100 +875,104 @@ class L {
       "astc-rgba",
       "astc-4x4-rgba"
     ];
-    for (const a of i)
-      if (a.includes(e) && this.#t(T[a]))
-        return T[a];
+    for (const n of s)
+      if (n.includes(e) && this.#t(P[n]))
+        return P[n];
   }
-  async #b(e, r) {
+  async #d(e, r) {
     if (e.format == null)
       e.format = "rgb";
     else if (e.format == "auto") {
       if (e.alpha) {
-        if (this.#t(s.BC7_RGBA)) return s.BC7_RGBA;
-        if (this.#t(s.ASTC_4x4_RGBA)) return s.ASTC_4x4_RGBA;
+        if (this.#t(i.BC7_RGBA)) return i.BC7_RGBA;
+        if (this.#t(i.ASTC_4x4_RGBA)) return i.ASTC_4x4_RGBA;
       } else if (e.srgb) {
-        if (this.#t(s.BC7_RGB)) return s.BC7_RGB;
-        if (this.#t(s.ASTC_4x4_RGB)) return s.ASTC_4x4_RGB;
-        if (this.#t(s.BC1_RGB)) return s.BC1_RGB;
-        if (this.#t(s.ETC2_RGB)) return s.ETC2_RGB;
+        if (this.#t(i.BC7_RGB)) return i.BC7_RGB;
+        if (this.#t(i.ASTC_4x4_RGB)) return i.ASTC_4x4_RGB;
+        if (this.#t(i.BC1_RGB)) return i.BC1_RGB;
+        if (this.#t(i.ETC2_RGB)) return i.ETC2_RGB;
       } else if (e.normal) {
-        if (this.#t(s.BC5_RG)) return s.BC5_RG;
-        if (this.#t(s.EAC_RG)) return s.EAC_RG;
+        if (this.#t(i.BC5_RG)) return i.BC5_RG;
+        if (this.#t(i.EAC_RG)) return i.EAC_RG;
       } else {
-        let i;
+        let s;
         if (r instanceof GPUTexture)
-          r.format == "r8unorm" || r.format == "r16unorm" ? i = 1 : r.format == "rg8unorm" || r.format == "rg16unorm" ? i = 2 : i = await this.#R(r);
+          r.format == "r8unorm" || r.format == "r16unorm" ? s = 1 : r.format == "rg8unorm" || r.format == "rg16unorm" ? s = 2 : s = await this.#T(r);
         else {
-          const a = Z(r);
-          i = this.#C(a);
+          const n = Z(r);
+          s = this.#R(n);
         }
-        if (i == 4) {
-          if (this.#t(s.BC7_RGBA)) return s.BC7_RGBA;
-          if (this.#t(s.ASTC_4x4_RGBA)) return s.ASTC_4x4_RGBA;
-        } else if (i == 3) {
-          if (this.#t(s.BC7_RGB)) return s.BC7_RGB;
-          if (this.#t(s.ASTC_4x4_RGB)) return s.ASTC_4x4_RGB;
-          if (this.#t(s.BC1_RGB)) return s.BC1_RGB;
-          if (this.#t(s.ETC2_RGB)) return s.ETC2_RGB;
-        } else if (i == 2) {
-          if (this.#t(s.BC5_RG)) return s.BC5_RG;
-          if (this.#t(s.EAC_RG)) return s.EAC_RG;
-        } else if (i == 1) {
-          if (this.#t(s.BC4_R)) return s.BC4_R;
-          if (this.#t(s.EAC_R)) return s.EAC_R;
+        if (s == 4) {
+          if (this.#t(i.BC7_RGBA)) return i.BC7_RGBA;
+          if (this.#t(i.ASTC_4x4_RGBA)) return i.ASTC_4x4_RGBA;
+        } else if (s == 3) {
+          if (this.#t(i.BC7_RGB)) return i.BC7_RGB;
+          if (this.#t(i.ASTC_4x4_RGB)) return i.ASTC_4x4_RGB;
+          if (this.#t(i.BC1_RGB)) return i.BC1_RGB;
+          if (this.#t(i.ETC2_RGB)) return i.ETC2_RGB;
+        } else if (s == 2) {
+          if (this.#t(i.BC5_RG)) return i.BC5_RG;
+          if (this.#t(i.EAC_RG)) return i.EAC_RG;
+        } else if (s == 1) {
+          if (this.#t(i.BC4_R)) return i.BC4_R;
+          if (this.#t(i.EAC_R)) return i.EAC_R;
         }
       }
       throw new Error("No supported format found.");
     }
-    const t = this.#h(e.format, e.preferLowQuality);
+    const t = this.#b(e.format, e.preferLowQuality);
     if (t === void 0)
       throw new Error(`Unsupported format: ${e.format}`);
     return t;
   }
-  #C(e) {
-    let r = !0, t = !0, i = 0;
-    const a = Math.min(1024 * 128, e.length);
-    for (let o = 0; o < a; o += 4) {
-      const c = e[o] / 255, u = e[o + 1] / 255, f = e[o + 2] / 255;
-      e[o + 3] < 255 && (r = !1), (c != u || u != f) && (t = !1);
-      const d = 2 * c - 1, m = 2 * u - 1, h = 2 * f - 1, _ = d * d + m * m + h * h, G = Math.sqrt(_);
-      (Math.abs(G - 1) > 0.2 || h < -0.1) && (i += 1);
+  #R(e) {
+    let r = !0, t = !0, s = 0;
+    const n = Math.min(1024 * 128, e.length);
+    for (let a = 0; a < n; a += 4) {
+      const o = e[a] / 255, c = e[a + 1] / 255, l = e[a + 2] / 255;
+      e[a + 3] < 255 && (r = !1), (o != c || c != l) && (t = !1);
+      const h = 2 * o - 1, m = 2 * c - 1, b = 2 * l - 1, _ = h * h + m * m + b * b, B = Math.sqrt(_);
+      (Math.abs(B - 1) > 0.2 || b < -0.1) && (s += 1);
     }
-    return r ? t ? 1 : 16 * i < a ? 2 : 3 : 4;
+    return r ? t ? 1 : 16 * s < n ? 2 : 3 : 4;
   }
-  async #R(e) {
+  async #T(e) {
     const t = this.#e.createBuffer({
       size: 12,
       usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC
-    }), i = this.#e.createBuffer({
+    }), s = this.#e.createBuffer({
       size: 12,
       usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
-    }), a = this.#e.createBindGroup({
-      layout: this.#u.getBindGroupLayout(0),
+    }), n = this.#e.createBindGroup({
+      layout: this.#m.getBindGroupLayout(0),
       entries: [
         { binding: 0, resource: e.createView() },
         { binding: 1, resource: { buffer: t } }
       ]
-    }), o = this.#e.createCommandEncoder(), c = o.beginComputePass();
-    c.setPipeline(this.#u), c.setBindGroup(0, a);
-    const { width: u, height: f } = e, l = Math.ceil(u / 8), d = Math.ceil(f / 8);
-    c.dispatchWorkgroups(l, d), c.end(), o.copyBufferToBuffer(t, 0, i, 0, 12), this.#e.queue.submit([o.finish()]), await this.#e.queue.onSubmittedWorkDone(), await i.mapAsync(GPUMapMode.READ);
-    const m = new Uint32Array(i.getMappedRange()), h = m[0] == 0, _ = m[1] == 0, G = m[2];
-    return i.unmap(), i.destroy(), t.destroy(), h ? _ ? 1 : 4 * G < u * f ? 2 : 3 : 4;
+    }), a = this.#e.createCommandEncoder(), o = a.beginComputePass();
+    o.setPipeline(this.#m), o.setBindGroup(0, n);
+    const { width: c, height: l } = e, f = Math.ceil(c / 8), h = Math.ceil(l / 8);
+    o.dispatchWorkgroups(f, h), o.end(), a.copyBufferToBuffer(t, 0, s, 0, 12), this.#e.queue.submit([a.finish()]), await this.#e.queue.onSubmittedWorkDone(), await s.mapAsync(GPUMapMode.READ);
+    const m = new Uint32Array(s.getMappedRange()), b = m[0] == 0, _ = m[1] == 0, B = m[2];
+    return s.unmap(), s.destroy(), t.destroy(), b ? _ ? 1 : 4 * B < c * l ? 2 : 3 : 4;
   }
   // Apply scaling and flipY transform.
-  async #d(e, r, t, i, a, o, c) {
-    const u = e.beginComputePass(), f = c ? this.#g : this.#m;
-    u.setPipeline(f);
-    const l = this.#e.createBindGroup({
-      layout: f.getBindGroupLayout(0),
+  #_(e, r, t, s, n, a, o) {
+    if (this.#a) {
+      this.#P(e, r, t, s, n, a, o);
+      return;
+    }
+    const c = e.beginComputePass(), l = o ? this.#u : this.#o;
+    c.setPipeline(l);
+    const f = this.#e.createBindGroup({
+      layout: l.getBindGroupLayout(0),
       entries: [
         {
           binding: 0,
           resource: r.createView({
             baseMipLevel: 0,
             mipLevelCount: 1,
-            format: o == 1 ? "rgba8unorm-srgb" : "rgba8unorm",
+            format: a == 1 ? "rgba8unorm-srgb" : "rgba8unorm",
             usage: GPUTextureUsage.TEXTURE_BINDING
           })
         },
@@ -924,41 +988,89 @@ class L {
         },
         {
           binding: 2,
-          resource: this.#a
+          resource: this.#i
         },
         {
           binding: 3,
-          resource: { buffer: this.#n[o] }
+          resource: { buffer: this.#n[a] }
         }
       ]
     });
-    u.setBindGroup(0, l), u.dispatchWorkgroups(Math.ceil(i / 8), Math.ceil(a / 8)), u.end();
+    c.setBindGroup(0, f), c.dispatchWorkgroups(Math.ceil(s / 8), Math.ceil(n / 8)), c.end();
   }
-  async #T(e, r, t, i, a, o) {
-    const c = e.beginComputePass();
-    c.setPipeline(this.#c);
-    let u = i, f = a;
-    for (let l = 0; l < t - 1; l++)
-      u = Math.max(1, Math.floor(u / 2)), f = Math.max(1, Math.floor(f / 2)), this.#w(c, r, l, l + 1, u, f, o);
-    c.end();
+  // Apply scaling and flipY transform.
+  #P(e, r, t, s, n, a, o) {
+    const c = a == 1 ? "rgba8unorm-srgb" : "rgba8unorm", l = t.createView({
+      baseMipLevel: 0,
+      mipLevelCount: 1,
+      dimension: "2d",
+      format: c,
+      usage: GPUTextureUsage.RENDER_ATTACHMENT
+    }), f = e.beginRenderPass({
+      colorAttachments: [
+        {
+          view: l,
+          loadOp: "clear",
+          storeOp: "store",
+          clearValue: [0, 0, 0, 0]
+        }
+      ]
+    }), h = o ? this.#u[c] : this.#o[c];
+    f.setPipeline(h);
+    const m = this.#e.createBindGroup({
+      layout: h.getBindGroupLayout(0),
+      entries: [
+        {
+          binding: 0,
+          resource: r.createView({
+            baseMipLevel: 0,
+            mipLevelCount: 1,
+            format: a == 1 ? "rgba8unorm-srgb" : "rgba8unorm",
+            usage: GPUTextureUsage.TEXTURE_BINDING
+          })
+        },
+        {
+          binding: 2,
+          resource: this.#i
+        },
+        {
+          binding: 3,
+          resource: { buffer: this.#n[a] }
+        }
+      ]
+    });
+    f.setBindGroup(0, m), f.draw(4, 1, 0, 0), f.end();
+  }
+  async #w(e, r, t, s, n, a) {
+    let o = s, c = n;
+    if (this.#a)
+      for (let l = 0; l < t - 1; l++)
+        o = Math.max(1, Math.floor(o / 2)), c = Math.max(1, Math.floor(c / 2)), this.#y(e, r, l, l + 1, o, c, a);
+    else {
+      const l = e.beginComputePass();
+      l.setPipeline(this.#s);
+      for (let f = 0; f < t - 1; f++)
+        o = Math.max(1, Math.floor(o / 2)), c = Math.max(1, Math.floor(c / 2)), this.#x(l, r, f, f + 1, o, c, a);
+      l.end();
+    }
   }
-  #w(e, r, t, i, a, o, c) {
-    const u = this.#e.createBindGroup({
-      layout: this.#c.getBindGroupLayout(0),
+  #x(e, r, t, s, n, a, o) {
+    const c = this.#e.createBindGroup({
+      layout: this.#s.getBindGroupLayout(0),
       entries: [
         {
           binding: 0,
           resource: r.createView({
             baseMipLevel: t,
             mipLevelCount: 1,
-            format: c == 1 ? "rgba8unorm-srgb" : "rgba8unorm",
+            format: o == 1 ? "rgba8unorm-srgb" : "rgba8unorm",
             usage: GPUTextureUsage.TEXTURE_BINDING
           })
         },
         {
           binding: 1,
           resource: r.createView({
-            baseMipLevel: i,
+            baseMipLevel: s,
             mipLevelCount: 1,
             dimension: "2d",
             format: "rgba8unorm",
@@ -967,17 +1079,57 @@ class L {
         },
         {
           binding: 2,
-          resource: this.#a
+          resource: this.#i
         },
         {
           binding: 3,
-          resource: { buffer: this.#n[c] }
+          resource: { buffer: this.#n[o] }
+        }
+      ]
+    });
+    e.setBindGroup(0, c), e.dispatchWorkgroups(Math.ceil(n / 8), Math.ceil(a / 8));
+  }
+  #y(e, r, t, s, n, a, o) {
+    const c = o == 1 ? "rgba8unorm-srgb" : "rgba8unorm", l = r.createView({
+      baseMipLevel: s,
+      mipLevelCount: 1,
+      dimension: "2d",
+      format: c,
+      usage: GPUTextureUsage.RENDER_ATTACHMENT
+    }), f = e.beginRenderPass({
+      colorAttachments: [
+        {
+          view: l,
+          loadOp: "clear",
+          storeOp: "store",
+          clearValue: [0, 0, 0, 0]
+        }
+      ]
+    }), h = this.#e.createBindGroup({
+      layout: this.#s[c].getBindGroupLayout(0),
+      entries: [
+        {
+          binding: 0,
+          resource: r.createView({
+            baseMipLevel: t,
+            mipLevelCount: 1,
+            format: c,
+            usage: GPUTextureUsage.TEXTURE_BINDING
+          })
+        },
+        {
+          binding: 2,
+          resource: this.#i
+        },
+        {
+          binding: 3,
+          resource: { buffer: this.#n[o] }
         }
       ]
     });
-    e.setBindGroup(0, u), e.dispatchWorkgroups(Math.ceil(a / 8), Math.ceil(o / 8));
+    f.setPipeline(this.#s[c]), f.setBindGroup(0, h), f.draw(4, 1, 0, 0), f.end();
   }
 }
 export {
-  L as Spark
+  D as Spark
 };

package/dist/{utils-Dw9jXlhw.js → utils-_0JXKkpk.js}

@@ -2,6 +2,10 @@ const n = `struct Params {
     colorMode: u32,
 };
 
+const COLOR_LINEAR : u32 = 0u;
+const COLOR_SRGB   : u32 = 1u;
+const COLOR_NORMAL : u32 = 2u;
+
 @group(0) @binding(0) var src : texture_2d<f32>;
 @group(0) @binding(1) var dst : texture_storage_2d<rgba8unorm, write>;
 @group(0) @binding(2) var smp: sampler;
@@ -38,25 +42,53 @@ fn mipmap(@builtin(global_invocation_id) id : vec3<u32>) {
 
     let size_rcp = vec2f(1.0) / vec2f(dstSize);
 
-    // We are not doing this yet, but in some cases we want to take 4 samples in order to apply alpha weighting,
-    // or to support non multiple of two textures.
+    // We take 4 samples explicitly in order to support alpha weighting and for slightly more correct
+    // results when using non multiple of two textures.
     let uv0 = (vec2f(id.xy) + vec2f(0.25)) * size_rcp;
     let uv1 = uv0 + 0.5 * size_rcp;
 
     var color = vec4f(0.0);
-    color += textureSampleLevel(src, smp, vec2f(uv0.x, uv0.y), 0);
-    color += textureSampleLevel(src, smp, vec2f(uv1.x, uv0.y), 0);
-    color += textureSampleLevel(src, smp, vec2f(uv0.x, uv1.y), 0);
-    color += textureSampleLevel(src, smp, vec2f(uv1.x, uv1.y), 0);
-    color *= 0.25;
+
+    if (params.colorMode == COLOR_SRGB) {
+        let c00 = textureSampleLevel(src, smp, vec2f(uv0.x, uv0.y), 0);
+        let c10 = textureSampleLevel(src, smp, vec2f(uv1.x, uv0.y), 0);
+        let c01 = textureSampleLevel(src, smp, vec2f(uv0.x, uv1.y), 0);
+        let c11 = textureSampleLevel(src, smp, vec2f(uv1.x, uv1.y), 0);
+
+        let a00 = c00.a;
+        let a10 = c10.a;
+        let a01 = c01.a;
+        let a11 = c11.a;
+        let a_sum = a00 + a10 + a01 + a11;
+
+        color.a = 0.25 * a_sum;
+        if (a_sum > 1.0 / 256.0) {
+            color.r = (c00.r * a00 + c10.r * a10 + c01.r * a01 + c11.r * a11) / a_sum;
+            color.g = (c00.g * a00 + c10.g * a10 + c01.g * a01 + c11.g * a11) / a_sum;
+            color.b = (c00.b * a00 + c10.b * a10 + c01.b * a01 + c11.b * a11) / a_sum;
+        } else {
+            color.r = 0.25 * (c00.r + c10.r + c01.r + c11.r);
+            color.g = 0.25 * (c00.g + c10.g + c01.g + c11.g);
+            color.b = 0.25 * (c00.b + c10.b + c01.b + c11.b);
+        }
+    }
+    else {
+        // For linear colors, we assume no alpha.
+        // @@ We could normalize/reconstruct normals before averaging.
+        color += textureSampleLevel(src, smp, vec2f(uv0.x, uv0.y), 0);
+        color += textureSampleLevel(src, smp, vec2f(uv1.x, uv0.y), 0);
+        color += textureSampleLevel(src, smp, vec2f(uv0.x, uv1.y), 0);
+        color += textureSampleLevel(src, smp, vec2f(uv1.x, uv1.y), 0);
+        color *= 0.25;
+    }
 
     // This would be the single sample implementation:
     // let uv = (vec2f(id.xy) + vec2f(0.5)) * size_rcp;
     // var color = textureSampleLevel(src, smp, vec2f(uv.x, uv.y), 0);
 
-    if (params.colorMode == 1) {
+    if (params.colorMode == COLOR_SRGB) {
         color = linear_to_srgb_vec4(color);
-    } else if (params.colorMode == 2) {
+    } else if (params.colorMode == COLOR_NORMAL) {
         color = normalize_vec4(color);
     }
 
@@ -73,9 +105,9 @@ fn resize(@builtin(global_invocation_id) id : vec3<u32>) {
     let uv = (vec2f(id.xy) + vec2f(0.5)) / vec2f(dstSize);
     var color = textureSampleLevel(src, smp, uv, 0);
 
-    if (params.colorMode == 1) {
+    if (params.colorMode == COLOR_SRGB) {
         color = linear_to_srgb_vec4(color);
-    } else if (params.colorMode == 2) {
+    } else if (params.colorMode == COLOR_NORMAL) {
         color = normalize_vec4(color);
     }
 
@@ -92,15 +124,80 @@ fn flipy(@builtin(global_invocation_id) id : vec3<u32>) {
     let uv = (vec2f(f32(id.x), f32(dstSize.y - 1u - id.y)) + vec2f(0.5)) / vec2f(dstSize);
     var color = textureSampleLevel(src, smp, uv, 0);
 
-    if (params.colorMode == 1) {
+    if (params.colorMode == COLOR_SRGB) {
         color = linear_to_srgb_vec4(color);
-    } else if (params.colorMode == 2) {
+    } else if (params.colorMode == COLOR_NORMAL) {
         color = normalize_vec4(color);
     }
 
     textureStore(dst, id.xy, color);
 }
 
+// Fullscreen vertex shader
+struct VSOutput {
+	@builtin(position) pos: vec4<f32>,
+	@location(0) tex : vec2<f32>
+};
+
+@vertex
+fn fullscreen_vs(@builtin(vertex_index) vertexIndex : u32) -> VSOutput {
+
+	var pos = array<vec2<f32>, 4>(
+		vec2<f32>(-1.0,  1.0),
+		vec2<f32>( 1.0,  1.0),
+		vec2<f32>(-1.0, -1.0),
+		vec2<f32>( 1.0, -1.0)
+	);
+
+	var tex = array<vec2<f32>, 4>(
+		vec2<f32>(0.0, 0.0),
+		vec2<f32>(1.0, 0.0),
+		vec2<f32>(0.0, 1.0),
+		vec2<f32>(1.0, 1.0)
+	);
+
+	var vs_output : VSOutput;
+	vs_output.tex = tex[vertexIndex];
+	vs_output.pos = vec4<f32>(pos[vertexIndex], 0.0, 1.0);
+	return vs_output;
+}
+
+@fragment
+fn mipmap_fs(@location(0) uv : vec2<f32>) -> @location(0) vec4<f32> {
+
+    var color = textureSample(src, smp, uv);
+
+    if (params.colorMode == 2) {
+        color = normalize_vec4(color);
+    }
+
+	return color;
+}
+
+@fragment
+fn resize_fs(@location(0) uv : vec2<f32>) -> @location(0) vec4<f32> {
+
+    var color = textureSample(src, smp, uv);
+
+    if (params.colorMode == 2) {
+        color = normalize_vec4(color);
+    }
+
+    return color;
+}
+
+@fragment
+fn flipy_fs(@location(0) uv : vec2<f32>) -> @location(0) vec4<f32> {
+
+    var color = textureSample(src, smp, vec2(uv.x, 1 - uv.y));
+
+    if (params.colorMode == 2) {
+        color = normalize_vec4(color);
+    }
+
+    return color;
+}
+
 
 @group(0) @binding(1) var<storage, read_write> global_counters: array<atomic<u32>, 3>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ludicon/spark.js",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "Real-Time GPU Texture Codecs for the Web",
   "main": "dist/spark.esm.js",
   "module": "dist/spark.esm.js",