利用emscripten來編譯WebAssembly 

WebAssembly 是甚麼

WebAssembly(Wasm)是一種二進制格式的指令集,用於在網頁瀏覽器中高效地執行程式碼。它由 W3C 標準組織制定,目的是提供一種高性能、跨平台的執行環境,讓開發者可以在網頁上運行接近原生效能的應用程式,尤其是使用 C、C++、Rust 等語言編寫的程式碼。

以下是 WebAssembly 的主要特點:

  1. 高效能:WebAssembly 使用二進制格式,這使得程式在瀏覽器中能夠快速加載和執行,效能接近原生應用(如桌面程式)。它的運行效率遠超 JavaScript,特別適合計算密集型的應用,如遊戲、圖形處理、數學計算等。
  2. 跨平台:WebAssembly 可以在所有現代主流瀏覽器中運行(如 Chrome、Firefox、Safari 和 Edge),並且它不依賴於具體的操作系統或硬體架構,確保跨平台兼容性。無論在桌面、移動設備還是其他嵌入式設備上,只要有瀏覽器支持,Wasm 程式都可以執行。
  3. 語言無關:雖然 WebAssembly 最初是為了 C、C++ 和 Rust 這些高效能語言設計的,但理論上任何語言都可以編譯成 WebAssembly。這使得許多非 JavaScript 語言的開發者可以將他們的程式碼移植到網頁上運行。
  4. 與 JavaScript 互操作:WebAssembly 可以與 JavaScript 互相調用,讓開發者在不拋棄現有 JavaScript 代碼的情況下,把 WebAssembly 作為性能密集型任務的輔助工具。JavaScript 可以用來處理前端邏輯,而 WebAssembly 則負責複雜的數據處理或計算任務。
  5. 安全性:WebAssembly 運行在瀏覽器的沙盒環境中,這意味著它繼承了網頁應用的安全模型,無法直接訪問用戶的系統或資料,確保了安全性。

WebAssembly 是一種讓網頁能夠運行接近原生應用效能的技術,特別適合對性能要求較高的應用,同時保持了跨平台的便利性。

WebAssembly 的應用場景

  • 遊戲開發:開發者可以將原生遊戲引擎(如 Unity、Unreal)編譯成 WebAssembly,從而在瀏覽器中直接運行高效能的 3D 遊戲。
  • 視頻處理和圖像處理:如實時編碼、解碼或濾鏡應用,能夠大幅提升處理速度。
  • 數據密集型應用:如科學計算、機器學習模型運行等,能夠在網頁端完成重度計算任務。

使用Emscripten將C專案編譯為WebAssembly

Emscripten 是一個開源編譯器工具,可以將用 C 和 C++ 編寫的程式碼編譯成 WebAssembly(.wasm)或 JavaScript,使這些程式能夠在瀏覽器中運行。它的主要目的是讓開發者能夠將桌面應用程式、遊戲或其他基於 C/C++ 的軟體移植到網頁環境中。

具體來說,Emscripten 的功能有以下幾個重點:

  1. 編譯到 WebAssembly:Emscripten 可以將 C/C++ 程式編譯成 WebAssembly(Wasm),這是一種高效的二進位格式,專為瀏覽器和其他環境中的快速執行而設計。Wasm 比 JavaScript 執行效率更高,特別適合需要高性能的應用。
  2. 編譯到 JavaScript:除了 WebAssembly,Emscripten 還可以將 C/C++ 程式編譯成 asm.js,這是一種高度優化的 JavaScript 子集,主要用於在沒有 WebAssembly 支援的舊瀏覽器上運行。
  3. 跨平台支持:Emscripten 支援多種系統函式庫和 API(如 POSIX、OpenGL 等),這使得在桌面應用中常用的功能也能在網頁中運行,減少了移植工作的難度。
  4. 使用 LLVM 編譯框架:Emscripten 基於 LLVM 編譯架構,這使得它能夠將編譯過程標準化,並且能很好地支援現代 C 和 C++ 標準。

Emscripten安裝流程

下載檔案

https://github.com/msys2/msys2-installer/releases/download/2024-01-13/msys2-x86_64-20240113.exe

開啟模擬器

開啟ucrt64.exe

cd /D/Git/lbde265/

安裝所需套件

pacman -Syu
pacman -S python3 clang cmake git make autoconf automake gcc
pacman -S mingw-w64-ucrt-x86_64-nodejs
pacman -S mingw-w64-ucrt-x86_64-gcc
pacman -S mingw-w64-ucrt-x86_64-emscripten
pacman -S base-devel mingw-w64-x86_64-toolchain

安裝Emscripten

nano ~/.bashrc
export EMSDK="/D/Git/lbde265/emsdk"
export PATH="$PATH:/D/Git/lbde265/emsdk"
source ~/.bashrc

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install latest
./emsdk activate latest --permanent
source ./emsdk_env.sh

nano ~/.bashrc
export PATH="$PATH:/d/Git/lbde265/emsdk/upstream/emscripten"
export PATH="$PATH:/d/Git/lbde265/emsdk"
export PATH="$PATH:/c/msys64/ucrt64/bin"
export PATH="$PATH:/c/msys64/usr/local/bin"
export PATH="$PATH:/c/msys64/usr/bin"
export PATH="$PATH:/c/Windows/System32"
export PATH="$PATH:/c/Windows"
export PATH="$PATH:/c/Windows/System32/Wbem"
export PATH="$PATH:/c/Windows/System32/WindowsPowerShell/v1.0/"
export PATH="$PATH:/c/msys64/usr/bin/site_perl"
export PATH="$PATH:/c/msys64/usr/bin/vendor_perl"
export PATH="$PATH:/c/msys64/usr/bin/core_perl"
source ~/.bashrc

測試

emcc -v

安裝libde265.js

git clone https://github.com/strukturag/libde265.js.git
chmod +x ./configure
sh build.sh

wget https://github.com/strukturag/libde265/releases/download/v1.0.15/libde265-1.0.15.tar.gz
tar xzf libde265-1.0.15.tar.gz
cd libde265-1.0.15
./configure --disable-sse --disable-dec265 --disable-sherlock265 --enable-log-error --enable-log-info --enable-log-trace
emmake make

———->引用 gcc 或 g++ 的行。對於 Emscripten,您需要將它們替換為 emcc 或 em++。(子目錄也要改)

如果您要針對 WebAssembly 進行編譯,您需要使用 Emscripten 編譯器(emcc 或 em++)代替傳統的 gcc(C 編譯器)或 g++(C++ 編譯器)。


———->改成CFLAGS = -g -O2 -Wall

CFLAGS 是編譯時傳給 C 編譯器的選項。這裡的選項有:

  • -g:產生調試信息,便於使用調試工具。
  • -O2:啟用優化等級 2,使生成的程式碼更高效。
  • -Wall:開啟所有警告,便於識別代碼中潛在的問題。

編譯AV1的WebAssembly

https://github.com/GoogleChromeLabs/wasm-av1

原本官方的教學是使用

make

但是這樣會失敗

應該要使用

emcmake cmake ./third_party/aom -DAOM_TARGET_CPU=generic
emmake make

17年資歷女工程師,專精於動畫、影像辨識以及即時串流程式開發。經常組織活動,邀請優秀的女性分享她們的技術專長,並在眾多場合分享自己的技術知識,也活躍於非營利組織,辦理活動來支持特殊兒及其家庭。期待用技術改變世界。