{"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\/fr\/2024\/08\/19\/bgfx-emscripten\/","title":{"rendered":"Cr\u00e9ation de l’application bgfx Emscripten"},"content":{"rendered":"

Dans cet article, je d\u00e9crirai une mani\u00e8re de cr\u00e9er des applications bgfx pour le Web (WebAssembly) \u00e0 l’aide d’Emscripten.<\/p>\n

La plate-forme d’installation est Linux x86-64, par exemple Arch Linux.<\/p>\n

Tout d’abord, installons Emscripten version 3.1.51, sinon vous ne r\u00e9ussirez pas, tout cela \u00e0 cause du changement de type de biblioth\u00e8ques dynamiques dans la derni\u00e8re version d’Emscripten. Vous pouvez en savoir plus ici\u00a0:
\nhttps:\/\/github.com\/bkaradzic\/bgfx\/discussions\/3266<\/a <\/p>\n

Cela se fait comme ceci\u00a0:<\/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
Assemblons bgfx pour WebAssembly – Texte\u00a0:<\/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
Par cons\u00e9quent, dans le dossier .build, vous aurez des fichiers bitcode avec une extension .bc, qui devront \u00eatre li\u00e9s \u00e0 votre application bgfx.
\nDoit \u00eatre bgfx.bc, bx.bc, bimg.bc\u00a0; diff\u00e9rents assemblys ont des noms diff\u00e9rents pour ces fichiers, selon le type d’assembly (version\/d\u00e9bogage)<\/p>\n
Ajoutez un lien vers le fichier CMakeLists.txt avec les fichiers .bc, par exemple, les chemins absolus vers les fichiers du projet bgfx-experiments\u00a0:<\/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
Maintenant, remplacez le handle de fen\u00eatre natif dans les donn\u00e9es de la plateforme par l’initialisation bgfx\u00a0:<\/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
Vous devez \u00e9galement changer le type de rendu en OpenGL\u00a0:<\/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
Recompiler les shaders GLSL \u00e0 120\u00a0:<\/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
Oui, mais les fichiers .glsl doivent \u00eatre ajout\u00e9s \u00e0 CMakeLists.txt en tant que \u00ab fichier de pr\u00e9chargement\u00a0:<\/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
Il reste \u00e0 remplacer la boucle de rendu principale de votre application par un appel de fonction while via emscripten_set_main_loop.<\/p>\n
Vous pouvez en savoir plus ici\u00a0:
\nhttps https:\/\/demensdeum.com\/blog\/ru\/2017\/03\/29\/porting-sdl-c-game-to-html5-emscripten\/<\/a><\/p>\n
Ensuite, assemblez votre projet Emscripten comme d’habitude, tout devrait fonctionner.
\nInt\u00e9ressant – la version Emscripten 3.1.51 semble manquer d’OpenAL (ou juste de moi).<\/p>\n
Code source du projet qui se compile correctement avec bgfx et Emscripten\u00a0:
\nhttps:\/\/github.com\/demensdeum\/ bgfx-experiments\/tree\/main\/2-emscripten-build<\/a><\/p>\n
Sources<\/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":"
Dans cet article, je d\u00e9crirai une mani\u00e8re de cr\u00e9er des applications bgfx pour le Web (WebAssembly) \u00e0 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\u00e9ussirez pas, tout cela \u00e0 cause du changement de type de biblioth\u00e8ques dynamiques dans la derni\u00e8re versionContinue reading “Cr\u00e9ation de l’application bgfx Emscripten”<\/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":"fr","enabled_languages":["en","ru","zh","de","fr","ja","pt"],"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}}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/demensdeum.com\/blog\/fr\/wp-json\/wp\/v2\/posts\/3609","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demensdeum.com\/blog\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/demensdeum.com\/blog\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/fr\/wp-json\/wp\/v2\/comments?post=3609"}],"version-history":[{"count":37,"href":"https:\/\/demensdeum.com\/blog\/fr\/wp-json\/wp\/v2\/posts\/3609\/revisions"}],"predecessor-version":[{"id":3859,"href":"https:\/\/demensdeum.com\/blog\/fr\/wp-json\/wp\/v2\/posts\/3609\/revisions\/3859"}],"wp:attachment":[{"href":"https:\/\/demensdeum.com\/blog\/fr\/wp-json\/wp\/v2\/media?parent=3609"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/fr\/wp-json\/wp\/v2\/categories?post=3609"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/fr\/wp-json\/wp\/v2\/tags?post=3609"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}