{"id":1182,"date":"2017-07-25T17:57:30","date_gmt":"2017-07-25T17:57:30","guid":{"rendered":"http:\/\/demensdeum.com\/blog\/?p=1182"},"modified":"2024-12-16T22:32:46","modified_gmt":"2024-12-16T19:32:46","slug":"webgl-sdl-emscripten","status":"publish","type":"post","link":"https:\/\/demensdeum.com\/blog\/fr\/2017\/07\/25\/webgl-sdl-emscripten\/","title":{"rendered":"WebGL + SDL + Emscript"},"content":{"rendered":"<p>J&#8217;ai fini par porter Mika sur WebGL en utilisant SDL 1 et Emscripten.<\/p>\n<p><a href=\"http:\/\/demensdeum.com\/demos\/mikuWebGL\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1184\" src=\"https:\/\/demensdeum.com\/blog\/wp-content\/uploads\/2017\/07\/jG_QElsOhjs.jpg\" alt=\"\" width=\"653\" height=\"564\" srcset=\"https:\/\/demensdeum.com\/blog\/wp-content\/uploads\/2017\/07\/jG_QElsOhjs.jpg 653w, https:\/\/demensdeum.com\/blog\/wp-content\/uploads\/2017\/07\/jG_QElsOhjs-300x259.jpg 300w\" sizes=\"auto, (max-width: 653px) 100vw, 653px\" \/><\/a><a href=\"http:\/\/demensdeum.com\/demos\/mikuWebGL\/\" target=\"_blank\" rel=\"noopener\"><\/a><\/p>\n<p>Ensuite, je d\u00e9crirai ce qui devait \u00eatre modifi\u00e9 dans le code pour que la construction en JavaScript se termine avec succ\u00e8s.<\/p>\n<ol>\n<li>Utilisez SDL 1 au lieu de SDL 2. Il existe actuellement un portage SDL 2 pour emscripten, mais j&#8217;ai trouv\u00e9 plus appropri\u00e9 d&#8217;utiliser le SDL 1 int\u00e9gr\u00e9 \u00e0 emscripten. Le contexte n&#8217;est pas initialis\u00e9 dans la fen\u00eatre, mais \u00e0 l&#8217;aide de <span class=\"pl-c1\">SDL_SetVideoMode et du flag SDL_OPENGL. Le tampon est dessin\u00e9 \u00e0 l&#8217;aide de la commande SDL_GL_SwapBuffers()<\/span><\/li>\n<li>En raison de la mani\u00e8re dont JavaScript boucle &#8211; le rendu est plac\u00e9 dans une fonction distincte et son appel p\u00e9riodique est effectu\u00e9 \u00e0 l&#8217;aide de la fonction <span class=\"pl-c1\">emscripten_set_main_loop<\/span><\/li>\n<li>L&#8217;assemblage doit \u00e9galement \u00eatre effectu\u00e9 avec la cl\u00e9 &#8220;<span class=\"pl-s\">-s FULL_ES2=1<\/span>&#8220;<\/li>\n<li>J&#8217;ai d\u00fb abandonner la biblioth\u00e8que assimp, charger le mod\u00e8le depuis le syst\u00e8me de fichiers et charger la texture depuis le disque. Tous les tampons n\u00e9cessaires ont \u00e9t\u00e9 charg\u00e9s sur la version de bureau et ins\u00e9r\u00e9s dans le fichier c-header pour l&#8217;assemblage \u00e0 l&#8217;aide d&#8217;emscripten.<\/li>\n<\/ol>\n<p>Code\u00a0:<br \/><a href=\"https:\/\/github.com\/demensdeum\/OpenGLES3-Experiments\/tree\/master\/9-sdl-gles-obj-textured-assimp-miku-webgl\/mikuWebGL\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/demensdeum\/OpenGLES3-Experiments\/tree\/master\/9-sdl-gles-obj-textured-assimp-miku-webgl\/mikuWebGL<\/a><\/p>\n<p>Articles\u00a0:<br \/><a href=\"http:\/\/blog.scottlogic.com\/2014\/03\/12\/native-code-emscripten-webgl-simmer-gently.html\" target=\"_blank\" rel=\"noopener\">http:\/\/blog.scottlogic.com\/2014\/03\/12\/native-code-emscripten-webgl-simmer-gently.html<\/a><br \/>\n<a href=\"https:\/\/kripken.github.io\/emscripten-site\/docs\/porting\/multimedia_and_graphics\/OpenGL-support.html\" target=\"_blank\" rel=\"noopener\">https:\/\/kripken.github.io\/emscripten-site\/docs\/porting\/multimedia_and_graphics\/OpenGL-support.html<\/a><\/p>\n<p>Mod\u00e8le\u00a0:<br \/><a href=\"https:\/\/sketchfab.com\/models\/7310aaeb8370428e966bdcff414273e7\" target=\"_blank\" rel=\"noopener\">https:\/\/sketchfab.com\/models\/7310aaeb8370428e966bdcff414273e7<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>J&#8217;ai fini par porter Mika sur WebGL en utilisant SDL 1 et Emscripten. Ensuite, je d\u00e9crirai ce qui devait \u00eatre modifi\u00e9 dans le code pour que la construction en JavaScript se termine avec succ\u00e8s. Utilisez SDL 1 au lieu de SDL 2. Il existe actuellement un portage SDL 2 pour emscripten, mais j&#8217;ai trouv\u00e9 plus<a class=\"more-link\" href=\"https:\/\/demensdeum.com\/blog\/fr\/2017\/07\/25\/webgl-sdl-emscripten\/\">Continue reading <span class=\"screen-reader-text\">&#8220;WebGL + SDL + Emscript&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","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":[81,61,52],"tags":[80,76],"class_list":["post-1182","post","type-post","status-publish","format-standard","hentry","category-demos","category-techie","category-tutorials","tag-fsgl","tag-opengl","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\/1182","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=1182"}],"version-history":[{"count":9,"href":"https:\/\/demensdeum.com\/blog\/fr\/wp-json\/wp\/v2\/posts\/1182\/revisions"}],"predecessor-version":[{"id":3995,"href":"https:\/\/demensdeum.com\/blog\/fr\/wp-json\/wp\/v2\/posts\/1182\/revisions\/3995"}],"wp:attachment":[{"href":"https:\/\/demensdeum.com\/blog\/fr\/wp-json\/wp\/v2\/media?parent=1182"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/fr\/wp-json\/wp\/v2\/categories?post=1182"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/fr\/wp-json\/wp\/v2\/tags?post=1182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}