webgpu-computed 0.0.16 → 0.0.18

package/README.md

@@ -1,23 +1,22 @@
 # webgpu-computed
 
-🌐 Other languages:
+🌐 Other language versions:
+- [中文](https://github.com/xiaguochuqiu/webgpu-computed/blob/main/README.zh.md)
 
-* [中文](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.
+A simplified WebGPU compute library that encapsulates tedious initialization and buffer management, allowing developers to focus on WGSL shader logic.
 
 ## Features
 
-* 🚀 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)
+- 🚀 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 Chinese documentation and examples
+- 🔄 Support for buffer reuse
+- ⚛️ Support for atomic operations (u32)
 
 ## Installation
 
@@ -37,13 +36,13 @@ import { GpuComputed } from 'webgpu-computed';
 // Initialize WebGPU
 await GpuComputed.init();
 
-// In Node.js, call this after usage:
+// In Node.js environment, call after use:
 // GpuComputed.destroy()
 ```
 
-### 2. Execute a Simple Computation
+### 2. Perform Simple Computation
 
-Below is a simple vector addition example:
+Here's a simple vector addition example:
 
 ```javascript
 import { GpuComputed } from 'webgpu-computed';
@@ -55,7 +54,7 @@ const data = {
   output: new Array(4).fill(0) // Output buffer
 };
 
-// WGSL computation code
+// WGSL compute code
 const code = `
   output[index] = inputA[index] + inputB[index];
 `;
@@ -65,7 +64,7 @@ GpuComputed.computed({
   code,
   data,
   synchronize: ["output"], // Fields to return
-  workgroupCount: [1] // Number of workgroups
+  workgroupCount: [1] // Workgroup count
 }).then(results => {
     console.log(results); // [[1.5, 3.5, 5.5, 7.5]]
 })
@@ -89,25 +88,26 @@ const code = `
   output[index].vel = positions[index].vel * 2.0;
 `;
 
+// Execute computation
 GpuComputed.computed({
   code,
   data,
-  synchronize: ["output"],
-  workgroupCount: [1]
+  synchronize: ["output"], // Fields to return
+  workgroupCount: [1] // Workgroup count
 }).then(results => {
-    console.log(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]]
 })
 ```
 
 ### 4. Using Different Data Types
 
-#### Unsigned Integer (u32)
+#### Using Unsigned Integers (u32)
 
 ```javascript
 import { GpuComputed } from 'webgpu-computed';
 
 const data = {
-  counters: new Uint32Array([0, 1, 2, 3]),
+  counters: new Uint32Array([0, 1, 2, 3]), // u32 array
   output: new Uint32Array(4)
 };
 
