WASM 游戏与 WebGPU：高性能浏览器图形渲染与游戏引擎

1. 计算瓶颈：物理/AI/寻路/粒子 —— JS 解释 + JIT 仍慢
2. 渲染瓶颈：WebGL 是 2011 年的 API，驱动开销与多线程受限
3. 资产搬运：模型/纹理加载慢，内存复制开销大

WASM 解决 1（近原生计算），WebGPU 解决 2（现代 GPU API），
两者配合 + 数据桥优化解决 3

- 游戏引擎移植：Unity（WebGL/WebGPU）/ Unreal（实验）/ Godot
- 自研引擎：Bevy（Rust）+ wgpu
- 高性能渲染：CAD/可视化/三维地球/地图
- 物理/粒子模拟：计算量大的场景引擎

Emscripten = LLVM → WASM 的编译器工具链 + 运行时
  编译 C/C++（含 OpenGL/其他遗留 API）到 WASM
  提供：SD 文件系统、线程（SharedArrayBuffer）、
        SDL/OpenGL 转译到 WebGL/WebGPU

# 安装
# brew install emscripten 或下载 SDK

# 编译 Hello 游戏逻辑
emcc main.cpp \
  -O3 \
  -s WASM=1 \
  -s USE_SDL=2 \
  -s USE_WEBGPU=1 \
  -s ALLOW_MEMORY_GROWTH=1 \
  -o game.js
# 产出 game.wasm + game.js（胶水 + loader）+ game.html

// 1. 设备与管线
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

const pipeline = device.createRenderPipeline({
  vertex: { module, entryPoint: 'vs_main' },
  fragment: { module, entryPoint: 'fs_main' },
  primitive: { topology: 'triangle-list' },
  layout: 'auto',
});

// 2. 缓冲与纹理（传给管线）
const vertexBuf = device.createBuffer({ size, usage: GPUBufferUsage.VERTEX });
// 3. 每帧编码命令并提交
const encoder = device.createCommandEncoder();
const pass = encoder.beginRenderPass(renderPassDesc);
pass.setPipeline(pipeline);
pass.setVertexBuffer(0, vertexBuf);
pass.draw(3);
pass.end();
device.queue.submit([encoder.finish()]);

WebGPU 与 WASM 天然互补：
  - 顶点/索引数据可来自 WASM 的线性内存（零拷贝）
  - 计算着色器做物理/粒子 → 结果直接供渲染
  - 后端对象（pipeline/buffer）由 JS/宿主创建，wasm 引用

最关键的优化：让 WASM 直接写 GPU 缓冲，避免 JS 搬运

路径对比：
  坏：WASM 算 → JS 拷贝到 TypedArray → GPU 缓冲（多份复制）
  好：WASM 线性内存 → 直接映射到 GPUBuffer（零拷贝）

WebGPU 提供 GPUBuffer 的映射：
  device.queue.writeBuffer 或 动态偏移引用
  wasm 里的指针 = 缓冲映射后的地址

// 从 wasm 拿到的顶点指针 → 写进 GPU 缓冲
const wasmPtr = wasmExports.get_vertex_ptr();   // i32 偏移
const gpuBuf = device.createBuffer({ size, usage: GPUBufferUsage.VERTEX | COPY_DST });

// 零拷贝：wasm 直接写到 GPU 可访问的映射区（如可用）
const mapped = gpuBuf.getMappedRange(0, size);   // 写入 TypedArray
wasmExports.fill_vertices(wasmPtr, mapped);      // wasm 内 memcpy

1. 图片解码（浏览器 ImageDecoder）→ 输出到 wasm 内存 → GPU
2. 视频帧（摄像头/影片）→ 转纹理 → wasm 后处理
3. wasm 生成程序化纹理（噪声/地形）→ 直写纹理数据

wgpu：Rust 编写的跨平台 GPU API
  - 抽象 Vulkan/DX12/Metal/WebGPU
  - 同一渲染代码：桌面原生 + 浏览器（wasm）
  - 与 Bevy 引擎深度集成

# Bevy/wgpu 工程 → wasm
rustup target add wasm32-unknown-unknown
cargo build --release --target wasm32-unknown-unknown

