Tag Archives: emscripten

将 Surreal Engine C++ 移植到 WebAssembly

在这篇文章中，我将描述如何将 Surreal Engine 游戏引擎移植到 WebAssembly。

超现实引擎–一个游戏引擎，实现了Unreal Engine 1的大部分功能，著名的游戏都使用这个引擎–虚幻竞技场 99、虚幻、杀出重围、不朽。它指的是主要在单线程执行环境中工作的经典引擎。

最初，我有一个想法，那就是承担一个我无法在任何合理时间内完成的项目，从而向我的 Twitch 粉丝表明，有些项目甚至是我也无法完成。在我的第一次直播中，我突然意识到使用 Emscripten 将 Surreal Engine C++ 移植到 WebAssembly 的任务是可行的。

Surreal Engine Emscripten Demo

一个月后，我可以在 WebAssembly 上演示我的前叉和引擎组装：
https://demensdeum.com/demos/SurrealEngine/

与原始版本一样，控制是使用键盘箭头进行的。接下来，我计划将其调整为移动控制 (tachi)，添加正确的光照和 Unreal Tournament 99 渲染的其他图形功能。

从哪里开始？

我想说的第一件事是，任何项目都可以使用 Emscripten 从 C++ 移植到 WebAssembly，唯一的问题是功能有多完整。选择一个库端口已经可用于 Emscripten 的项目；对于 Surreal Engine，你非常幸运，因为该引擎使用 SDL 2、OpenAL 库。它们都被移植到 Emscripten。不过，Vulkan 用作图形 API，目前无法用于 HTML5，实现 WebGPU 的工作正在进行中，但也处于草案阶段，也未知从 Vulkan 到 WebGPU 的进一步移植有多简单，完全标准化后。因此，我必须为 Surreal Engine 编写自己的基本 OpenGL-ES / WebGL 渲染器。

构建项目

在 Surreal Engine 中构建系统 – CMake，这也简化了移植，因为Emscripten 提供其原生构建器“ emcmake，emmake。
Surreal Engine 移植基于我最新的 WebGL/OpenGL ES 和 C++ 游戏代码，称为 Death-Mask，因此开发更加简单，我随身携带了所有必要的构建标志和代码示例。

CMakeLists.txt 中最重要的一点是 Emscripten 的构建标志，下面是项目文件中的示例：


-s MAX_WEBGL_VERSION=2 \

-s EXCEPTION_DEBUG \

-fexceptions \

--preload-file UnrealTournament/ \

--preload-file SurrealEngine.pk3 \

--bind \

--use-preload-plugins \

-Wall \

-Wextra \

-Werror=return-type \

-s USE_SDL=2 \

-s ASSERTIONS=1 \

-w \

-g4 \

-s DISABLE_EXCEPTION_CATCHING=0 \

-O3 \

--no-heap-copy \

-s ALLOW_MEMORY_GROWTH=1 \

-s EXIT_RUNTIME=1")

构建脚本本身：


emmake make -j 16

cp SurrealEngine.data /srv/http/SurrealEngine/SurrealEngine.data

cp SurrealEngine.js /srv/http/SurrealEngine/SurrealEngine.js

cp SurrealEngine.wasm /srv/http/SurrealEngine/SurrealEngine.wasm

cp ../buildScripts/Emscripten/index.html /srv/http/SurrealEngine/index.html

cp ../buildScripts/Emscripten/background.png /srv/http/SurrealEngine/background.png

接下来我们将准备索引.html ，其中包括项目文件系统预加载器。为了上传到网络，我使用了 Unreal Tournament Demo 版本 338。正如您从 CMake 文件中看到的，解压后的游戏文件夹已添加到构建目录中，并作为 Emscripten 的预加载文件进行链接。

主要代码更改

那就需要改变游戏的游戏循环，不能无限循环，这样会导致浏览器卡住，而是需要使用emscripten_set_main_loop，我在2017年的笔记中写过这个功能< a href="https://demensdeum.com/blog/ru/2017/03/29/porting-sdl-c-game-to-html5-emscripten/" rel="noopener" target="_blank">将 SDL C++ 游戏移植到 HTML5 (Emscripten)”
我们将退出 while 循环的代码更改为 if，然后在全局范围内显示包含游戏循环的游戏引擎的主类，并编写一个全局函数，该函数将从全局对象中调用游戏循环步骤：


