WebGPU Compute Shader 让浏览器具备 GPU 计算能力，本文探讨如何用它实时渲染神经网络的激活过程
## WebGPU：浏览器的 GPU 革命
WebGPU 是 WebGL 的继任者，提供了对现代 GPU 的低层次访问，包括 Compute Shader。
## 计算着色器基础
```wgsl
@group(0) @binding(0) var inputActivations: array;
@group(0) @binding(1) var outputActivations: array;
@group(0) @binding(2) var weights: array;
@compute @workgroup_size(64)
fn main(@builtin(global_invocation_id) global_id: vec3) {
let idx = global_id.x;
var sum: f32 = 0.0;
for (var i: u32 = 0u; i < 32u; i++) {
sum += inputActivations[i] * weights[idx * 32u + i];
}
outputActivations[idx] = max(0.0, sum); // ReLU
}
```
## 实时可视化
通过将激活值映射到颜色，我们可以直观地看到神经网络在"想什么"。这对于理解模型行为和调试非常有价值。
WebGPU 是 WebGL 的继任者，提供了对现代 GPU 的低层次访问，包括 Compute Shader。
## 计算着色器基础
```wgsl
@group(0) @binding(0) var
@group(0) @binding(1) var
@group(0) @binding(2) var
@compute @workgroup_size(64)
fn main(@builtin(global_invocation_id) global_id: vec3
let idx = global_id.x;
var sum: f32 = 0.0;
for (var i: u32 = 0u; i < 32u; i++) {
sum += inputActivations[i] * weights[idx * 32u + i];
}
outputActivations[idx] = max(0.0, sum); // ReLU
}
```
## 实时可视化
通过将激活值映射到颜色，我们可以直观地看到神经网络在"想什么"。这对于理解模型行为和调试非常有价值。