{"id":3609,"date":"2024-08-19T21:14:25","date_gmt":"2024-08-19T18:14:25","guid":{"rendered":"https:\/\/demensdeum.com\/blog\/2024\/08\/19\/bgfx-emscripten\/"},"modified":"2024-12-16T22:32:13","modified_gmt":"2024-12-16T19:32:13","slug":"bgfx-emscripten","status":"publish","type":"post","link":"https:\/\/demensdeum.com\/blog\/de\/2024\/08\/19\/bgfx-emscripten\/","title":{"rendered":"Erstellen einer bgfx-Emscripten-Anwendung"},"content":{"rendered":"

In diesem Beitrag beschreibe ich eine M\u00f6glichkeit, BGFX-Anwendungen f\u00fcr das Web (WebAssembly) mit Emscripten zu erstellen.<\/p>\n

Die Installationsplattform ist Linux x86-64, zum Beispiel Arch Linux.<\/p>\n

Lassen Sie uns zun\u00e4chst Emscripten Version 3.1.51 installieren, sonst werden Sie keinen Erfolg haben, und zwar aufgrund der \u00c4nderung des Typs der dynamischen Bibliotheken in der neuesten Version von Emscripten. Mehr k\u00f6nnen Sie hier lesen:
\nhttps:\/\/github.com\/bkaradzic\/bgfx\/discussions\/3266<\/a <\/p>\n

Das geht so:<\/p>\n

\n
\n
\ngit clone https:\/\/github.com\/emscripten-core\/emsdk.git\n\n\n\ncd emsdk\n\n\n\n.\/emsdk install 3.1.51\n\n\n\n.\/emsdk activate 3.1.51\n\n\n\nsource .\/emsdk_env.sh\n\n\n\n<\/code><\/pre>\n<\/div>\n<\/div>\n
Lassen Sie uns bgfx f\u00fcr WebAssembly zusammenbauen – Emscripten:<\/p>\n
\n
\n
\nmkdir bgfx-build-test\n\n\n\ncd bgfx-build-test\n\n\n\ngit clone https:\/\/github.com\/bkaradzic\/bx.git\n\n\n\ngit clone https:\/\/github.com\/bkaradzic\/bimg.git\n\n\n\ngit clone https:\/\/github.com\/bkaradzic\/bgfx.git\n\n\n\ncd bgfx\n\n\n\nemmake make wasm-debug\n\n\n\n<\/code><\/pre>\n<\/div>\n<\/div>\n
Als Ergebnis finden Sie im .build-Ordner Bitcode-Dateien mit der Erweiterung .bc, die mit Ihrer bgfx-Anwendung verkn\u00fcpft werden m\u00fcssen.
\nSollte bgfx.bc, bx.bc, bimg.bc sein; Verschiedene Assemblys haben je nach Assemblytyp (Release\/Debug) unterschiedliche Namen f\u00fcr diese Dateien.<\/p>\n
F\u00fcgen Sie einen Link zur Datei CMakeLists.txt mit .bc-Dateien hinzu, zum Beispiel absolute Pfade zu Dateien aus dem bgfx-experiments-Projekt:<\/p>\n
\n
\n
\ntarget_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)\n\n\n\n<\/code><\/pre>\n<\/div>\n<\/div>\n
\u00c4ndern Sie nun das native Fensterhandle in den Plattformdaten in \u201eBGFX-Initialisierung\u201c:<\/p>\n
\n
\n
\nbgfx::PlatformData platformData{};\n\n\n\nplatformData.context = NULL;\n\n\n\nplatformData.backBuffer = NULL;\n\n\n\nplatformData.backBufferDS = NULL;\n\n\n\nplatformData.nwh = (void*)\"#canvas\";\n\n\n\n<\/code><\/pre>\n<\/div>\n<\/div>\n
Sie m\u00fcssen au\u00dferdem den Rendertyp in OpenGL \u00e4ndern:<\/p>\n
\n
\n
\nbgfx::Init init;\n\n\n\ninit.type = bgfx::RendererType::OpenGL;\n\n\n\n\n\n\n\ninit.resolution.width = screenWidth;\n\n\n\ninit.resolution.height = screenHeight;\n\n\n\ninit.resolution.reset = BGFX_RESET_VSYNC;\n\n\n\ninit.platformData = platformData;\n\n\n\n\n\n\n\nif (!bgfx::init(init))\n\n\n\n{\n\n\n\n    throw std::runtime_error(\"Failed to initialize bgfx\");\n\n\n\n}\n\n\n\n<\/code><\/pre>\n<\/div>\n<\/div>\n
GLSL-Shader auf 120 neu kompilieren:<\/p>\n
\n
\n
\nshaderc -f \"VertexShader.vs\" -o \"VertexShader.glsl\" --type \"v\" -p \"120\"\n\n\n\nshaderc -f \"FragmentShader.fs\" -o \"FragmentShader.glsl\" --type \"f\" -p \"120\"\n\n\n\n<\/code><\/pre>\n<\/div>\n<\/div>\n
Ja, aber .glsl-Dateien m\u00fcssen zu CMakeLists.txt als –preload-file:<\/p>\n
 hinzugef\u00fcgt werden<\/p>\n
\n
\n
\nset(CMAKE_CXX_FLAGS ... <\u041e\u0441\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c>\n\n\n\n--preload-file VertexShader.glsl \\\n\n\n\n--preload-file FragmentShader.glsl \\\n\n\n\n<\/code><\/pre>\n<\/div>\n<\/div>\n
Es bleibt noch, die Hauptrenderschleife in Ihrer Anwendung durch einen While-Funktionsaufruf \u00fcber emscripten_set_main_loop zu ersetzen.<\/p>\n
Sie k\u00f6nnen hier dar\u00fcber lesen:
\nhttps :\/\/demensdeum.com\/blog\/ru\/2017\/03\/29\/porting-sdl-c-game-to-html5-emscripten\/<\/a><\/p>\n
Als n\u00e4chstes stellen Sie Ihr Emscripten-Projekt wie gewohnt zusammen, alles sollte funktionieren.
\nInteressant – Im Emscripten 3.1.51-Build scheint OpenAL zu fehlen (oder nur ich).<\/p>\n
Quellcode des Projekts, der mit bgfx und Emscripten korrekt kompiliert wird:
\nhttps:\/\/github.com\/demensdeum\/ bgfx-experiments\/tree\/main\/2-emscripten-build<\/a><\/p>\n
Quellen<\/p>\n
https:\/\/github.com\/bkaradzic\/bgfx\/discussions\/3266 <\/a>
\nhttps:\/\/bkaradzic.github.io\/bgfx\/build.html<\/a >
\nhttps:\/\/emscripten.org\/docs\/getting_started\/downloads.html<\/a >
\nhttps :\/\/demensdeum.com\/blog\/ru\/2017\/03\/29\/porting-sdl-c-game-to-html5-emscripten\/<\/a>
\nhttps:\/\/llvm.org\/docs\/BitCodeFormat.html<\/a><\/p >\n","protected":false},"excerpt":{"rendered":"
In diesem Beitrag beschreibe ich eine M\u00f6glichkeit, BGFX-Anwendungen f\u00fcr das Web (WebAssembly) mit Emscripten zu erstellen. Die Installationsplattform ist Linux x86-64, zum Beispiel Arch Linux. Lassen Sie uns zun\u00e4chst Emscripten Version 3.1.51 installieren, sonst werden Sie keinen Erfolg haben, und zwar aufgrund der \u00c4nderung des Typs der dynamischen Bibliotheken in der neuesten Version von Emscripten.Continue reading “Erstellen einer bgfx-Emscripten-Anwendung”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[6],"tags":[],"class_list":["post-3609","post","type-post","status-publish","format-standard","hentry","category-misc","entry"],"translation":{"provider":"WPGlobus","version":"3.0.2","language":"de","enabled_languages":["en","ru","zh","de","fr","ja","pt","hi"],"languages":{"en":{"title":true,"content":true,"excerpt":false},"ru":{"title":true,"content":true,"excerpt":false},"zh":{"title":true,"content":true,"excerpt":false},"de":{"title":true,"content":true,"excerpt":false},"fr":{"title":true,"content":true,"excerpt":false},"ja":{"title":true,"content":true,"excerpt":false},"pt":{"title":true,"content":true,"excerpt":false},"hi":{"title":false,"content":false,"excerpt":false}}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/demensdeum.com\/blog\/de\/wp-json\/wp\/v2\/posts\/3609","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demensdeum.com\/blog\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/demensdeum.com\/blog\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/de\/wp-json\/wp\/v2\/comments?post=3609"}],"version-history":[{"count":37,"href":"https:\/\/demensdeum.com\/blog\/de\/wp-json\/wp\/v2\/posts\/3609\/revisions"}],"predecessor-version":[{"id":3859,"href":"https:\/\/demensdeum.com\/blog\/de\/wp-json\/wp\/v2\/posts\/3609\/revisions\/3859"}],"wp:attachment":[{"href":"https:\/\/demensdeum.com\/blog\/de\/wp-json\/wp\/v2\/media?parent=3609"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/de\/wp-json\/wp\/v2\/categories?post=3609"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/de\/wp-json\/wp\/v2\/tags?post=3609"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}