webgpu-computed 0.0.14 → 0.0.16

package/README.md

@@ -1,20 +1,23 @@
 # webgpu-computed
 
-🌐 Other language versions:
-- [简体中文](https://github.com/xiaguochuqiu/webgpu-computed/blob/main/README.zh.md)
+🌐 Other languages:
 
-A simplified WebGPU computing library that encapsulates tedious initialization and buffer management, allowing developers to focus on WGSL shader logic.
+* [中文](https://github.com/xiaguochuqiu/webgpu-computed/blob/main/README.zh.md)
+
+A simplified WebGPU compute library that wraps verbose initialization and buffer management, allowing developers to focus on WGSL shader logic.
 
 ## Features
 
-- 🚀 Simplified WebGPU initialization
-- 📦 Automatic buffer management and layout calculation
-- 🔧 Support for complex data structures (vectors, matrices)
-- ⚡ High-performance GPU computing
-- 📚 Built-in common WGSL functions
-- ✅ Support for Node.js environment
-- 🛠️ TypeScript support
-- 📖 Detailed English documentation and examples
+* 🚀 Simplified WebGPU initialization
+* 📦 Automatic buffer management and layout calculation
+* 🔧 Supports complex data structures (vectors, matrices)
+* ⚡ High-performance GPU computation
+* 📚 Built-in common WGSL functions
+* ✅ Node.js environment support
+* 🛠️ TypeScript support
+* 📖 Detailed documentation and examples
+* 🔄 Buffer reuse support
+* ⚛️ Atomic operations support (u32)
 
 ## Installation
 
@@ -26,7 +29,7 @@ npm install webgpu-computed
 
 ### 1. Initialize WebGPU
 
-Before using any computing features, you need to initialize the WebGPU environment:
+Before using any compute features, you need to initialize the WebGPU environment:
 
 ```javascript
 import { GpuComputed } from 'webgpu-computed';
@@ -34,13 +37,13 @@ import { GpuComputed } from 'webgpu-computed';
 // Initialize WebGPU
 await GpuComputed.init();
 
-// After using in Node.js environment, please call:
+// In Node.js, call this after usage:
 // GpuComputed.destroy()
 ```
 
-### 2. Perform Simple Computation
+### 2. Execute a Simple Computation
 
-Here is a simple vector addition example:
+Below is a simple vector addition example:
 
 ```javascript
 import { GpuComputed } from 'webgpu-computed';
@@ -86,113 +89,99 @@ const code = `
   output[index].vel = positions[index].vel * 2.0;
 `;
 
-// Execute computation
 GpuComputed.computed({
   code,
   data,
-  synchronize: ["output"], // Fields to return
-  workgroupCount: [1] // Number of workgroups
+  synchronize: ["output"],
+  workgroupCount: [1]
 }).then(results => {
-    console.log(results); // [[1.100000023841858,2.200000047683716,3.299999952316284,0,0.20000000298023224,0.4000000059604645,0.6000000238418579,0,4.400000095367432,5.5,6.599999904632568,0,0.800000011920929,1,1.2000000476837158,0]]
+    console.log(results);
 })
 ```
 
-### 4. Manually Create GpuComputed Instance
+### 4. Using Different Data Types
 
-If you need more fine-grained control, you can directly create a GpuComputed instance:
+#### Unsigned Integer (u32)
 
 ```javascript
 import { GpuComputed } from 'webgpu-computed';
 
-// 1. Define data template
-const template = {
-  inputA: [] as number[],
-  inputB: [] as number[],
-  output: [] as number[]
+const data = {
+  counters: new Uint32Array([0, 1, 2, 3]),
+  output: new Uint32Array(4)
 };
 
-// 2. Create instance
-const gpuComputed = new GpuComputed(template, {
-  code: `
-    output[index] = inputA[index] + inputB[index];
-  `,
-  workgroupSize: [32, 1, 1] // Optional: custom workgroup size
+const code = `
+  output[index] = counters[index] * 2u;
+`;
+
+const results = await GpuComputed.computed({
+  code,
+  data,
+  synchronize: ["output"],
+  workgroupCount: [1]
 });
 
-// 3. Initialize pipeline
-await gpuComputed.initPipeline();
+console.log(results[0]); // [0, 2, 4, 6]
+```
+
+#### Atomic Operations
+
+```javascript
+import { GpuComputed, AtomicUint32Array } from 'webgpu-computed';
 
-// 4. Prepare data
 const data = {
-  inputA: [1.0, 2.0, 3.0, 4.0],
-  inputB: [0.5, 1.5, 2.5, 3.5],
-  output: new Array(4).fill(0)
+  atomicCounter: new AtomicUint32Array([0]),
+  output: new Uint32Array(4)
 };
 
-// 5. Create bind group
-const bindGroup = gpuComputed.createBindGroup(data);
+const code = `
+  let old = atomicAdd(&atomicCounter[0], 1u);
+  output[index] = old + 1u;
+`;
 
-// 6. Execute computation
-const results = await gpuComputed.computed(bindGroup, [1], ['output']);
+const results = await GpuComputed.computed({
+  code,
+  data,
+  synchronize: ["output"],
+  workgroupCount: [1]
+});
 
-console.log(results[0]); // [1.5, 3.5, 5.5, 7.5]
+console.log(results[0]); // [1, 2, 3, 4]
 ```
 
-#### Using Struct Data
+### 5. Manually Creating a GpuComputed Instance
+
+If you need more fine-grained control, you can create a GpuComputed instance directly:
 
 ```javascript
-// Define struct template
-const structTemplate = {
-  particles: {
-    layout: [
-      { name: 'position', type: 'vec3' },
-      { name: 'velocity', type: 'vec3' },
-      { name: 'mass', type: 'f32' }
-    ]
-  },
-  output: {
-    layout: [
-      { name: 'position', type: 'vec3' },
-      { name: 'velocity', type: 'vec3' },
-      { name: 'mass', type: 'f32' }
-    ]
-  }
+import { GpuComputed } from 'webgpu-computed';
+
+const template = {
+  inputA: [] as number[],
+  inputB: [] as number[],
+  output: [] as number[]
 };
 
-const gpuComputed = new GpuComputed(structTemplate, {
+const gpuComputed = new GpuComputed(template, {
   code: `
-    output[index].position = particles[index].position + particles[index].velocity;
-    output[index].velocity = particles[index].velocity * 2.0;
-    output[index].mass = particles[index].mass * 1.5;
-  `
+    output[index] = inputA[index] + inputB[index];
+  `,
+  workgroupSize: [32, 1, 1]
 });
 
 await gpuComputed.initPipeline();
 
 const data = {
-  particles: [
-    { position: [1, 2, 3], velocity: [0.1, 0.2, 0.3], mass: 1.0 },
-    { position: [4, 5, 6], velocity: [0.4, 0.5, 0.6], mass: 2.0 }
-  ],
-  output: [
-    { position: [0, 0, 0], velocity: [0, 0, 0], mass: 0 },
-    { position: [0, 0, 0], velocity: [0, 0, 0], mass: 0 }
-  ]
+  inputA: [1.0, 2.0, 3.0, 4.0],
+  inputB: [0.5, 1.5, 2.5, 3.5],
+  output: new Array(4).fill(0)
 };
 
 const bindGroup = gpuComputed.createBindGroup(data);
 const results = await gpuComputed.computed(bindGroup, [1], ['output']);
 
