@ludicon/spark.js 0.0.2 → 0.0.4

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.
 
@@ -21,14 +21,14 @@ npm install @ludicon/spark.js
 ## Usage Example
 
 ```js
-import { Spark } from "spark.js"
+import { Spark } from "@ludicon/spark.js"
 
 // Initialize a WebGPU device with required features
 const adapter = await navigator.gpu.requestAdapter()
 const requiredFeatures = Spark.getRequiredFeatures(adapter)
 const device = await adapter.requestDevice({ requiredFeatures })
 
-// Create Spark instance for the WebGPU device
+// Create spark instance for the WebGPU device
 const spark = await Spark.create(device)
 
 // Load and encode an image into a GPU texture
@@ -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,11 +1,10 @@
-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-Dpsm7Knh.js") });
 const shaders = Object.fromEntries(
-  await Promise.all(
-    Object.entries(modules).map(async function([path, module]) {
-      const { default: shader } = await module(), name = path.replace("./", "");
-      return [name, shader];
-    })
-  )
+  Object.entries(modules).map(([path, module]) => {
+    const name = path.replace("./", "");
+    const fn = async () => (await module()).default;
+    return [name, fn];
+  })
 );
 const SparkFormat = {
   ASTC_4x4_RGB: 0,
@@ -461,11 +460,13 @@ class Spark {
   /**
    * Initialize the encoder by detecting available compression formats.
    * @param {GPUDevice} device - WebGPU device.
+   * @param {Object} options - Encoder options.
+   * @param {boolean} options.preload - Whether to preload all encoder pipelines (false by default).
    * @returns {Promise<void>} Resolves when initialization is complete.
    */
-  static async create(device) {
+  static async create(device, options = {}) {
     const instance = new Spark();
-    await instance.#init(device);
+    await instance.#init(device, options.preload ?? false);
     return instance;
   }
   /**
@@ -757,7 +758,7 @@ class Spark {
     }
     const commandEncoder = this.#device.createCommandEncoder();
     commandEncoder.resolveQuerySet(this.#querySet, 0, 2, this.#queryBuffer, 0);
-    commandEncoder.copyBufferToBuffer(this.#queryBuffer, this.#queryReadbackBuffer, 16);
+    commandEncoder.copyBufferToBuffer(this.#queryBuffer, 0, this.#queryReadbackBuffer, 0, 16);
     this.#device.queue.submit([commandEncoder.finish()]);
     await this.#device.queue.onSubmittedWorkDone();
     await this.#queryReadbackBuffer.mapAsync(GPUMapMode.READ);
@@ -770,7 +771,7 @@ class Spark {
     const elapsedMilliseconds = elapsedNanoseconds / 1e6;
     return elapsedMilliseconds;
   }
-  async #init(device) {
+  async #init(device, preload) {
     assert(device, "device is required");
     assert(isWebGPU(device), "device is not a WebGPU device");
     this.#device = device;
@@ -793,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
@@ -808,17 +812,19 @@ class Spark {
     }
     this.#supportsFloat16 = this.#device.features.has("shader-f16");
     await this.#loadUtilPipelines();
-    for (const format of this.#supportedFormats) {
-      if (!this.#pipelines[format]) {
-        this.#loadPipeline(format).catch((err) => {
-          console.error(`Failed to preload pipeline for format ${format}:`, err);
-        });
+    if (preload) {
+      for (const format of this.#supportedFormats) {
+        if (!this.#pipelines[format]) {
+          this.#loadPipeline(format).catch((err) => {
+            console.error(`Failed to preload pipeline for format ${format}:`, err);
+          });
+        }
       }
     }
   }
   async #loadUtilPipelines() {
     const shaderModule = this.#device.createShaderModule({
-      code: shaders["utils.wgsl"],
+      code: await shaders["utils.wgsl"](),
       label: "utils"
     });
     if (typeof shaderModule.compilationInfo == "function") {
@@ -867,7 +873,7 @@ class Spark {
     const pipelinePromise = (async () => {
       const shaderFile = SparkShaderFiles[format];
       assert(shaderFile, `No shader available for format ${SparkFormatName[format]}`);
-      let shaderCode = shaders[shaderFile];
+      let shaderCode = await shaders[shaderFile]();
       if (!this.#supportsFloat16) {
         shaderCode = shaderCode.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");
       }

package/dist/utils-Dpsm7Knh.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), 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(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.2",
+  "version": "0.0.4",
   "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
-};