webgpu-computed 0.0.5 → 0.0.6

package/README.md

@@ -12,6 +12,7 @@ A simplified WebGPU computing library that encapsulates tedious initialization a
 - 🔧 Support for complex data structures (vectors, matrices)
 - ⚡ High-performance GPU computing
 - 📚 Built-in common WGSL functions
+- ✅ Support node 
 
 ## Installation
 
@@ -19,23 +20,6 @@ A simplified WebGPU computing library that encapsulates tedious initialization a
 npm install webgpu-computed
 ```
 
-## Node.js Environment Configuration
-
-You can install the webgpu package
-
-```bash
-npm install webgpu
-```
-
-Then initialize the environment
-
-```js
-import { create, globals } from 'webgpu'
-
-Object.assign(globalThis, globals)
-const navigator = { gpu: create([]) }
-```
-
 ## Quick Start
 
 ### 1. Initialize WebGPU
@@ -47,6 +31,8 @@ import { GpuComputed } from 'webgpu-computed';
 
 // Initialize WebGPU
 await GpuComputed.init();
+//After using the node environment, please call:
+//GpuComputed.destroy()
 ```
 
 ### 2. Perform Simple Computation

package/README.zh-CN.md

@@ -9,6 +9,7 @@
 - 🔧 支持复杂数据结构（向量、矩阵）
 - ⚡ 高性能 GPU 计算
 - 📚 内置常用 WGSL 函数
+- ✅ 支持Node
 
 ## 安装
 
@@ -16,19 +17,6 @@
 npm install webgpu-computed
 ```
 
-## node 环境配置
-可安装webgpu包
-```bash
-npm install webgpu
-```
-然后初始化环境
-```js
-import { create, globals } from 'webgpu'
-
-Object.assign(globalThis, globals)
-const navigator = { gpu: create([]) }
-```
-
 ## 快速开始
 
 ### 1. 初始化 WebGPU
@@ -40,6 +28,8 @@ import { GpuComputed } from 'webgpu-computed';
 
 // 初始化 WebGPU
 await GpuComputed.init();
+// node 环境使用完请调用：
+// GpuComputed.destroy()
 ```
 
 ### 2. 执行简单计算

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webgpu-computed",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "对webgpu的封装，处理了繁琐的前置工作，只关注wgsl本身逻辑",
   "main": "./src/index.js",
   "scripts": {
@@ -9,6 +9,9 @@
   "keywords": [
     "webgpu", "computed", "web", "js"
   ],
+  "dependencies": {
+    "webgpu": "^0.3.8"
+  },
   "author": "夏过初秋",
   "license": "ISC"
 }

package/src/index.d.ts

