webgpu-computed 0.0.13 → 0.0.14

package/package.json

@@ -1,30 +1,30 @@
-{
-  "name": "webgpu-computed",
-  "version": "0.0.13",
-  "description": "对webgpu的封装，处理了繁琐的前置工作，只关注wgsl本身逻辑",
-  "main": "./src/index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "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"
-}
+{
+  "name": "webgpu-computed",
+  "version": "0.0.14",
+  "description": "对webgpu的封装，处理了繁琐的前置工作，只关注wgsl本身逻辑",
+  "main": "./src/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "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/index.js

@@ -1,67 +1,67 @@
-async function z(u, e = !0) {
+async function z(s, e = !0) {
   if (typeof global < "u" && typeof require < "u")
-    return require(u);
+    return require(s);
   {
     let r = await import(
       /* @vite-ignore */
-      u
+      s
     );
     return e && (r = r.default), r;
   }
 }
-function q(u) {
-  if (u instanceof Float32Array) return "f32";
-  if (u instanceof Int32Array) return "i32";
-  if (u instanceof Uint32Array) return "u32";
+function q(s) {
+  if (s instanceof Float32Array) return "f32";
+  if (s instanceof Int32Array) return "i32";
+  if (s instanceof Uint32Array) return "u32";
   throw new Error(
-    `Unsupported ArrayBufferView type: ${u.constructor.name}`
+    `Unsupported ArrayBufferView type: ${s.constructor.name}`
   );
 }
-function S(u) {
-  return u && u[0].toUpperCase() + u.slice(1);
+function S(s) {
+  return s && s[0].toUpperCase() + s.slice(1);
 }
-function x(u) {
-  return O.includes(u);
+function x(s) {
+  return O.includes(s);
 }
-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 m(s) {
+  return s && Array.isArray(s) && s.length ? s.every((e) => e && typeof e == "object" && "name" in e && "type" in e && x(e.type)) : !1;
 }
-function $(u) {
-  return u && "layout" in u && m(u.layout);
+function $(s) {
+  return s && "layout" in s && m(s.layout);
 }
-function _(u, e) {
+function _(s, e) {
   const r = E[e];
-  return (r - u % r) % r;
+  return (r - s % r) % r;
 }
-function P(u, e) {
-  return u + (e - u % e) % e;
+function P(s, e) {
+  return s + (e - s % e) % e;
 }
-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(`${p} 不支持的数组长度 ${a.length}`);
+function U(s) {
+  const e = Object.keys(s), r = e.map((c) => {
+    const l = s[c];
+    if (Array.isArray(l)) {
+      for (const y of ["vec2", "vec3", "vec4", "mat3x3", "mat4x4"])
+        if (B[y] === l.length) return y;
+      throw new Error(`${c} 不支持的数组长度 ${l.length}`);
     }
-    if (typeof a == "number") return "f32";
-    throw new Error(`${p} 不支持的类型`);
+    if (typeof l == "number") return "f32";
+    throw new Error(`${c} 不支持的类型`);
   });
   if (e.length !== r.length) throw new Error("keys 与 types 长度不一致");
-  let s = 0;
-  const f = e.map((p, a) => {
-    const o = r[a];
-    s += _(s, o);
-    const y = {
-      name: p,
-      type: o,
-      offset: s,
-      size: B[o]
+  let i = 0;
+  const f = e.map((c, l) => {
+    const y = r[l];
+    i += _(i, y);
+    const u = {
+      name: c,
+      type: y,
+      offset: i,
+      size: B[y]
     };
-    return s += B[o], y;
-  }), t = Math.max(...r.map((p) => E[p]));
+    return i += B[y], u;
+  }), t = Math.max(...r.map((c) => E[c]));
   return {
-    stride: s + (t - s % t) % t,
+    stride: i + (t - i % t) % t,
     layout: f
   };
 }
@@ -87,7 +87,7 @@ const B = {
 class D extends Uint32Array {
 }
 const O = ["f32", "u32", "vec2", "vec3", "vec4", "mat3x3", "mat4x4"];
-let h = null, b = null;
+let w = null, v = null;
 class T {
   template;
   option;
@@ -104,27 +104,27 @@ class T {
   improveTemplateOption(e) {
     const r = (t) => {
       let n = 0;
-      t.forEach((p) => {
-        n += _(n, p.type), p.offset = n, p.size = B[p.type], n += p.size;
+      t.forEach((c) => {
+        n += _(n, c.type), c.offset = n, c.size = B[c.type], n += c.size;
       });
-    }, s = (t) => {
+    }, i = (t) => {
       r(t.layout);
-      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 = P(p, a);
+      const n = t.layout[t.layout.length - 1], c = n.offset + n.size;
+      let l = 1;
+      for (const y of t.layout) l = Math.max(l, E[y.type]);
+      t.stride = P(c, l);
     };
     Object.keys(e).forEach((t) => {
       const n = e[t];
-      m(n) ? r(n) : $(n) ? s(n) : Array.isArray(n) && typeof n[0] == "number" && (e[t] = new Float32Array());
+      m(n) ? r(n) : $(n) ? i(n) : Array.isArray(n) && typeof n[0] == "number" && (e[t] = new Float32Array());
     });
   }
   /** 获取Gpu设备
    * @returns 
    */
   async getDevice() {
-    if (!h || !b) throw new Error("webgpu未初始化或不可用");
-    return { adapter: h, device: b };
+    if (!w || !v) throw new Error("webgpu未初始化或不可用");
+    return { adapter: w, device: v };
   }
   /**
    * 初始化计算管线
@@ -132,110 +132,117 @@ class T {
   async initPipeline() {
     if (!this.template) throw new Error("初始化计算管线错误，未找到可用数据模版");
     await T.init();
-    const e = this.template, { device: r } = await this.getDevice(), s = [], f = [], t = [];
-    this.device = r, Object.keys(e).forEach((c, d) => {
+    const e = this.template, { device: r } = await this.getDevice(), i = [], f = [], t = [];
+    this.device = r, Object.keys(e).forEach((a, p) => {
       if (t.push({
-        binding: d,
+        binding: p,
         // 绑定到组里的0号位插槽
         visibility: GPUShaderStage.COMPUTE,
         // 数据在哪些阶段可以使用, 计算着色器、片元着色器、顶点着色器
         buffer: {
           type: "storage"
         }
-      }), 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}>;`);
+      }), m(e[a])) {
+        const g = e[a], h = g.map((b) => `${b.name}:${b.type === "f32" ? "f32" : b.type + "<f32>"}`).join(","), A = `${S(a)}Struct`;
+        i.push(`struct ${S(a)}Struct {${h}};`), f.push(`@group(0) @binding(${p}) var<storage, read_write> ${a}: ${A};`);
+      } else if ($(e[a])) {
+        const g = e[a], h = g.layout.map((b) => `${b.name}:${b.type === "f32" ? "f32" : b.type + "<f32>"}`).join(","), A = `${S(a)}Struct`;
+        i.push(`struct ${A} {${h}};`), f.push(`@group(0) @binding(${p}) var<storage, read_write> ${a}: array<${A}>;`);
+      } else if (ArrayBuffer.isView(e[a]) && !(e[a] instanceof DataView)) {
+        const g = e[a], h = q(g);
+        g instanceof D ? f.push(`@group(0) @binding(${p}) var<storage, read_write> ${a}: array<atomic<${h}>>;`) : f.push(`@group(0) @binding(${p}) var<storage, read_write> ${a}: array<${h}>;`);
       }
     });
     const {
       beforeCodes: n = [],
-      workgroupSize: p = [32, 1, 1],
-      globalInvocationIdName: a = "grid",
-      workgroupIndexName: o = "index",
-      code: y = ""
-    } = this.option ?? {}, i = (
+      workgroupSize: c = [32, 1, 1],
+      globalInvocationIdName: l = "grid",
+      workgroupIndexName: y = "index",
+      code: u = ""
+    } = this.option ?? {}, o = (
       /*wgsl*/
       `
-            ${s.join("")}
+            ${i.join("")}
 ${f.join("")}
             ${n.join(" ") ?? ""}
 
-            @compute @workgroup_size(${p.join(",")})
-            fn main(@builtin(global_invocation_id) ${a}: vec3<u32>) {
-                var ${o} = ${a}.x;
-                ${y}
+            @compute @workgroup_size(${c.join(",")})
+            fn main(@builtin(global_invocation_id) ${l}: vec3<u32>) {
+                var ${y} = ${l}.x;
+                ${u}
             }
         `
     );
-    this.code = i;
-    const l = r.createBindGroupLayout({
+    this.code = o;
+    const d = r.createBindGroupLayout({
       entries: t
     });
-    this.groupLayout = l, this.pipeline = r.createComputePipeline({
+    this.groupLayout = d, this.pipeline = r.createComputePipeline({
       layout: r.createPipelineLayout({
-        bindGroupLayouts: [l]
+        bindGroupLayouts: [d]
       }),
       compute: {
-        module: r.createShaderModule({ code: i, label: "" }),
+        module: r.createShaderModule({ code: o, label: "" }),
         entryPoint: "main"
       }
     });
   }
-  /** 根据数据创建buffer组
-   * @param data 
+  /**
+   * 根据数据创建buffer组
+   * @param data 数据
+   * @param bindGroup 已创建的bindGroup, 会在没有传入对应数据时使用，用于Buffer重复利用，不需要重新构建，按名字判断，所以请确保名称和类型一致性
+   * @returns 
    */
-  createBindGroup(e) {
+  createBindGroup(e, r) {
     if (!this.template) throw new Error("创建buffer组错误，未找到可用数据模版");
     if (!this.device) throw new Error("创建buffer组错误，未找到可用的gpu设备，请确保初始化完计算管线");
-    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]);
-        i = i ?? new Array(P(c, d)).fill(0);
+    const i = this.device, f = this.template, t = [], n = r?.buffers?.reduce((u, o) => (u.set(o.name, o.buffer), u), /* @__PURE__ */ new Map());
+    function c(u, o, d = 0, a) {
+      if (!a) {
+        const p = o[o.length - 1], g = p.offset + p.size;
+        let h = 1;
+        for (const A of o) h = Math.max(h, E[A.type]);
+        a = a ?? new Array(P(g, h)).fill(0);
       }
-      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;
+      return o.forEach((p) => {
+        let g = u[p.name];
+        Array.isArray(g) || (g = [g]);
+        for (let h = 0; h < p.size; h++)
+          a[d + p.offset + h] = Number(g[h] ?? 0);
+      }), a;
     }
-    function n(a, o) {
-      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;
+    function l(u, o) {
+      const d = new Array(o.stride * u.length).fill(0);
+      return u.forEach((a, p) => {
+        const g = p * o.stride;
+        c(a, o.layout, g, d);
+      }), d;
     }
-    return Object.keys(s).forEach((a) => {
-      if (!(a in e)) throw new Error(`传入的数据中，不存在${a}字段`);
-      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,
+    return Object.keys(f).forEach((u) => {
+      if (!(u in e)) {
+        if (n && n.has(u))
+          return t.push({ name: u, buffer: n.get(u) });
+        throw new Error(`传入的数据中，不存在${u}字段`);
+      }
+      const o = f[u], d = e[u];
+      let a = [];
+      m(o) ? a = c(d, o) : $(o) ? a = l(d, o) : Array.isArray(d) && (a = d);
+      let p = null;
+      if (o instanceof Float32Array ? p = new Float32Array(a) : o instanceof Uint32Array ? p = new Uint32Array(a) : o instanceof Int32Array ? p = new Int32Array(a) : p = new Float32Array(a), !p) throw new Error("不支持的数组类型" + o);
+      const g = i.createBuffer({
+        size: p.byteLength,
         usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.COPY_SRC | GPUBufferUsage.STORAGE
       });
-      r.queue.writeBuffer(c, 0, l), f.push({ name: a, buffer: c });
+      i.queue.writeBuffer(g, 0, p), t.push({ name: u, buffer: g });
     }), {
-      group: r.createBindGroup({
+      group: i.createBindGroup({
         layout: this.groupLayout,
-        entries: f.map((a, o) => ({
+        entries: t.map((u, o) => ({
           binding: o,
-          resource: { buffer: a.buffer }
+          resource: { buffer: u.buffer }
         }))
       }),
-      buffers: f
+      buffers: t
     };
   }
   /** 数据映射回模版数据
@@ -245,19 +252,19 @@ ${f.join("")}
   dataMap(e, r) {
     if (!(r in this.template)) throw new Error("未找到数据字段：" + r);
     if ($(this.template[r])) {
-      const s = this.template[r], f = e.length / s.stride, t = [];
+      const i = this.template[r], f = e.length / i.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);
+        const c = n * i.stride, l = {};
+        i.layout.forEach((y) => {
+          const u = e.slice(c + y.offset, c + y.offset + y.size);
+          l[y.name] = u.length === 1 ? u[0] : u;
+        }), t.push(l);
       }
       return t;
     }
     if (m(this.template[r])) {
-      const s = this.template[r], f = {};
-      return s.forEach((t) => {
+      const i = this.template[r], f = {};
+      return i.forEach((t) => {
         const n = e.slice(t.offset, t.offset + t.size);
         f[t.name] = n.length === 1 ? n[0] : n;
       }), f;
@@ -270,69 +277,69 @@ ${f.join("")}
    * @param synchronize 需要同步的数据字段
    * @returns 
    */
-  async computed(e, r, s = []) {
+  async computed(e, r, i = []) {
     if (!this.pipeline) throw new Error("未找到可用计算管线，请确保计算管线已经创建成功");
-    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 (s?.includes(i.name)) {
-        const l = f.createBuffer({
-          size: i.buffer.size,
+    const f = this.device, t = this.pipeline, n = f.createCommandEncoder(), c = n.beginComputePass();
+    c.setPipeline(t), c.setBindGroup(0, e.group), c.dispatchWorkgroups(r[0], r[1], r[2]), c.end();
+    const l = e.buffers?.map((o) => {
+      if (i?.includes(o.name)) {
+        const d = f.createBuffer({
+          size: o.buffer.size,
           usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST
         });
-        return n.copyBufferToBuffer(i.buffer, 0, l, 0, l.size), { buffer: l, name: i.name };
+        return n.copyBufferToBuffer(o.buffer, 0, d, 0, d.size), { buffer: d, name: o.name };
       }
-    }).filter((i) => !!i);
+    }).filter((o) => !!o);
     f.queue.submit([n.finish()]), await f.queue.onSubmittedWorkDone();
-    const o = /* @__PURE__ */ new Map();
+    const y = /* @__PURE__ */ new Map();
     return await Promise.all(
-      a.map(async (i) => {
-        await i.buffer.mapAsync(GPUMapMode.READ);
-        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);
+      l.map(async (o) => {
+        await o.buffer.mapAsync(GPUMapMode.READ);
+        const d = o.buffer.getMappedRange();
+        let a = null;
+        this.template[o.name] instanceof Float32Array ? a = new Float32Array(d) : this.template[o.name] instanceof Uint32Array ? a = new Uint32Array(d) : this.template[o.name] instanceof Int32Array ? a = new Int32Array(d) : a = new Float32Array(d);
+        const p = [...a];
+        y.set(o.name, p);
       })
-    ), s.map((i) => o.get(i));
+    ), i.map((o) => y.get(o));
   }
   /** 初始化gpu设备
    * @returns 
    */
   static async init() {
-    if (!(h && b)) {
+    if (!(w && v)) {
       if (typeof globalThis < "u" && typeof window > "u") {
         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");
-      if (h || (h = await navigator.gpu.requestAdapter({})), !h) throw new Error("获取适配器失败");
-      if (b = await h.requestDevice(), !h) throw new Error("获取设备失败");
+      if (w || (w = await navigator.gpu.requestAdapter({})), !w) throw new Error("获取适配器失败");
+      if (v = await w.requestDevice(), !w) throw new Error("获取设备失败");
     }
   }
   /** 注销gpu设备
    */
   static destroy() {
-    b && b.destroy(), b = null;
+    v && v.destroy(), v = null;
   }
   /** 
    * @param data 
    */
   static buildBufferTypeByData(e) {
-    return Object.keys(e).reduce((s, f) => {
+    return Object.keys(e).reduce((i, 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 = U(t[0]);
-          s[f] = n;
+          i[f] = n;
         } else console.log(`字段：${f}， 不支持该值对应数据类型或数组为空`);
       else if (ArrayBuffer.isView(t) && !(t instanceof DataView))
-        s[f] = t;
+        i[f] = t;
       else if (typeof t == "object") {
         const n = U(t);
-        s[f] = n.layout;
+        i[f] = n.layout;
       } else console.log(`字段：${f}， 不支持的数据类型`);
-      return s;
+      return i;
     }, {});
   }
   /** 通过数据创建
@@ -340,8 +347,8 @@ ${f.join("")}
    * @returns 
    */
   static async fromByData(e) {
-    let { data: r, ...s } = e;
-    const f = this.buildBufferTypeByData(r), t = new T(f, s);
+    let { data: r, ...i } = e;
+    const f = this.buildBufferTypeByData(r), t = new T(f, i);
     return await t.initPipeline(), t;
   }
   /** 快捷计算方法
@@ -349,9 +356,9 @@ ${f.join("")}
    * @returns 
    */
   static async computed(e) {
-    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;
+    let { data: r, map: i = !1, workgroupCount: f, synchronize: t, onSuccess: n, ...c } = e;
+    const l = await this.fromByData({ data: r, ...c }), y = l.createBindGroup(r), u = await l.computed(y, f, t);
+    return n && n({ gpuComputed: l, group: y, results: u }), i ? u.map((o, d) => l.dataMap(o, t[d])) : u;
   }
 }
 const j = (
@@ -383,7 +390,7 @@ const j = (
         return all(abs(pLocal) <= halfSize);
     }
 `
-), L = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+), M = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   point_in_obb: G,
   quat_rotate: j
@@ -391,5 +398,5 @@ const j = (
 export {
   D as AtomicUint32Array,
   T as GpuComputed,
-  L as WGSL_Fun
+  M as WGSL_Fun
 };

package/src/utils/GpuComputed.d.ts

@@ -51,10 +51,19 @@ export declare class GpuComputed {
      * 初始化计算管线
      */
     initPipeline(): Promise<void>;
-    /** 根据数据创建buffer组
-     * @param data
+    /**
+     * 根据数据创建buffer组
+     * @param data 数据
+     * @param bindGroup 已创建的bindGroup, 会在没有传入对应数据时使用，用于Buffer重复利用，不需要重新构建，按名字判断，所以请确保名称和类型一致性
+     * @returns
      */
-    createBindGroup(data: Record<string, any>): {
+    createBindGroup(data: Record<string, any>, bindGroup?: {
+        group: GPUBindGroup;
+        buffers: {
+            name: string;
+            buffer: GPUBuffer;
+        }[];
+    }): {
         group: GPUBindGroup;
         buffers: {
             name: string;