{"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\/zh\/2017\/07\/25\/webgl-sdl-emscripten\/","title":{"rendered":"WebGL + SDL + Emscripten"},"content":{"rendered":"<p>\u6211\u6700\u7ec8\u4f7f\u7528 SDL 1 \u548c Emscripten \u5c06 Mika \u79fb\u690d\u5230 WebGL\u3002<\/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>\u63a5\u4e0b\u6765\u6211\u5c06\u63cf\u8ff0\u9700\u8981\u5728\u4ee3\u7801\u4e2d\u66f4\u6539\u54ea\u4e9b\u5185\u5bb9\u624d\u80fd\u6210\u529f\u5b8c\u6210 JavaScript \u4e2d\u7684\u6784\u5efa\u3002<\/p>\n<ol>\n<li>\u4f7f\u7528 SDL 1 \u800c\u4e0d\u662f SDL 2\u3002\u76ee\u524d emscripten \u6709\u4e00\u4e2a SDL 2 \u7aef\u53e3\uff0c\u4f46\u6211\u53d1\u73b0\u4f7f\u7528 emscripten \u5185\u7f6e\u7684 SDL 1 \u66f4\u5408\u9002\u3002\u4e0a\u4e0b\u6587\u4e0d\u662f\u5728\u7a97\u53e3\u4e2d\u521d\u59cb\u5316\u7684\uff0c\u800c\u662f\u4f7f\u7528 <span class=\"pl-c1\">SDL_SetVideoMode \u548c SDL_OPENGL \u6807\u5fd7\u521d\u59cb\u5316\u7684\u3002\u4f7f\u7528 SDL_GL_SwapBuffers() \u547d\u4ee4\u7ed8\u5236\u7f13\u51b2\u533a<\/span><\/li>\n<li>\u7531\u4e8e JavaScript \u5faa\u73af\u7684\u65b9\u5f0f&#8211;\u6e32\u67d3\u88ab\u653e\u7f6e\u5728\u4e00\u4e2a\u5355\u72ec\u7684\u51fd\u6570\u4e2d\uff0c\u5e76\u4f7f\u7528 <span class=\"pl-c1\">emscripten_set_main_loop<\/span><\/li>\n<p> \u51fd\u6570\u5b9a\u671f\u8c03\u7528<\/p>\n<li>\u8fd8\u5fc5\u987b\u4f7f\u7528\u5bc6\u94a5\u201c<span class=\"pl-s\">-s FULL_ES2=1<\/span>\u201d\u8fdb\u884c\u7ec4\u88c5<\/li>\n<li>\u6211\u4e0d\u5f97\u4e0d\u653e\u5f03 assimp \u5e93\uff0c\u4ece\u6587\u4ef6\u7cfb\u7edf\u52a0\u8f7d\u6a21\u578b\uff0c\u5e76\u4ece\u78c1\u76d8\u52a0\u8f7d\u7eb9\u7406\u3002\u6240\u6709\u5fc5\u9700\u7684\u7f13\u51b2\u533a\u90fd\u5df2\u52a0\u8f7d\u5230\u684c\u9762\u7248\u672c\u4e0a\uff0c\u5e76\u63d2\u5165\u5230 c \u5934\u6587\u4ef6\u4e2d\uff0c\u4ee5\u4fbf\u4f7f\u7528 emscripten \u8fdb\u884c\u7ec4\u88c5\u3002<\/li>\n<\/ol>\n<p>\u4ee3\u7801\uff1a<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>\u6587\u7ae0\uff1a<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>\u578b\u53f7\uff1a<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>\u6211\u6700\u7ec8\u4f7f\u7528 SDL 1 \u548c Emscripten \u5c06 Mika \u79fb\u690d\u5230 WebGL\u3002 \u63a5\u4e0b\u6765\u6211\u5c06\u63cf\u8ff0\u9700\u8981\u5728\u4ee3\u7801\u4e2d\u66f4\u6539\u54ea\u4e9b\u5185\u5bb9\u624d\u80fd\u6210\u529f\u5b8c\u6210 JavaScript \u4e2d\u7684\u6784\u5efa\u3002 \u4f7f\u7528 SDL 1 \u800c\u4e0d\u662f SDL 2\u3002\u76ee\u524d emscripten \u6709\u4e00\u4e2a SDL 2 \u7aef\u53e3\uff0c\u4f46\u6211\u53d1\u73b0\u4f7f\u7528 emscripten \u5185\u7f6e\u7684 SDL 1 \u66f4\u5408\u9002\u3002\u4e0a\u4e0b\u6587\u4e0d\u662f\u5728\u7a97\u53e3\u4e2d\u521d\u59cb\u5316\u7684\uff0c\u800c\u662f\u4f7f\u7528 SDL_SetVideoMode \u548c SDL_OPENGL \u6807\u5fd7\u521d\u59cb\u5316\u7684\u3002\u4f7f\u7528 SDL_GL_SwapBuffers() \u547d\u4ee4\u7ed8\u5236\u7f13\u51b2\u533a \u7531\u4e8e JavaScript \u5faa\u73af\u7684\u65b9\u5f0f&#8211;\u6e32\u67d3\u88ab\u653e\u7f6e\u5728\u4e00\u4e2a\u5355\u72ec\u7684\u51fd\u6570\u4e2d\uff0c\u5e76\u4f7f\u7528 emscripten_set_main_loop \u51fd\u6570\u5b9a\u671f\u8c03\u7528 \u8fd8\u5fc5\u987b\u4f7f\u7528\u5bc6\u94a5\u201c-s FULL_ES2=1\u201d\u8fdb\u884c\u7ec4\u88c5 \u6211\u4e0d\u5f97\u4e0d\u653e\u5f03 assimp \u5e93\uff0c\u4ece\u6587\u4ef6\u7cfb\u7edf\u52a0\u8f7d\u6a21\u578b\uff0c\u5e76\u4ece\u78c1\u76d8\u52a0\u8f7d\u7eb9\u7406\u3002\u6240\u6709\u5fc5\u9700\u7684\u7f13\u51b2\u533a\u90fd\u5df2\u52a0\u8f7d\u5230\u684c\u9762\u7248\u672c\u4e0a\uff0c\u5e76\u63d2\u5165\u5230 c \u5934\u6587\u4ef6\u4e2d\uff0c\u4ee5\u4fbf\u4f7f\u7528 emscripten \u8fdb\u884c\u7ec4\u88c5\u3002 \u4ee3\u7801\uff1ahttps:\/\/github.com\/demensdeum\/OpenGLES3-Experiments\/tree\/master\/9-sdl-gles-obj-textured-assimp-miku-webgl\/mikuWebGL \u6587\u7ae0\uff1ahttp:\/\/blog.scottlogic.com\/2014\/03\/12\/native-code-emscripten-webgl-simmer-gently.html https:\/\/kripken.github.io\/emscripten-site\/docs\/porting\/multimedia_and_graphics\/OpenGL-support.html \u578b\u53f7\uff1ahttps:\/\/sketchfab.com\/models\/7310aaeb8370428e966bdcff414273e7<\/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":"zh","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\/zh\/wp-json\/wp\/v2\/posts\/1182","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demensdeum.com\/blog\/zh\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/demensdeum.com\/blog\/zh\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/zh\/wp-json\/wp\/v2\/comments?post=1182"}],"version-history":[{"count":9,"href":"https:\/\/demensdeum.com\/blog\/zh\/wp-json\/wp\/v2\/posts\/1182\/revisions"}],"predecessor-version":[{"id":3995,"href":"https:\/\/demensdeum.com\/blog\/zh\/wp-json\/wp\/v2\/posts\/1182\/revisions\/3995"}],"wp:attachment":[{"href":"https:\/\/demensdeum.com\/blog\/zh\/wp-json\/wp\/v2\/media?parent=1182"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/zh\/wp-json\/wp\/v2\/categories?post=1182"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/zh\/wp-json\/wp\/v2\/tags?post=1182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}