In this note, I will describe the method of assembling BGFX applications for the web (Webassembly) via Emscripten.
The installation platform is Linux X86-64, such as Arch Linux.
To begin with, we will install the EMSCRIPEN version 3.1.51, otherwise you will not succeed, everything is due to changes in the type of dynamic libraries in the latest version of EMScripten.You can read more here:
https://github.com/bkaradzic/bgfx/discussions/3266
This is done like this:
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
We will collect the BGFX for Webassembly – Emscripten:
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
As a result, in the .Build folder you will have Bitcode files with the .bc extension that will need to be licked with your BGFX application.
Should be bgfx.bc, bx.bc, bimg.bc;In different assemblies, a different name for these files, depending on the type of assembly (Release/Debug)
Add to cmakelists.txt the file with .bc files, for example, absolute ways to files from the BGFX-Experiment project:
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)
Now change National Window Handle in Platform Data on the initialization of BGFX:
bgfx::PlatformData platformData{};
platformData.context = NULL;
platformData.backBuffer = NULL;
platformData.backBufferDS = NULL;
platformData.nwh = (void*)"#canvas";
You also need to replace the type of render with 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");
}
Cross -sleeping GLSL shaders under 120:
shaderc -f "VertexShader.vs" -o "VertexShader.glsl" --type "v" -p "120"
shaderc -f "FragmentShader.fs" -o "FragmentShader.glsl" --type "f" -p "120"
EU-but .GLSL Files must be added to cmakelists.txt as -preload-file:
set(CMAKE_CXX_FLAGS ... <Остальная часть>
--preload-file VertexShader.glsl \
--preload-file FragmentShader.glsl \
It remains to replace the main cycle of the render in your application with While to call the function through EMSCRIPTEN_SETN_MAIN_LOOP.
You can read about this here:
https://demensdeum.com/blog/ru/2017/03/29/porting-sdl-c-game-to-html5-emscripten/
Next, collect your EMSCRIPTEN project for the usual one, everything should work.
Of the interesting – in the assembly EMSCRIPTEN 3.1.51 it seems that there is no Openal (or only mine).
The source code of the project that is correctly assembled with BGFX and 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