8 個 WebAssembly 應用案例直擊 讓遊戲引擎快三倍

摘要: WebAssembly 都在哪些場景中應用了？不妨從這 8 個 WebAssembly 應用一探究竟！

目前 WebAssembly 已經開始在哪些場景中應用了？不妨從這 8 個 WebAssembly 應用一探究竟！

事實上，WebAssembly 最大的優點莫過於可大幅度提升 Javascript 的性能。WebAssembly 的設計目標：定義一個可移植，體積緊湊，載入迅速的二進位格式為編譯目標，而此二進位格式文件將可以在各種平台（包括移動設備和物聯網設備）上被編譯，然後發揮通用的硬體性能以原生應用的速度運行。

除了瀏覽器開發者和遊戲開發者大力支持 WebAssembly 外，許多需要提升性能表現的大型網頁應用或線上工具，都可從 WebAssembly 的超快運行速度中受益。那麼目前 WebAssembly 已經開始應用在哪些場景了呢？我們不妨從下面 8 個 WebAssembly 應用一探究竟。其中，有些應用已在 GitHub 上提供源碼，可供我們參考，以打造自己的 WebAssembly 應用。

1. TeaVM — 將 JVM 位元組碼翻譯成 JavaScript 和 WebAssembly

TeaVM 是一個 AOT 編譯器（翻譯器），可將 JVM 位元組碼翻譯成 JavaScript 或 WebAssembly 格式，它和著名的 Google Web Tooklit(GWT) 有一定相似之處，但必須指出 TeaVM 並不需要 Java 源代碼，而只需要 class 文件（JVM 位元組碼）。所以它能成功地用於 Kotlin 和 Scala 等基於 JVM 的語言。

TeaVM 在主頁上的自我描述為，給不想學習 JavaScript 技術，但又想要進行 Web 前端開發的 Java 開發者的一個強大工具。所以，TeaVM 除了可以讓 Java 開發者進行前端開發工作外，也能整合舊的 Java 後台開發基礎框架。

GitHub 地址：https://github.com/konsoletyper/teavm

2. Figma — 基於瀏覽器的多人實時協作 UI 設計工具

Figma 稱得上是一款新晉的設計神器，它以瀏覽器為基礎環境，是一個用於進行各種設計的多人實時協作工具，正因為它基於瀏覽器，所以支持 Windows、macOS 以及 Linux 平台，並且有 iOS 端的預覽工具。

除了實時協作，Figma 還有版本控制、矢量網路(Vector Network)、全平台適配等一些很棒的特性。此外，我們都知道 UI 設計工作必須要經常處理體積巨大的設計文件，所以不難發現讀取速度以及性能對 Figma 的重要性。

過去的 Figma 使用 Asm.js 來加快文件讀取速度，現在改用 WebAssembly 技術後，這套多功能 UI 設計工具的運行速度又再飆升 3 倍。

雖然這是一款收費產品，但提供了免費體驗版。傳送門：https://www.figma.com

附註：asm.js 由 Mozilla 提出，屬於 JavaScript 的一個子集，主要是為了解決 JavaScript 的執行效率問題，可以更大程度的優化以提高執行速度。

3. Google Earth — 支持各大瀏覽器的 3D 地圖，而且運行流暢

2017年10月底，谷歌開始支持讓 Google Earth 在 Firefox 上運行，其中的關鍵就是使用了 WebAssembly。

在 WebAssembly 尚未問世時，能讓代碼在瀏覽器原生執行的技術除了 Asm.js 外，還有谷歌自家的 Native Client。而在谷歌選擇後者之下，它也讓 Google Earth 只能在 Chrome 瀏覽器中運行。但隨著主流瀏覽器相繼支持 WebAssembly 的情況下，Google Earth 團隊也承諾，要開始從 Native Client 遷移到 WebAssembly。

Google Earth：https://www.google.com/earth/

4. Magnum — 跨平台的 OpenGL 圖形引擎

Magnum 是一款輕量級和模塊化的遊戲、數據可視化 OpenGL 圖形處理引擎，支持 C++11/C++14。桌面環境一共支持 Linux、Windows 及 Mac，移動環境也支持了 iOS 和 Android，並且整合了嵌入式 Linux，而在網頁環境則必須通過編譯器 Emscripten 將代碼編譯成 Asm.js、WebAssembly 格式。該工具所支持的圖片 API，包含了 OpenGL、OpenGL ES 及 WebGL。

GitHub 地址：https://github.com/mosra/magnum

5. Egret Engine — 最受歡迎的 HTML 5 遊戲引擎，讓遊戲引擎快三倍

Egret Engine 是白鷺科技開發的知名遊戲引擎，它是遵循 HTML 5 標準的 2D、3D 引擎，解決了 HTML 5 性能問題及碎片化問題，靈活地滿足開發者開發 2D 或 3D 遊戲的需求，並有著極強的跨平台運行能力。

在2017年5月時，白鷺引擎宣布開始支持 WebAssembly，而利用 WebAssembly，白鷺引擎可以將 HTML 5 代碼編譯為機器碼運行，讓遊戲運行性能提升 300%。若使用者瀏覽器不支持 WebAssembly，該引擎也會自動轉換成 Java 版本。中國熱門手游，如：莽荒紀同名手游、三生三世十里桃花同名手游、貓來了、夢道、坦克風雲等都採用了 Egret Engine。

GitHub 地址：https://github.com/egret-labs/egret-core/

6. Blazor — 讓 .NET 代碼也能在瀏覽器運行

通過 WebAssembly 或 Asm.js 將 Mono Runtime 編譯處理後，開源 UI 框架 Blazor 可以讓 .NET 代碼在瀏覽器環境中運行，而習慣 ASP.NET Razor 語法的開發者，仍可以繼續沿用習慣的開發模式。

Razor 會自動檢測開發者的瀏覽器是否支持 WebAssembly，如果不支持，該工具也會自動轉換成 Asm.js。不過目前該工具仍然屬於實驗階段，尚未支持正式環境的構建、調試功能。

GitHub 地址：https://github.com/SteveSanderson/Blazor

7. Web-DSP — 使用瀏覽器就能即時製作多媒體影音特效

Web-DSP 是一個在瀏覽器上運行的多媒體影音處理函數庫，其目標是打造各類基本元件，讓開發者可以在瀏覽器上處理影音等多媒體文件。而該工具的函數庫是以 C++ 編寫的，並且編譯成 WebAssembly 執行，藉此讓 JavaScript 開發者也能使用。

該工具開發者也展示了使用 WebAssembly 的圖像編輯器，在播放視頻的同時，使用者也可以即時選擇套用各項效果，如負片、灰階、噪點、銳化等處理。

GitHub 地址：https://github.com/shamadee/web-dsp

8. Walt — 用 JavaScript 語法也能快速開發原生的極速應用

目前，在多數網頁開發者尚未熟悉使用 Asm.js，WebAssembly 技術的情況下，有一款叫做 Walt 的工具或許可以幫助到他們，目的是讓網頁開發者可以不用接觸 C、C++ 或者 Rust 語言，繼續使用 JavaScript 語法，來打造出接近機器碼效率的網頁應用。此外 Walt 也不需要依靠 LLVM 編譯器或者其他二進位轉換工具，可以直接將源代碼編譯成 WebAssembly 格式。

GitHub 地址：https://github.com/ballercat/walt

參考：https://www.ithome.com.tw/news/120813

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！