用 Emscripten 在浏览器中展示一个 C++ 引擎

为什么我要把引擎搬到浏览器中

对于引擎开发者来说，“如何展示你的工作成果”本身就是一个工程问题。传统方式通常只有三种：录屏视频、截图、分享Demo程序。这些方式都有明显问题：视频无法交互，截图无法验证，Demo需要环境配置。

而浏览器具备一个独特优势：它是几乎所有读者，同行都能“立刻运行”的平台。如果一个物理引擎Demo能在浏览器里直接跑起来，那么它的可信度、完成度和技术深度，都会被立刻感知。这正是我选择Emscripten + WebAssembly的原因。

Emscripten运行原理

一般物理引擎是用C++语言编写，可以在Windows、Mac、Linux 上能运行，无法直接在浏览器中运行。通过Emscripten工具链，可以把C++代码翻译成浏览器能理解的语言（WASM或asm.js）。同时，提供一些“适配工具”，帮浏览器运行一些在电脑上才有的功能（比如文件读写、窗口绘制、键盘鼠标输入）。编译完成后，直接打开.html文件就可以运行，非常方便。

Emscripten的安装配置

1. 下载Emsdk项目。

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk

2. 安装 Emscripten,更新到最新。

emsdk install latest
emsdk activate latest

3. 配置环境变量。

// 仅当前终端有效
emsdk_env.bat
// 永久生效
emsdk activate latest --permanent

4. 验证是否成功

emcc -v
emcmake --version

安装Ninjia和CMake

1. 通过命令安装Ninjia：

winget install Ninja-build.Ninja

卸载：

winget uninstall Ninja-build.Ninja

2. 验证是否安装成功：

ninja --version

3. CMake下载地址：https://cmake.org/

CMakeLists.txt配置

如果需要部署到Github Page上，需要主页为index.html。

if(CMAKE_SYSTEM_NAME STREQUAL "Emscripten")
    set_target_properties(${PROJECT_NAME} PROPERTIES
            OUTPUT_NAME "index"
            SUFFIX ".html"
    )

    target_link_options(${PROJECT_NAME} PRIVATE
            -O3
            -sUSE_SDL=2
            -sUSE_WEBGL2=1
            -sALLOW_MEMORY_GROWTH=1
            -sLEGACY_GL_EMULATION=1 // ？是否可以关闭
            --shell-file=${CMAKE_SOURCE_DIR}/source/shell.html
    )
    ...
endif()

编译

创建一个文件夹，然后编译的结果放在build-web中。

mkdir build-web
cd build-web
emcmake cmake .. -G Ninja
ninja

预览

使用下面的命令进行查看

emrun index.html

Github Page部署

1. 新建一个新仓库PhysicsEngineWeb。
2. 上传build-web的代码到根目录
3. 启用Github Page，配置目录位置到根目录。
4. 自动部署后，使用https://XXX.github.io/PhysicsEngineWeb进行展示。