webgpu-computed 0.0.6 → 0.0.8

package/package.json

@@ -1,17 +1,23 @@
 {
   "name": "webgpu-computed",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "对webgpu的封装，处理了繁琐的前置工作，只关注wgsl本身逻辑",
   "main": "./src/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "keywords": [
-    "webgpu", "computed", "web", "js"
-  ],
+  "keywords": ["webgpu", "gpu", "compute", "wgsl", "typescript", "javascript"],
   "dependencies": {
     "webgpu": "^0.3.8"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/xiaguochuqiu/webgpu-computed.git"
+  },
+  "bugs": {
+    "url": "https://github.com/xiaguochuqiu/webgpu-computed/issues"
+  },
+  "homepage": "https://github.com/xiaguochuqiu/webgpu-computed#readme",
   "author": "夏过初秋",
   "license": "ISC"
 }

package/src/App.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

package/src/build.d.ts

@@ -0,0 +1,3 @@
+import { GpuComputed } from './utils/GpuComputed';
+import * as WGSL_Fun from "./utils/WGSL_Fun";
+export { GpuComputed, WGSL_Fun };

package/src/index.js

@@ -1,237 +1,371 @@
-async function P(v, r = !0) {
+async function q(f, e = !0) {
   if (typeof global < "u" && typeof require < "u")
-    return require(v);
+    return require(f);
   {
-    let e = await import(
+    let t = await import(
       /* @vite-ignore */
-      v
+      f
     );
-    return r && (e = e.default), e;
+    return e && (t = t.default), t;
   }
 }
-const w = {
+function S(f) {
+  return f && f[0].toUpperCase() + f.slice(1);
+}
+function x(f) {
+  return O.includes(f);
+}
+function w(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 $(f) {
+  return f && "layout" in f && w(f.layout);
+}
+function _(f, e) {
+  const t = B[e];
+  return (t - f % t) % t;
+}
+function P(f, e) {
+  return f + (e - f % e) % e;
+}
+function T(f) {
+  const e = Object.keys(f), t = e.map((c) => {
+    const n = f[c];
+    if (Array.isArray(n)) {
+      for (const i of ["vec2", "vec3", "vec4", "mat3x3", "mat4x4"])
+        if (E[i] === n.length) return i;
+      throw new Error(`${c} 不支持的数组长度 ${n.length}`);
+    }
+    if (typeof n == "number") return "f32";
+    throw new Error(`${c} 不支持的类型`);
+  });
+  if (e.length !== t.length) throw new Error("keys 与 types 长度不一致");
+  let a = 0;
+  const s = e.map((c, n) => {
+    const i = t[n];
+    a += _(a, i);
+    const u = {
+      name: c,
+      type: i,
+      offset: a,
+      size: E[i]
+    };
+    return a += E[i], u;
+  }), r = Math.max(...t.map((c) => B[c]));
+  return {
+    stride: a + (r - a % r) % r,
+    layout: s
+  };
+}
+const E = {
   f32: 1,
   vec2: 2,
   vec3: 3,
   vec4: 4,
   mat3x3: 12,
   mat4x4: 16
-}, h = {
+  // array: Infinity
+}, B = {
   f32: 1,
   vec2: 2,
   vec3: 4,
   vec4: 4,
   mat3x3: 4,
   mat4x4: 4
-};
-function B(v, r) {
-  const e = h[r];
-  return (e - v % e) % e;
-}
-let y = null, m = null;
-class A {
-  constructor() {
+  // array: 1
+}, O = ["f32", "vec2", "vec3", "vec4", "mat3x3", "mat4x4"];
+let g = null, b = null;
+class z {
+  template;
+  option;
+  pipeline;
+  device;
+  groupLayout;
+  code;
+  constructor(e, t) {
+    this.template = e, this.option = t, this.improveTemplateOption(this.template);
   }
-  static async init() {
-    if (!(y && m)) {
-      if (typeof globalThis < "u" && typeof window > "u") {
-        const { create: r, globals: e } = await P("webgpu", !1);
-        Object.assign(globalThis, e), globalThis.navigator || (globalThis.navigator = {}), Object.assign(globalThis.navigator, { gpu: r([]) });
-      }
-      if (!navigator.gpu) throw new Error("该环境不支持webgpu");
-      if (y || (y = await navigator.gpu.requestAdapter({})), !y) throw new Error("获取适配器失败");
-      if (m = await y.requestDevice(), !y) throw new Error("获取设备失败");
-    }
-  }
-  static destroy() {
-    m && m.destroy(), m = null;
+  /** 完善模版数据
+   * @param template 
+   */
+  improveTemplateOption(e) {
+    const t = (r) => {
+      let o = 0;
+      r.forEach((c) => {
+        o += _(o, c.type), c.offset = o, c.size = E[c.type], o += c.size;
+      });
+    }, a = (r) => {
+      t(r.layout);
+      const o = r.layout[r.layout.length - 1], c = o.offset + o.size;
+      let n = 1;
+      for (const i of r.layout) n = Math.max(n, B[i.type]);
+      r.stride = P(c, n);
+    };
+    Object.keys(e).forEach((r) => {
+      const o = e[r];
+      w(o) ? t(o) : $(o) && a(o);
+    });
   }
+  /** 获取Gpu设备
+   * @returns 
+   */
   async getDevice() {
-    if (!y || !m) throw new Error("webgpu未初始化或不可用");
-    return { adapter: y, device: m };
+    if (!g || !b) throw new Error("webgpu未初始化或不可用");
+    return { adapter: g, device: b };
   }
-  async createPipeline(r, e) {
-    const { device: o } = await this.getDevice(), a = Object.keys(e).map((f, s) => {
-      const i = e[f], u = new Float32Array(Array.isArray(i) ? i : i.buffer), t = o.createBuffer({
-        size: u.byteLength,
-        usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.COPY_SRC | GPUBufferUsage.STORAGE
-      });
-      return o.queue.writeBuffer(t, 0, u), {
-        name: f,
-        buffer: t,
-        float32Array: u,
-        groupLayoutItem: {
-          binding: s,
-          // 绑定到组里的0号位插槽
-          visibility: GPUShaderStage.COMPUTE,
-          // 数据在哪些阶段可以使用, 计算着色器、片元着色器、顶点着色器
-          buffer: {
-            type: "storage"
-          }
-        },
-        groupItem: {
-          binding: s,
-          resource: { buffer: t }
+  /**
+   * 初始化计算管线
+   */
+  async initPipeline() {
+    if (!this.template) throw new Error("初始化计算管线错误，未找到可用数据模版");
+    await z.init();
+    const e = this.template, { device: t } = await this.getDevice(), a = [], s = [], r = [];
+    this.device = t, Object.keys(e).forEach((p, d) => {
+      if (r.push({
+        binding: d,
+        // 绑定到组里的0号位插槽
+        visibility: GPUShaderStage.COMPUTE,
+        // 数据在哪些阶段可以使用, 计算着色器、片元着色器、顶点着色器
+        buffer: {
+          type: "storage"
         }
-      };
-    }), l = o.createBindGroupLayout({
-      entries: a.map((f) => f.groupLayoutItem)
-    }), g = o.createBindGroup({
-      layout: l,
-      entries: a.map((f) => f.groupItem)
+      }), w(e[p])) {
+        const v = e[p], A = v.map((h) => `${h.name}:${h.type === "f32" ? "f32" : h.type + "<f32>"}`).join(","), m = `${S(p)}Struct`;
+        a.push(`struct ${S(p)}Struct {${A}};`), s.push(`@group(0) @binding(${d}) var<storage, read_write> ${p}: ${m};`);
+      } else if ($(e[p])) {
+        const v = e[p], A = v.layout.map((h) => `${h.name}:${h.type === "f32" ? "f32" : h.type + "<f32>"}`).join(","), m = `${S(p)}Struct`;
+        a.push(`struct ${m} {${A}};`), s.push(`@group(0) @binding(${d}) var<storage, read_write> ${p}: array<${m}>;`);
+      } else
+        s.push(`@group(0) @binding(${d}) var<storage, read_write> ${p}: array<f32>;`);
     });
-    return { pipeline: o.createComputePipeline({
-      layout: o.createPipelineLayout({
-        bindGroupLayouts: [l]
-      }),
-      compute: {
-        module: o.createShaderModule({ code: r, label: "" }),
-        entryPoint: "main"
-      }
-    }), group: g, device: o, bufferInfoList: a };
-  }
-  buildCode(r, e, o) {
     const {
-      workgroupSize: a = [32, 1, 1],
-      globalInvocationIdName: l = "grid",
-      workgroupIndexName: g = "index"
-    } = o ?? {}, d = (t) => t && t[0].toUpperCase() + t.slice(1), f = Object.keys(r).map((t) => {
-      const p = r[t];
-      return Array.isArray(p) ? void 0 : `struct ${d(t)}Struct { ${p.layout.map((n) => `${n.name}: ${n.type === "f32" ? "f32" : `${n.type}<f32>`}`).join(",")} };`;
-    }).filter((t) => !!t).join(`
-`), s = Object.keys(r).map((t, p) => {
-      const c = r[t], n = "read_write";
-      return Array.isArray(c) ? `@group(0) @binding(${p}) var<storage, ${n}> ${t}: array<f32>;` : `@group(0) @binding(${p}) var<storage, ${n}> ${t}: array<${d(t)}Struct>;`;
-    }).join(`
-`), i = l;
-    return (
+      beforeCodes: o = [],
+      workgroupSize: c = [32, 1, 1],
+      globalInvocationIdName: n = "grid",
+      workgroupIndexName: i = "index",
+      code: u = ""
+    } = this.option ?? {}, l = (
       /*wgsl*/
       `
-            ${f}
-${s}
-
-            ${o?.beforeCodes?.join(" ") ?? ""}
+            ${a.join("")}
+${s.join("")}
+            ${o.join(" ") ?? ""}
 
-            @compute @workgroup_size(${a.join(",")})
-            fn main(@builtin(global_invocation_id) ${i}: vec3<u32>) {
-                var ${g} = ${i}.x;
-                ${e}
+            @compute @workgroup_size(${c.join(",")})
+            fn main(@builtin(global_invocation_id) ${n}: vec3<u32>) {
+                var ${i} = ${n}.x;
+                ${u}
             }
         `
     );
+    this.code = l;
+    const y = t.createBindGroupLayout({
+      entries: r
+    });
+    this.groupLayout = y, this.pipeline = t.createComputePipeline({
+      layout: t.createPipelineLayout({
+        bindGroupLayouts: [y]
+      }),
+      compute: {
+        module: t.createShaderModule({ code: l, label: "" }),
+        entryPoint: "main"
+      }
+    });
   }
-  buildBuffer(r, e, o) {
-    if (!Array.isArray(r) || r.length === 0)
-      throw new Error("数据必须是非空数组");
-    if (e || (e = Object.keys(r[0])), o || (o = e.map((s) => {
-      const i = r[0][s];
-      if (Array.isArray(i)) {
-        for (const u of ["vec2", "vec3", "vec4", "mat3x3", "mat4x4"])
-          if (w[u] === i.length) return u;
-        throw new Error(`${s} 不支持的数组长度 ${i.length}`);
+  /** 根据数据创建buffer组
+   * @param data 
+   */
+  createBindGroup(e) {
+    if (!this.template) throw new Error("创建buffer组错误，未找到可用数据模版");
+    if (!this.device) throw new Error("创建buffer组错误，未找到可用的gpu设备，请确保初始化完计算管线");
+    const t = this.device, a = this.template, s = [];
+    function r(n, i, u = 0, l) {
+      if (!l) {
+        const y = i[i.length - 1], p = y.offset + y.size;
+        let d = 1;
+        for (const v of i) d = Math.max(d, B[v.type]);
+        l = l ?? new Array(P(p, d)).fill(0);
       }
-      if (typeof i == "number") return "f32";
-      throw new Error(`${s} 不支持的类型`);
-    })), e.length !== o.length) throw new Error("keys 与 types 长度不一致");
-    let a = 0;
-    const l = e.map((s, i) => {
-      const u = o[i];
-      a += B(a, u);
-      const t = {
-        name: s,
-        type: u,
-        offset: a,
-        size: w[u]
-      };
-      return a += w[u], t;
-    }), g = Math.max(...o.map((s) => h[s])), d = a + (g - a % g) % g, f = new Array(d * r.length).fill(0);
-    return r.forEach((s, i) => {
-      const u = i * d;
-      l.forEach(({ name: t, offset: p, size: c }) => {
-        let n = s[t];
-        Array.isArray(n) || (n = [n]);
-        for (let b = 0; b < c; b++)
-          f[u + p + b] = Number(n[b] ?? 0);
+      return i.forEach((y) => {
+        let p = n[y.name];
+        Array.isArray(p) || (p = [p]);
+        for (let d = 0; d < y.size; d++)
+          l[u + y.offset + d] = Number(p[d] ?? 0);
+      }), l;
+    }
+    function o(n, i) {
+      const u = new Array(i.stride * n.length).fill(0);
+      return n.forEach((l, y) => {
+        const p = y * i.stride;
+        r(l, i.layout, p, u);
+      }), u;
+    }
+    return Object.keys(a).forEach((n) => {
+      if (!(n in e)) throw new Error(`传入的数据中，不存在${n}字段`);
+      const i = a[n], u = e[n];
+      let l = [];
+      w(i) ? l = r(u, i) : $(i) ? l = o(u, i) : Array.isArray(u) && l.push(...u);
+      const y = new Float32Array(l), p = t.createBuffer({
+        size: y.byteLength,
+        usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.COPY_SRC | GPUBufferUsage.STORAGE
       });
+      t.queue.writeBuffer(p, 0, y), s.push({ name: n, buffer: p });
     }), {
-      buffer: f,
-      stride: d,
-      layout: l,
-      count: r.length
+      group: t.createBindGroup({
+        layout: this.groupLayout,
+        entries: s.map((n, i) => ({
+          binding: i,
+          resource: { buffer: n.buffer }
+        }))
+      }),
+      buffers: s
     };
   }
-  async computed(r) {
-    let { code: e, data: o, ...a } = r;
-    const l = Object.keys(o).reduce((c, n) => {
-      const b = o[n];
-      if (typeof b[0] == "number") c[n] = b;
-      else {
-        const $ = this.buildBuffer(b);
-        c[n] = $;
+  /** 数据映射回模版数据
+   * @param array 
+   * @param key 
+   */
+  dataMap(e, t) {
+    if (!(t in this.template)) throw new Error("未找到数据字段：" + t);
+    if ($(this.template[t])) {
+      const a = this.template[t], s = e.length / a.stride, r = [];
+      for (let o = 0; o < s; o++) {
+        const c = o * a.stride, n = {};
+        a.layout.forEach((i) => {
+          const u = e.slice(c + i.offset, c + i.offset + i.size);
+          n[i.name] = u.length === 1 ? u[0] : u;
+        }), r.push(n);
       }
-      return c;
-    }, {});
-    e = this.buildCode(l, e, a);
-    const { pipeline: g, group: d, device: f, bufferInfoList: s } = await this.createPipeline(e, l), i = f.createCommandEncoder(), u = i.beginComputePass();
-    u.setPipeline(g), u.setBindGroup(0, d), u.dispatchWorkgroups(a.workgroupCount[0], a.workgroupCount[1], a.workgroupCount[2]), u.end();
-    const t = s?.map((c) => {
-      if (a.synchronize?.includes(c.name)) {
-        const n = f.createBuffer({
-          size: c.float32Array.byteLength,
+      return r;
+    }
+    if (w(this.template[t])) {
+      const a = this.template[t], s = {};
+      return a.forEach((r) => {
+        const o = e.slice(r.offset, r.offset + r.size);
+        s[r.name] = o.length === 1 ? o[0] : o;
+      }), s;
+    }
+    return e;
+  }
+  /** 开始计算
+   * @param group 数据组
+   * @param workgroupCount 工作组大小
+   * @param synchronize 需要同步的数据字段
+   * @returns 
+   */
+  async computed(e, t, a) {
+    if (!this.pipeline) throw new Error("未找到可用计算管线，请确保计算管线已经创建成功");
+    const s = this.device, r = this.pipeline, o = s.createCommandEncoder(), c = o.beginComputePass();
+    c.setPipeline(r), c.setBindGroup(0, e.group), c.dispatchWorkgroups(t[0], t[1], t[2]), c.end();
+    const n = e.buffers?.map((u) => {
+      if (a?.includes(u.name)) {
+        const l = s.createBuffer({
+          size: u.buffer.size,
           usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST
         });
-        return i.copyBufferToBuffer(c.buffer, 0, n, 0, n.size), { buffer: n, name: c.name };
+        return o.copyBufferToBuffer(u.buffer, 0, l, 0, l.size), { buffer: l, name: u.name };
       }
-    }).filter((c) => !!c);
-    f.queue.submit([i.finish()]), await f.queue.onSubmittedWorkDone();
-    const p = await Promise.all(
-      t.map(async (c) => {
-        await c.buffer.mapAsync(GPUMapMode.READ);
-        const n = c.buffer.getMappedRange();
-        return [...new Float32Array(n)];
+    }).filter((u) => !!u);
+    return s.queue.submit([o.finish()]), await s.queue.onSubmittedWorkDone(), await Promise.all(
+      n.map(async (u) => {
+        await u.buffer.mapAsync(GPUMapMode.READ);
+        const l = u.buffer.getMappedRange();
+        return [...new Float32Array(l)];
       })
     );
-    return a?.onSuccess && a.onSuccess({ code: e, bufferInfoList: s, results: p }), p;
   }
-  static instance;
-  static get computed() {
-    return this.instance || (this.instance = new A()), this.instance.computed.bind(this.instance);
+  /** 初始化gpu设备
+   * @returns 
+   */
+  static async init() {
+    if (!(g && b)) {
+      if (typeof globalThis < "u" && typeof window > "u") {
+        const { create: e, globals: t } = await q("webgpu", !1);
+        Object.assign(globalThis, t), globalThis.navigator || (globalThis.navigator = {}), Object.assign(globalThis.navigator, { gpu: e([]) });
+      }
+      if (!navigator.gpu) throw new Error("该环境不支持webgpu");
+      if (g || (g = await navigator.gpu.requestAdapter({})), !g) throw new Error("获取适配器失败");
+      if (b = await g.requestDevice(), !g) throw new Error("获取设备失败");
+    }
+  }
+  /** 注销gpu设备
+   */
+  static destroy() {
+    b && b.destroy(), b = null;
+  }
+  /** 
+   * @param data 
+   */
+  static buildBufferTypeByData(e) {
+    return Object.keys(e).reduce((a, s) => {
+      const r = e[s];
+      if (Array.isArray(r))
+        if (typeof r[0] == "number") a[s] = [];
+        else if (typeof r[0] == "object" || r.length) {
+          const o = T(r[0]);
+          a[s] = o;
+        } else console.log(`字段：${s}， 不支持该值对应数据类型或数组为空`);
+      else if (typeof r == "object") {
+        const o = T(r);
+        a[s] = o.layout;
+      } else console.log(`字段：${s}， 不支持的数据类型`);
+      return a;
+    }, {});
+  }
+  /** 通过数据创建
+   * @param opt 
+   * @returns 
+   */
+  static async fromByData(e) {
+    let { data: t, ...a } = e;
+    const s = this.buildBufferTypeByData(t), r = new z(s, a);
+    return await r.initPipeline(), r;
+  }
+  /** 快捷计算方法
+   * @param opt 
+   * @returns 
+   */
+  static async computed(e) {
+    let { data: t, map: a = !1, workgroupCount: s, synchronize: r, onSuccess: o, ...c } = e;
+    const n = await this.fromByData({ data: t, ...c }), i = n.createBindGroup(t), u = await n.computed(i, s, r);
+    return o && o({ gpuComputed: n, group: i, results: u }), a ? u.map((l, y) => n.dataMap(l, r[y])) : u;
   }
 }
-const q = Object.freeze({
-  quat_rotate: (
-    /* wgsl */
-    `
-        fn quat_rotate(q: vec4<f32>, v: vec3<f32>) -> vec3<f32> {
-            // q.xyz = vector part, q.w = scalar part
-            let t = 2.0 * cross(q.xyz, v);
-            return v + q.w * t + cross(q.xyz, t);
-        }
-    `
-  ),
-  point_in_obb: (
-    /* wgsl */
-    `
-        fn point_in_obb(
-            point: vec3<f32>,
-            center: vec3<f32>,
-            halfSize: vec3<f32>,
-            quat: vec4<f32>
-        ) -> bool {
-            // 世界空间 → OBB 局部空间
-            let local = point - center;
+const j = (
+  /* wgsl */
+  `
+    fn quat_rotate(q: vec4<f32>, v: vec3<f32>) -> vec3<f32> {
+        // q.xyz = vector part, q.w = scalar part
+        let t = 2.0 * cross(q.xyz, v);
+        return v + q.w * t + cross(q.xyz, t);
+    }
+`
+), D = (
+  /* wgsl */
+  `
+    fn point_in_obb(
+        point: vec3<f32>,
+        center: vec3<f32>,
+        halfSize: vec3<f32>,
+        quat: vec4<f32>
+    ) -> bool {
+        // 世界空间 → OBB 局部空间
+        let local = point - center;
 
-            // 逆旋转（共轭四元数）
-            let invQuat = vec4<f32>(-quat.xyz, quat.w);
-            let pLocal = quat_rotate(invQuat, local);
+        // 逆旋转（共轭四元数）
+        let invQuat = vec4<f32>(-quat.xyz, quat.w);
+        let pLocal = quat_rotate(invQuat, local);
 
-            // AABB 判断
-            return all(abs(pLocal) <= halfSize);
-        }
-    `
-  )
-});
+        // AABB 判断
+        return all(abs(pLocal) <= halfSize);
+    }
+`
+), G = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  point_in_obb: D,
+  quat_rotate: j
+}, Symbol.toStringTag, { value: "Module" }));
 export {
-  A as GpuComputed,
-  q as WGSL_Fun
+  z as GpuComputed,
+  G as WGSL_Fun
 };

package/src/pages/GpuComputedExample.d.ts

@@ -0,0 +1 @@
+export {};

package/src/pages/Index.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

package/src/router/index.d.ts

@@ -0,0 +1,2 @@
+import { App } from 'vue';
+export declare function useRouter(app: App): void;