Web 3D是否须要WebAssembly?

你们好，本文讨论了Web 3D是否须要WebAssembly，结论是：
对于使用原生3D技术的程序员，须要；
对于使用Javascript语言的前端程序员，不须要，有其它方法能够达到接近WebAssdembly的性能。

WebAssembly是什么？

WebAssembly简称wasm，是一种数据格式，对应的文件后缀名为.wasm，文件由字节码组成；
而Javascript对应的文件后缀名为.js，文件由字符串组成。

二者均可以在浏览器上直接运行。

一份典型的.wasm 文件以下所示（引用自恕我直言，90% 的应用场景都不须要用WebAssembly！）：

00000000: 0061 736d 0100 0000 0108 0260 017f 0060  .asm.......`...`
00000010: 0000 0215 0203 656e 7603 6d65 6d02 0001  ......env.mem...
00000020: 026a 7303 6c6f 6700 0003 0201 0107 0b01  .js.log.........
00000030: 0765 7861 6d70 6c65 0001 0a23 0121 0041  .example...#.!.A
00000040: 0042 c8ca b1e3 f68d c8ab ef00 3703 0041  .B..........7..A
00000050: 0841 f2d8 918b 0236 0200 4100 1000 0b    .A.....6..A....

能够经过Emscripten等编译器，将原生语言（如C++等）编译为wasm程序。

比较wasm与js

优势

对于使用Javascript语言的前端程序员，wasm的优势为：

• 体积更小

白鹭引擎团队测试过：

将大约300k左右（压缩后）JavaScript逻辑改用WebAssembly重写后，体积仅有90k左右。虽然使用WebAssembly须要引入一个50-100k的JavaScript类库做为基础设施，可是整体来看资源尺寸的优点仍是很大的。

• 执行性能高（可是经过JIT优化，js程序的执行性能接近wasm）

wasm属于AOT: Ahead-of-Time compilation，即在执行前，经过编译生成浏览器可以直接执行的、优化过的字节码，这样浏览器在执行它时不须要进行编译，性能高。

可是，由于浏览器支持JIT: Just-in-Time compilation，因此js程序的执行性能接近wasm。
浏览器在首次执行时，对性能热点的js代码进行编译，优化为字节码；而后从下次执行开始，直接执行字节码。

对于Web 3D程序，性能热点的逻辑会在主循环中屡次被执行。因此只会在首次执行时花费一些时间进行编译，之后执行时性能就与wasm差很少了。

要提升js代码在JIT中的性能，须要保证类型的健壮性，如不要轻易改变变量的类型

由于js是弱类型和动态语言，直接写js代码很容易形成类型混乱，下降JIT的性能，因此咱们应该使用编译为js的强类型语言（如Reason语言），经过编译检查来保证类型的健壮性。

• 更加安全

由于wasm文件是字节码，没法直接阅读，因此增长了安全性。

缺点

对于使用Javascript语言的前端程序员，wasm的缺点为：

• 须要熟悉C++等原生语言

由于wasm是由原生语言编译而来，因此须要程序员学习原生语言，增长了学习成本

• 不能直接操做原生图形API（如OpenGL），只能经过js调用WebGL

因此与其在wasm中调用webgl，还不如直接用js来调用webgl，这样更方便，性能应该也差很少
参考资料
How to use WebGL shaders in WebAssembly：

When compiling, emscripten will map our code to the WebGL API.

WebAssembly 的出现是否会取代 JavaScript？ - doodlewind的回答 - 知乎：

调 OpenGL 都要走回 JS 到 WebGL

• 增长了维护成本

咱们一般用这种方案来应用wasm：一部分逻辑用wasm实现，负责须要高性能的密集计算；另外一部分逻辑用js实现，负责dom操做和webgl调用。
这样就须要同时维护wasm和js代码，增长了成本。

对于使用原生3D技术（如基于C++语言和DirectX、OpenGL等原生图形API）的程序员

能够用wasm技术，将3D程序编译为wasm文件，从而原生3D应用搬到浏览器上运行

对于使用Javascript语言的前端程序员

不须要用wasm技术，而是经过下面的方法来得到接近wasm的性能：
一、使用强类型语言（如Reason）编译为js。这样可提升js代码在JIT中的性能
二、把须要高性能的计算逻辑，放到worker线程中进行计算；或者使用WebGPU的compute shader，将其从CPU端移到GPU端进行计算，大幅提高性能。
关于WebGPU，能够参考 WebGPU学习

参考资料

恕我直言，90% 的应用场景都不须要用WebAssembly！
如何评论浏览器最新的 WebAssembly 字节码技术？ - 罗志宇的回答 - 知乎
WebAssembly在白鹭引擎5.0中的实践