Jeux 3D sur le web

La documentation et les spécifications du projet WebGL sont gérées par le Groupe Khronos, pas le W3C comme pour la plupart des API Web. Le support sur les navigateurs modernes est très bon, même sur mobile, donc vous n'avez pas trop à vous en soucier. Les principaux navigateurs prennent en charge WebGL et tout ce dont vous avez besoin est de vous concentrer sur l'optimisation des performances sur les appareils que vous utilisez.

Il y a un effort continu pour rendre libre WebGL 2.0 (basé sur OpenGL ES 3.0) dans un proche avenir, ce qui apporterait de nombreuses améliorations et aiderait les développeurs à construire des jeux pour le Web moderne en utilisant le matériel puissant actuel.

Les bases de la théorie 3D s'articulent autour des formes représentées dans un espace 3D, avec un système de coordonnées utilisé pour calculer leurs positions. Consultez notre article de base sur la théorie 3D pour toutes les informations dont vous avez besoin.

Vous pouvez faire beaucoup plus avec WebGL. Il y a des concepts avancés dans lesquels vous devriez plonger et en apprendre davantage — les "shaders", la détection de collision ou le dernier sujet brûlant — la réalité virtuelle sur le Web.

Il convient de distinguer les shaders, qui sont un cas particulier. Les Shaders utilisent GLSL, un langage d'ombrage OpenGL spécial avec une syntaxe similaire à C, qui est exécuté directement par le pipeline graphique. Ils peuvent être divisés en "Vertex Shaders" et "Fragment Shaders" (ou "Pixel Shaders") — le premier transforme les positions des formes en véritables coordonnées de dessin 3D, tandis que le second calcule les couleurs de rendu et d'autres attributs. Vous devriez absolument lire l'article GLSL Shaders (en-US) pour en apprendre plus à leur sujet.

Il est difficile d'imaginer un jeu sans la détection de collision — nous devons toujours mettre au point quand quelque chose frappe quelque chose d'autre. Nous avons des informations disponibles pour votre apprentissage de :

• détection de collision 2D
• détection de collision 3D (en-US)

Le concept de réalité virtuelle n'est pas nouveau, mais il est en train de conquérir le web grâce à des avancées matérielles telles que l' Oculus Rift et l'API WebVR (actuellement expérimental) pour capturer les informations du matériel de réalité virtuelle et les rendre disponibles pour les applications JavaScript. Pour en savoir plus, lisez WebVR - Réalité virtuelle pour le Web (en-US).

Il y a aussi la construction d'une démo de base avec l'article A-Frame (en-US) qui montre comment il est facile de construire des environnements 3D pour la réalité virtuelle en utilisant le framework A-Frame .

Le codage de WebGL brut est assez complexe, mais vous aurez envie de le maîtriser à long terme, car vos projets seront plus avancés (consultez notre documentation WebGL pour commencer). Pour les projets de monde réel, vous utiliserez probablement aussi un "framework" pour accélérer le développement et vous aider à gérer le projet. L'utilisation d'un "framework" pour les jeux 3D permet également d'optimiser les performances, car les outils que vous utilisez vous permettent de vous concentrer sur la construction du jeu.

La bibliothèque 3D JavaScript la plus populaire est Three.js, un outil polyvalent qui rend les techniques 3D plus simples à implémenter. Il existe d'autres bibliothèques et cadres de développement de jeux populaires qui valent la peine d'être regardés ; A-Frame, PlayCanvas et Babylon.js sont parmi les plus reconnaissables avec une documentation riche, des éditeurs en ligne et des communautés actives.

A-Frame est un "framework" web pour construire des expériences 3D et de la réalité virtuelle. Sous le capot, il s'agit d'un "framework" three.js avec un modèle déclaratif entité-composant, ce qui signifie que nous pouvons construire des scènes avec seulement du HTML. Voir la page Construction d'une démo de base avec A-Frame (en-US) pour le processus étape par étape de création de la démo .

Babylon.js est l'un des moteurs de jeux 3D les plus populaires utilisés par les développeurs. Comme avec n'importe quelle autre bibliothèque 3D, il fournit des fonctions intégrées pour vous aider à implémenter les fonctionnalités 3D courantes plus rapidement. Voir la page Construction d'une démo de base avec Babylon.js (en-US) sur les bases et l'utilisation de Babylon.js, y compris la mise en place d'un environnement de développement, la structuration du code HTML nécessaire et l'écriture du code JavaScript.

PlayCanvas est un moteur de jeu 3D WebGL populaire ouvert sur GitHub, avec un éditeur disponible en ligne et une bonne documentation. Voir la page Construction d'une démo de base avec PlayCanvas pour des détails de haut niveau, et d'autres articles montrant comment créer des démos à l'aide de la bibliothèque PlayCanvas et de l'éditeur en ligne.

Three.js, comme toute autre bibliothèque, vous donne un énorme avantage : au lieu d'écrire des centaines de lignes de code WebGL pour construire quelque chose d'intéressant, vous pouvez utiliser des fonctions intégrées pour le faire beaucoup plus facilement et plus rapidement. Voir la page Construction d'une démo de base avec Three.js pour le processus étape par étape de création de la démo .

Les deux Unity et Unreal peuvent exporter votre jeu vers WebGL avec asm.js , de sorte que vous êtes libre d'utiliser leurs outils et techniques pour construire des jeux qui seront exportés vers le web.

Avec cet article, nous avons juste effleuré la surface de ce qu'il est possible de faire avec les technologies actuellement disponibles. Vous pouvez créer des jeux 3D immersifs, beaux et rapides à l'aide de WebGL, les bibliothèques et les frameworks s'appuient dessus.

Vous pouvez trouver tous les codes source de cette série de démos sur GitHub.

• Canvas API
• WebGL API
• WebVR API

• Three.js
• Whitestorm.js (basé sur Three.js)
• PlayCanvas
• Babylon.js
• A-Frame

• Construction d'une démo de base avec Three.js
• Construction d'une démo de base avec PlayCanvas
• Construction d'une démo de base avec Babylon.js (en-US)
• Construction d'une démo de base avec A-Frame (en-US)