Dans cet article, je décrirai une manière de créer des applications bgfx pour le Web (WebAssembly) à l’aide d’Emscripten.
La plate-forme d’installation est Linux x86-64, par exemple Arch Linux.
Tout d’abord, installons Emscripten version 3.1.51, sinon vous ne réussirez pas, tout cela à cause du changement de type de bibliothèques dynamiques dans la dernière version d’Emscripten. Vous pouvez en savoir plus ici :
https://github.com/bkaradzic/bgfx/discussions/3266
Cela se fait comme ceci :
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
./emsdk install 3.1.51
./emsdk activate 3.1.51
source ./emsdk_env.sh
Assemblons bgfx pour WebAssembly – Texte :
mkdir bgfx-build-test
cd bgfx-build-test
git clone https://github.com/bkaradzic/bx.git
git clone https://github.com/bkaradzic/bimg.git
git clone https://github.com/bkaradzic/bgfx.git
cd bgfx
emmake make wasm-debug
Par conséquent, dans le dossier .build, vous aurez des fichiers bitcode avec une extension .bc, qui devront être liés à votre application bgfx.
Doit être bgfx.bc, bx.bc, bimg.bc ; différents assemblys ont des noms différents pour ces fichiers, selon le type d’assembly (version/débogage)
Ajoutez un lien vers le fichier CMakeLists.txt avec les fichiers .bc, par exemple, les chemins absolus vers les fichiers du projet bgfx-experiments :
target_link_libraries(${PROJECT_NAME} SDL2 GL /home/demensdeum_stream/Sources/bgfx-build/bgfx/.build/wasm/bin/bgfxDebug.bc /home/demensdeum_stream/Sources/bgfx-build/bgfx/.build/wasm/bin/bxDebug.bc /home/demensdeum_stream/Sources/bgfx-build/bgfx/.build/wasm/bin/bimgDebug.bc)
Maintenant, remplacez le handle de fenêtre natif dans les données de la plateforme par l’initialisation bgfx :
bgfx::PlatformData platformData{};
platformData.context = NULL;
platformData.backBuffer = NULL;
platformData.backBufferDS = NULL;
platformData.nwh = (void*)"#canvas";
Vous devez également changer le type de rendu en OpenGL :
bgfx::Init init;
init.type = bgfx::RendererType::OpenGL;
init.resolution.width = screenWidth;
init.resolution.height = screenHeight;
init.resolution.reset = BGFX_RESET_VSYNC;
init.platformData = platformData;
if (!bgfx::init(init))
{
throw std::runtime_error("Failed to initialize bgfx");
}
Recompiler les shaders GLSL à 120 :
shaderc -f "VertexShader.vs" -o "VertexShader.glsl" --type "v" -p "120"
shaderc -f "FragmentShader.fs" -o "FragmentShader.glsl" --type "f" -p "120"
Oui, mais les fichiers .glsl doivent être ajoutés à CMakeLists.txt en tant que « fichier de préchargement :
set(CMAKE_CXX_FLAGS ... <Остальная часть>
--preload-file VertexShader.glsl \
--preload-file FragmentShader.glsl \
Il reste à remplacer la boucle de rendu principale de votre application par un appel de fonction while via emscripten_set_main_loop.
Vous pouvez en savoir plus ici :
https https://demensdeum.com/blog/ru/2017/03/29/porting-sdl-c-game-to-html5-emscripten/
Ensuite, assemblez votre projet Emscripten comme d’habitude, tout devrait fonctionner.
Intéressant – la version Emscripten 3.1.51 semble manquer d’OpenAL (ou juste de moi).
Code source du projet qui se compile correctement avec bgfx et Emscripten :
https://github.com/demensdeum/ bgfx-experiments/tree/main/2-emscripten-build
Sources
https://github.com/bkaradzic/bgfx/discussions/3266
https://bkaradzic.github.io/bgfx/build.html
https://emscripten.org/docs/getting_started/downloads.html
https ://demensdeum.com/blog/ru/2017/03/29/porting-sdl-c-game-to-html5-emscripten/
https://llvm.org/docs/BitCodeFormat.html
