WebAssembly 深度

用生活化的比喻，让你理解 Wasm 为什么比 JS 快，以及它在游戏中的应用场景

前置知识：JavaScript 基础、2_1_v8Learn（JS执行原理）

---

阅读指南（初学者必看）

为什么你需要学习 WebAssembly？

JavaScript 是游戏开发的主力语言，但它有性能天花板：动态类型导致运行时才能确定类型，GC 会造成不可预测的停顿，解释执行需要预热。当你需要做物理模拟、大量粒子计算、图像处理时，JS 的性能可能不够用。

WebAssembly 就是突破这个天花板的工具。 它比 JS 更接近底层，能接近原生性能，同时保持跨浏览器的可移植性。

学完本章，你能回答：

• Wasm 和 JS 的本质区别是什么？为什么 Wasm 更快？
• Wasm 在游戏中有哪些具体应用场景？
• 如何用 Emscripten 将 C++ 代码编译为 Wasm 并在 JS 中调用？
• Wasm 的新特性（SIMD、多线程、GC）对游戏有什么价值？

本文结构

第一部分：Wasm 是什么？（原理与性能对比）
第二部分：Wasm 在游戏中的应用（5大场景）
第三部分：Wasm 实战（C++→Wasm 编译与调用）
第四部分：更多编译方式（AssemblyScript / 手写 WAT）
第五部分：Wasm 新特性（SIMD、多线程、GC等）

---

一、Wasm 是什么？

生活类比：如果 JavaScript 是"人类语言"，机器码是"机器语言"，那 Wasm 就是"通用机器语言"。它比 JS 更接近底层，比机器码更可移植。

JavaScript 的性能瓶颈：
- 动态类型 → 运行时才能确定类型
- GC → 不可预测的停顿
- 解释执行 → 需要编译管线加热

Wasm 的解决方式：
- 静态类型 → 编译期确定
- 手动内存管理 → 无 GC 停顿
- AOT 编译 → 直接执行机器码
- 线性内存 → 可预测的内存布局

性能对比：
| 操作 | JavaScript | Wasm |
|------|-----------|------|
| 数学计算 | 慢（类型不确定） | 快（接近原生） |
| 内存访问 | 慢（GC管理） | 快（线性内存） |
| 启动速度 | 快（解释执行） | 需要编译/验证 |
| 互操作 | 简单 | 需要 JS 桥接 |

Wasm 模块结构

WebAssembly模块：
- 类型段：函数签名
- 导入段：从外部导入的函数
- 函数段：函数定义
- 表段：函数表
- 内存段：线性内存
- 全局段：全局变量
- 导出段：导出的函数
- 起始段：初始化函数
- 代码段：函数代码
- 数据段：初始化数据

---

二、Wasm 在游戏中的应用

1. 物理引擎 ── Box2D/Bullet 编译为 Wasm，性能接近原生
2. AI 计算 ── 寻路、NavMesh 生成等计算密集型逻辑
3. 图像处理 ── 纹理压缩/解压、滤镜、编解码
4. 帧同步逻辑 ── C++ 编译为 Wasm，保证跨平台确定性
5. 大数据计算 ── 排行榜、匹配算法、数据分析

生活类比：Wasm 在游戏中的角色就像"外援"。JS 团队做日常开发没问题，但遇到硬仗（高性能计算），请个 C++ 外援（编译为 Wasm）来帮忙，效率翻倍。

场景	JS 性能	Wasm 性能	提升倍数	适用条件
物理模拟	慢	快	2~5x	大量粒子/刚体
寻路算法	中	快	3~10x	大地图/多单位
图像编解码	慢	快	5~20x	纹理压缩/视频
帧同步	不确定	确定	—	需要跨平台一致性
简单UI逻辑	快	慢	0.5x	❌ 不适合用Wasm

---

三、Wasm 实战

3.1 C++ 编译为 Wasm（Emscripten）

// physics.cpp - 用 Emscripten 编译为 Wasm
#include <emscripten.h>

struct Particle { float x, y, vx, vy, mass; };

