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中的實踐