@@ -125,13 +125,13 @@ const results = await GpuComputed.computed({
 console.log(results[0]); // [0, 2, 4, 6]
 ```
 
-#### Atomic Operations
+#### Using Atomic Operations
 
 ```javascript
 import { GpuComputed, AtomicUint32Array } from 'webgpu-computed';
 
 const data = {
-  atomicCounter: new AtomicUint32Array([0]),
+  atomicCounter: new AtomicUint32Array([0]), // Atomic counter
   output: new Uint32Array(4)
 };
 
@@ -152,36 +152,121 @@ console.log(results[0]); // [1, 2, 3, 4]
 
 ### 5. Manually Creating a GpuComputed Instance
 
-If you need more fine-grained control, you can create a GpuComputed instance directly:
+If you need finer control, you can create a GpuComputed instance directly:
 
 ```javascript
 import { GpuComputed } from 'webgpu-computed';
 
+// 1. Define data template
 const template = {
   inputA: [] as number[],
   inputB: [] as number[],
   output: [] as number[]
 };
 
+// 2. Create instance
 const gpuComputed = new GpuComputed(template, {
   code: `
     output[index] = inputA[index] + inputB[index];
   `,
-  workgroupSize: [32, 1, 1]
+  workgroupSize: [32, 1, 1] // Optional: Custom workgroup size
 });
 
+// 3. Initialize pipeline
 await gpuComputed.initPipeline();
 
+// 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)
 };
 
+// 5. Create bind group
 const bindGroup = gpuComputed.createBindGroup(data);
+
+// 6. Execute computation
 const results = await gpuComputed.computed(bindGroup, [1], ['output']);
 
-console.log(results[0]);
+console.log(results[0]); // [1.5, 3.5, 5.5, 7.5]
+```
+
+#### Buffer Reuse
+
+```javascript
+// First computation
+const data1 = { input: [1, 2, 3], output: [0, 0, 0] };
+const bindGroup1 = gpuComputed.createBindGroup(data1);
+const results1 = await gpuComputed.computed(bindGroup1, [1], ['output']);
+
+// Reuse the output buffer from the first computation for the second
+// Note: The template must still include output to build the compute code
+// const template = {
+//   input: [] as number[],
+//   output: [] as number[]
+// };
+const data2 = { input: [4, 5, 6]};
+const bindGroup2 = gpuComputed.createBindGroup(data2, bindGroup1); // Reuse output buffer
+const results2 = await gpuComputed.computed(bindGroup2, [1], ['output']);
+
+console.log(results2[0]); // [4, 5, 6] output buffer reused
+```
+
+#### Using Struct Data
+
+```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' }
+    ]
+  }
+};
+
+const gpuComputed = new GpuComputed(structTemplate, {
+  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;
+  `
+});
+
+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 }
+  ]
+};
+
+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
 ```
 
 ## API Reference
@@ -194,41 +279,358 @@ console.log(results[0]);
 
 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 get adapter/device
+
 ##### `GpuComputed.computed(options)`
 
-Executes a GPU computation task.
+Executes a GPU compute task.
 
 **Parameters**:
 
-* `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`
+- `code` (string): WGSL compute code
+- `data` (object): Input/output data object
+- `workgroupCount` (array): Workgroup count [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 sync back to CPU
+- `beforeCodes` (array, optional): WGSL code snippets before the compute function
+- `onSuccess` (function, optional): Success callback function
+
+**Returns**: `Promise<Array<Float32Array | Uint32Array | Int32Array>>` - Data of synchronized buffers
+
+### Data Types
+
+Supports the following WGSL types:
+
+- `f32`: Single-precision float
+- `u32`: Unsigned 32-bit integer
+- `vec2`: 2D vector
+- `vec3`: 3D vector
+- `vec4`: 4D vector
+- `mat3x3`: 3x3 matrix
+- `mat4x4`: 4x4 matrix
+
+### Supported JavaScript Types
+
+- `number[]`: Number array (automatically converted to Float32Array)
+- `Float32Array`: 32-bit float array
+- `Uint32Array`: 32-bit unsigned integer array
+- `Int32Array`: 32-bit signed integer array
+- `AtomicUint32Array`: Atomic unsigned integer array
+
+### Built-in WGSL Functions
+
+The library provides some common 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
+});
+```
+
+### Buffer Reuse
+
+```javascript
+// Create initial bind group
+const initialData = { buffer: new Float32Array(1000) };
+const bindGroup = gpuComputed.createBindGroup(initialData);
+
+// Reuse buffer for multiple computations
+for (let i = 0; i < 10; i++) {
+  const newData = { buffer: new Float32Array(1000).fill(i) };
+  const reusedBindGroup = gpuComputed.createBindGroup(newData, bindGroup);
+  const results = await gpuComputed.computed(reusedBindGroup, [32], ['buffer']);
+  // Process results...
+}
+```
+
+### Synchronizing Data Back to CPU
+
+```javascript
+const results = await GpuComputed.computed({
+  code: '...',
+  data: {...},
+  synchronize: ['output'], // Specify buffers to sync
+  workgroupCount: [1]
+});
+
+// results contains synchronized data
+```
+
+### Callback Functions
+
+```javascript
+await GpuComputed.computed({
+  code: '...',
+  data: {...},
+  workgroupCount: [1],
+  onSuccess: ({ gpuComputed, group, results }) => {
+    console.log('Computation complete', 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 results:', simpleResults[0]); // [1.5, 3.5, 5.5, 7.5]
+
+// 3. Using u32 type example
+console.log('\n=== Using u32 Type ===');
+const u32Data = {
+    counters: new Uint32Array([10, 20, 30, 40]),
+    output: new Uint32Array(4)
+};
+
+const u32Code = `
+    output[index] = counters[index] + 5u;
+`;
+
+const u32Results = await GpuComputed.computed({
+    code: u32Code,
+    data: u32Data,
+    workgroupCount: [1],
+    synchronize: ['output']
+});
+
+console.log('u32 computation results:', u32Results[0]); // [15, 25, 35, 45]
+
+// 4. Atomic operations example
+console.log('\n=== Atomic Operations Example ===');
+const atomicData = {
+    counter: new AtomicUint32Array([0]),
+    results: new Uint32Array(4)
+};
+
+const atomicCode = `
+    let oldValue = atomicAdd(&counter[0], 1u);
+    results[index] = oldValue;
+`;
+
+const atomicResults = await GpuComputed.computed({
+    code: atomicCode,
+    data: atomicData,
+    workgroupCount: [1],
+    synchronize: ['results']
+});
+
+console.log('Atomic operation results:', atomicResults[0]); // [0, 1, 2, 3]
+
+// 5. Complex data structure example (structs)
+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 results:', complexResults[0]);
+
+// 6. 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 results:', wgslFunResults[0]); // [1, 1, 1] All points inside OBB
+
+// 7. 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 results (first 10):', largeResults[0].slice(0, 10));
+
+// 8. Using callback functions example
+console.log('\n=== Using Callback Functions ===');
+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 results:', results[0]); // [100, 400, 900]
+    }
+});
+
+// 9. Multi-dimensional workgroups example
+console.log('\n=== Multi-dimensional Workgroups ===');
+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 results:', matrixResults[0]);
+
+console.log('\nAll feature examples completed!');
+```
 
 ## Browser Support
 