extern "C" {
  EMSCRIPTEN_KEEPALIVE
  void update_particles(Particle* p, int n, float dt, float g) {
    for (int i = 0; i < n; i++) {
      p[i].vy += g * dt;
      p[i].x += p[i].vx * dt;
      p[i].y += p[i].vy * dt;
    }
  }
}
// 编译：emcc physics.cpp -o physics.js -s EXPORTED_FUNCTIONS="['_update_particles']" -O3

3.2 JS 端调用 Wasm

// JS 端调用
async function loadWasm(url) {
  const response = await fetch(url);
  const buffer = await response.arrayBuffer();
  const module = await WebAssembly.compile(buffer);
  const instance = await WebAssembly.instantiate(module);
  return instance.exports;
}

const wasm = await loadWasm('physics.wasm');
console.log(wasm.add(10, 20));  // 30

3.3 数据传递的关键：线性内存

Wasm 内存模型：
┌──────────────────────────────────────┐
│  线性内存（ArrayBuffer）              │
│  ┌──────┬──────┬──────┬──────┐       │
│  │ P[0] │ P[1] │ P[2] │ ...  │       │
│  └──────┴──────┴──────┴──────┘       │
│  JS 通过 Float32Array 视图读写       │
│  Wasm 通过指针直接访问               │
└──────────────────────────────────────┘

注意：
- JS → Wasm：通过共享的 ArrayBuffer 传递数据
- 调用开销：简单函数调用很快，但频繁传递大量数据有拷贝开销
- 最佳实践：一次性传入大数据，在 Wasm 中处理完再读出

传递数组示例

async function arrayExample() {
  const memory = new WebAssembly.Memory({ initial: 256 });
  const instance = await WebAssembly.instantiate(module, {
    env: { memory }
  });
  
  const memBuffer = memory.buffer;
  const memView = new Uint32Array(memBuffer);
  
  memView[0] = 10;
  memView[1] = 20;
  memView[2] = 30;
  
  const sum = instance.exports.sumArray(0, 3);
  console.log(sum);  // 60
}

---

四、更多编译方式

4.1 AssemblyScript（TypeScript 语法写 Wasm）

// add.ts
export function add(a: i32, b: i32): i32 {
  return a + b;
}

export function factorial(n: i32): i32 {
  if (n <= 1) return 1;
  return n * factorial(n - 1);
}

// 斐波那契
export function fibonacci(n: i32): i32 {
  if (n <= 1) return n;
  let a: i32 = 0, b: i32 = 1;
  for (let i = 2; i <= n; i++) {
    let temp = a + b;
    a = b;
    b = temp;
  }
  return b;
}

# 安装AssemblyScript
npm install -g assemblyscript
# 编译
asc add.ts -o add.wasm

// JavaScript调用
const response = await fetch('add.wasm');
const buffer = await response.arrayBuffer();
const module = await WebAssembly.compile(buffer);
const instance = await WebAssembly.instantiate(module);

console.log(instance.exports.add(10, 20));       // 30
console.log(instance.exports.factorial(5));      // 120
console.log(instance.exports.fibonacci(10));     // 55

4.2 手写 WAT（WebAssembly Text Format）

;; 简单的加法函数
(module
  ;; 导出函数
  (func $add (param $a i32) (param $b i32) (result i32)
    local.get $a
    local.get $b
    i32.add)
  
  ;; 导出
  (export "add" (func $add))
)

---

五、Wasm 新特性

特性	说明	游戏价值
Wasm GC	直接使用宿主 GC 对象	Kotlin/Java 编译为 Wasm 更简单
Wasm SIMD	128位向量指令	图像处理快4~8倍
Wasm 多线程	SharedArrayBuffer + Worker	物理模拟并行化
Component Model	模块间标准接口	不同语言 Wasm 互操作
WASI	浏览器外运行标准	服务器端 Wasm 运行时

Wasm SIMD 的游戏价值

SIMD = Single Instruction Multiple Data（单指令多数据）

