Les prérequis à connaître pour la conception 3D - Créer un jeu VR (réalité virtuelle) en JavaScript avec A-Frame : Partie 1

A-Frame est une "bibliothèque" JavaScript permettant de réaliser des environnements virtuels accessibles ensuite avec des casques VR, des mobiles et des navigateurs compatibles.

Avant de commencer à créer notre jeu en 3D, il est indispensable de comprendre quelques notions fondamentales :

• les coordonnées en 3D (position d'un objet)
• la rotation en 3D (orientation de l'objet)
• le maillage en triangles des objets 3D

Les coordonnées en 3D (position d’un objet)

En 3D, il existe trois dimensions (c'est dans le nom). Dans cet espace, nous pouvons nous déplacer :

• sur les côtés : gauche ou droite
• en hauteur : bas ou haut
• en profondeur : avant ou arrière

Pour représenter ces directions, nous utilisons trois axes, nommés par convention :

• x : gauche ↔ droite
• y : bas ↔ haut
• z : avant ↔ arrière

Ces trois axes se croisent en un point particulier appelé l’origine, qui possède les coordonnées suivantes : (0, 0, 0).

Ce point sert de référence à tous les autres éléments et toutes les positions sont exprimées par rapport à cette origine.

L'origine ne change jamais de position dans le repère. Même si la caméra ou les objets se déplacent, leurs coordonnées sont toujours exprimées par rapport à cette origine.

Dans A-Frame, lorsqu’on place un objet, on positionne son centre. Ce point est appelé l’origine locale de l’objet.

Placer un objet avec des coordonnées

Pour placer ou déplacer un objet, on lui attribue une position sous la forme : (x, y, z). Par défaut, l'unité est le mètre.

Exemple : (-10, 13, 17.4)

Cela signifie que, par rapport à l’origine :

• x = -10 → l’objet est à 10 mètres vers la gauche
• y = 13 → l’objet est à 13 mètres vers le haut
• z = 17.4 → l’objet est à 17,4 mètres vers l'arrière (vers nous)

Où se trouve l’objet par rapport à l’origine ?

Cas 1 : position (0, 12, 0)

• x = 0 → ni à gauche ni à droite
• y = 12 → au-dessus
• z = 0 → ni devant ni derrière

Conclusion : l’objet est directement au-dessus de l’origine.

Cas 2 : position (10, 0, -10)

• x = 10 → à droite
• y = 0 → au niveau du sol
• z = -10 → derrière

Conclusion : l’objet est derrière et à droite de l’origine.

Démonstration

La rotation en 3D (orientation de l’objet)

Nous avons vu comment placer un objet avec sa position. Mais un objet ne possède pas seulement une position : il possède aussi une rotation.

Même si vous aviez déjà entendu parler des coordonnées en 3D, ne passez pas à côté des informations sur la rotation, car il y a beaucoup d'erreurs.

Un objet peut rester au même endroit mais s'orienter dans des directions différentes. Sa position reste identique, mais sa rotation change.

Par exemple :

• un personnage peut regarder devant, derrière ou sur le côté
• un plan peut servir de sol ou de mur selon sa rotation

Pour orienter ces objets, nous utilisons les trois axes suivants :

• rotation autour de l’axe x : pitch
• rotation autour de l’axe y : yaw
• rotation autour de l’axe z : roll

Orienter un objet avec les axes

Pour orienter un objet, nous utiliserons la notation sous la forme : (rotationX, rotationY, rotationZ). Dans A-Frame, ces valeurs sont exprimées en degrés.

Exemple : (0, 90, 0)

Cela signifie que l'objet subit une rotation sur l'axe y de 90° par rapport à son orientation initiale.

Il est plus facile d’orienter un objet si nous savons dans quelle direction il est orienté au départ. Il est donc parfois nécessaire de consulter la documentation.
Même s’il n’existe pas de norme universelle, certaines conventions sont généralement utilisées :

• Les figures planes sont souvent orientées face à nous par défaut (comme si nous pouvions les accrocher à un mur placé devant nous).
• Pour les figures 3D, leurs propriétés permettent souvent de comprendre leur orientation de base :
  • Un cylindre possède les propriétés radius et height. La propriété height représente sa hauteur. Le cylindre est donc, par défaut, posé sur sa base et s’étend le long de l’axe vertical.
  • Un cône possède également la propriété height, ainsi que topRadius et bottomRadius. Il est donc, par défaut, posé sur son bottomRadius.

Lorsque nous créons nos propres objets, il est important de prendre quelques instants pour déterminer quelle orientation de base est la plus adaptée. Une bonne orientation de base permet d’éviter des rotations inutiles et simplifie toute la suite du développement (un tapis directement posé au sol, un cadre accroché au mur, une tasse prête à être posée, etc.).

Comment orienter un objet ?

Imaginons un avion avec la rotation suivante : (0, 0, 0). Il est parfaitement droit et s'éloigne de nous.

Quel axe utiliser pour faire pencher l'avion vers le haut ou vers le bas ?

• Pour orienter le nez vers le haut, nous modifions la rotation autour de l’axe x : (30, 0, 0)
• Pour orienter le nez vers le bas : (-30, 0, 0)

Quel axe utiliser pour faire tourner l'avion sur lui-même vers la gauche ou la droite ?

• Pour orienter le nez vers la droite, nous modifions la rotation autour de l'axe y : (0, 90, 0)
• Vers la gauche : (0, -90, 0)

Quel axe utiliser pour pencher l'avion sur sa gauche ou sa droite ?

• Pour incliner l’avion sur le côté gauche, nous utilisons l'axe z : (0, 0, 30)
• Sur le côté droit : (0, 0, -30)

Démonstration

Le maillage en triangles des objets 3D

Même si nous manipulons des cubes, des sphères ou des objets complexes, le moteur 3D ne comprend qu’une seule forme : le triangle. Ainsi, tous les objets 3D sont en réalité composés d’un ensemble de triangles assemblés. Cet ensemble est appelé un maillage (mesh).

Un triangle est défini par trois points dans l’espace, appelés sommets. Chaque sommet possède une position : (x, y, z). Un triangle se définit donc de la manière suivante : ((x1, y1, y2), (x2, y2, z2), (x3, y3, z3)).

La carte graphique relie ensuite ces trois points pour former une surface plane. Il faut donc comprendre que plus nous ajoutons de détails sur nos modèles, plus le nombre de points augmente, ce qui impacte les performances de la carte graphique.

Exemple : un carré (composé de deux triangles)

Un carré est défini par quatre points : A, B, C et D

Mais la carte graphique ne peut afficher que des triangles. Le carré est donc découpé en deux triangles :

• Triangle 1 : A → B → C
• Triangle 2 : A → C → D

Visuellement, cela forme bien un carré, mais techniquement, il s’agit de deux triangles.

Exemple : un cube

Un cube possède 6 faces et chaque face est composée de 2 triangles (exemple précédent). Donc un cube est composé de : 6 × 2 = 12 triangles. Même les objets les plus simples sont donc constitués de plusieurs triangles.

Exemple : une sphère

Une sphère n’est pas réellement ronde. Elle est composée de petits triangles :

• Avec peu de triangles, la sphère paraît anguleuse.
• Avec beaucoup de triangles, elle paraît parfaitement ronde.

Conclusion

Avant de créer un environnement ou un jeu en 3D, il était indispensable de comprendre les notions fondamentales sur lesquelles tout repose.

Dans cet article, nous avons découvert trois concepts essentiels :

• les coordonnées, qui permettent de positionner un objet dans l’espace
• la rotation, qui permet de définir son orientation
• le maillage, qui explique comment tous les objets 3D sont construits à partir de triangles

Ces notions peuvent sembler abstraites au premier abord, mais elles sont utilisées en permanence. Chaque objet que nous créerons possédera une position, une rotation, et sera composé d’un ensemble de triangles.

Comprendre ces bases permet d’éviter de nombreuses erreurs et de mieux maîtriser la création d’environnements 3D.

Dans le prochain article, nous mettrons ces concepts en pratique en créant notre première scène 3D avec A-Frame. Nous apprendrons à ajouter une caméra, des objets, un sol et des lumières afin de construire un environnement complet.

Ce sera la première étape vers la création de notre propre jeu en réalité virtuelle.