#include <emscripten.h>

Engine *EMSCRIPTEN_GLOBAL_GAME_ENGINE = nullptr;

void emscripten_game_loop_step() {

	EMSCRIPTEN_GLOBAL_GAME_ENGINE->Run();

}

#endif

之后，您需要确保应用程序中没有后台线程；如果有，则准备将其重写为单线程执行，或者使用 Emscripten 中的 phtread 库。
Surreal Engine中的后台线程用于播放音乐，数据来自主引擎线程，有关当前曲目、是否需要播放音乐或是否缺少音乐，然后后台线程通过互斥体接收新状态并开始播放新音乐，或暂停。背景流还用于在播放期间缓冲音乐。
我尝试使用 pthread 为 Emscripten 构建 Surreal Engine，但没有成功，因为 SDL2 和 OpenAL 端口是在没有 pthread 支持的情况下构建的，而且我不想为了音乐而重建它们。因此，我使用循环将背景音乐流的功能转移到单线程执行。通过从 C++ 代码中删除 pthread 调用，我将缓冲和音乐播放移至主线程，这样就不会出现延迟，我将缓冲区增加了几秒钟。

接下来我会描述图形和声音的具体实现。

不支持 Vulkan！

是的，HTML5 不支持 Vulkan，尽管所有营销手册都将跨平台和广泛的平台支持作为 Vulkan 的主要优势。因此，我必须为简化的 OpenGL 类型编写自己的基本图形渲染器 – ES，它用在移动设备上，有时它不包含现代OpenGL的时尚功能，但它很好地移植到WebGL，这正是Emscripten所实现的。写了基本的tile渲染，bsp渲染，最简单的GUI显示，渲染模型+贴图，两周就完成了。这也许是该项目中最困难的部分。实现 Surreal Engine 渲染的全部功能还有很多工作要做，因此欢迎读者以代码和拉取请求的形式提供任何帮助。

支持 OpenAL！

幸运的是，Surreal Engine 使用 OpenAL 进行音频输出。在 OpenAL 中编写了一个简单的 hello world 并使用 Emscripten 在 WebAssembly 中将其组装后，我清楚地意识到一切是多么简单，然后我开始移植声音。
经过几个小时的调试，很明显 Emscripten 的 OpenAL 实现存在几个错误，例如，在初始化读取单通道数时，该方法返回无限数，并且在尝试初始化无限大小的向量后，C++崩溃并出现异常向量::length_error。
我们通过将单声道数量硬编码为 2048 来解决这个问题：


		alcGetIntegerv(alDevice, ALC_STEREO_SOURCES, 1, &stereoSources);



#if __EMSCRIPTEN__

		monoSources = 2048; // for some reason Emscripten's OpenAL gives infinite monoSources count, bug?

#endif

有网络吗？

Surreal Engine目前不支持在线游戏，支持与机器人一起玩，但我们需要有人为这些机器人编写AI。理论上，您可以使用Websockets在WebAssembly/Emscripten上实现网络游戏。

结论

总之，我想说，由于使用了 Emscripten 移植的库，以及我过去在 WebAssembly 中使用 C++ 实现游戏的经验，Surreal Engine 的移植非常顺利在 Emscripten 上。以下是有关该主题的知识来源和存储库的链接。
M-M-M-杀死怪物！

此外，如果您想帮助该项目，最好使用 WebGL/OpenGL ES 渲染代码，请在 Telegram 中给我写信：
https://t.me/demenscave

链接

https://demensdeum.com/demos/Sur​​realEngine/
https://github.com/demensdeum/SurrealEngine-Emscripten

https://github.com/dpjudas/SurrealEngine

ChromeDriver 的简单 Emscripten 自动测试

在这篇笔记中，我将描述为 Chrome 浏览器的 ChromeDriver 运行自动测试的实现，它运行使用 Emscripten 从 C++ 翻译而来的模块自动测试，读取控制台输出并返回测试结果。
首先你需要安装selenium，对于Python 3-Ubuntu，这是这样完成的：

