Neste post descreverei uma maneira de construir aplicações bgfx para a web (WebAssembly) usando Emscripten.
A plataforma de instalação é Linux x86-64, por exemplo Arch Linux.
Primeiro, vamos instalar o Emscripten versão 3.1.51, caso contrário você não terá sucesso, tudo por causa da mudança no tipo de bibliotecas dinâmicas na versão mais recente do Emscripten. Você pode ler mais aqui:
https://github.com/bkaradzic/bgfx/discussions/3266
Isso é feito assim:
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
Vamos montar o bgfx para WebAssembly – Escrito:
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
Como resultado, na pasta .build você terá arquivos bitcode com extensão .bc, que precisarão ser vinculados ao seu aplicativo bgfx.
Deve ser bgfx.bc, bx.bc, bimg.bc; diferentes assemblies têm nomes diferentes para esses arquivos, dependendo do tipo de montagem (release/debug)
Adicione um link ao arquivo CMakeLists.txt com arquivos .bc, por exemplo, caminhos absolutos para arquivos do projeto 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)
Agora altere o identificador da janela nativa nos dados da plataforma para inicialização do bgfx:
bgfx::PlatformData platformData{};
platformData.context = NULL;
platformData.backBuffer = NULL;
platformData.backBufferDS = NULL;
platformData.nwh = (void*)"#canvas";
Você também precisa alterar o tipo de renderização para 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");
}
Recompilar shaders GLSL para 120:
shaderc -f "VertexShader.vs" -o "VertexShader.glsl" --type "v" -p "120"
shaderc -f "FragmentShader.fs" -o "FragmentShader.glsl" --type "f" -p "120"
Sim, mas os arquivos .glsl devem ser adicionados ao CMakeLists.txt como –preload-file:
set(CMAKE_CXX_FLAGS ... <Остальная часть>
--preload-file VertexShader.glsl \
--preload-file FragmentShader.glsl \
Resta substituir o loop de renderização principal em seu aplicativo por uma chamada de função while via emscripten_set_main_loop.
Você pode ler sobre isso aqui:
https ://demensdeum.com/blog/ru/2017/03/29/porting-sdl-c-game-to-html5-emscripten/
Em seguida, monte seu projeto Emscripten normalmente, tudo deve funcionar.
Interessante – a compilação do Emscripten 3.1.51 parece estar faltando OpenAL (ou apenas eu).
Código fonte do projeto que compila corretamente com bgfx e Emscripten:
https://github.com/demensdeum/ bgfx-experiments/tree/main/2-emscripten-build
Fontes
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