-console.log(results[0]); // Mapped data
-```
-
-#### Data Mapping
-
-When using structs, you can use the `dataMap` method to map results back to the original structure:
-
-```javascript
-const mappedData = gpuComputed.dataMap(results[0], 'output');
-console.log(mappedData); // Returns structured object array
+console.log(results[0]);
 ```
 
 ## API Reference
@@ -205,292 +194,41 @@ console.log(mappedData); // Returns structured object array
 
 Initializes the WebGPU environment. Must be called before using other features.
 
-**Returns**: `Promise<void>`
-
-**Throws**: If the browser does not support WebGPU or fails to obtain adapter/device
-
 ##### `GpuComputed.computed(options)`
 
 Executes a GPU computation task.
 
 **Parameters**:
 
-- `code` (string): WGSL computation code
-- `data` (object): Input/output data object
-- `workgroupCount` (array): Number of workgroups [x, y?, z?]
-- `workgroupSize` (array, optional): Workgroup size, default [32, 1, 1]
-- `globalInvocationIdName` (string, optional): Global invocation ID variable name, default "grid"
-- `workgroupIndexName` (string, optional): Workgroup index variable name, default "index"
-- `synchronize` (array, optional): Array of buffer names to synchronize back to CPU
-- `beforeCodes` (array, optional): WGSL code snippets before the computation function
-- `onSuccess` (function, optional): Success callback function
-
-**Returns**: `Promise<Array<Float32Array>>` - Data from synchronized buffers
-
-### Data Types
-
-Supports the following WGSL types:
-
-- `f32`: Single-precision float
-- `vec2`: 2D vector
-- `vec3`: 3D vector
-- `vec4`: 4D vector
-- `mat3x3`: 3x3 matrix
-- `mat4x4`: 4x4 matrix
-
-### Built-in WGSL Functions
-
-The library provides some commonly used WGSL helper functions:
-
-#### Quaternion Rotation
-
-```wgsl
-fn quat_rotate(q: vec4<f32>, v: vec3<f32>) -> vec3<f32>
-```
-
-Usage example:
-
-```javascript
-import { WGSL_Fun } from 'webgpu-computed';
-
-await GpuComputed.computed({
-    code: "",
-    data: {....},
-    beforeCodes:[WGSL_Fun.quat_rotate]
-})
-```
-
-#### Point in OBB Detection
-
-```wgsl
-fn point_in_obb(point: vec3<f32>, center: vec3<f32>, halfSize: vec3<f32>, quat: vec4<f32>) -> bool
-```
-
-## Advanced Usage
-
-### Custom Workgroup Configuration
-
-```javascript
-await GpuComputed.computed({
-  code: '...',
-  data: {...},
-  workgroupCount: [4, 4], // 16 workgroups
-  workgroupSize: [16, 16], // 256 threads per workgroup
-});
-```
-
-### Synchronizing Data Back to CPU
-
-```javascript
-const results = await GpuComputed.computed({
-  code: '...',
-  data: {...},
-  synchronize: ['output'], // Specify buffers to synchronize
-  workgroupCount: [1]
-});
-
-// results contains synchronized data
-```
-
-### Callback Function
-
-```javascript
-await GpuComputed.computed({
-  code: '...',
-  data: {...},
-  workgroupCount: [1],
-  onSuccess: ({ gpuComputed, group, results }) => {
-    console.log('Computation completed', results);
-  }
-});
-```
-
-## Example Project
-
-```js
-import { GpuComputed } from "webgpu-computed"
-import * as WGSL_Fun from "webgpu-computed"
-
-// 1. Initialize WebGPU
-console.log('Initializing WebGPU...');
-await GpuComputed.init();
-console.log('WebGPU initialized successfully');
-
-// 2. Simple array computation example
-console.log('\n=== Simple Array Computation ===');
-const simpleData = {
-    inputA: [1.0, 2.0, 3.0, 4.0],
-    inputB: [0.5, 1.5, 2.5, 3.5],
-    output: new Array(4).fill(0)
-};
-
-const simpleCode = `
-    output[index] = inputA[index] + inputB[index];
-`;
-
-const simpleResults = await GpuComputed.computed({
-    code: simpleCode,
-    data: simpleData,
-    workgroupCount: [1],
-    synchronize: ['output']
-});
-
-console.log('Simple computation result:', simpleResults[0]); // [1.5, 3.5, 5.5, 7.5]
-
-// 3. Complex data structure example (struct)
-console.log('\n=== Complex Data Structure Computation ===');
-const complexData = {
-    particles: [
-        { position: [1.0, 2.0, 3.0], velocity: [0.1, 0.2, 0.3], mass: 1.0 },
-        { position: [4.0, 5.0, 6.0], velocity: [0.4, 0.5, 0.6], mass: 2.0 }
-    ],
-    output: [
-        { position: [0, 0, 0], velocity: [0, 0, 0], mass: 0 },
-        { position: [0, 0, 0], velocity: [0, 0, 0], mass: 0 }
-    ]
-};
-
-const complexCode = `
-    output[index].position = particles[index].position + particles[index].velocity;
-    output[index].velocity = particles[index].velocity * 2.0;
-    output[index].mass = particles[index].mass * 1.5;
-`;
-
-const complexResults = await GpuComputed.computed({
-    code: complexCode,
-    data: complexData,
-    workgroupCount: [1],
-    synchronize: ['output']
-});
-
-console.log('Complex computation result:', complexResults[0]);
-
-// 4. Using built-in WGSL functions example
-console.log('\n=== Using Built-in WGSL Functions ===');
-const wgslFunData = {
-    points: [
-        {
-            x: 1.0, y: 0.0, z: 0.0
-        },
-        {
-            x: 0.0, y: 1.0, z: 0.0
-        },
-        {
-            x: -1.0, y: 0.0, z: 0.0
-        }
-    ],
-    obbCenter: [0.0, 0.0, 0.0],
-    obbHalfSize: [2.0, 2.0, 2.0],
-    obbRotation: [0.0, 0.0, 0.0, 1.0], // Unit quaternion, no rotation
-    results: new Array(3).fill(0)
-};
-
-const wgslFunCode = `
-    let point = vec3(points[index].x, points[index].y, points[index].z);
-    let center = vec3<f32>(obbCenter[0], obbCenter[1], obbCenter[2]);
-    let halfSize = vec3<f32>(obbHalfSize[0], obbHalfSize[1], obbHalfSize[2]);
-    let quat = vec4<f32>(obbRotation[0], obbRotation[1], obbRotation[2], obbRotation[3]);
-
-    if (point_in_obb(point, center, halfSize, quat)) {
-        results[index] = 1.0;
-    } else {
-        results[index] = 0.0;
-    }
-`;
-
-const wgslFunResults = await GpuComputed.computed({
-    code: wgslFunCode,
-    data: wgslFunData,
-    workgroupCount: [1],
-    beforeCodes: [WGSL_Fun.quat_rotate, WGSL_Fun.point_in_obb, /** Add your own function code */],
-    synchronize: ['results']
-});
-
-console.log('OBB detection result:', wgslFunResults[0]); // [1, 1, 1] All points are inside the OBB
-
-// 5. Custom workgroup configuration example
-console.log('\n=== Custom Workgroup Configuration ===');
-const largeData = {
-    largeArray: new Array(1024).fill(0).map((_, i) => i * 1.0),
-    output: new Array(1024).fill(0)
-};
-
-const largeCode = `
-    output[index] = largeArray[index] * 2.0;
-`;
-
-const largeResults = await GpuComputed.computed({
-    code: largeCode,
-    data: largeData,
-    workgroupCount: [32], // 32 workgroups
-    workgroupSize: [32, 1, 1], // 32 threads per workgroup, total 1024 threads
-    synchronize: ['output']
-});
-
-console.log('Large array computation result (first 10):', largeResults[0].slice(0, 10));
-
-// 6. Using callback function example
-console.log('\n=== Using Callback Function ===');
-const callbackData = {
-    values: [10.0, 20.0, 30.0],
-    squares: new Array(3).fill(0)
-};
-
-const callbackCode = `
-    squares[index] = values[index] * values[index];
-`;
-
-await GpuComputed.computed({
-    code: callbackCode,
-    data: callbackData,
-    workgroupCount: [1],
-    synchronize: ['squares'],
-    onSuccess: ({ gpuComputed, group, results }) => {
-        console.log('Callback triggered, square computation result:', results[0]); // [100, 400, 900]
-    }
-});
-
-// 7. Multi-dimensional workgroup example
-console.log('\n=== Multi-dimensional Workgroup ===');
-const matrixData = {
-    matrixA: new Array(16).fill(0).map((_, i) => i * 1.0),
-    matrixB: new Array(16).fill(0).map((_, i) => (i + 1) * 1.0),
-    result: new Array(16).fill(0)
-};
-
-const matrixCode = `
-    let x = index % 4u;
-    let y = index / 4u;
-    let idx = y * 4u + x;
-    result[idx] = matrixA[idx] + matrixB[idx];
-`;
-
-const matrixResults = await GpuComputed.computed({
-    code: matrixCode,
-    data: matrixData,
-    workgroupCount: [4, 4], // 4x4 workgroup grid
-    workgroupSize: [1, 1, 1], // 1 thread per workgroup
-    synchronize: ['result']
-});
-
-console.log('Matrix computation result:', matrixResults[0]);
-
-console.log('\nAll feature examples completed!');
-```
+* `code`: WGSL computation code
+* `data`: Input/output data object
+* `workgroupCount`: Workgroup count
+* `workgroupSize`: Workgroup size
+* `globalInvocationIdName`: Global invocation ID variable name
+* `workgroupIndexName`: Workgroup index variable name
+* `synchronize`: Buffers to synchronize back to CPU
+* `beforeCodes`: WGSL code snippets before the main code
+* `onSuccess`: Success callback
+
+## Supported Types
+
+* `f32`
+* `u32`
+* `vec2`
+* `vec3`
+* `vec4`
+* `mat3x3`
+* `mat4x4`
 
 ## Browser Support
 
-- Chrome 113+
-- Edge 113+
-- Firefox (partial support)
-- Safari (partial support)
+* Chrome 113+
+* Edge 113+
+* Firefox (partial)
+* Safari (partial)
 
 Ensure the browser supports the WebGPU API.
 
-## Contributing
-
-Welcome to submit Issues and Pull Requests!
-
 ## License
 
-ISC License
+ISC License

package/package.json

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

package/src/index.js

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