pip3 install selenium

接下来，从官网下载ChromeDriver，例如将chromedriver放在/usr/local/bin下，然后就可以开始实现自动测试了。
下面我将给出自动测试代码，该代码启动 Chrome 浏览器，并在 Emscripten 上打开自动测试页面，检查是否存在文本“Window test successed”：

import time
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.common.desired_capabilities import DesiredCapabilities

capabilities = DesiredCapabilities.CHROME
capabilities['goog:loggingPrefs'] = { 'browser':'ALL' }
driver = webdriver.Chrome()
driver.get("http://localhost/windowInitializeTest/indexFullscreen.html")

time.sleep(2)

exitCode = 1

for entry in driver.get_log('browser'):
    if entry["source"] == "console-api":
        message = entry["message"]
        if "Window test succeded" in message:
            print("Test succeded")
            exitCode = 0

driver.close()
exit(exitCode)

将测试保存为 main.py 并运行 python3 main.py

构建一个具有 Emscripten 依赖项的项目

在这篇文章中，我将描述使用 Emscripten 构建一个由多个库组成的项目。
目前，Emscripten 不支持构建共享库，因此第一步是将所有库从 Shared 转移到 Static。 Emscripten 使用自己的包含文件，因此需要通过将符号链接从系统目录转发到 Emscripten 工具链来解决头文件的可见性问题：

ln -s /usr/local/include/FlameSteelFramework $EMSDK/fastcomp/emscripten/system/include/FlameSteelFramework

如果您使用的是 CMake，则需要在 add_library 方法的 CMakeLists.txt 文件中更改 SHARED->STATIC。您可以使用以下命令构建库/应用程序以进行进一步的静态链接：

emcmake cmake .
emmake make

接下来，您需要构建主应用程序，并在链接阶段指定 *.a 库文件。我无法指定相对路径；只有在 CMakeLists.txt 文件中指定完整路径后，构建才能正确完成：

elseif(EMSCRIPTEN)
target_link_libraries(${FSEGT_PROJECT_NAME} GL GLEW 
/home/demensdeum/Sources/cube-art-project-bootstrap/cube-art-project/sharedLib/libCubeArtProject.a 
/home/demensdeum/Sources/cube-art-project-bootstrap/FlameSteelFramework/FlameSteelEngineGameToolkitFSGL/libFlameSteelEngineGameToolkitFSGL.a 
/home/demensdeum/Sources/cube-art-project-bootstrap/FlameSteelFramework/FlameSteelEngineGameToolkit/libFlameSteelEngineGameToolkit.a 
/home/demensdeum/Sources/cube-art-project-bootstrap/FlameSteelFramework/FlameSteelCore/libFlameSteelCore.a 
/home/demensdeum/Sources/cube-art-project-bootstrap/FlameSteelFramework/FlameSteelBattleHorn/libFlameSteelBattleHorn.a 
/home/demensdeum/Sources/cube-art-project-bootstrap/FlameSteelFramework/FSGL/libFSGL.a 
/home/demensdeum/Sources/cube-art-project-bootstrap/FlameSteelFramework/FlameSteelCommonTraits/libFlameSteelCommonTraits.a)
else()

来源

https://emscripten.org/文档/compiling/Building-Projects.html#using-libraries

丢失 Emscripten 异常和正则表达式问题

丢失异常

Emscripten 的一个有趣功能：当通过 emscripten_set_main_loop 启动游戏循环时，您应该记住必须在循环方法中直接通过 try catch 重新添加异常处理，因为运行时丢失来自外部的 try catch 块。
最简单的方法是使用 javascript 警报在浏览器中显示错误文本：

            catch (const std::exception &exc)
            {
                const char *errorText = exc.what();
                cout << "Exception: " << errorText << "; Stop execution" << endl;

                EM_ASM_(
                {
                    var errorText = UTF8ToString($0);
                    alert(errorText);

                }, errorText);

                abort();

正则表达式太复杂

如果 regex 的 std 实现认为正则表达式过于复杂，则可能会抛出 error_complexity 异常。目前emscripten的实现中就出现了这种情况，所以我建议您通过正则表达式来实现解析测试，或者使用第三方正则表达式实现。