@ludicon/spark.js 0.0.14 → 0.0.15

package/dist/spark.esm.js

@@ -1,5 +1,5 @@
-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-BigAnOxg.js") }), I = Object.fromEntries(
-  Object.entries(V).map(([c, e]) => [c.replace("./", ""), async () => (await e()).default])
+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,
@@ -329,26 +329,29 @@ const V = /* @__PURE__ */ Object.assign({ "./spark_astc_rgb.wgsl": () => import(
   !0
   // BC7_RGB
 ];
-function w(c, e) {
-  if (!c)
+function w(u, e) {
+  if (!u)
     throw new Error(e);
 }
-function H(c) {
-  return typeof GPUDevice < "u" && c instanceof GPUDevice;
+function H(u) {
+  return typeof GPUDevice < "u" && u instanceof GPUDevice;
 }
 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 O() {
-  const c = navigator.userAgent.match(/Safari\/(\d+(\.\d+)?)/);
-  return c && parseFloat(c[1]);
+  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 k() {
-  const c = navigator.userAgent.match(/Firefox\/(\d+(\.\d+)?)/);
-  return c && parseFloat(c[1]);
+  const u = navigator.userAgent.match(/Firefox\/(\d+(\.\d+)?)/);
+  return u && parseFloat(u[1]);
 }
-function Q(c) {
+function Q(u) {
   const e = /* @__PURE__ */ new Set(), r = {
     "texture-compression-bc": [
       i.BC1_RGB,
@@ -361,31 +364,31 @@ function Q(c) {
     "texture-compression-astc": [i.ASTC_4x4_RGB, i.ASTC_4x4_RGBA]
   };
   for (const [t, s] of Object.entries(r))
-    if (c.features.has(t))
+    if (u.features.has(t))
       for (const n of s)
         e.add(n);
   return e;
 }
-function Z(c) {
+function Z(u) {
   const e = document.createElement("canvas");
-  e.width = c.width, e.height = c.height;
+  e.width = u.width, e.height = u.height;
   const r = e.getContext("2d");
-  r.drawImage(c, 0, 0);
-  const t = r.getImageData(0, 0, c.width, c.height);
+  r.drawImage(u, 0, 0);
+  const t = r.getImageData(0, 0, u.width, u.height);
   return new Uint8Array(t.data.buffer);
 }
-function J(c) {
-  return /\.svg(?:$|\?)/i.test(c) || /^data:image\/svg\+xml[,;]/i.test(c);
+function J(u) {
+  return /\.svg(?:$|\?)/i.test(u) || /^data:image\/svg\+xml[,;]/i.test(u);
 }
-function K(c) {
+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 = c;
+    t.crossOrigin = "anonymous", t.decoding = "async", t.onload = () => e(t), t.onerror = r, t.src = u;
   });
 }
-async function ee(c, e = {}) {
-  const r = await fetch(c, { mode: "cors" });
-  if (!r.ok) throw new Error(`HTTP ${r.status} for ${c}`);
+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",
@@ -394,17 +397,17 @@ async function ee(c, e = {}) {
   });
 }
 const te = O();
-function N(c) {
-  return J(c) || te ? K(c) : ee(c);
+function N(u) {
+  return J(u) || te ? K(u) : ee(u);
 }
 const L = 256, F = 4;
-function re(c, e, r, t) {
+function re(u, e, r, t) {
   let s = 0, n = 0;
   const a = [];
   do {
-    const o = Math.ceil(c / 4), u = Math.ceil(e / 4), l = Math.ceil(o * r / L) * L, f = u * l;
-    s++, a.push({ offset: n, alignedSize: f, w: c, h: e, bw: o, bh: u, bytesPerRow: l }), n += f, c = Math.max(1, Math.floor(c / 2)), e = Math.max(1, Math.floor(e / 2));
-  } while (t && (c >= F || e >= F));
+    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 D {
@@ -552,7 +555,7 @@ class D {
     w(this.#e, "Spark is not initialized");
     const t = e instanceof Image || e instanceof ImageBitmap || e instanceof GPUTexture ? e : await N(e);
     console.log("Loaded image", t);
-    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, u = W[s], l = r.generateMipmaps || r.mips, { mipmapCount: f, outputSize: h, bufferRanges: m } = re(a, o, u, 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++;
+    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 C = GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST;
     this.#a ? C |= GPUTextureUsage.RENDER_ATTACHMENT : C |= GPUTextureUsage.STORAGE_BINDING;
@@ -820,10 +823,10 @@ class D {
       });
       if (typeof n.getCompilationInfo == "function") {
         const o = await n.getCompilationInfo();
-        if (o.messages.some((u) => u.type == "error")) {
+        if (o.messages.some((c) => c.type == "error")) {
           console.error("WGSL compilation errors:");
-          for (const u of o.messages)
-            console.error(u);
+          for (const c of o.messages)
+            console.error(c);
           throw new Error("Shader compilation failed");
         }
       }
@@ -926,9 +929,9 @@ class D {
     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, u = e[a + 1] / 255, l = e[a + 2] / 255;
-      e[a + 3] < 255 && (r = !1), (o != u || u != l) && (t = !1);
-      const h = 2 * o - 1, m = 2 * u - 1, b = 2 * l - 1, _ = h * h + m * m + b * b, B = Math.sqrt(_);
+      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 * s < n ? 2 : 3 : 4;
@@ -948,10 +951,10 @@ class D {
       ]
     }), a = this.#e.createCommandEncoder(), o = a.beginComputePass();
     o.setPipeline(this.#m), o.setBindGroup(0, n);
-    const { width: u, height: l } = e, f = Math.ceil(u / 8), h = Math.ceil(l / 8);
+    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 < u * l ? 2 : 3 : 4;
+    return s.unmap(), s.destroy(), t.destroy(), b ? _ ? 1 : 4 * B < c * l ? 2 : 3 : 4;
   }
   // Apply scaling and flipY transform.
   #_(e, r, t, s, n, a, o) {
@@ -959,8 +962,8 @@ class D {
       this.#P(e, r, t, s, n, a, o);
       return;
     }
-    const u = e.beginComputePass(), l = o ? this.#u : this.#o;
-    u.setPipeline(l);
+    const c = e.beginComputePass(), l = o ? this.#u : this.#o;
+    c.setPipeline(l);
     const f = this.#e.createBindGroup({
       layout: l.getBindGroupLayout(0),
       entries: [
@@ -993,15 +996,15 @@ class D {
         }
       ]
     });
-    u.setBindGroup(0, f), u.dispatchWorkgroups(Math.ceil(s / 8), Math.ceil(n / 8)), u.end();
+    c.setBindGroup(0, f), c.dispatchWorkgroups(Math.ceil(s / 8), Math.ceil(n / 8)), c.end();
   }
   // Apply scaling and flipY transform.
   #P(e, r, t, s, n, a, o) {
-    const u = a == 1 ? "rgba8unorm-srgb" : "rgba8unorm", l = t.createView({
+    const c = a == 1 ? "rgba8unorm-srgb" : "rgba8unorm", l = t.createView({
       baseMipLevel: 0,
       mipLevelCount: 1,
       dimension: "2d",
-      format: u,
+      format: c,
       usage: GPUTextureUsage.RENDER_ATTACHMENT
     }), f = e.beginRenderPass({
       colorAttachments: [
@@ -1012,7 +1015,7 @@ class D {
           clearValue: [0, 0, 0, 0]
         }
       ]
-    }), h = o ? this.#u[u] : this.#o[u];
+    }), h = o ? this.#u[c] : this.#o[c];
     f.setPipeline(h);
     const m = this.#e.createBindGroup({
       layout: h.getBindGroupLayout(0),
@@ -1039,20 +1042,20 @@ class D {
     f.setBindGroup(0, m), f.draw(4, 1, 0, 0), f.end();
   }
   async #w(e, r, t, s, n, a) {
-    let o = s, u = n;
+    let o = s, c = n;
     if (this.#a)
       for (let l = 0; l < t - 1; l++)
-        o = Math.max(1, Math.floor(o / 2)), u = Math.max(1, Math.floor(u / 2)), this.#y(e, r, l, l + 1, o, u, a);
+        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)), u = Math.max(1, Math.floor(u / 2)), this.#x(l, r, f, f + 1, o, u, a);
+        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();
     }
   }
   #x(e, r, t, s, n, a, o) {
-    const u = this.#e.createBindGroup({
+    const c = this.#e.createBindGroup({
       layout: this.#s.getBindGroupLayout(0),
       entries: [
         {
@@ -1084,14 +1087,14 @@ class D {
         }
       ]
     });
-    e.setBindGroup(0, u), e.dispatchWorkgroups(Math.ceil(n / 8), Math.ceil(a / 8));
+    e.setBindGroup(0, c), e.dispatchWorkgroups(Math.ceil(n / 8), Math.ceil(a / 8));
   }
   #y(e, r, t, s, n, a, o) {
-    const u = o == 1 ? "rgba8unorm-srgb" : "rgba8unorm", l = r.createView({
+    const c = o == 1 ? "rgba8unorm-srgb" : "rgba8unorm", l = r.createView({
       baseMipLevel: s,
       mipLevelCount: 1,
       dimension: "2d",
-      format: u,
+      format: c,
       usage: GPUTextureUsage.RENDER_ATTACHMENT
     }), f = e.beginRenderPass({
       colorAttachments: [
@@ -1103,14 +1106,14 @@ class D {
         }
       ]
     }), h = this.#e.createBindGroup({
-      layout: this.#s[u].getBindGroupLayout(0),
+      layout: this.#s[c].getBindGroupLayout(0),
       entries: [
         {
           binding: 0,
           resource: r.createView({
             baseMipLevel: t,
             mipLevelCount: 1,
-            format: u,
+            format: c,
             usage: GPUTextureUsage.TEXTURE_BINDING
           })
         },
@@ -1124,7 +1127,7 @@ class D {
         }
       ]
     });
-    f.setPipeline(this.#s[u]), f.setBindGroup(0, h), f.draw(4, 1, 0, 0), f.end();
+    f.setPipeline(this.#s[c]), f.setBindGroup(0, h), f.draw(4, 1, 0, 0), f.end();
   }
 }
 export {

package/dist/{utils-BigAnOxg.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,9 +124,9 @@ 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);
     }
 

package/package.json

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