{"id":640,"date":"2013-02-26T11:04:38","date_gmt":"2013-02-26T10:04:38","guid":{"rendered":"http:\/\/jcfrog.com\/blog\/?p=640"},"modified":"2013-02-26T12:01:48","modified_gmt":"2013-02-26T11:01:48","slug":"faire-un-jeu-html5-3d-webgl-avec-des-logiciels-libres","status":"publish","type":"post","link":"http:\/\/jcfrog.com\/blog\/faire-un-jeu-html5-3d-webgl-avec-des-logiciels-libres\/","title":{"rendered":"Faire un jeu HTML5 3D (WebGL) avec des logiciels libres #javascript"},"content":{"rendered":"<p>Depuis quelques mois nous tentons beaucoup de choses sur Jocly et nous avons abouti \u00e0 un r\u00e9sultat qui d\u00e9passait nos esp\u00e9rances: une skin 3D <a href=\"http:\/\/fr.wikipedia.org\/wiki\/WebGL\" target=\"_blank\">WebGL<\/a> et donc sans plugin pour un de nos jeux favoris, <a href=\"http:\/\/fr.jocly.com\/jocly\/hubdemo\/yohoho\" target=\"_blank\">Yohoho 3D<\/a>. Certes il faut un\u00a0ordinateur\u00a0et un browser compatibles, mais c&rsquo;est une tendance lourde, n&rsquo;en doutons pas \ud83d\ude09<\/p>\n<p>Si tu n&rsquo;as pas la configuration n\u00e9cessaire, pour te donner un id\u00e9e, avec beaucoup de bidouilles et de transpiration on arrive \u00e0 \u00e7a:<\/p>\n<div class=\"jetpack-video-wrapper\"><span class=\"embed-youtube\" style=\"text-align:center; display: block;\"><iframe loading=\"lazy\" class=\"youtube-player\" width=\"900\" height=\"507\" src=\"https:\/\/www.youtube.com\/embed\/5zPZM51x6-4?version=3&#038;rel=1&#038;showsearch=0&#038;showinfo=1&#038;iv_load_policy=1&#038;fs=1&#038;hl=fr-FR&#038;autohide=2&#038;wmode=transparent\" allowfullscreen=\"true\" style=\"border:0;\" sandbox=\"allow-scripts allow-same-origin allow-popups allow-presentation\"><\/iframe><\/span><\/div>\n<p>Et on en est plut\u00f4t content \ud83d\ude42<\/p>\n<p>Je voulais partager un peu le chemin que nous avons parcouru et les technologies retenues. J&rsquo;insiste, l\u2019intention ici est de partager, aucune pr\u00e9tention \u00e0 une expertise quelconque. On travaille, on apprend, on avance \ud83d\ude42<\/p>\n<p>Pour ce qui est de la 3D, nous gardions un oeil depuis longtemps sur <a href=\"http:\/\/mrdoob.github.com\/three.js\/\" target=\"_blank\">threejs<\/a> puisque notre API propose au d\u00e9veloppeur de travailler en javascript. <a href=\"http:\/\/mrdoob.github.com\/three.js\/\" target=\"_blank\">Threejs<\/a> est une biblioth\u00e8que javascript qui permet justement de construire des sc\u00e8nes 3D (lumi\u00e8res, objets, environnement&#8230;) et fournit des possibilit\u00e9s d\u2019animation et d\u2019interaction utilisateur.<\/p>\n<p><strong>Le workflow<\/strong><\/p>\n<p>Au stade o\u00f9 nous en sommes, voici notre processus de cr\u00e9ation:<\/p>\n<p>Id\u00e9e de design =&gt; mod\u00e9lisation dans blender + travail des textures =&gt; export pour threejs =&gt; chargement du(des) fichier(s) dans threejs =&gt; animation par moteur de jeu javascript.<\/p>\n<p><a href=\"http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/workflow-exp.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-full wp-image-677\" title=\"workflow-exp\" src=\"http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/workflow-exp.png\" alt=\"\" width=\"1254\" height=\"1248\" srcset=\"http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/workflow-exp.png 1254w, http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/workflow-exp-150x150.png 150w, http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/workflow-exp-300x298.png 300w, http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/workflow-exp-1024x1019.png 1024w, http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/workflow-exp-301x300.png 301w\" sizes=\"(max-width: 1254px) 100vw, 1254px\" \/><\/a><\/p>\n<p><strong>Mod\u00e9lisation<\/strong><\/p>\n<p><a href=\"http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/jarmada-admiral.blend_1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-full wp-image-648\" title=\"jarmada-admiral.blend\" src=\"http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/jarmada-admiral.blend_1.jpg\" alt=\"\" width=\"2559\" height=\"1328\" srcset=\"http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/jarmada-admiral.blend_1.jpg 2559w, http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/jarmada-admiral.blend_1-300x155.jpg 300w, http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/jarmada-admiral.blend_1-1024x531.jpg 1024w, http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/jarmada-admiral.blend_1-500x259.jpg 500w\" sizes=\"(max-width: 2559px) 100vw, 2559px\" \/><\/a><\/p>\n<p><a href=\"http:\/\/mrdoob.github.com\/three.js\/\" target=\"_blank\">Threejs<\/a> permet de cr\u00e9er des formes dynamiquement \u00e0 l\u2019aide de primitives mais d\u00e8s qu\u2019on souhaite des objets un peu plus compliqu\u00e9s, un logiciel 3D est n\u00e9cessaire. Nous utilisons le g\u00e9nialissime <a href=\"http:\/\/www.blende.org\" target=\"_blank\">Blender<\/a>: il existe <a href=\"https:\/\/github.com\/mrdoob\/three.js\/tree\/master\/utils\/exporters\/blender\" target=\"_blank\">un exporteur Blender =&gt; Threejs<\/a>. All\u00e9luia.<\/p>\n<p><a href=\"http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/jarmada-admiral.blend-2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-full wp-image-650\" title=\"jarmada-admiral.blend-2\" src=\"http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/jarmada-admiral.blend-2.jpg\" alt=\"\" width=\"204\" height=\"721\" \/><\/a>Donc on mod\u00e9lise dans <a href=\"http:\/\/www.blende.org\" target=\"_blank\">Blender<\/a>, on fait ses textures et ses UVs puis on exporte un fichier javascript qui se chargera tr\u00e8s bien via une classe threejs.<\/p>\n<p>Il va falloir faire un peu attention aux param\u00e8tres d&rsquo;export selon les cas. Veiller aussi \u00e0 utiliser les bons types de mat\u00e9riels (Phong par exemple) et de lumi\u00e8res pour avoir <a href=\"http:\/\/learningthreejs.com\/blog\/2012\/01\/20\/casting-shadows\/\" target=\"_blank\">des ombres qui fonctionnent<\/a> par exemple. Penser \u00e0 cocher UVs si n\u00e9cessaire. Il y a des param\u00e8tres au moment de l&rsquo;export de la sc\u00e8ne, et des param\u00e8tres dans l&rsquo;onglet \u00ab\u00a0mat\u00e9riel\u00a0\u00bb, tout en bas.<\/p>\n<p>Les plus beaux progr\u00e8s faits par Blender sont \u00e0 mon go\u00fbt sur le moteur de rendu. Mais en l&rsquo;occurrence ici on s\u2019en moque \ud83d\ude42<\/p>\n<p>Notre objectif est de faire des objets avec un maillage l\u00e9ger (nombre r\u00e9duit de facettes), et le rendu ne sera pas fait par blender et son\u00a0magnifique <a href=\"https:\/\/www.google.fr\/search?q=cycles+render+blender&amp;hl=fr&amp;safe=off&amp;tbm=isch&amp;tbo=u&amp;source=univ&amp;sa=X&amp;ei=cd8rUcv-J8LLhAfMmIDoBQ&amp;ved=0CEoQsAQ&amp;biw=1555&amp;bih=1125\" target=\"_blank\">Cycles Render<\/a> mais par WebGL qui sera notre moteur de rendu gr\u00e2ce \u00e0 threejs. Inutile donc de peaufiner de folles courbes de bezier, de subdiviser \u00e0 gogo, il faut essayer de faire un truc qui a une allure correcte avec seulement quelques facettes. Mieux vaut alors travailler sur les textures qui essayeront de gommer les angles.<\/p>\n<p><a href=\"http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/jarmada-admiral.blend-1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-full wp-image-649\" title=\"jarmada-admiral.blend-1\" src=\"http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/jarmada-admiral.blend-1.jpg\" alt=\"\" width=\"1991\" height=\"981\" srcset=\"http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/jarmada-admiral.blend-1.jpg 1991w, http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/jarmada-admiral.blend-1-300x147.jpg 300w, http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/jarmada-admiral.blend-1-1024x504.jpg 1024w, http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/jarmada-admiral.blend-1-500x246.jpg 500w\" sizes=\"(max-width: 1991px) 100vw, 1991px\" \/><\/a><\/p>\n<p><strong><br \/>\n<\/strong><\/p>\n<p>&nbsp;<\/p>\n<p>Si comme moi tu ne sors pas des studios Pixar, je dirais que le premier truc \u00e0 bosser c&rsquo;est ce d\u00e9veloppement des UVs. En gros la fa\u00e7on dont tes textures vont s&rsquo;envelopper sur ton objet 3D.<\/p>\n<p>Dans l&rsquo;exemple ci-dessus, il s&rsquo;agit du vaisseau amiral, j&rsquo;ai mod\u00e9lis\u00e9 une forme qui je l&rsquo;esp\u00e8re ressemble en gros \u00e0 un bateau. Les formes n&rsquo;\u00e9tant pas bien subtiles, j&rsquo;ai essay\u00e9 de \u00ab\u00a0peindre\u00a0\u00bb des textures un peu chaleureuses. Sur la figure ci dessus on voit la coque s\u00e9lectionn\u00e9e et \u00e0 droite ce qu&rsquo;on appelle les UVs, les zones de projections des \u00ab\u00a0peintures\u00a0\u00bb. Seules incartades \u00e0 ma promesse de logiciel libre, pour les travaux 2D j&rsquo;utilise <a href=\"http:\/\/www.adobe.com\/fr\/products\/fireworks.html\" target=\"_blank\">FireWorks<\/a> d&rsquo;Adobe parce que j&rsquo;ai une licence et que je le connais par coeur, mais tu peux faire la m\u00eame chose avec ton <a href=\"http:\/\/www.gimp.org\/\" target=\"_blank\">Gimp<\/a>.<\/p>\n<p>Ces grilles d&rsquo;UVs export\u00e9es en image, on s&rsquo;en sert de guide pour dessiner patiemment les textures du mieux qu&rsquo;on peut, le r\u00e9sultat sera r\u00e9inject\u00e9 en entr\u00e9e du \u00ab\u00a0Diffuse\u00a0\u00bb du mat\u00e9riel dans Blender.<\/p>\n<p><a href=\"http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/Adobe-Fireworks-CS5.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-full wp-image-653\" title=\"Adobe Fireworks CS5\" src=\"http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/Adobe-Fireworks-CS5.jpg\" alt=\"\" width=\"1550\" height=\"1244\" srcset=\"http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/Adobe-Fireworks-CS5.jpg 1550w, http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/Adobe-Fireworks-CS5-300x240.jpg 300w, http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/Adobe-Fireworks-CS5-1024x821.jpg 1024w, http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/Adobe-Fireworks-CS5-373x300.jpg 373w\" sizes=\"(max-width: 1550px) 100vw, 1550px\" \/><\/a><\/p>\n<p>Le jeux pr\u00e9sente 2 types de bateaux, pour la version pirate, on utilise les m\u00eames objets charg\u00e9s que pour les gentils (oui ok Jean-Luc, \u00e7a se discute), mais on affecte une autre texture dynamiquement, texture qui est charg\u00e9e via un loader adequat de threejs.<\/p>\n<p><a href=\"http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/Adobe-Fireworks-CS5-1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-full wp-image-657\" title=\"Adobe Fireworks CS5-1\" src=\"http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/Adobe-Fireworks-CS5-1.jpg\" alt=\"\" width=\"1544\" height=\"1238\" srcset=\"http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/Adobe-Fireworks-CS5-1.jpg 1544w, http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/Adobe-Fireworks-CS5-1-300x240.jpg 300w, http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/Adobe-Fireworks-CS5-1-1024x821.jpg 1024w, http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/Adobe-Fireworks-CS5-1-374x300.jpg 374w\" sizes=\"(max-width: 1544px) 100vw, 1544px\" \/><\/a><\/p>\n<p>Pour plus de d\u00e9tails je rappelle que tous les sources sont disponibles sur <a href=\"http:\/\/www.jocly.com\/jocly\/dev\" target=\"_blank\">l&rsquo;espace d\u00e9veloppeur<\/a>\u00a0de jocly.com. Si ces technos t&rsquo;int\u00e9ressent, je crois que c&rsquo;est un opportunit\u00e9 rare de s&rsquo;y frotter.<\/p>\n<p><a href=\"http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/Yohoho-3D-test-Jocly.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-full wp-image-655\" title=\"Yohoho 3D sources\" src=\"http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/Yohoho-3D-test-Jocly.jpg\" alt=\"\" width=\"1117\" height=\"528\" srcset=\"http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/Yohoho-3D-test-Jocly.jpg 1117w, http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/Yohoho-3D-test-Jocly-300x141.jpg 300w, http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/Yohoho-3D-test-Jocly-1024x484.jpg 1024w, http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/Yohoho-3D-test-Jocly-500x236.jpg 500w\" sizes=\"(max-width: 1117px) 100vw, 1117px\" \/><\/a><\/p>\n<p>Une fois tous ces objets 3D en place, les animations se font en g\u00e9n\u00e9ral\u00a0via <a href=\"http:\/\/learningthreejs.com\/blog\/2011\/08\/17\/tweenjs-for-smooth-animation\/\" target=\"_blank\">tweenjs<\/a> qui en gros fonctionne de fa\u00e7on similaire aux <a href=\"http:\/\/api.jquery.com\/animate\/\" target=\"_blank\">.animate() de jQuery<\/a>.<\/p>\n<p><strong>L&rsquo;environnement<\/strong><\/p>\n<p>L&rsquo;oc\u00e9an est un cylindre avec une texture un peu velours (specular=0) pour donner un aspect cartoon. Le ciel est un grand cube qui englobe toute la sc\u00e8ne avec des normales invers\u00e9es et des textures \u00ab\u00a0qui vont bien\u00a0\u00bb (6 images) pour donner une sensation de panorama 360\u00b0.<\/p>\n<p><a href=\"http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/yohoho-3d-environment.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-full wp-image-674\" title=\"yohoho 3d environment\" src=\"http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/yohoho-3d-environment.jpg\" alt=\"\" width=\"1014\" height=\"660\" srcset=\"http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/yohoho-3d-environment.jpg 1014w, http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/yohoho-3d-environment-300x195.jpg 300w, http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/yohoho-3d-environment-460x300.jpg 460w\" sizes=\"(max-width: 1014px) 100vw, 1014px\" \/><\/a><\/p>\n<p>Les lumi\u00e8res sont peut \u00eatre le point le plus d\u00e9licat. On a pass\u00e9 pas mal de temps pour obtenir une ambiance qui nous allait. Au final on a un SpotLight qui produit les ombres, une ambiante \u00e0 0xbbbbbb et un PointLight plus \u00e9loign\u00e9 pour soutenir la luminosit\u00e9 globale et plus sp\u00e9cialement du c\u00f4t\u00e9 du soleil. On se sert aussi d&rsquo;un PointLight pour les explosions: lors d&rsquo;une attaque, on positionne cette lumi\u00e8re sur le bateau, on assigne une luminosit\u00e9 tr\u00e8s forte puis on lance courte une animation vers une luminosit\u00e9 nulle (tweenjs).<\/p>\n<p>Les \u00eeles sont un donut basse r\u00e9solution que j&rsquo;ai un peu \u00e9cras\u00e9 dans tous les sens. A noter que threejs poss\u00e8de quelques modificateurs dont le tr\u00e8s important <strong>Smooth<\/strong>. Cela permet de mod\u00e9liser des objets en faible r\u00e9solution, donc d&rsquo;avoir des petits fichiers js \u00e0 charger, et d&rsquo;appliquer cette subdivision au chargement sur la g\u00e9om\u00e9trie avant de cr\u00e9er le mesh.<\/p>\n<p><a href=\"http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/smooth.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-full wp-image-671\" title=\"smooth\" src=\"http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/smooth.jpg\" alt=\"\" width=\"763\" height=\"708\" srcset=\"http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/smooth.jpg 763w, http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/smooth-300x278.jpg 300w, http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/smooth-323x300.jpg 323w\" sizes=\"(max-width: 763px) 100vw, 763px\" \/><\/a><\/p>\n<p>Pour les palmiers, on s&rsquo;est un peu fait suer aussi \ud83d\ude42 On a essay\u00e9 d&rsquo;utiliser la transparence de textures PNG pour les feuilles mais on a eu pas mal de probl\u00e8mes sur le rendu final (scintillements). De plus les transparences sont un peu d\u00e9licates, on a peut \u00eatre mal fait, mais on avait des bugs d&rsquo;affichage de plans transparents entre eux. Au final j&rsquo;ai opt\u00e9 pour une mod\u00e9lisation aussi basse r\u00e9solution que possible d&rsquo;une feuille que j&rsquo;importe dans la sc\u00e8ne et j&rsquo;ai une petite proc qui me cr\u00e9e le feuillage dynamiquement en clonant cette feuille selon diff\u00e9rente tailles et rotations. Le tronc est un petit js \u00e0 part.<\/p>\n<p><a href=\"http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/leaves5.blend_.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-full wp-image-672\" title=\"leaves5.blend\" src=\"http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/leaves5.blend_.jpg\" alt=\"\" width=\"2560\" height=\"1324\" srcset=\"http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/leaves5.blend_.jpg 2560w, http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/leaves5.blend_-300x155.jpg 300w, http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/leaves5.blend_-1024x529.jpg 1024w, http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/leaves5.blend_-500x258.jpg 500w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/><\/a><\/p>\n<p><strong>Une technique pas encore mise en oeuvre: les morphismes.<\/strong><\/p>\n<p>Gr\u00e2ce \u00e0 Blender on peut d\u00e9finir des d\u00e9formations cl\u00e9s entre lesquelles ont peu interpoler \u00e0 loisir. Il ne faut pas modifier la g\u00e9om\u00e9trie de l&rsquo;objet, on d\u00e9place juste les vertex \u00e0 notre guise et on d\u00e9finit ainsi des positions cl\u00e9. On peut ensuite pond\u00e9rer ces positions et donc animer l&rsquo;objet. J&rsquo;ai fait quelques petits tests concluants mais nous n&rsquo;avons finalement pas surcharg\u00e9 notre Yohoho avec, mais j&rsquo;ai bien l&rsquo;intention de m&rsquo;en servir un de ces 4 \ud83d\ude09<\/p>\n<p><a href=\"http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/three.js-webgl-morphtargets-MD2-controls-2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-full wp-image-680\" title=\"three.js webgl - morphtargets - MD2 controls-2\" src=\"http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/three.js-webgl-morphtargets-MD2-controls-2.jpg\" alt=\"\" width=\"998\" height=\"161\" srcset=\"http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/three.js-webgl-morphtargets-MD2-controls-2.jpg 998w, http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/three.js-webgl-morphtargets-MD2-controls-2-300x48.jpg 300w, http:\/\/jcfrog.com\/blog\/wp-content\/uploads\/2013\/02\/three.js-webgl-morphtargets-MD2-controls-2-500x80.jpg 500w\" sizes=\"(max-width: 998px) 100vw, 998px\" \/><\/a><\/p>\n<p>Pour exemple, voir ce qu&rsquo;on peut faire pour <a href=\"http:\/\/mrdoob.github.com\/three.js\/examples\/webgl_morphtargets_md2_control.html\" target=\"_blank\">contr\u00f4ler des personnages<\/a> avec diff\u00e9rentes s\u00e9quences de morphismes (utiliser les fl\u00eaches pour faire courir les personnages). Il semble que le vieux <a href=\"http:\/\/tfcduke.developpez.com\/tutoriel\/format\/md2\/\" target=\"_blank\">format MD2<\/a> soit encore utilis\u00e9 pour ces animations. <a href=\"http:\/\/mrdoob.github.com\/three.js\/examples\/webgl_morphtargets_md2.html\" target=\"_blank\">Autre exemple<\/a>.<\/p>\n<p><strong>Codage Jocly<\/strong><\/p>\n<p>Pour ce qui est du code, les vues ont \u00e9t\u00e9 un peu boulevers\u00e9es pour \u00eatre encore plus g\u00e9n\u00e9riques. <a href=\"https:\/\/twitter.com\/_mig_\" target=\"_blank\">Michel<\/a> a tout r\u00e9\u00e9crit pour pouvoir switcher entre les diff\u00e9rentes skins, 2D ou 3D, \u00e0 l\u2019aide de gadgets d\u00e9di\u00e9s selon le graphisme qu\u2019on veut impl\u00e9menter, sans que cela touche \u00e0 la m\u00e9canique du jeu. Un m\u00e9canisme brillant que j&rsquo;ai h\u00e2te de pouvoir mettre \u00e0 disposition de nos amis d\u00e9veloppeurs \ud83d\ude42<\/p>\n<p><strong>Tutoriels<\/strong><\/p>\n<p>J&rsquo;ai envie de faire des tutos en ce moment, alors si tu as des aspects qui t&rsquo;int\u00e9ressent dans tous \u00e7a, n&rsquo;h\u00e9site pas \u00e0 m&rsquo;en faire part.<\/p>\n<p><strong>Drapeau<\/strong><\/p>\n<p>Je me suis amus\u00e9 avec le rendu blender pour l&rsquo;intro du teaser. Je n&rsquo;ai fait que rejouer le <a href=\"http:\/\/www.blenderguru.com\/videos\/create-an-animated-flag\/\" target=\"_blank\">tuto dispo ici en english<\/a>.<\/p>\n<p>Voil\u00e0, ce n&rsquo;est qu&rsquo;un survol rapide des technos test\u00e9es et mises en oeuvres mais j&rsquo;ai pens\u00e9 que \u00e7a pourrait int\u00e9resser des gens qui n&rsquo;ont pas eu le temps de fouiller tout \u00e7a. un ami me demandait si c&rsquo;est dur le WebGL. Je lui ai r\u00e9pondu que non, mais c&rsquo;est un peu long. Il faut y aller avec patience et modestie. Je n&rsquo;en suis qu&rsquo;au d\u00e9but. Nul doute qu&rsquo;il y a beaucoup de choses \u00e0 optimiser, comme les textures et leurs mappings pour r\u00e9duire la taille des fichiers, mais on avance et nous sommes d\u00e9j\u00e0 bien \u00e9pat\u00e9s d&rsquo;en \u00eatre arriv\u00e9 l\u00e0 \ud83d\ude42<\/p>\n<p>A noter que threejs est livr\u00e9 avec un r\u00e9pertoire cons\u00e9quent <a href=\"http:\/\/mrdoob.github.com\/three.js\/\" target=\"_blank\">d&rsquo;exemples d\u00e9taill\u00e9s<\/a> qui couvrent tous les domaines, avec leurs sources bien s\u00fbr puisque c&rsquo;est du javascript, id\u00e9al pour d\u00e9couvrir une techno. Bravo et merci \u00e0 eux.<\/p>\n<p>PS: je reconnais une\u00a0deuxi\u00e8me\u00a0incartade aux promesses de logiciel libre: la musique du trailer je l&rsquo;ai faite en 3 minutes avec un iPad. Et pire, je n&rsquo;ai pas honte.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Depuis quelques mois nous tentons beaucoup de choses sur Jocly et nous avons abouti \u00e0 un r\u00e9sultat qui d\u00e9passait nos esp\u00e9rances: une skin 3D WebGL et donc sans plugin pour un de nos jeux favoris, Yohoho 3D. Certes il faut un\u00a0ordinateur\u00a0et un browser compatibles, mais c&rsquo;est une tendance lourde, n&rsquo;en doutons pas \ud83d\ude09 Si tu [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_newsletter_tier_id":0,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[27,29,107],"tags":[110,341,343,108,349,351,113,348,350],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2MSpd-ak","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"http:\/\/jcfrog.com\/blog\/wp-json\/wp\/v2\/posts\/640"}],"collection":[{"href":"http:\/\/jcfrog.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/jcfrog.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/jcfrog.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/jcfrog.com\/blog\/wp-json\/wp\/v2\/comments?post=640"}],"version-history":[{"count":29,"href":"http:\/\/jcfrog.com\/blog\/wp-json\/wp\/v2\/posts\/640\/revisions"}],"predecessor-version":[{"id":684,"href":"http:\/\/jcfrog.com\/blog\/wp-json\/wp\/v2\/posts\/640\/revisions\/684"}],"wp:attachment":[{"href":"http:\/\/jcfrog.com\/blog\/wp-json\/wp\/v2\/media?parent=640"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/jcfrog.com\/blog\/wp-json\/wp\/v2\/categories?post=640"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/jcfrog.com\/blog\/wp-json\/wp\/v2\/tags?post=640"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}