{"id":1155,"date":"2017-07-23T17:29:16","date_gmt":"2017-07-23T17:29:16","guid":{"rendered":"http:\/\/demensdeum.com\/blog\/?p=1155"},"modified":"2024-12-16T22:32:46","modified_gmt":"2024-12-16T19:32:46","slug":"opengles-miku","status":"publish","type":"post","link":"https:\/\/demensdeum.com\/blog\/fr\/2017\/07\/23\/opengles-miku\/","title":{"rendered":"Il n&#8217;y a que Miku"},"content":{"rendered":"<p>Le r\u00e9sultat du travail sur la biblioth\u00e8que FSGL avec OpenGL ES et le code\u00a0:<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/9L11ezDGRB8\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p>Ensuite, je d\u00e9crirai comment tout a \u00e9t\u00e9 programm\u00e9, divers probl\u00e8mes <em>int\u00e9ressants<\/em> ont \u00e9t\u00e9 r\u00e9solus.<\/p>\n<p>Tout d&#8217;abord, nous allons initialiser le contexte OpenGL ES, comme je l&#8217;ai \u00e9crit dans le post pr\u00e9c\u00e9dent. De plus, nous ne consid\u00e9rerons que le rendu et une br\u00e8ve description du code.<\/p>\n<h3>La Matrix vous surveille<\/h3>\n<p>Cette figure de Miku dans la vid\u00e9o est constitu\u00e9e de triangles. Pour dessiner un triangle dans OpenGL, vous devez sp\u00e9cifier trois points avec les coordonn\u00e9es x, y, z. en coordonn\u00e9es 2D du contexte OpenGL.<br \/>Puisque nous devons dessiner une figure contenant des coordonn\u00e9es 3D, nous devons utiliser une <strong>matrice de projection<\/strong>. Nous devons \u00e9galement faire pivoter, zoomer ou faire tout ce que nous voulons faire avec le mod\u00e8le. \u00c0 cette fin, la <strong>matrice de mod\u00e8le<\/strong> est utilis\u00e9e. Il n&#8217;y a pas de concept de cam\u00e9ra dans OpenGL ; en fait, les objets tournent autour d&#8217;une cam\u00e9ra statique. Pour cela, une <strong>matrice de vues<\/strong> est utilis\u00e9e.<\/p>\n<p>Pour simplifier la mise en \u0153uvre d&#8217;OpenGL ES &#8211; il ne contient pas de donn\u00e9es matricielles. Vous pouvez utiliser des biblioth\u00e8ques qui ajoutent des fonctionnalit\u00e9s manquantes, par exemple <a href=\"http:\/\/glm.g-truc.net\" target=\"_blank\" rel=\"noopener\">GLM<\/a>.<\/p>\n<h3><strong>Shaders<\/strong><\/h3>\n<p>Afin de permettre au d\u00e9veloppeur de dessiner n&#8217;importe quoi, et de quelque mani\u00e8re que ce soit, OpenGL ES doit impl\u00e9menter des vertex et fragment shaders. Le vertex shader doit recevoir les coordonn\u00e9es de rendu en entr\u00e9e, effectuer des transformations \u00e0 l&#8217;aide de matrices et transmettre les coordonn\u00e9es \u00e0 gl_Position. Fragment ou pixel shader &#8211; dessine d\u00e9j\u00e0 la couleur\/texture, applique une superposition, etc.<\/p>\n<p>J&#8217;ai \u00e9crit des shaders en GLSL. Dans mon impl\u00e9mentation actuelle, les shaders sont int\u00e9gr\u00e9s directement dans le code de l&#8217;application principale sous forme de cha\u00eenes <strong>C<\/strong>.<\/p>\n<h3>Tampons<\/h3>\n<p>Le vertex buffer contient les coordonn\u00e9es des sommets (vertices)\u00a0; ce tampon contient \u00e9galement les coordonn\u00e9es pour la texturation et d&#8217;autres donn\u00e9es n\u00e9cessaires aux shaders. Apr\u00e8s avoir g\u00e9n\u00e9r\u00e9 le vertex buffer, vous devez lier le pointeur aux donn\u00e9es du vertex shader. Cela se fait avec la commande glVertexAttribPointer, o\u00f9 vous devez sp\u00e9cifier le nombre d&#8217;\u00e9l\u00e9ments, un pointeur vers le d\u00e9but des donn\u00e9es et la taille du pas qui sera utilis\u00e9 pour parcourir le tampon. Dans mon impl\u00e9mentation, la liaison des coordonn\u00e9es de sommet et des coordonn\u00e9es de texture pour le pixel shader est effectu\u00e9e. Cependant, il convient de dire que le transfert des donn\u00e9es (coordonn\u00e9es de texture) vers le fragment shader s&#8217;effectue via le vertex shader. Pour y parvenir, les coordonn\u00e9es sont d\u00e9clar\u00e9es en utilisant <strong>variant<\/strong>.<\/p>\n<p>Pour qu&#8217;OpenGL sache dans quel ordre dessiner les points des triangles &#8211; vous aurez besoin d&#8217;un tampon d&#8217;index (index). Le tampon d&#8217;index contient le num\u00e9ro de sommet dans le tableau\u00a0; en utilisant trois de ces indices, un triangle est obtenu.<\/p>\n<h3>Textures<\/h3>\n<p>Vous devez d&#8217;abord charger\/g\u00e9n\u00e9rer une texture pour OpenGL. Pour cela j&#8217;ai utilis\u00e9 SDL_LoadBMP, la texture est charg\u00e9e depuis un fichier bmp. Cependant, il convient de noter que seuls les BMP 24 bits conviennent et que les couleurs qu&#8217;ils contiennent ne sont pas stock\u00e9es dans l&#8217;ordre RVB habituel, mais en BGR. Autrement dit, apr\u00e8s le chargement, vous devez remplacer le canal rouge par un bleu.<br \/>Les coordonn\u00e9es de texture sont sp\u00e9cifi\u00e9es au format <a href=\"http:\/\/www.opengl-tutorial.org\/beginners-tutorials\/tutorial-5-a-textured-cube\/\" target=\"_blank\" rel=\"noopener\"> UV< \/a>, c&#8217;est-\u00e0-dire qu&#8217;il vous suffit de transf\u00e9rer deux coordonn\u00e9es. La sortie de texture est effectu\u00e9e dans le fragment shader. Pour ce faire, vous devez lier la texture dans un fragment shader.<\/p>\n<h3>Rien de plus<\/h3>\n<p>Puisque, selon nos instructions, OpenGL dessine de la 3D \u00e0 la 2D &#8211; puis pour impl\u00e9menter la profondeur et s\u00e9lectionner des triangles invisibles &#8211; vous devez utiliser l&#8217;\u00e9limination et un tampon de profondeur (Z-Buffer). Dans mon impl\u00e9mentation, j&#8217;ai r\u00e9ussi \u00e0 \u00e9viter la g\u00e9n\u00e9ration manuelle du tampon de profondeur \u00e0 l&#8217;aide de deux commandes\u00a0: glEnable(GL_DEPTH_TEST); et s\u00e9lections glEnable(GL_CULL_FACE);<br \/>Assurez-vous \u00e9galement de v\u00e9rifier que le plan proche de la matrice de projection est sup\u00e9rieur \u00e0 z\u00e9ro, car v\u00e9rifier la profondeur avec un plan proche nul ne fonctionnera pas.<\/p>\n<h3><strong>Rendu<\/strong><\/h3>\n<p>Pour remplir le tampon de vertex, le tampon d&#8217;index avec quelque chose de conscient, par exemple le mod\u00e8le Miku, vous devez charger ce mod\u00e8le. Pour cela, j&#8217;ai utilis\u00e9 la biblioth\u00e8que <a href=\"https:\/\/github.com\/assimp\/assimp\" target=\"_blank\" rel=\"noopener\">assimp<\/a>. Miku a \u00e9t\u00e9 plac\u00e9 dans un fichier au format Wavefront OBJ, charg\u00e9 \u00e0 l&#8217;aide de assimp, et la conversion des donn\u00e9es d&#8217;assimp en tampons de sommets et d&#8217;index a \u00e9t\u00e9 impl\u00e9ment\u00e9e.<\/p>\n<p>Le rendu s&#8217;effectue en plusieurs \u00e9tapes\u00a0:<\/p>\n<ol>\n<li>Faire pivoter Miku \u00e0 l&#8217;aide de la rotation de la matrice du mod\u00e8le<\/li>\n<li>Effacer l&#8217;\u00e9cran et le tampon de profondeur<\/li>\n<li>Dessiner des triangles \u00e0 l&#8217;aide de la commande glDrawElements.<\/li>\n<\/ol>\n<p>Prochaine \u00e9tape &#8211; Impl\u00e9mentation du rendu en WebGL \u00e0 l&#8217;aide d&#8217;Emscripten.<\/p>\n<p>Code source\u00a0:<br \/><a href=\"https:\/\/github.com\/demensdeum\/OpenGLES3-Experiments\/tree\/master\/8-sdl-gles-obj-textured-assimp-miku\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/demensdeum\/OpenGLES3-Experiments\/tree\/master\/8-sdl-gles-obj-textured-assimp-miku<br \/>\n<\/a>Mod\u00e8le\u00a0:<br \/><a href=\"https:\/\/sketchfab.com\/models\/7310aaeb8370428e966bdcff414273e7\" target=\"_blank\" rel=\"noopener\">https:\/\/sketchfab.com\/models\/7310aaeb8370428e966bdcff414273e7<\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Le r\u00e9sultat du travail sur la biblioth\u00e8que FSGL avec OpenGL ES et le code\u00a0: Ensuite, je d\u00e9crirai comment tout a \u00e9t\u00e9 programm\u00e9, divers probl\u00e8mes int\u00e9ressants ont \u00e9t\u00e9 r\u00e9solus. Tout d&#8217;abord, nous allons initialiser le contexte OpenGL ES, comme je l&#8217;ai \u00e9crit dans le post pr\u00e9c\u00e9dent. De plus, nous ne consid\u00e9rerons que le rendu et une<a class=\"more-link\" href=\"https:\/\/demensdeum.com\/blog\/fr\/2017\/07\/23\/opengles-miku\/\">Continue reading <span class=\"screen-reader-text\">&#8220;Il n&#8217;y a que Miku&#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":[61,52],"tags":[76],"class_list":["post-1155","post","type-post","status-publish","format-standard","hentry","category-techie","category-tutorials","tag-opengl","entry"],"translation":{"provider":"WPGlobus","version":"3.0.2","language":"fr","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\/fr\/wp-json\/wp\/v2\/posts\/1155","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=1155"}],"version-history":[{"count":26,"href":"https:\/\/demensdeum.com\/blog\/fr\/wp-json\/wp\/v2\/posts\/1155\/revisions"}],"predecessor-version":[{"id":3996,"href":"https:\/\/demensdeum.com\/blog\/fr\/wp-json\/wp\/v2\/posts\/1155\/revisions\/3996"}],"wp:attachment":[{"href":"https:\/\/demensdeum.com\/blog\/fr\/wp-json\/wp\/v2\/media?parent=1155"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/fr\/wp-json\/wp\/v2\/categories?post=1155"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/demensdeum.com\/blog\/fr\/wp-json\/wp\/v2\/tags?post=1155"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}