{"id":26,"date":"2023-07-13T21:21:40","date_gmt":"2023-07-13T19:21:40","guid":{"rendered":"https:\/\/azelkara.tech\/?p=26"},"modified":"2023-09-21T20:10:55","modified_gmt":"2023-09-21T18:10:55","slug":"introduction-de-babylonjs","status":"publish","type":"post","link":"https:\/\/azelkara.tech\/index.php\/2023\/07\/13\/introduction-de-babylonjs\/","title":{"rendered":"Introduction de BabylonJS"},"content":{"rendered":"\n
\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\nCet article a \u00e9t\u00e9 publi\u00e9 le 18 octobre 2022 sur le blog “Les dieux du code<\/a>“. Je le partage maintenant sur mon blog personnel.<\/cite><\/blockquote>\n\n\n\n

Petite explication<\/h3>\n\n\n\n

Ensemble nous allons dans cette s\u00e9rie d\u2019article voir et prendre en main le moteur 3D BabylonJS<\/a>.<\/p>\n\n\n\n

Ce moteur est une cr\u00e9ation, \u00e0 la base de deux ing\u00e9nieurs Microsoft David Catuhe<\/a> et David Rousset<\/a>,<\/p>\n\n\n\n

C\u2019est un moteur Open source, ce qui a bon nombre de personne de contribuer a son d\u00e9veloppement \u00e0 travers le monde.<\/p>\n\n\n\n

Enti\u00e8rement cr\u00e9e en Javascript puis, plus tard, refondu en TypeScript<\/a> ce moteur permet de cr\u00e9er et am\u00e9liorer les exp\u00e9riences 3D<\/p>\n\n\n\n

sur tous les navigateurs internet modernes.<\/p>\n\n\n\n

Concept et Points forts du moteur<\/h3>\n\n\n\n

Sur cette d\u00e9couverte de Babylon nous pouvons d\u00e9j\u00e0 nous apercevoir d\u2019une chose,<\/p>\n\n\n\n

C\u2019est que le langage de pr\u00e9dilection est le TypeScript, mais rien n’emp\u00eache l’utilisation de Javascript pour la cr\u00e9ation de ses propres sc\u00e8nes 3D.<\/p>\n\n\n\n

En effet contrairement aux autres moteurs 3D \u00ab habituels \u00bb, Babylon est un moteur tourn\u00e9 vers les exp\u00e9riences web, ce qui n\u2019emp\u00eache pas, de pouvoir appliquer tous les design pattern lies \u00e0 la conception de jeux vid\u00e9o ou d\u2019exp\u00e9riences tourn\u00e9es autour de la r\u00e9alit\u00e9 virtuelle<\/p>\n\n\n\n

Bas\u00e9 sur la technologie WebGL1 et WebGL2, il permet le support de OpenGL parfait pour cr\u00e9er des sc\u00e8nes et animations en 3D.<\/p>\n\n\n\n

Les derni\u00e8res versions permettent d\u2019exploiter Vulkan, Metal, DirectX12, ce qui permettra en autre, l\u2019utilisation des Shaders performants dans nos diff\u00e9rentes sc\u00e8nes 3D<\/p>\n\n\n\n

L\u2019un de ses points fort est qu\u2019il est compatible avec tous les formats de ressources du march\u00e9 actuelle en mati\u00e8re de conception d\u2019exp\u00e9rience 3D<\/p>\n\n\n\n

Les formats de fichiers 3D g\u00e9r\u00e9 par blender sont directement exploitable dans Babylon  et le standard actuel et recommande est le .Gltf. Ce format permet soit d\u2019int\u00e9grer directement des ressources telles que des textures, tout en minimisant sa taille, ce qui rend le type de fichier facilement interop\u00e9rable et t\u00e9l\u00e9chargeable.<\/p>\n\n\n\n

Ce type de fichier est permet d\u2019\u00e9viter de r\u00e9cup\u00e9rer des fichiers lourds tout en garantissant un tr\u00e8s bon niveau de qualit\u00e9<\/p>\n\n\n\n

Ce standard de fichier est maintenant adopt\u00e9 par les grands acteurs du milieu telles que Microsoft<\/a>, SketchFab <\/a>et m\u00eame Unreal Engine.<\/p>\n\n\n\n

La gestion de la Physique est n\u2019est pas en reste, gr\u00e2ce a trois librairies OimoJs<\/a>, Ammo.js,<\/a> et Cannon.Js<\/a>,<\/p>\n\n\n\n

Une physique basique peut \u00eatre appliqu\u00e9 sur toute notre sc\u00e8ne et peut \u00eatre param\u00e9trable pour chacun de nos objets.<\/p>\n\n\n\n

L’une des seules faiblesses de ces libraires est lie au l’aspect lourd des calculs lies a la tout ce qui touche a la physique, ce qui nous contraint a limiter les interactions entres les objets physiques de notre sc\u00e8ne, mais nous y reviendrons prochainement dans un article<\/p>\n\n\n\n

L\u2019animation que ce soit proc\u00e9durale ou non est pris en charge nativement par BabylonJS ainsi que la transformation des meshes ou sc\u00e8nes de fa\u00e7on dynamique.<\/p>\n\n\n\n

Ainsi une partie des transformations et animations pourra \u00eatre g\u00e9rer facilement par le moteur avec de simple appels au moment opportun.<\/p>\n\n\n\n

Comme cela , nous pourrons cr\u00e9er des poses ou des animations cl\u00e9 et g\u00e9rer leurs transitions directement dans le moteur !<\/p>\n\n\n\n

Bien d’autre aspects existent mais nous reviendrons plus tard au moment opportun mais retenez bien une chose, BabylonJS est bel et bien un moteur 3D \u00e9volutif, facile a prendre en main<\/p>\n\n\n\n

et surtout mature par rapport a sa dur\u00e9e d’existence , nous somme loin des premiers d\u00e9buts balbutiants de WebGL en 2011<\/p>\n\n\n\n

Premiers Pas avec BabylonJS via son Playground<\/h3>\n\n\n\n

 Pour une premi\u00e8re prise en main nous pouvons acc\u00e9der au playground de BabylonJS, nous pouvons tester toutes les fonctionnalit\u00e9s et pourvoir nous habituer \u00e0 son utilisation directement en ligne ici<\/a><\/p>\n\n\n\n

En acc\u00e9dant a cette page, un exemple fonctionnel est d\u00e9j\u00e0 disponible, il contient<\/p>\n\n\n\n

–       Un plan<\/p>\n\n\n\n

    var ground = BABYLON.MeshBuilder.CreateGround(\"ground\", {width: 6, height: 6}, scene);\n<\/pre>\n\n\n\n
qui nous servira de sol dans cette exemple<\/p>\n\n\n\n
–       Une sph\u00e8re<\/p>\n\n\n\n
    var sphere = BABYLON.MeshBuilder.CreateSphere(\"sphere\", {diameter: 2, segments: 32}, scene);\n<\/pre>\n\n\n\n
pour afficher une sph\u00e8re et son nombre de surface<\/p>\n\n\n\n
–       Une lumi\u00e8re basique<\/p>\n\n\n\n
    var light = new BABYLON.HemisphericLight(\"light\", new BABYLON.Vector3(0, 1, 0), scene);\n<\/pre>\n\n\n\n
afin d’illuminer la sc\u00e8ne et ses diff\u00e9rents composants<\/p>\n\n\n\n
–       une camera libre<\/p>\n\n\n\n
    var camera = new BABYLON.FreeCamera(\"camera1\", new BABYLON.Vector3(0, 5, -10), scene);\n<\/pre>\n\n\n\n
Cette camera permet de  naviguer a l\u2019int\u00e9rieur de la sc\u00e8ne et de d\u00e9placer librement la camera<\/p>\n\n\n\n
tout cela avec la cr\u00e9ation d’un objet sc\u00e8ne qui sera ainsi envoy\u00e9 au moteur pour \u00eatre affiche sur le navigateur<\/p>\n\n\n\n
    var scene = new BABYLON.Scene(engine);\n<\/pre>\n\n\n\n
Simple non ?<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Il n\u2019y a ni notion physique ni d\u2019animation dans cette sc\u00e8ne, pour des raisons de simplicit\u00e9, mais rien qu\u2019avec ce code nous pouvons voir comment initialiser une exp\u00e9rience virtuelle sur un navigateur internet.<\/p>\n\n\n\n
Bien sur, ceci n\u2019est qu\u2019un exemple mais plus tard, nous allons voir comment configurer et utiliser BabylonJS sur notre poste et commencer a cr\u00e9er nos propres sc\u00e8nes !  <\/p>\n","protected":false},"excerpt":{"rendered":"
Cet article a \u00e9t\u00e9 publi\u00e9 le 18 octobre 2022 sur le blog “Les dieux du code“. Je le partage maintenant sur mon blog personnel. Petite explication Ensemble nous allons dans cette s\u00e9rie d\u2019article voir et prendre en main le moteur 3D BabylonJS. Ce moteur est une cr\u00e9ation, \u00e0 la base de deux ing\u00e9nieurs Microsoft David […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-26","post","type-post","status-publish","format-standard","hentry","category-non-classe"],"_links":{"self":[{"href":"https:\/\/azelkara.tech\/index.php\/wp-json\/wp\/v2\/posts\/26","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/azelkara.tech\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azelkara.tech\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azelkara.tech\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/azelkara.tech\/index.php\/wp-json\/wp\/v2\/comments?post=26"}],"version-history":[{"count":3,"href":"https:\/\/azelkara.tech\/index.php\/wp-json\/wp\/v2\/posts\/26\/revisions"}],"predecessor-version":[{"id":38,"href":"https:\/\/azelkara.tech\/index.php\/wp-json\/wp\/v2\/posts\/26\/revisions\/38"}],"wp:attachment":[{"href":"https:\/\/azelkara.tech\/index.php\/wp-json\/wp\/v2\/media?parent=26"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azelkara.tech\/index.php\/wp-json\/wp\/v2\/categories?post=26"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azelkara.tech\/index.php\/wp-json\/wp\/v2\/tags?post=26"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}