大家好，本文討論了Web 3D是否需要WebAssembly，結論是： 對于使用原生3D技術的程序員，需要； 對于使用Javascript語言的前端程序員，不需要，有其它方法可以達到接近WebAssdembly的性能。

大家好，本文討論了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，即在執行前，通過編譯生成瀏覽器能夠直接執行的、優化過的字節碼，這樣瀏覽器在執行它時不需要進行編譯，性能高。
  但是，因為chrome瀏覽器的v8引擎支持JIT: Just-in-Time compilation，所以js程序的執行性能接近wasm（對于Web 3D程序，性能熱點的邏輯會在主循環中多次被執行。而v8會在多次執行后，確定熱點代碼，會將其優化為字節碼；然后從下次執行開始，直接執行字節碼）
  要提高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的性能：
1、使用強類型語言（如Reason）編譯為js。這樣可提高js代碼在JIT中的性能
2、把需要高性能的計算邏輯，放到worker線程中進行計算；或者使用WebGPU的compute shader，將其從CPU端移到GPU端進行計算，大幅提升性能。
關于WebGPU，可以參考 WebGPU學習

參考資料

恕我直言，90% 的應用場景都不需要用WebAssembly！
如何評論瀏覽器最新的 WebAssembly 字節碼技術？ - 羅志宇的回答 - 知乎
WebAssembly在白鷺引擎5.0中的實踐