# 用 wasm-bindgen 生成胶水 + wasm-opt 优化
wasm-bindgen --out-dir pkg --target web target/wasm32-unknown-unknown/release/game.wasm
wasm-opt -Oz pkg/game_bg.wasm -o pkg/game_bg_opt.wasm

// wgpu 渲染：管线 + 顶点缓冲
struct Renderer {
    pipeline: wgpu::RenderPipeline,
    vertex_buf: wgpu::Buffer,
    index_buf: wgpu::Buffer,
}

impl Renderer {
    fn draw(&self, queue: &wgpu::Queue) {
        let mut enc = self.device.create_command_encoder(&Default::default());
        let pass = enc.begin_render_pass(&RenderPassDescriptor {
            color_attachments: &[Some(ColorAttachment { clear_value: ... })],
            ..Default::default()
        });
        pass.set_pipeline(&self.pipeline);
        pass.set_vertex_buffer(0, self.vertex_buf.slice(..));
        pass.draw(0..3, 0..1);
        pass.end();
        queue.submit(Some(enc.finish()));
    }
}

游戏循环两个时钟：
  逻辑步长（fixed timestep）：物理/AI 用固定 dt（如 1/60s）
  渲染帧（frame）           ：随显示器刷新（rAF）

正确做法：
  累加器按真实时间推进固定步长（防漂移/防隧穿）
  渲染用最新状态插值（alpha blending）

let acc = 0, last = performance.now();
const STEP = 1 / 60;

function loop(now) {
  acc += Math.min((now - last) / 1000, 0.25);   // 防大跳
  last = now;
  while (acc >= STEP) { wasmExports.step(STEP); acc -= STEP; }  // 逻辑
  const alpha = acc / STEP;
  wasmExports.render(alpha);   // 渲染（含插值）
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

1. requestAnimationFrame 天然对齐 VSync
2. 渲染在 wasm 内完成，主线程无阻塞
3. 重逻辑搬 compute shader / worker（多线程）
4. 帧率统计：performance + fps 面板调试

游戏启动瓶颈：
  1. wasm 二进制下载（几百 KB - MB）
  2. 资产（模型/纹理/音频）下载
  3. 编译/实例化 + 首帧初始化

优化：
  - wasm gzip + HTTP 缓存 + 预加载（link rel=preload）
  - 资产按需加载（场景进入时拉取）
  - 纹理压缩（KTX2/BasisU）减少体积
  - 流式资产：先加载核心场景，其余后台流送

DCC 导出 → 处理 → 打包 → 运行时：
  glTF/glb：模型标准格式（压缩 + Draco 网格）
  KTX2    ：纹理压缩格式（GPU 直接解压）
  ASTC/BC ：平台压缩纹理

工具：gltf-transform、basisu、kram（KTX2 压缩）

Emscripten 把资产打进虚拟 FS：
  --preload-file assets  预打包进 wasm 的嵌入式 FS
  --embed-file 与 --preload-file 的区别：
    embed：全进 wasm 二进制（小资产）
    preload：外部 .data 文件（大资产，可按需）

1. 合并 Draw Call：批处理（instance/batch）减提交数
2. 剔除：视锥剔除 + 遮挡剔除（wasm 内计算）
3. 纹理压缩：KTX2 减带宽
4. 关卡数据：预计算（导航网格/光照图）
5. compute shader：物理/粒子搬 GPU

1. 多线程：WASM threads（SharedArrayBuffer + COOP/COEP）
2. SIMD：向量化物理/矩阵运算
3. 内存：避免 per-frame 分配，用对象池
4. 手写热路径：关键循环内联/去分支

60fps 预算（16.6ms/帧）：
  CPU 逻辑 ≤ 4ms
  渲染提交 ≤ 4ms
  GPU 渲染 ≤ 8ms（与 CPU 并行）
用 wgpu/WebGL 的计时查询 + performance 定位瓶颈

选型建议：
  移植成熟引擎（Unity/Unreal）→ Emscripten
  自研 + 跨平台（桌面也要）    → Rust + wgpu/Bevy
  快速原型/小游戏            → Godot 或 AssemblyScript
  WebGPU 优先（新项目）       → 直接用 WebGPU（跳过 WebGL）