一条指令同时处理4个float：
普通：a[0]+b[0], a[1]+b[1], a[2]+b[2], a[3]+b[3] → 4次加法
SIMD：v_add(a, b) → 1次指令完成4次加法

游戏中的应用：
- 粒子更新：一次更新4个粒子的位置
- 矩阵运算：4x4矩阵乘法
- 颜色转换：一次处理4个像素通道
- 物理：一次处理4个碰撞检测

Wasm 多线程

Wasm 多线程 = Web Worker + SharedArrayBuffer

架构：
┌─────────────┐     ┌─────────────┐
│  Worker 1    │     │  Worker 2   │
│  (Wasm物理)  │     │  (WasmAI)   │
└──────┬───────┘     └──────┬──────┘
       │                    │
       ▼                    ▼
┌──────────────────────────────────┐
│    SharedArrayBuffer（共享内存）   │
│    ┌─────┬─────┬─────┬─────┐    │
│    │物理  │AI   │共享  │...  │    │
│    │数据  │数据  │状态  │     │    │
│    └─────┴─────┴─────┴─────┘    │
└──────────────────────────────────┘

注意：需要 COOP/COEP 头才能启用 SharedArrayBuffer

实践：

• 用 Emscripten 将 C++ 编译为 Wasm
• 实现 Wasm 加速的粒子系统，对比 JS 性能
• 测试 Wasm SIMD 加速效果

---

自问自答

Q：Wasm 会取代 JavaScript 吗？ A：不会。Wasm 和 JS 是协作关系。JS 负责业务逻辑和 UI 交互，Wasm 负责计算密集型任务。就像公司里，JS 是日常运营，Wasm 是请来的技术专家。

Q：什么时候应该用 Wasm？ A：当你遇到 JS 性能瓶颈时——大量数学计算、物理模拟、图像处理、编解码。如果 JS 能满足需求，就不需要引入 Wasm 的复杂性。

Q：Wasm 的启动速度比 JS 慢吗？ A：是的。Wasm 需要下载→验证→编译，而 JS 可以边解析边执行。但 Wasm 的体积通常更小（二进制格式），下载更快。对于长时间运行的游戏，启动开销可以忽略。

Q：Wasm 能直接操作 DOM 吗？ A：不能。Wasm 需要通过 JS 桥接来操作 DOM。这也是为什么 Wasm 不适合做 UI 逻辑——频繁的 JS↔Wasm 调用反而更慢。

Q：帧同步游戏为什么用 Wasm？ A：C++ 编译为 Wasm 的浮点运算是确定性的（IEEE 754），而不同浏览器的 JS 引擎可能有微小的浮点差异。帧同步要求所有客户端的计算结果完全一致，Wasm 保证了这一点。

---

实践任务

• 任务1：安装 Emscripten SDK，将一个简单的 C++ 函数编译为 Wasm 并在浏览器中运行
• 任务2：分别用 JS 和 Wasm 实现 10000 个粒子的重力模拟，对比帧率差异
• 任务3：测试 Wasm SIMD 加速效果——对比普通 Wasm 和启用 SIMD 的图像处理性能
• 任务4：实现 Wasm 多线程——用 SharedArrayBuffer 在两个 Worker 间共享粒子数据
• 任务5：用 AssemblyScript 写一个递归函数并编译为 Wasm 调用
• 任务6：分析一个真实项目中 Wasm 的使用场景（如 Figma/AutoCAD Web），写一篇简短分析

---

与其他章节的关联

本章内容	关联章节	关联点
Wasm 线性内存	第04章 图形学前沿	纹理数据可通过线性内存传递给 WebGPU
Wasm 多线程	第03章 AI与游戏	多线程并行运行行为树和寻路
Wasm 性能优化	2_1_v8Learn	V8 的 JIT 编译 vs Wasm 的 AOT 编译
帧同步确定性	4_1_game-architecture	帧同步架构需要确定性计算
图像处理	2_2_h5-rendering-mastery	纹理压缩/解压可用 Wasm 加速

---

上一章：学习路线图 | 下一章：02-云游戏与边缘计算