TW · WebGPU与浏览器AI推理可视化实验室

01

WebGPU 渲染管线

GPU管线从顶点输入→顶点着色器→图元装配→光栅化→片元着色器→输出合并的完整流程，动画展示数据在各阶段的流动。

顶点着色器

每顶点变换

模型→视图→投影坐标

光栅化

图元→片元

生成待着色像素

片元着色器

每片元颜色

纹理采样+光照计算

吞吐量

~10 GPixel/s

现代桌面GPU

02

计算着色器与 WGSL

计算着色器的workgroup网格布局，颜色矩阵表示不同workgroup的并行计算。点击运行观察workgroup的调度与执行。

// WGSL 矩阵乘法计算着色器
@group(0) @binding(0) var<storage> a: array<f32>;
@group(0) @binding(1) var<storage> b: array<f32>;
@group(0) @binding(2) var<storage, read_write> c: array<f32>;

@compute @workgroup_size(8, 8)
fn main(@builtin(global_invocation_id) gid: vec3<u32>) {
  let row = gid.x; let col = gid.y; let N = 64u;
  var sum: f32 = 0.0;
  for (var k = 0u; k < N; k++) {
    sum += a[row * N + k] * b[k * N + col];
  }
  c[row * N + col] = sum;
}

Workgroup

8×8 = 64 线程

共享内存+屏障同步

Dispatch

16×8×1 = 128 组

总 8192 并行线程

WGSL

WebGPU 着色语言

类 Rust 语法，类型安全

性能

~8 TFLOPS

FP32 桌面 GPU

03

浏览器内 LLM 推理

Transformer.js / ONNX Runtime Web 的架构：模型文件(ONNX)→WebGPU后端→推理管线。流程图展示从模型下载到推理输出的完整路径。

模型格式

ONNX / GGUF / SafeTensors

跨框架统一中间表示

后端

WebGPU / WASM

GPU优先，CPU回退

典型模型

Phi-3 / Gemma-2B / Whisper

本地化推理

04

显存管理

GPU缓冲区(Buffer)、纹理(Texture)、绑定组(BindGroup)的分配和管理。内存映射图展示不同资源的显存占用与生命周期。

Buffer

顶点/索引/Uniform

GPU显存中的线性数据

Texture

2D/3D 纹理

图像+采样器绑定

BindGroup

资源绑定集合

着色器资源映射

显存预算

~2 GB

浏览器默认限制

05

WebGPU vs WebGL 对比

多维度雷达图对比：计算能力、着色器灵活性、性能、通用计算(GPGPU)、生态成熟度。右侧展示两个API的架构差异。点击切换雷达图/柱状图视图。

WebGPU 优势

原生计算着色器

GPGPU无需 hack

WebGL 局限

仅光栅化渲染

计算需纹理编码

性能差距

2-5x

AI推理场景

06

端侧推理优化

量化(INT4/INT8)、分块加载、流式推理三种优化策略。柱状图对比优化前后的显存占用和推理速度。

INT8 量化

显存 -50% · 速度 +50%

精度损失 <1%

INT4 量化

显存 -75% · 速度 +100%

精度损失 2-3%

分块加载

峰值显存 -60%

按需加载模型层

流式推理

首Token -70%

逐Token输出结果

07

浏览器 AI 应用矩阵

浏览器内可运行的AI应用：本地LLM聊天、图像生成、语音识别、物体检测、姿态估计等。每个应用卡片显示模型大小和推理速度。点击类别按钮高亮对应应用。

LLM 类应用

Phi-3 / Gemma-2B

本地聊天、文本摘要、翻译

视觉类应用

YOLO / SD-Turbo

实时检测、图像生成、姿态估计

语音类应用

Whisper / VITS

语音识别、文本转语音、实时翻译

隐私优势

100% 本地处理

数据不离开设备，零服务器成本

08

性能基准

不同模型(1.5B/3B/7B/13B)在不同设备(桌面GPU/集成显卡/手机GPU)上的推理速度对比。拖动滑块调整模型参数量。

模型参数: 3B

桌面GPU

42 tok/s

RTX 4070 / M2 Pro

集成显卡

18 tok/s

Intel Arc iGPU

手机GPU

7 tok/s

Adreno / Mali

显存占用

1.8 GB

INT4 量化