在上一个asm.js版的光线追踪渲染器开发完成不到一周的时间，我就惊讶的发现，在3月份，四大主流浏览器(chrome,firefox,webkit,edge)都完成了对webassembly的支持。我也赶时髦，完成了wasm版的光线追踪渲染器。项目代码。

开发环境搭建

       最简单的开发方式就是继续使用emscripten，关于emscripten用法我写过很多文章，不赘述了。现在直接讲一下给emscripten添加wasm支持的方法。

       特别说明一下，如果想要在Windows下编译支持wasm的emscripten，需要Visual Studio 2015 Community with Update 3或者更新版本的VC++编译器(minGW不行)。还需要安装cmake。还有git这个相信已经是所有开发者已经必备的东西。

$ git clone https://github.com/juj/emsdk.git
$ cd emsdk
$ ./emsdk install sdk-incoming-64bit binaryen-master-64bit
$ ./emsdk activate sdk-incoming-64bit binaryen-master-64bit

       启动前记得激活环境变量

$ source ./emsdk_env.sh

使用

       支持wasm的emscripten本质还是emscripten，所以过去emscripten所有用法都继续可以使用。唯一不同的地方，就是如果想要生成代码使用wasm而非asm.js，需要在emcc的命令行参数中添加-s WASM=1。

       最简单实例：

$ mkdir hello
$ cd hello
$ echo '#include <stdio.h>' > hello.c
$ echo 'int main(int argc, char ** argv) {' >> hello.c
$ echo 'printf("Hello, world!\n");' >> hello.c
$ echo '}' >> hello.c
$ emcc hello.c -s WASM=1 -o hello.html

测试

       浏览器不能通过file://的方式直接访问wasm文件，要测试，也需要架server。emsdk已经内置了emrun命令用来启动server。

$ emrun --no_browser --port 8080 .

其他工具

       webassembly官方还有两个重要的工具，分别是

  • WABT - The WebAssembly Binary Toolkit
  • Binaryen - Compiler and toolchain infrastructure

WABT: The WebAssembly Binary Toolkit

       WABT提供了三个重要命令：

  • wasm2wast - 将wasm文件转换成wast文件
  • wast2wasm - 将wast文件编译成wasm文件
  • wasm-interp - 基于命令行的wasm解释器

wasm是WebAssembly的二进制格式，wast是WebAssembly的纯文本格式，开发者编写纯文本格式，在开发环境则可以使用二进制格式，有效保护代码

Binaryen

       Binaryen提供了三个命令把三种不同文件编译成wasm：

  • asm2wasm - 把asm.js文件编译成wasm
  • s2wasm - 把LLVM WebAssembly’s 后端的.s文件编译成wasm
  • mir2wasm - 把Rust MIR文件编译成wasm