@@ -13,6 +13,7 @@ declare type BufferType = {
 export declare class GpuComputed {
     constructor();
     static init(): Promise<void>;
+    static destroy(): void;
     getDevice(): Promise<{
         adapter: GPUAdapter;
         device: GPUDevice;

package/src/index.js

@@ -1,11 +1,22 @@
-const m = {
+async function P(v, r = !0) {
+  if (typeof global < "u" && typeof require < "u")
+    return require(v);
+  {
+    let e = await import(
+      /* @vite-ignore */
+      v
+    );
+    return r && (e = e.default), e;
+  }
+}
+const w = {
   f32: 1,
   vec2: 2,
   vec3: 3,
   vec4: 4,
   mat3x3: 12,
   mat4x4: 16
-}, w = {
+}, h = {
   f32: 1,
   vec2: 2,
   vec3: 4,
@@ -13,33 +24,42 @@ const m = {
   mat3x3: 4,
   mat4x4: 4
 };
-function P(A, c) {
-  const o = w[c];
-  return (o - A % o) % o;
+function B(v, r) {
+  const e = h[r];
+  return (e - v % e) % e;
 }
-let b = null, v = null;
-class h {
+let y = null, m = null;
+class A {
   constructor() {
   }
   static async init() {
-    if (!navigator.gpu) throw new Error("该环境不支持webgpu");
-    if (b = await navigator.gpu.requestAdapter({}), !b) throw new Error("获取适配器失败");
-    if (v = await b.requestDevice(), !b) throw new Error("获取设备失败");
+    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;
   }
   async getDevice() {
-    if (!b || !v) throw new Error("webgpu未初始化或不可用");
-    return { adapter: b, device: v };
+    if (!y || !m) throw new Error("webgpu未初始化或不可用");
+    return { adapter: y, device: m };
   }
-  async createPipeline(c, o) {
-    const { device: r } = await this.getDevice(), n = Object.keys(o).map((f, s) => {
-      const a = o[f], i = new Float32Array(Array.isArray(a) ? a : a.buffer), e = r.createBuffer({
-        size: i.byteLength,
+  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 r.queue.writeBuffer(e, 0, i), {
+      return o.queue.writeBuffer(t, 0, u), {
         name: f,
-        buffer: e,
-        float32Array: i,
+        buffer: t,
+        float32Array: u,
         groupLayoutItem: {
           binding: s,
           // 绑定到组里的0号位插槽
@@ -51,134 +71,134 @@ class h {
         },
         groupItem: {
           binding: s,
-          resource: { buffer: e }
+          resource: { buffer: t }
         }
       };
-    }), l = r.createBindGroupLayout({
-      entries: n.map((f) => f.groupLayoutItem)
-    }), g = r.createBindGroup({
+    }), l = o.createBindGroupLayout({
+      entries: a.map((f) => f.groupLayoutItem)
+    }), g = o.createBindGroup({
       layout: l,
-      entries: n.map((f) => f.groupItem)
+      entries: a.map((f) => f.groupItem)
     });
-    return { pipeline: r.createComputePipeline({
-      layout: r.createPipelineLayout({
+    return { pipeline: o.createComputePipeline({
+      layout: o.createPipelineLayout({
         bindGroupLayouts: [l]
       }),
       compute: {
-        module: r.createShaderModule({ code: c, label: "" }),
+        module: o.createShaderModule({ code: r, label: "" }),
         entryPoint: "main"
       }
-    }), group: g, device: r, bufferInfoList: n };
+    }), group: g, device: o, bufferInfoList: a };
   }
-  buildCode(c, o, r) {
+  buildCode(r, e, o) {
     const {
-      workgroupSize: n = [32, 1, 1],
+      workgroupSize: a = [32, 1, 1],
       globalInvocationIdName: l = "grid",
       workgroupIndexName: g = "index"
-    } = r ?? {}, y = (e) => e && e[0].toUpperCase() + e.slice(1), f = Object.keys(c).map((e) => {
-      const p = c[e];
-      return Array.isArray(p) ? void 0 : `struct ${y(e)}Struct { ${p.layout.map((t) => `${t.name}: ${t.type === "f32" ? "f32" : `${t.type}<f32>`}`).join(",")} };`;
-    }).filter((e) => !!e).join(`
-`), s = Object.keys(c).map((e, p) => {
-      const u = c[e], t = "read_write";
-      return Array.isArray(u) ? `@group(0) @binding(${p}) var<storage, ${t}> ${e}: array<f32>;` : `@group(0) @binding(${p}) var<storage, ${t}> ${e}: array<${y(e)}Struct>;`;
+    } = 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(`
-`), a = l;
+`), i = l;
     return (
       /*wgsl*/
       `
             ${f}
 ${s}
 
-            ${r?.beforeCodes?.join(" ") ?? ""}
+            ${o?.beforeCodes?.join(" ") ?? ""}
 
-            @compute @workgroup_size(${n.join(",")})
-            fn main(@builtin(global_invocation_id) ${a}: vec3<u32>) {
-                var ${g} = ${a}.x;
-                ${o}
+            @compute @workgroup_size(${a.join(",")})
+            fn main(@builtin(global_invocation_id) ${i}: vec3<u32>) {
+                var ${g} = ${i}.x;
+                ${e}
             }
         `
     );
   }
-  buildBuffer(c, o, r) {
-    if (!Array.isArray(c) || c.length === 0)
+  buildBuffer(r, e, o) {
+    if (!Array.isArray(r) || r.length === 0)
       throw new Error("数据必须是非空数组");
-    if (o || (o = Object.keys(c[0])), r || (r = o.map((s) => {
-      const a = c[0][s];
-      if (Array.isArray(a)) {
-        for (const i of ["vec2", "vec3", "vec4", "mat3x3", "mat4x4"])
-          if (m[i] === a.length) return i;
-        throw new Error(`${s} 不支持的数组长度 ${a.length}`);
+    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}`);
       }
-      if (typeof a == "number") return "f32";
+      if (typeof i == "number") return "f32";
       throw new Error(`${s} 不支持的类型`);
-    })), o.length !== r.length) throw new Error("keys 与 types 长度不一致");
-    let n = 0;
-    const l = o.map((s, a) => {
-      const i = r[a];
-      n += P(n, i);
-      const e = {
+    })), 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: i,
-        offset: n,
-        size: m[i]
+        type: u,
+        offset: a,
+        size: w[u]
       };
-      return n += m[i], e;
-    }), g = Math.max(...r.map((s) => w[s])), y = n + (g - n % g) % g, f = new Array(y * c.length).fill(0);
-    return c.forEach((s, a) => {
-      const i = a * y;
-      l.forEach(({ name: e, offset: p, size: u }) => {
-        let t = s[e];
-        Array.isArray(t) || (t = [t]);
-        for (let d = 0; d < u; d++)
-          f[i + p + d] = Number(t[d] ?? 0);
+      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);
       });
     }), {
       buffer: f,
-      stride: y,
+      stride: d,
       layout: l,
-      count: c.length
+      count: r.length
     };
   }
-  async computed(c) {
-    let { code: o, data: r, ...n } = c;
-    const l = Object.keys(r).reduce((u, t) => {
-      const d = r[t];
-      if (typeof d[0] == "number") u[t] = d;
+  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(d);
-        u[t] = $;
+        const $ = this.buildBuffer(b);
+        c[n] = $;
       }
-      return u;
+      return c;
     }, {});
-    o = this.buildCode(l, o, n);
-    const { pipeline: g, group: y, device: f, bufferInfoList: s } = await this.createPipeline(o, l), a = f.createCommandEncoder(), i = a.beginComputePass();
-    i.setPipeline(g), i.setBindGroup(0, y), i.dispatchWorkgroups(n.workgroupCount[0], n.workgroupCount[1], n.workgroupCount[2]), i.end();
-    const e = s?.map((u) => {
-      if (n.synchronize?.includes(u.name)) {
-        const t = f.createBuffer({
-          size: u.float32Array.byteLength,
+    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,
           usage: GPUBufferUsage.MAP_READ | GPUBufferUsage.COPY_DST
         });
-        return a.copyBufferToBuffer(u.buffer, 0, t, 0, t.size), { buffer: t, name: u.name };
+        return i.copyBufferToBuffer(c.buffer, 0, n, 0, n.size), { buffer: n, name: c.name };
       }
-    }).filter((u) => !!u);
-    f.queue.submit([a.finish()]), await f.queue.onSubmittedWorkDone();
+    }).filter((c) => !!c);
+    f.queue.submit([i.finish()]), await f.queue.onSubmittedWorkDone();
     const p = await Promise.all(
-      e.map(async (u) => {
-        await u.buffer.mapAsync(GPUMapMode.READ);
-        const t = u.buffer.getMappedRange();
-        return [...new Float32Array(t)];
+      t.map(async (c) => {
+        await c.buffer.mapAsync(GPUMapMode.READ);
+        const n = c.buffer.getMappedRange();
+        return [...new Float32Array(n)];
       })
     );
-    return n?.onSuccess && n.onSuccess({ code: o, bufferInfoList: s, results: p }), p;
+    return a?.onSuccess && a.onSuccess({ code: e, bufferInfoList: s, results: p }), p;
   }
   static instance;
   static get computed() {
-    return this.instance || (this.instance = new h()), this.instance.computed.bind(this.instance);
+    return this.instance || (this.instance = new A()), this.instance.computed.bind(this.instance);
   }
 }
-const B = Object.freeze({
+const q = Object.freeze({
   quat_rotate: (
     /* wgsl */
     `
@@ -212,6 +232,6 @@ const B = Object.freeze({
   )
 });
 export {
-  h as GpuComputed,
-  B as WGSL_Fun
+  A as GpuComputed,
+  q as WGSL_Fun
 };