2026年WebGPU API实战

// WebGL 1.0 (1992年OpenGL ES 2.0衍生)
- 仅支持OpenGL ES 2.0特性（老旧）
- 无法利用现代GPU的全部能力
- 计算着色器（Compute Shader）不支持
- 多线程提交命令缓冲区（不支持）

WebGPU（2026年正式落地）：
- 基于现代图形API（Vulkan/Metal/Direct3D 12）
- 支持计算着色器（GPGPU）
- 多线程命令提交
- 性能提升10-100倍（特定场景）

WebGL:
JS → OpenGL ES → GPU驱动 → GPU

WebGPU:
JS → WebGPU API → GPU直接通信（零拷贝）

function cpuMatrixMultiply(a, b) {
  const result = new Float32Array(N * N);
  for (let i = 0; i < N; i++) {
    for (let j = 0; j < N; j++) {
      let sum = 0;
      for (let k = 0; k < N; k++) {
        sum += a[i * N + k] * b[k * N + j];
      }
      result[i * N + j] = sum;
    }
  }
  return result;
}
// N=1024，耗时：12000ms

// 1. 初始化WebGPU
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

// 2. 创建缓冲区
const bufferA = device.createBuffer({
  size: N * N * 4,  // Float32 = 4字节
  usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
});
device.queue.writeBuffer(bufferA, 0, aData);  // 写入GPU显存

const bufferB = device.createBuffer({
  size: N * N * 4,
  usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
});
device.queue.writeBuffer(bufferB, 0, bData);

const bufferResult = device.createBuffer({
  size: N * N * 4,
  usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_READ,
});

// 3. 编写计算着色器（WGSL）
const shaderModule = device.createShaderModule({
  code: `
    struct Matrix {
      data: array<f32, ${N * N}>,
    };

    @group(0) @binding(0) var<storage, read> a: Matrix;
    @group(0) @binding(1) var<storage, read> b: Matrix;
    @group(0) @binding(2) var<storage, read_write> result: Matrix;

    @compute @workgroup_size(8, 8)
    fn multiply(@builtin(global_invocation_id) gid: vec3<u32>) {
      let row = gid.x;
      let col = gid.y;

      if (row >= ${N}u || col >= ${N}u) { return; }

      var sum = 0.0;
      for (var k = 0u; k < ${N}u; k = k + 1u) {
        sum = sum + a.data[row * ${N}u + k] * b.data[k * ${N}u + col];
      }
      result.data[row * ${N}u + col] = sum;
    }
  `,
});

// 4. 创建计算管线
const computePipeline = device.createComputePipeline({
  compute: {
    module: shaderModule,
    entryPoint: 'multiply',
  },
});

// 5. 绑定资源
const bindGroup = device.createBindGroup({
  layout: computePipeline.getBindGroupLayout(0),
  entries: [
    { binding: 0, resource: { buffer: bufferA } },
    { binding: 1, resource: { buffer: bufferB } },
    { binding: 2, resource: { buffer: bufferResult } },
  ],
});

// 6. 编码命令
const commandEncoder = device.createCommandEncoder();
const passEncoder = commandEncoder.beginComputePass();
passEncoder.setPipeline(computePipeline);
passEncoder.setBindGroup(0, bindGroup);
passEncoder.dispatchWorkgroups(Math.ceil(N / 8), Math.ceil(N / 8));
passEncoder.end();

// 7. 提交命令
device.queue.submit([commandEncoder.finish()]);

// 8. 读取结果
const resultBuffer = device.createBuffer({
  size: N * N * 4,
  usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ,
});
// ... 复制并读取
// N=1024，耗时：45ms （比CPU快266倍！）

@compute @workgroup_size(16, 16)
fn gaussian_blur(@builtin(global_invocation_id) gid: vec3<u32>) {
  let x = gid.x;
  let y = gid.y;

  if (x >= width || y >= height) { return; }

  var sum = vec4<f32>(0.0);
  var weight_sum = 0.0;

  for (var dx = -2; dx <= 2; dx = dx + 1) {
    for (var dy = -2; dy <= 2; dy = dy + 1) {
      let nx = min(max(i32(x) + dx, 0), i32(width) - 1);
      let ny = min(max(i32(y) + dy, 0), i32(height) - 1);

      let weight = exp(-f32(dx * dx + dy * dy) / 2.0);
      sum = sum + weight * textureLoad(inputTexture, vec2<i32>(nx, ny), 0);
      weight_sum = weight_sum + weight;
    }
  }

  textureStore(outputTexture, vec2<i32>(x, y), sum / weight_sum);
}

import * as tf from '@tensorflow/tfjs';
import '@tensorflow/tfjs-backend-webgpu';

// 设置WebGPU为默认后端
await tf.setBackend('webgpu');
await tf.ready();

// 验证
console.log(tf.getBackend());  // "webgpu"

// 运行模型（自动使用GPU）
const model = await tf.loadLayersModel('model.json');
const input = tf.tensor2d([[1, 2, 3, 4]]);
const prediction = model.predict(input);  // 在GPU上执行
prediction.print();

Chrome: ✅ 稳定支持 (v113+)
Edge: ✅ 稳定支持 (基于Chromium)
Firefox: ✅ 稳定支持 (v127+)
Safari: ✅ 稳定支持 (v19.4+，即将发布)

检测支持：
if (!navigator.gpu) {
  alert('您的浏览器不支持WebGPU');
}

1. 打开 chrome://gpu
2. 启用"WebGPU Developer Features"
3. 打开DevTools → "WebGPU" 标签页
   - 查看GPU设备信息
   - 捕获命令缓冲区（回放）
   - 性能分析（耗时分析）

// 安装
npm install webgpu-inspector

// 使用
import { WebGPUInspector } from 'webgpu-inspector';

const inspector = new WebGPUInspector();
const device = await inspector.requestDevice();  // 包装device

// 将计算密集型任务分担：
// - WebGPU：并行计算（矩阵/卷积）
// - WebAssembly：串行逻辑（控制流）

import init, { preprocess } from './wasm-module/pkg';
await init();

// Wasm预处理
const preprocessed = preprocess(rawData);

// WebGPU加速计算
const result = webgpuCompute(preprocessed);

// Deno 2.0+ 支持WebGPU (GPU访问)
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

// 服务端ML推理（无Python依赖）
const model = await tf.loadLayersModel('model.json');
const output = model.predict(inputTensor);  // 使用服务器GPU

// 浏览器中运行LLM（大语言模型）
import { runLLM } from 'web-llm';

const model = await runLLM({
  model: 'Llama-3-8B-Q4',
  backend: 'webgpu',  // 使用WebGPU加速
});

const response = await model.generate('解释量子计算');
console.log(response);