webgpu-computed 0.0.12 → 0.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webgpu-computed",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "对webgpu的封装，处理了繁琐的前置工作，只关注wgsl本身逻辑",
   "main": "./src/index.js",
   "scripts": {

package/src/index.js

@@ -1,68 +1,68 @@
-async function _(f, e = !0) {
+async function z(u, e = !0) {
   if (typeof global < "u" && typeof require < "u")
-    return require(f);
+    return require(u);
   {
     let r = await import(
       /* @vite-ignore */
-      f
+      u
     );
     return e && (r = r.default), r;
   }
 }
-function q(f) {
-  if (f instanceof Float32Array) return "f32";
-  if (f instanceof Int32Array) return "i32";
-  if (f instanceof Uint32Array) return "u32";
+function q(u) {
+  if (u instanceof Float32Array) return "f32";
+  if (u instanceof Int32Array) return "i32";
+  if (u instanceof Uint32Array) return "u32";
   throw new Error(
-    `Unsupported ArrayBufferView type: ${f.constructor.name}`
+    `Unsupported ArrayBufferView type: ${u.constructor.name}`
   );
 }
-function S(f) {
-  return f && f[0].toUpperCase() + f.slice(1);
+function S(u) {
+  return u && u[0].toUpperCase() + u.slice(1);
 }
-function x(f) {
-  return O.includes(f);
+function x(u) {
+  return O.includes(u);
 }
-function A(f) {
-  return f && Array.isArray(f) && f.length ? f.every((e) => e && typeof e == "object" && "name" in e && "type" in e && x(e.type)) : !1;
+function m(u) {
+  return u && Array.isArray(u) && u.length ? u.every((e) => e && typeof e == "object" && "name" in e && "type" in e && x(e.type)) : !1;
 }
-function $(f) {
-  return f && "layout" in f && A(f.layout);
+function $(u) {
+  return u && "layout" in u && m(u.layout);
 }
-function U(f, e) {
+function _(u, e) {
   const r = E[e];
-  return (r - f % r) % r;
+  return (r - u % r) % r;
 }
-function z(f, e) {
-  return f + (e - f % e) % e;
+function P(u, e) {
+  return u + (e - u % e) % e;
 }
-function P(f) {
-  const e = Object.keys(f), r = e.map((l) => {
-    const a = f[l];
+function U(u) {
+  const e = Object.keys(u), r = e.map((p) => {
+    const a = u[p];
     if (Array.isArray(a)) {
       for (const o of ["vec2", "vec3", "vec4", "mat3x3", "mat4x4"])
         if (B[o] === a.length) return o;
-      throw new Error(`${l} 不支持的数组长度 ${a.length}`);
+      throw new Error(`${p} 不支持的数组长度 ${a.length}`);
     }
     if (typeof a == "number") return "f32";
-    throw new Error(`${l} 不支持的类型`);
+    throw new Error(`${p} 不支持的类型`);
   });
   if (e.length !== r.length) throw new Error("keys 与 types 长度不一致");
-  let u = 0;
-  const s = e.map((l, a) => {
+  let s = 0;
+  const f = e.map((p, a) => {
     const o = r[a];
-    u += U(u, o);
-    const i = {
-      name: l,
+    s += _(s, o);
+    const y = {
+      name: p,
       type: o,
-      offset: u,
+      offset: s,
       size: B[o]
     };
-    return u += B[o], i;
-  }), t = Math.max(...r.map((l) => E[l]));
+    return s += B[o], y;
+  }), t = Math.max(...r.map((p) => E[p]));
   return {
-    stride: u + (t - u % t) % t,
-    layout: s
+    stride: s + (t - s % t) % t,
+    layout: f
   };
 }
 const B = {
@@ -104,19 +104,19 @@ class T {
   improveTemplateOption(e) {
     const r = (t) => {
       let n = 0;
-      t.forEach((l) => {
-        n += U(n, l.type), l.offset = n, l.size = B[l.type], n += l.size;
+      t.forEach((p) => {
+        n += _(n, p.type), p.offset = n, p.size = B[p.type], n += p.size;
       });
-    }, u = (t) => {
+    }, s = (t) => {
       r(t.layout);
-      const n = t.layout[t.layout.length - 1], l = n.offset + n.size;
+      const n = t.layout[t.layout.length - 1], p = n.offset + n.size;
       let a = 1;
       for (const o of t.layout) a = Math.max(a, E[o.type]);
-      t.stride = z(l, a);
+      t.stride = P(p, a);
     };
     Object.keys(e).forEach((t) => {
       const n = e[t];
-      A(n) ? r(n) : $(n) ? u(n) : Array.isArray(n) && typeof n[0] == "number" && (e[t] = new Float32Array());
+      m(n) ? r(n) : $(n) ? s(n) : Array.isArray(n) && typeof n[0] == "number" && (e[t] = new Float32Array());
     });
   }
   /** 获取Gpu设备
@@ -132,8 +132,8 @@ class T {
   async initPipeline() {
     if (!this.template) throw new Error("初始化计算管线错误，未找到可用数据模版");
     await T.init();
-    const e = this.template, { device: r } = await this.getDevice(), u = [], s = [], t = [];
-    this.device = r, Object.keys(e).forEach((y, d) => {
+    const e = this.template, { device: r } = await this.getDevice(), s = [], f = [], t = [];
+    this.device = r, Object.keys(e).forEach((c, d) => {
       if (t.push({
         binding: d,
         // 绑定到组里的0号位插槽
@@ -142,47 +142,47 @@ class T {
         buffer: {
           type: "storage"
         }
-      }), A(e[y])) {
-        const g = e[y], v = g.map((w) => `${w.name}:${w.type === "f32" ? "f32" : w.type + "<f32>"}`).join(","), m = `${S(y)}Struct`;
-        u.push(`struct ${S(y)}Struct {${v}};`), s.push(`@group(0) @binding(${d}) var<storage, read_write> ${y}: ${m};`);
-      } else if ($(e[y])) {
-        const g = e[y], v = g.layout.map((w) => `${w.name}:${w.type === "f32" ? "f32" : w.type + "<f32>"}`).join(","), m = `${S(y)}Struct`;
-        u.push(`struct ${m} {${v}};`), s.push(`@group(0) @binding(${d}) var<storage, read_write> ${y}: array<${m}>;`);
-      } else if (ArrayBuffer.isView(e[y]) && !(e[y] instanceof DataView)) {
-        const g = e[y], v = q(g);
-        g instanceof D ? s.push(`@group(0) @binding(${d}) var<storage, read_write> ${y}: array<atomic<${v}>>;`) : s.push(`@group(0) @binding(${d}) var<storage, read_write> ${y}: array<${v}>;`);
+      }), m(e[c])) {
+        const g = e[c], v = g.map((w) => `${w.name}:${w.type === "f32" ? "f32" : w.type + "<f32>"}`).join(","), A = `${S(c)}Struct`;
+        s.push(`struct ${S(c)}Struct {${v}};`), f.push(`@group(0) @binding(${d}) var<storage, read_write> ${c}: ${A};`);
+      } else if ($(e[c])) {
+        const g = e[c], v = g.layout.map((w) => `${w.name}:${w.type === "f32" ? "f32" : w.type + "<f32>"}`).join(","), A = `${S(c)}Struct`;
+        s.push(`struct ${A} {${v}};`), f.push(`@group(0) @binding(${d}) var<storage, read_write> ${c}: array<${A}>;`);
+      } else if (ArrayBuffer.isView(e[c]) && !(e[c] instanceof DataView)) {
+        const g = e[c], v = q(g);
+        g instanceof D ? f.push(`@group(0) @binding(${d}) var<storage, read_write> ${c}: array<atomic<${v}>>;`) : f.push(`@group(0) @binding(${d}) var<storage, read_write> ${c}: array<${v}>;`);
       }
     });
     const {
       beforeCodes: n = [],
-      workgroupSize: l = [32, 1, 1],
+      workgroupSize: p = [32, 1, 1],
       globalInvocationIdName: a = "grid",
       workgroupIndexName: o = "index",
-      code: i = ""
-    } = this.option ?? {}, c = (
+      code: y = ""
+    } = this.option ?? {}, i = (
       /*wgsl*/
       `
-            ${u.join("")}
-${s.join("")}
+            ${s.join("")}
+${f.join("")}
             ${n.join(" ") ?? ""}
 
-            @compute @workgroup_size(${l.join(",")})
+            @compute @workgroup_size(${p.join(",")})
             fn main(@builtin(global_invocation_id) ${a}: vec3<u32>) {
                 var ${o} = ${a}.x;
-                ${i}
+                ${y}
             }
         `
     );
-    this.code = c;
-    const p = r.createBindGroupLayout({
+    this.code = i;
+    const l = r.createBindGroupLayout({
       entries: t
     });
-    this.groupLayout = p, this.pipeline = r.createComputePipeline({
+    this.groupLayout = l, this.pipeline = r.createComputePipeline({
       layout: r.createPipelineLayout({
-        bindGroupLayouts: [p]
+        bindGroupLayouts: [l]
       }),
       compute: {
-        module: r.createShaderModule({ code: c, label: "" }),
+        module: r.createShaderModule({ code: i, label: "" }),
         entryPoint: "main"
       }
     });
@@ -193,49 +193,49 @@ ${s.join("")}
   createBindGroup(e) {
     if (!this.template) throw new Error("创建buffer组错误，未找到可用数据模版");
     if (!this.device) throw new Error("创建buffer组错误，未找到可用的gpu设备，请确保初始化完计算管线");
-    const r = this.device, u = this.template, s = [];
-    function t(a, o, i = 0, c) {
-      if (!c) {
-        const p = o[o.length - 1], y = p.offset + p.size;
+    const r = this.device, s = this.template, f = [];
+    function t(a, o, y = 0, i) {
+      if (!i) {
+        const l = o[o.length - 1], c = l.offset + l.size;
         let d = 1;
         for (const g of o) d = Math.max(d, E[g.type]);
-        c = c ?? new Array(z(y, d)).fill(0);
+        i = i ?? new Array(P(c, d)).fill(0);
       }
-      return o.forEach((p) => {
-        let y = a[p.name];
-        Array.isArray(y) || (y = [y]);
-        for (let d = 0; d < p.size; d++)
-          c[i + p.offset + d] = Number(y[d] ?? 0);
-      }), c;
+      return o.forEach((l) => {
+        let c = a[l.name];
+        Array.isArray(c) || (c = [c]);
+        for (let d = 0; d < l.size; d++)
+          i[y + l.offset + d] = Number(c[d] ?? 0);
+      }), i;
     }
     function n(a, o) {
-      const i = new Array(o.stride * a.length).fill(0);
-      return a.forEach((c, p) => {
-        const y = p * o.stride;
-        t(c, o.layout, y, i);
-      }), i;
+      const y = new Array(o.stride * a.length).fill(0);
+      return a.forEach((i, l) => {
+        const c = l * o.stride;
+        t(i, o.layout, c, y);
+      }), y;
     }
-    return Object.keys(u).forEach((a) => {
+    return Object.keys(s).forEach((a) => {
       if (!(a in e)) throw new Error(`传入的数据中，不存在${a}字段`);
-      const o = u[a], i = e[a];
-      let c = [];
-      A(o) ? c = t(i, o) : $(o) ? c = n(i, o) : Array.isArray(i) && (c = i);
-      let p = null;
-      if (o instanceof Float32Array ? p = new Float32Array(c) : o instanceof Uint32Array ? p = new Uint32Array(c) : o instanceof Int32Array ? p = new Int32Array(c) : p = new Float32Array(c), !p) throw new Error("不支持的数组类型" + o);
-      const y = r.createBuffer({
-        size: p.byteLength,
+      const o = s[a], y = e[a];
+      let i = [];
+      m(o) ? i = t(y, o) : $(o) ? i = n(y, o) : Array.isArray(y) && (i = y);
+      let l = null;
+      if (o instanceof Float32Array ? l = new Float32Array(i) : o instanceof Uint32Array ? l = new Uint32Array(i) : o instanceof Int32Array ? l = new Int32Array(i) : l = new Float32Array(i), !l) throw new Error("不支持的数组类型" + o);
+      const c = r.createBuffer({
+        size: l.byteLength,
         usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.COPY_SRC | GPUBufferUsage.STORAGE
       });
-      r.queue.writeBuffer(y, 0, p), s.push({ name: a, buffer: y });
+      r.queue.writeBuffer(c, 0, l), f.push({ name: a, buffer: c });
     }), {
       group: r.createBindGroup({
         layout: this.groupLayout,
-        entries: s.map((a, o) => ({
+        entries: f.map((a, o) => ({
           binding: o,
           resource: { buffer: a.buffer }
         }))
       }),
-      buffers: s
+      buffers: f
     };
   }
   /** 数据映射回模版数据
@@ -245,22 +245,22 @@ ${s.join("")}
   dataMap(e, r) {
     if (!(r in this.template)) throw new Error("未找到数据字段：" + r);
     if ($(this.template[r])) {
-      const u = this.template[r], s = e.length / u.stride, t = [];
-      for (let n = 0; n < s; n++) {
-        const l = n * u.stride, a = {};
-        u.layout.forEach((o) => {
-          const i = e.slice(l + o.offset, l + o.offset + o.size);
-          a[o.name] = i.length === 1 ? i[0] : i;
+      const s = this.template[r], f = e.length / s.stride, t = [];
+      for (let n = 0; n < f; n++) {
+        const p = n * s.stride, a = {};
+        s.layout.forEach((o) => {
+          const y = e.slice(p + o.offset, p + o.offset + o.size);
+          a[o.name] = y.length === 1 ? y[0] : y;
         }), t.push(a);
       }
       return t;
     }
-    if (A(this.template[r])) {
-      const u = this.template[r], s = {};
-      return u.forEach((t) => {
+    if (m(this.template[r])) {
+      const s = this.template[r], f = {};
+      return s.forEach((t) => {
         const n = e.slice(t.offset, t.offset + t.size);
-        s[t.name] = n.length === 1 ? n[0] : n;
-      }), s;
+        f[t.name] = n.length === 1 ? n[0] : n;
+      }), f;
     }
     return e;
   }
@@ -270,27 +270,31 @@ ${s.join("")}
    * @param synchronize 需要同步的数据字段
    * @returns 
    */
-  async computed(e, r, u) {
+  async computed(e, r, s = []) {
     if (!this.pipeline) throw new Error("未找到可用计算管线，请确保计算管线已经创建成功");
-    const s = this.device, t = this.pipeline, n = s.createCommandEncoder(), l = n.beginComputePass();
-    l.setPipeline(t), l.setBindGroup(0, e.group), l.dispatchWorkgroups(r[0], r[1], r[2]), l.end();
+    const f = this.device, t = this.pipeline, n = f.createCommandEncoder(), p = n.beginComputePass();
+    p.setPipeline(t), p.setBindGroup(0, e.group), p.dispatchWorkgroups(r[0], r[1], r[2]), p.end();
     const a = e.buffers?.map((i) => {
-      if (u?.includes(i.name)) {
-        const c = s.createBuffer({
+      if (s?.includes(i.name)) {
+        const l = f.createBuffer({
           size: i.buffer.size,
           usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST
         });
-        return n.copyBufferToBuffer(i.buffer, 0, c, 0, c.size), { buffer: c, name: i.name };
+        return n.copyBufferToBuffer(i.buffer, 0, l, 0, l.size), { buffer: l, name: i.name };
       }
     }).filter((i) => !!i);
-    return s.queue.submit([n.finish()]), await s.queue.onSubmittedWorkDone(), await Promise.all(
+    f.queue.submit([n.finish()]), await f.queue.onSubmittedWorkDone();
+    const o = /* @__PURE__ */ new Map();
+    return await Promise.all(
       a.map(async (i) => {
         await i.buffer.mapAsync(GPUMapMode.READ);
-        const c = i.buffer.getMappedRange();
-        let p = null;
-        return this.template[i.name] instanceof Float32Array ? p = new Float32Array(c) : this.template[i.name] instanceof Uint32Array ? p = new Uint32Array(c) : this.template[i.name] instanceof Int32Array ? p = new Int32Array(c) : p = new Float32Array(c), [...p];
+        const l = i.buffer.getMappedRange();
+        let c = null;
+        this.template[i.name] instanceof Float32Array ? c = new Float32Array(l) : this.template[i.name] instanceof Uint32Array ? c = new Uint32Array(l) : this.template[i.name] instanceof Int32Array ? c = new Int32Array(l) : c = new Float32Array(l);
+        const d = [...c];
+        o.set(i.name, d);
       })
-    );
+    ), s.map((i) => o.get(i));
   }
   /** 初始化gpu设备
    * @returns 
@@ -298,7 +302,7 @@ ${s.join("")}
   static async init() {
     if (!(h && b)) {
       if (typeof globalThis < "u" && typeof window > "u") {
-        const { create: e, globals: r } = await _("webgpu", !1);
+        const { create: e, globals: r } = await z("webgpu", !1);
         Object.assign(globalThis, r), globalThis.navigator || (globalThis.navigator = {}), Object.assign(globalThis.navigator, { gpu: e([]) });
       }
       if (!navigator.gpu) throw new Error("该环境不支持webgpu");
@@ -315,20 +319,20 @@ ${s.join("")}
    * @param data 
    */
   static buildBufferTypeByData(e) {
-    return Object.keys(e).reduce((u, s) => {
-      let t = e[s];
+    return Object.keys(e).reduce((s, f) => {
+      let t = e[f];
       if (Array.isArray(t) && typeof t[0] == "number" && (t = new Float32Array()), Array.isArray(t))
         if (typeof t[0] == "object" || t.length) {
-          const n = P(t[0]);
-          u[s] = n;
-        } else console.log(`字段：${s}， 不支持该值对应数据类型或数组为空`);
+          const n = U(t[0]);
+          s[f] = n;
+        } else console.log(`字段：${f}， 不支持该值对应数据类型或数组为空`);
       else if (ArrayBuffer.isView(t) && !(t instanceof DataView))
-        u[s] = t;
+        s[f] = t;
       else if (typeof t == "object") {
-        const n = P(t);
-        u[s] = n.layout;
-      } else console.log(`字段：${s}， 不支持的数据类型`);
-      return u;
+        const n = U(t);
+        s[f] = n.layout;
+      } else console.log(`字段：${f}， 不支持的数据类型`);
+      return s;
     }, {});
   }
   /** 通过数据创建
@@ -336,8 +340,8 @@ ${s.join("")}
    * @returns 
    */
   static async fromByData(e) {
-    let { data: r, ...u } = e;
-    const s = this.buildBufferTypeByData(r), t = new T(s, u);
+    let { data: r, ...s } = e;
+    const f = this.buildBufferTypeByData(r), t = new T(f, s);
     return await t.initPipeline(), t;
   }
   /** 快捷计算方法
@@ -345,9 +349,9 @@ ${s.join("")}
    * @returns 
    */
   static async computed(e) {
-    let { data: r, map: u = !1, workgroupCount: s, synchronize: t, onSuccess: n, ...l } = e;
-    const a = await this.fromByData({ data: r, ...l }), o = a.createBindGroup(r), i = await a.computed(o, s, t);
-    return n && n({ gpuComputed: a, group: o, results: i }), u ? i.map((c, p) => a.dataMap(c, t[p])) : i;
+    let { data: r, map: s = !1, workgroupCount: f, synchronize: t, onSuccess: n, ...p } = e;
+    const a = await this.fromByData({ data: r, ...p }), o = a.createBindGroup(r), y = await a.computed(o, f, t);
+    return n && n({ gpuComputed: a, group: o, results: y }), s ? y.map((i, l) => a.dataMap(i, t[l])) : y;
   }
 }
 const j = (