-* Chrome 113+
-* Edge 113+
-* Firefox (partial)
-* Safari (partial)
+- Chrome 113+
+- Edge 113+
+- Firefox (partial support)
+- Safari (partial support)
 
 Ensure the browser supports the WebGPU API.
 
+## Contributing
+
+Issues and Pull Requests are welcome!
+
 ## License
 
-ISC License
+ISC License

package/package.json

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

package/src/index.js

@@ -40,8 +40,8 @@ function U(f) {
   const e = Object.keys(f), r = e.map((c) => {
     const l = f[c];
     if (Array.isArray(l)) {
-      for (const d of ["vec2", "vec3", "vec4", "mat3x3", "mat4x4"])
-        if ($[d] === l.length) return d;
+      for (const y of ["vec2", "vec3", "vec4", "mat3x3", "mat4x4"])
+        if ($[y] === l.length) return y;
       throw new Error(`${c} 不支持的数组长度 ${l.length}`);
     }
     if (typeof l == "number") return "f32";
@@ -50,15 +50,15 @@ function U(f) {
   if (e.length !== r.length) throw new Error("keys 与 types 长度不一致");
   let s = 0;
   const u = e.map((c, l) => {
-    const d = r[l];
-    s += _(s, d);
+    const y = r[l];
+    s += _(s, y);
     const a = {
       name: c,
-      type: d,
+      type: y,
       offset: s,
-      size: $[d]
+      size: $[y]
     };
-    return s += $[d], a;
+    return s += $[y], a;
   }), t = Math.max(...r.map((c) => E[c]));
   return {
     stride: s + (t - s % t) % t,
@@ -111,7 +111,7 @@ class T {
       r(t.layout);
       const n = t.layout[t.layout.length - 1], c = n.offset + n.size;
       let l = 1;
-      for (const d of t.layout) l = Math.max(l, E[d.type]);
+      for (const y of t.layout) l = Math.max(l, E[y.type]);
       t.stride = P(c, l);
     };
     Object.keys(e).forEach((t) => {
@@ -133,9 +133,9 @@ class T {
     if (!this.template) throw new Error("初始化计算管线错误，未找到可用数据模版");
     await T.init();
     const e = this.template, { device: r } = await this.getDevice(), s = [], u = [], t = [];
-    this.device = r, Object.keys(e).forEach((i, y) => {
+    this.device = r, Object.keys(e).forEach((i, d) => {
       if (t.push({
-        binding: y,
+        binding: d,
         // 绑定到组里的0号位插槽
         visibility: GPUShaderStage.COMPUTE,
         // 数据在哪些阶段可以使用, 计算着色器、片元着色器、顶点着色器
@@ -144,20 +144,20 @@ class T {
         }
       }), 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};`);
+        s.push(`struct ${S(i)}Struct {${h}};`), u.push(`@group(0) @binding(${d}) 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}>;`);
+        s.push(`struct ${v} {${h}};`), u.push(`@group(0) @binding(${d}) 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}>;`);
+        g instanceof D ? u.push(`@group(0) @binding(${d}) var<storage, read_write> ${i}: array<atomic<${h}>>;`) : u.push(`@group(0) @binding(${d}) var<storage, read_write> ${i}: array<${h}>;`);
       }
     });
     const {
       beforeCodes: n = [],
       workgroupSize: c = [32, 1, 1],
       globalInvocationIdName: l = "grid",
-      workgroupIndexName: d = "index",
+      workgroupIndexName: y = "index",
       code: a = ""
     } = this.option ?? {}, o = (
       /*wgsl*/
@@ -168,7 +168,7 @@ ${u.join("")}
 
             @compute @workgroup_size(${c.join(",")})
             fn main(@builtin(global_invocation_id) ${l}: vec3<u32>) {
-                var ${d} = ${l}.x;
+                var ${y} = ${l}.x;
                 ${a}
             }
         `
@@ -200,23 +200,23 @@ ${u.join("")}
     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;
+        const d = o[o.length - 1], g = d.offset + d.size;
         let h = 1;
         for (const v of o) h = Math.max(h, E[v.type]);
         i = i ?? new Float32Array(P(g, h)).fill(0);
       }
-      return o.forEach((y) => {
-        let g = a[y.name];
+      return o.forEach((d) => {
+        let g = a[d.name];
         Array.isArray(g) || (g = [g]);
-        for (let h = 0; h < y.size; h++)
-          i[p + y.offset + h] = Number(g[h] ?? 0);
+        for (let h = 0; h < d.size; h++)
+          i[p + d.offset + h] = Number(g[h] ?? 0);
       }), i;
     }
     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;
+      return a.forEach((i, d) => {
+        const g = d * o.stride;
         c(i, o.layout, g, p);
       }), p;
     }
@@ -229,13 +229,13 @@ ${u.join("")}
       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);
+      let d = null;
+      if (o instanceof Float32Array ? d = new Float32Array(i) : o instanceof Uint32Array ? d = new Uint32Array(i) : o instanceof Int32Array ? d = new Int32Array(i) : d = new Float32Array(i), !d) throw new Error("不支持的数组类型" + o);
       const g = s.createBuffer({
-        size: y.byteLength,
+        size: d.byteLength,
         usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.COPY_SRC | GPUBufferUsage.STORAGE
       });
-      s.queue.writeBuffer(g, 0, y), t.push({ name: a, buffer: g });
+      s.queue.writeBuffer(g, 0, d), t.push({ name: a, buffer: g });
     }), {
       group: s.createBindGroup({
         layout: this.groupLayout,
@@ -257,9 +257,9 @@ ${u.join("")}
       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;
+        s.layout.forEach((y) => {
+          const a = e.slice(c + y.offset, c + y.offset + y.size);
+          l[y.name] = a.length === 1 ? a[0] : [...a];
         }), t.push(l);
       }
       return t;
@@ -268,7 +268,7 @@ ${u.join("")}
       const s = this.template[r], u = {};
       return s.forEach((t) => {
         const n = e.slice(t.offset, t.offset + t.size);
-        u[t.name] = n.length === 1 ? n[0] : n;
+        u[t.name] = n.length === 1 ? n[0] : [...n];
       }), u;
     }
     return e;
@@ -293,17 +293,15 @@ ${u.join("")}
       }
     }).filter((o) => !!o);
     u.queue.submit([n.finish()]), await u.queue.onSubmittedWorkDone();
-    const d = /* @__PURE__ */ new Map();
+    const y = /* @__PURE__ */ new Map();
     return await Promise.all(
       l.map(async (o) => {
         await o.buffer.mapAsync(GPUMapMode.READ);
         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);
+        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), y.set(o.name, i);
       })
-    ), s.map((o) => d.get(o));
+    ), s.map((o) => y.get(o));
   }
   /** 初始化gpu设备
    * @returns 
@@ -359,8 +357,8 @@ ${u.join("")}
    */
   static async computed(e) {
     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 l = await this.fromByData({ data: r, ...c }), y = l.createBindGroup(r), a = await l.computed(y, u, t);
+    return n && n({ gpuComputed: l, group: y, results: a }), s ? a.map((o, p) => l.dataMap(o, t[p])) : a;
   }
 }
 const M = (

package/src/utils/GpuComputed.d.ts

@@ -74,14 +74,14 @@ export declare class GpuComputed {
      * @param array
      * @param key
      */
-    dataMap(array: number[], key: string): number[] | Record<string, number | number[]> | Record<string, number | number[]>[];
+    dataMap(array: Float32Array | Uint32Array | Int32Array, key: string): Float32Array<ArrayBufferLike> | Int32Array<ArrayBufferLike> | Uint32Array<ArrayBufferLike> | Record<string, number | number[]> | Record<string, number | number[]>[];
     /** 开始计算
      * @param group 数据组
      * @param workgroupCount 工作组大小
      * @param synchronize 需要同步的数据字段
      * @returns
      */
-    computed(group: BufferGroup, workgroupCount: [number, number?, number?], synchronize?: string[]): Promise<number[][]>;
+    computed(group: BufferGroup, workgroupCount: [number, number?, number?], synchronize?: string[]): Promise<(Float32Array<ArrayBufferLike> | Int32Array<ArrayBufferLike> | Uint32Array<ArrayBufferLike>)[]>;
     /** 初始化gpu设备
      * @returns
      */
@@ -112,8 +112,8 @@ export declare class GpuComputed {
         onSuccess?: (opt: {
             gpuComputed: GpuComputed;
             group: BufferGroup;
-            results: number[][];
+            results: (Float32Array | Uint32Array | Int32Array)[];
         }) => void;
-    } & GpuComputedOption): Promise<(number[] | Record<string, number | number[]> | Record<string, number | number[]>[])[]>;
+    } & GpuComputedOption): Promise<(Float32Array<ArrayBufferLike> | Int32Array<ArrayBufferLike> | Uint32Array<ArrayBufferLike> | Record<string, number | number[]> | Record<string, number | number[]>[])[]>;
 }
 export {};