@ludicon/spark.js 0.0.3 → 0.0.5

package/README.md

@@ -1,6 +1,6 @@
 # spark.js⚡️
 
-[![npm version](https://img.shields.io/npm/v/@ludicon/spark.js.svg)](https://www.npmjs.com/package/@ludicon/spark.js) [![WebGPU](https://img.shields.io/badge/WebGPU-supported-green.svg)](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API)
+[![npm version](https://img.shields.io/npm/v/@ludicon/spark.js.svg)](https://www.npmjs.com/package/@ludicon/spark.js) [![install size](https://packagephobia.com/badge?p=@ludicon/spark.js)](https://packagephobia.com/result?p=@ludicon/spark.js) [![WebGPU](https://img.shields.io/badge/WebGPU-supported-green.svg)](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API)
 
 Real-time texture compression library for the Web.
 
@@ -37,7 +37,7 @@ const texture = await spark.encodeTexture("image.avif")
 
 The main entry point is `spark.encodeTexture()`, which loads an image and transcodes it into a compressed `GPUTexture` using the selected format and options. The example above uses default settings, but `encodeTexture` supports additional parameters for mipmap generation, sRGB encoding, normal map processing, and more.
 
-If the input image dimensions are not multiples of the block size, it will be resized to meet GPU format requirements. For best results, use textures with dimensions that are multiples of 4.
+If the input image dimensions are not multiples of the block size, it will be resized to meet GPU format requirements. For best results, use images with dimensions that are multiples of 4.
 
 
 ## Development

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-const modules = /* @__PURE__ */ Object.assign({ "./spark_astc_rgb.wgsl": () => import("./spark_astc_rgb-ylbf30mQ.js"), "./spark_astc_rgba.wgsl": () => import("./spark_astc_rgba-C4NuyfHw.js"), "./spark_bc1_rgb.wgsl": () => import("./spark_bc1_rgb-CRQwJRCp.js"), "./spark_bc3_rgba.wgsl": () => import("./spark_bc3_rgba-CyRcvC8t.js"), "./spark_bc4_r.wgsl": () => import("./spark_bc4_r-BSB9VB_w.js"), "./spark_bc5_rg.wgsl": () => import("./spark_bc5_rg-NX_OBH9I.js"), "./spark_bc7_rgb.wgsl": () => import("./spark_bc7_rgb-CYdL55pE.js"), "./spark_bc7_rgba.wgsl": () => import("./spark_bc7_rgba-BFgOyqos.js"), "./spark_eac_r.wgsl": () => import("./spark_eac_r-BFwH430b.js"), "./spark_eac_rg.wgsl": () => import("./spark_eac_rg--Gm5Gzmk.js"), "./spark_etc2_rgb.wgsl": () => import("./spark_etc2_rgb-CWjBHhHQ.js"), "./spark_etc2_rgba.wgsl": () => import("./spark_etc2_rgba-BRX5DwNI.js"), "./utils.wgsl": () => import("./utils-BybjJ-PV.js") });
+const modules = /* @__PURE__ */ Object.assign({ "./spark_astc_rgb.wgsl": () => import("./spark_astc_rgb-ylbf30mQ.js"), "./spark_astc_rgba.wgsl": () => import("./spark_astc_rgba-C4NuyfHw.js"), "./spark_bc1_rgb.wgsl": () => import("./spark_bc1_rgb-CRQwJRCp.js"), "./spark_bc3_rgba.wgsl": () => import("./spark_bc3_rgba-CyRcvC8t.js"), "./spark_bc4_r.wgsl": () => import("./spark_bc4_r-BSB9VB_w.js"), "./spark_bc5_rg.wgsl": () => import("./spark_bc5_rg-NX_OBH9I.js"), "./spark_bc7_rgb.wgsl": () => import("./spark_bc7_rgb-CYdL55pE.js"), "./spark_bc7_rgba.wgsl": () => import("./spark_bc7_rgba-BFgOyqos.js"), "./spark_eac_r.wgsl": () => import("./spark_eac_r-BFwH430b.js"), "./spark_eac_rg.wgsl": () => import("./spark_eac_rg--Gm5Gzmk.js"), "./spark_etc2_rgb.wgsl": () => import("./spark_etc2_rgb-CWjBHhHQ.js"), "./spark_etc2_rgba.wgsl": () => import("./spark_etc2_rgba-BRX5DwNI.js"), "./utils.wgsl": () => import("./utils-CnL93Jcx.js") });
 const shaders = Object.fromEntries(
   Object.entries(modules).map(([path, module]) => {
     const name = path.replace("./", "");
@@ -794,7 +794,10 @@ class Spark {
       const webkitVersion = getSafariVersion();
       const firefoxVersion = getFirefoxVersion();
       if ((!webkitVersion || webkitVersion >= 26) && !firefoxVersion) {
-        this.#querySet = this.#device.createQuerySet({ type: "timestamp", count: 2 });
+        this.#querySet = this.#device.createQuerySet({
+          type: "timestamp",
+          count: 2
+        });
         this.#queryBuffer = this.#device.createBuffer({
           size: 16,
           // 2 timestamps × 8 bytes each
@@ -952,18 +955,18 @@ class Spark {
     }
     const preferenceOrder = [
       "bc4-r",
+      "eac-r",
       "bc5-rg",
+      "eac-rg",
       "bc7-rgb",
-      "bc7-rgba",
       "bc1-rgb",
-      "bc3-rgba",
       "astc-rgb",
       "astc-4x4-rgb",
+      "etc2-rgb",
+      "bc7-rgba",
       "astc-rgba",
       "astc-4x4-rgba",
-      "eac-r",
-      "eac-rg",
-      "etc2-rgb",
+      "bc3-rgba",
       "etc2-rgba"
     ];
     for (const key of preferenceOrder) {
@@ -994,7 +997,7 @@ class Spark {
     }
     if (!opaque) return 4;
     if (grayscale) return 1;
-    if (4 * invalidNormalCount < count) return 2;
+    if (4 * 4 * invalidNormalCount < count) return 2;
     return 3;
   }
   async #detectChannelCountGPU(texture) {

package/dist/utils-CnL93Jcx.js

@@ -0,0 +1,4 @@
+const utils = "struct Params {\n    to_srgb: u32,\n};\n\n@group(0) @binding(0) var src : texture_2d<f32>;\n@group(0) @binding(1) var dst : texture_storage_2d<rgba8unorm, write>;\n@group(0) @binding(2) var smp: sampler;\n@group(0) @binding(3) var<uniform> params: Params;\n\nfn linear_to_srgb_vec3(c: vec3<f32>) -> vec3<f32> {\n    return select(\n        1.055 * pow(c, vec3<f32>(1.0 / 2.4)) - 0.055,\n        c * 12.92,\n        c <= vec3<f32>(0.0031308)\n    );\n}\n\nfn linear_to_srgb_vec4(c: vec4<f32>) -> vec4<f32> {\n    return vec4<f32>(linear_to_srgb_vec3(c.xyz), c.w);\n}\n\n@compute @workgroup_size(8, 8)\nfn mipmap(@builtin(global_invocation_id) id : vec3<u32>) {\n    let dstSize = textureDimensions(dst).xy;\n    if (id.x >= dstSize.x || id.y >= dstSize.y) {\n        return;\n    }\n\n    let size_rcp = vec2f(1.0) / vec2f(dstSize);\n    let uv0 = vec2f(id.xy) * size_rcp;\n    let uv1 = uv0 + size_rcp;\n\n    var color = vec4f(0.0);\n    color += textureSampleLevel(src, smp, vec2f(uv0.x, uv0.y), 0);\n    color += textureSampleLevel(src, smp, vec2f(uv1.x, uv0.y), 0);\n    color += textureSampleLevel(src, smp, vec2f(uv0.x, uv1.y), 0);\n    color += textureSampleLevel(src, smp, vec2f(uv1.x, uv1.y), 0);\n    color *= 0.25; \n\n    if (params.to_srgb != 0) {\n        color = linear_to_srgb_vec4(color);\n    }\n\n    textureStore(dst, id.xy, color);\n}\n\n@compute @workgroup_size(8, 8)\nfn resize(@builtin(global_invocation_id) id : vec3<u32>) {\n    let dstSize = textureDimensions(dst).xy;\n    if (id.x >= dstSize.x || id.y >= dstSize.y) {\n        return;\n    }\n\n    let uv = (vec2f(id.xy) + vec2f(0.5)) / vec2f(dstSize);\n    var color = textureSampleLevel(src, smp, uv, 0);\n\n    if (params.to_srgb != 0) {\n        color = linear_to_srgb_vec4(color);\n    }\n\n    textureStore(dst, id.xy, color);\n}\n\n@compute @workgroup_size(8, 8)\nfn flipy(@builtin(global_invocation_id) id : vec3<u32>) {\n    let dstSize = textureDimensions(dst).xy;\n    if (id.x >= dstSize.x || id.y >= dstSize.y) {\n        return;\n    }\n\n    let uv = (vec2f(f32(id.x), f32(dstSize.y - 1u - id.y)) + vec2f(0.5)) / vec2f(dstSize);\n    var color = textureSampleLevel(src, smp, uv, 0);\n\n    if (params.to_srgb != 0) {\n        color = linear_to_srgb_vec4(color);\n    }\n\n    textureStore(dst, id.xy, color);\n}\n\n\n@group(0) @binding(1) var<storage, read_write> global_counters: array<atomic<u32>, 3>;\n\nvar<workgroup> local_opaque: atomic<u32>;\nvar<workgroup> local_grayscale: atomic<u32>;\nvar<workgroup> local_invalid_normals: atomic<u32>;\n\n@compute @workgroup_size(8, 8)\nfn detect_channel_count(@builtin(global_invocation_id) global_id: vec3<u32>,\n        @builtin(local_invocation_index) local_id: u32) {\n    \n    if (local_id == 0u) {\n        atomicStore(&local_opaque, 1u);\n        atomicStore(&local_grayscale, 1u);\n        atomicStore(&local_invalid_normals, 0u);\n    }\n    workgroupBarrier();\n\n    let tex_size = textureDimensions(src);\n    if (global_id.x < tex_size.x && global_id.y < tex_size.y) {\n\n        let color = textureLoad(src, vec2<i32>(global_id.xy), 0);\n\n        // Alpha check\n        if (color.a < 1.0) {\n            atomicStore(&local_opaque, 0u);\n        }\n\n        // Grayscale check\n        if (color.r != color.g || color.g != color.b) {\n            atomicStore(&local_grayscale, 0u);\n        }\n\n        // Normal check\n        let n = color.rgb * 2.0 - vec3(1.0);\n        let len = length(n);\n\n        if (abs(len - 1.0) > 0.2 || n.z < -0.1) {\n            atomicAdd(&local_invalid_normals, 1u);\n        }\n    }\n\n    workgroupBarrier();\n\n    if (local_id == 0u) {\n        // If not opaque, write not-opaque flag.\n        if (atomicLoad(&local_opaque) == 0u) {\n            atomicStore(&global_counters[0], 1u);\n        }\n\n        // If not greyscale, write not greyscale flag.\n        if (atomicLoad(&local_grayscale) == 0u) {\n            atomicStore(&global_counters[1], 1u);\n        }\n\n        // Add number of texels that are not normal.\n        atomicAdd(&global_counters[2], atomicLoad(&local_invalid_normals));\n    }\n}\n\n\n// @@ Compute RMSE?\n\n\n";
+export {
+  utils as default
+};

package/package.json

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

package/dist/utils-BybjJ-PV.js

@@ -1,4 +0,0 @@
-const utils = "struct Params {\n    to_srgb: u32,\n};\n\n@group(0) @binding(0) var src : texture_2d<f32>;\n@group(0) @binding(1) var dst : texture_storage_2d<rgba8unorm, write>;\n@group(0) @binding(2) var smp: sampler;\n@group(0) @binding(3) var<uniform> params: Params;\n\nfn linear_to_srgb_vec3(c: vec3<f32>) -> vec3<f32> {\n    return select(\n        1.055 * pow(c, vec3<f32>(1.0 / 2.4)) - 0.055,\n        c * 12.92,\n        c <= vec3<f32>(0.0031308)\n    );\n}\n\nfn linear_to_srgb_vec4(c: vec4<f32>) -> vec4<f32> {\n    return vec4<f32>(linear_to_srgb_vec3(c.xyz), 1.0);\n}\n\n@compute @workgroup_size(8, 8)\nfn mipmap(@builtin(global_invocation_id) id : vec3<u32>) {\n    let dstSize = textureDimensions(dst).xy;\n    if (id.x >= dstSize.x || id.y >= dstSize.y) {\n        return;\n    }\n\n    let size_rcp = vec2f(1.0) / vec2f(dstSize);\n    let uv0 = vec2f(id.xy) * size_rcp;\n    let uv1 = uv0 + size_rcp;\n\n    var color = vec4f(0.0);\n    color += textureSampleLevel(src, smp, vec2f(uv0.x, uv0.y), 0);\n    color += textureSampleLevel(src, smp, vec2f(uv1.x, uv0.y), 0);\n    color += textureSampleLevel(src, smp, vec2f(uv0.x, uv1.y), 0);\n    color += textureSampleLevel(src, smp, vec2f(uv1.x, uv1.y), 0);\n    color *= 0.25; \n\n    if (params.to_srgb != 0) {\n        color = linear_to_srgb_vec4(color);\n    }\n\n    textureStore(dst, id.xy, color);\n}\n\n@compute @workgroup_size(8, 8)\nfn resize(@builtin(global_invocation_id) id : vec3<u32>) {\n    let dstSize = textureDimensions(dst).xy;\n    if (id.x >= dstSize.x || id.y >= dstSize.y) {\n        return;\n    }\n\n    let uv = (vec2f(id.xy) + vec2f(0.5)) / vec2f(dstSize);\n    var color = textureSampleLevel(src, smp, uv, 0);\n\n    if (params.to_srgb != 0) {\n        color = linear_to_srgb_vec4(color);\n    }\n\n    textureStore(dst, id.xy, color);\n}\n\n@compute @workgroup_size(8, 8)\nfn flipy(@builtin(global_invocation_id) id : vec3<u32>) {\n    let dstSize = textureDimensions(dst).xy;\n    if (id.x >= dstSize.x || id.y >= dstSize.y) {\n        return;\n    }\n\n    let uv = vec2f(f32(id.x), f32(dstSize.y - 1u - id.y)) / vec2f(dstSize);\n    var color = textureSampleLevel(src, smp, uv, 0);\n\n    if (params.to_srgb != 0) {\n        color = linear_to_srgb_vec4(color);\n    }\n\n    textureStore(dst, id.xy, color);\n}\n\n\n@group(0) @binding(1) var<storage, read_write> global_counters: array<atomic<u32>, 3>;\n\nvar<workgroup> local_opaque: atomic<u32>;\nvar<workgroup> local_grayscale: atomic<u32>;\nvar<workgroup> local_invalid_normals: atomic<u32>;\n\n@compute @workgroup_size(8, 8)\nfn detect_channel_count(@builtin(global_invocation_id) global_id: vec3<u32>,\n        @builtin(local_invocation_index) local_id: u32) {\n    \n    if (local_id == 0u) {\n        atomicStore(&local_opaque, 1u);\n        atomicStore(&local_grayscale, 1u);\n        atomicStore(&local_invalid_normals, 0u);\n    }\n    workgroupBarrier();\n\n    let tex_size = textureDimensions(src);\n    if (global_id.x < tex_size.x && global_id.y < tex_size.y) {\n\n        let color = textureLoad(src, vec2<i32>(global_id.xy), 0);\n\n        // Alpha check\n        if (color.a < 1.0) {\n            atomicStore(&local_opaque, 0u);\n        }\n\n        // Grayscale check\n        if (color.r != color.g || color.g != color.b) {\n            atomicStore(&local_grayscale, 0u);\n        }\n\n        // Normal check\n        let n = color.rgb * 2.0 - vec3(1.0);\n        let len = length(n);\n\n        if (abs(len - 1.0) > 0.2 || n.z < -0.1) {\n            atomicAdd(&local_invalid_normals, 1u);\n        }\n    }\n\n    workgroupBarrier();\n\n    if (local_id == 0u) {\n        // If not opaque, write not-opaque flag.\n        if (atomicLoad(&local_opaque) == 0u) {\n            atomicStore(&global_counters[0], 1u);\n        }\n\n        // If not greyscale, write not greyscale flag.\n        if (atomicLoad(&local_grayscale) == 0u) {\n            atomicStore(&global_counters[1], 1u);\n        }\n\n        // Add number of texels that are not normal.\n        atomicAdd(&global_counters[2], atomicLoad(&local_invalid_normals));\n    }\n}\n\n\n// @@ Compute RMSE?\n\n\n";
-export {
-  utils as default
-};