如何生成WebAssembly文件？

许多3D游戏都是用C/C++语言写的，如果能将C/C++语言编译成JavaScript代码，它们不就能在浏览器里运行了吗？
Emscripten的底层是LLVM编译器，Emscripten可以将c／c++编译成asm.js代码，也可以将c/c++编译成webAssembly，但却不能把asm.js转成wasm。想把asm.js编译成WebAssembly，需要借助Binaryen和WABT等工具。

asm.js是javascript的一个严格子集，它的变量一律都是静态类型，没有垃圾回收机制，通过TypedArray直接读写内存，在浏览器的运行速度比js更快。asm.js是文本，人类可读，比较直观。所有浏览器都支持asm.js，不会有兼容性问题。

// asm.js案例
function () {
  "use asm";

  function add (x, y) {
    x = x | 0;
    y = y | 0;
    return x + y | 0;
  }

  function square (x) {
    x = x | 0;
    return x * x | 0;
  }

  return {
    add: add,
    square: square
  };
}

WebAssembly是二进制字节码，因此运行速度更快、体积更小，但是有兼容性问题。

一、快速体验

// 在浏览器控制台输入下列代码，下面的一些列数字是WebAssembly 的二进制源码
WebAssembly.compile(new Uint8Array(`
  00 61 73 6d  01 00 00 00  01 0c 02 60  02 7f 7f 01
  7f 60 01 7f  01 7f 03 03  02 00 01 07  10 02 03 61
  64 64 00 00  06 73 71 75  61 72 65 00  01 0a 13 02
  08 00 20 00  20 01 6a 0f  0b 08 00 20  00 20 00 6c
  0f 0b`.trim().split(/[\s\r\n]+/g).map(str => parseInt(str, 16))
)).then(module => {
  const instance = new WebAssembly.Instance(module)
  const { add, square } = instance.exports

  console.log('2 + 4 =', add(2, 4))
  console.log('3^2 =', square(3))
  console.log('(2 + 5)^2 =', square(add(2 + 5)))
})

上边的二进制源码一行 16 个数，有 4 行零两个，一共有 66 个数；每个数都是 8 位无符号十六进制整数，一共占66Byte。把字符串转成ArrayBuffer，先将字符串分割成普通数组，然后将普通数组转成8位无符号整数的数组。如果WebAssembly.compile返回的Promise fulfilled了，resolve方法的第一个参数就是WebAssembly的模块对象，是WebAssembly.Module的实例。WebAssembly.Instance将模块对象转成WebAssembly实例，通过instance.exports可以拿到wasm代码输出的接口，剩下的代码就和普通javascript一样了。

只有通过js代码来编译、实例化才可以调用webAssembly的接口。WebAssembly更适合用于写模块，承接各种复杂的计算，如图像处理、3D运算、语音识别、视音频编码解码这种工作，主体程序还是要用javascript来写的。

二、安装环境
1、git
2、CMake
3、vscode／xcode
4、python。

三、编译Emscripten

git clone https://github.com/juj/emsdk.git
cd emsdk

# 适用于os系统
./emsdk install --build=Release sdk-incoming-64bit binaryen-master-64bit
./emsdk activate --global --build=Release sdk-incoming-64bit binaryen-master-64bit

# 该命令会经常用到
source ./emsdk_env.sh

四、运行代码

# 把cpp文件编译成wasm文件，html文件
emcc -o webAssembly/test6/hello.html webAssembly/test6/hello.c -O3 -s WASM= --shell-file webAssembly/test6/html_template/shell_minimal.html

# 使用一个支持WebAssembly的浏览器运行生成的html文件
emrun webAssembly/test6/hello.html

# 如果不知道命令选项的含义
emcc --help

五、小尝试
这里主要汇集了自己初学webAssembly练习的C++代码。

六、参考链接
https://developer.mozilla.org/zh-CN/docs/WebAssembly/C_to_wasm
http://www.ruanyifeng.com/blog/2017/09/asmjs_emscripten.html
https://segmentfault.com/a/1190000008402872
https://developer.mozilla.org/zh-CN/docs/WebAssembly/Using_the_JavaScript_API
http://webassembly.org/
https://cunzaizhuyi.github.io/WebAssembly-LinkError/
在线写webAssembly，https://webassembly.studio/?f=aakxyho2ho

秒客网

如何生成WebAssembly文件？

相关文章