Fil d'Ariane
Mis à jour le mardi 18 octobre 2016
  • 20 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

J'ai tout compris !

Familiarisez-vous avec le WebGL et BabylonJS

Connectez-vous ou inscrivez-vous pour bénéficier de toutes les fonctionnalités de ce cours !

La 3D est un monde merveilleux ! Empli de vertex, shaders et autres joyeusetés, il est important de connaître cet univers avant même de chercher à développer en WebGL. Pour commencer, nous allons donc étudier tout cela, puis nous découvrirons BabylonJS. En route ! :)

WebGL et BabylonJS : savoir d'où on vient pour savoir où on va !

Le WebGL

Le WebGL est une API créée par le Khronos Group dans le but de permettre l'utilisation de l'OpenGL ES.

OpenGL ? Khronos Group ?  API? :-°

OpenGL a été créé en 1992 avec pour objectif de réaliser des calculs 2D et surtout 3D ! OpenGL ES, quant à lui, est une spécification spécialement créée pour les plateformes mobiles comme les téléphones, les consoles de jeu, mais aussi le Web.

Le groupe Khronos est un consortium de grandes entreprises (Apple, Google, Nvidia, Intel et de très nombreuses autres) qui œuvrent dans le but de créer des API utilisables gratuitement. Celles-ci permettent de créer des applications multimédia sur des plateformes et appareils différents.

Khronos Groupe
Khronos Group

Quand a une API (autrement appelé Interface de Programmation), c'est un regroupement de fonctions et autres joyeuseté qui vont permettre d'accéder à des services. Ici, on accède à OpenGL grâce à une API : le WebGL :) 

BabylonJS

BabylonJS est une bibliothèque JavaScript qui va nous permettre de développer en WebGL des scènes qui vont être créées dans une simple balise canvas. Créé par deux développeurs de Microsoft (David Catuhe et David Rousset), le projet a commencé en 2013 par une librairie relativement simple qui a pris du poids avec l'arrivée de nombreux adeptes. La facilité du langage, sa rapidité d’exécution et sa particularité à tourner sur tous les types d'appareils l'ont rendu particulièrement populaire depuis peu. 

 Les bases de la 3D

Star Commander et Star Citizen : un même jeu, deux époques
Star Commander et Star Citizen : deux époques, un même jeu

Depuis les premiers jeux et applications en 3D, nos capacités de rendu et d'affichage n'ont cessé d'augmenter. Nous sommes passés de quelques images peu détaillées à de véritables mondes générés entièrement par ordinateur avec plusieurs milliers d'objets affichés à l’écran, parfois des millions.

Cependant, rien n'a changé. À peu de choses près, ce qui a existé à l'époque est la même chose qu'aujourd'hui. La seule et unique différence est la puissance de calcul de nos machines, rendant aujourd'hui possibles certaines de nos plus belles réalisations.

Nous allons voir quels sont les éléments essentiels d'une scène 3D, ceux qui sont obligatoirement présents pour créer une application. Nous allons ainsi observer que ce que voit le joueur n'est qu'une infime fraction du travail et quelles sont les limites du WebGL.

La scène

La scène, comme quasiment tout ce dont nous allons parler dans ce chapitre, n'est pas un objet visible. C'est un objet qui va contenir tous les autres. Il est à la base de tout ! Si on fait un parallèle avec le cinéma, la scène est l'endroit où les acteurs vont jouer leur rôle, ou toute l'action va se dérouler. Elle s’arrête à ce que voit la caméra, mais la caméra peut aller la ou elle le souhaite. 

Le moteur graphique

Alors que la scène va regrouper les éléments, le moteur graphique va avoir comme travail de les rendre dans une image. Cela veut dire qu'il va transformer des flux de calculs mathématiques en une image visible par l'oeil humain, pour vous permettre d'explorer le monde que vous avez créé !

La caméra

Maintenant qu'on a une scène et un moteur graphique pour calculer ce qu'il y a dedans, il va bien falloir lui dire quoi regarder ! Comme au cinéma, de nouveau, il faut une caméra pour rendre une image à l'écran. Celle-ci aura les mêmes caractéristiques que les caméras traditionnelles et physiques.

Les lumières

La représentation des lumières dans le logiciel 3DS Max
La représentation des lumières dans le logiciel 3DS Max

Notre scène est créée, avec une caméra qui filme au bon endroit et un moteur graphique prêt à recevoir les premiers calculs à effectuer. Mais si nous ajoutions un objet maintenant, nous n'y verrions que du noir. Il faut de la lumière ! Les lumières vont permettre d'éclairer les objets et de créer de l'ombre pour appuyer la présence des objets dans la scène.

Les meshes (ou objets)

Enfin les premiers éléments visibles ! Ils sont composés d'une multitude de points définissant un ensemble des polygones qui forment eux-même des faces. Ensemble, ils composent un objet que nous appelons ici mesh. C'est ce que va voir l'utilisateur. Montagne, personnage, océan, espace infini… tout ce qui est un objet affiché à l'écran est un mesh.

Les shaders

Shader sur le web - Montagne
Shader sur le Web - Montagne

Un shader est un élément associé à un mesh qui va dire au moteur graphique comment réagir selon de très nombreux paramètres (réfraction et réflexion de la lumière, couleur, matériaux…). Il va permettre de créer les ombres, les couleurs, la réaction des lumières sur les objets… Bref, vous avez compris, un mesh sans shader n'a aucune valeur dans notre scène. ;)

Donc on a une scène dans laquelle un moteur graphique tourne et rend un mesh avec un shader, éclairé par une lumière et filmé par une caméra. Ouf ! On a tout ?

Eh bien non – on a presque tout ! Il manque un dernier élément, qui n'est pas réellement un objet, mais il est tout aussi indispensable : la boucle de rendu !

La boucle de rendu

Maintenant que nous avons tout ce qu'il nous faut, il faut dire à la scène de rendre ce que nous avons créé et de l'afficher dans la fenêtre du navigateur ! Sans cela, on aura beau avoir fait le travail préliminaire, les calculs ne vont pas s'activer tous seuls ! Mais il va aussi falloir le faire plusieurs fois pour afficher plusieurs images par seconde. Habituellement, on dit d'un jeu qu'il tourne bien si il peut produire 60 images par seconde ou "60 FPS".

Les axes X, Y, Z

Maintenant que nous avons le vocabulaire, parlons un peu coordonnées.

Dans une scène 3D, nous avons trois dimensions, chacune représentée par une lettre : X, Y et Z. Elles vont permettre de se repérer dans une scène.

Axe X,Y et Z
Axes X, Y et Z

Habituellement, la représentation 3D est présentée comme l'image ci-dessus, l'axe Y étant tourné vers le haut. Il en sera ainsi dans BabylonJS.

Ces trois axes sont extrêmement importants car nous allons nous en servir sous toutes les coutures. Soyez sûrs de bien les comprendre avant de passer à la suite ! :)

  

Voilà ! Avec tout cela, vous avez les termes principaux qui composent le vocabulaire de base nécessaire pour continuer le cours ! On va enfin pouvoir passer aux choses sérieuses en créant notre première scène ! Allez, zou ! :)

Exemple de certificat de réussite
Exemple de certificat de réussite