Posted on by

利用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：開啟所有警告，便於識別代碼中潛在的問題。