1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
---
title: Jeux 3D sur le web
slug: Games/Techniques/3D_on_the_web
tags:
- 3D
- Images
- Jeux
- WebGL
- WebVR
- three.js
translation_of: Games/Techniques/3D_on_the_web
---
<div>{{GamesSidebar}}</div>
<p> {{IncludeSubnav("/fr/docs/Jeux")}}</p>
<p class="summary"><span id="result_box" lang="fr"><span>Pour des expériences de jeu riches sur le Web, l'arme de choix est WebGL, qui est fourni sur HTML {{htmlelement ("canvas")}}.</span> <span>WebGL est essentiellement un OpenGL ES 2.0 pour le Web - c'est une API JavaScript fournissant des outils pour créer des animations interactives riches et bien sûr aussi des jeux.</span> <span>Vous pouvez générer et rendre des graphiques 3D dynamiques avec du JavaScript accéléré.</span></span></p>
<h2 id="Documentation_et_support_du_navigateur"><span class="short_text" id="result_box" lang="fr"><span>Documentation et support du navigateur</span></span></h2>
<p>La documentation et les spécifications du projet <a href="https://developer.mozilla.org/fr/docs/Web/API/WebGL_API">WebGL</a> sont gérées par le <a href="https://www.khronos.org/">Groupe Khronos</a>, <span id="result_box" lang="fr"><span>pas le W3C comme pour la plupart des API Web.</span> <span>Le support sur les navigateurs modernes est très bon, même sur mobile, donc vous n'avez pas trop</span></span><span lang="fr"><span> à vous en soucier.</span> <span>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.</span></span></p>
<p><span id="result_box" lang="fr"><span>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.</span></span></p>
<h2 id="Explication_des_bases_de_la_théorie_3D">Explication des bases de la théorie 3D</h2>
<p><span id="result_box" lang="fr"><span>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.</span> <span>Consultez <a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Basic_theory">notre article de base sur la théorie 3D</a> pour toutes les informations dont vous avez besoin.</span></span></p>
<h2 id="Concepts_avancés">Concepts avancés</h2>
<p><span id="result_box" lang="fr"><span>Vous pouvez faire beaucoup plus avec WebGL.</span> <span>Il y a des concepts avancés dans lesquels vous devriez plonger et en apprendre davantage </span></span> — <span lang="fr"><span> les "shaders", la détection de collision ou le dernier sujet brûlant </span></span> — <span lang="fr"><span>la réalité virtuelle sur le Web.</span></span></p>
<h3 id="Shaders">Shaders</h3>
<p><span id="result_box" lang="fr"><span>Il convient de distinguer les shaders, qui sont un cas particulier.</span> <span>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.</span> <span>Ils peuvent être divisés en "Vertex Shaders" et "Fragment Shaders" (ou "Pixel Shaders") </span></span> — <span lang="fr"><span> 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.</span> <span>Vous devriez absolument lire l'article <a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders">GLSL Shaders</a> pour en apprendre plus à leur sujet.</span></span></p>
<h3 id="Détection_de_collision">Détection de collision</h3>
<p><span id="result_box" lang="fr"><span>Il est difficile d'imaginer un jeu sans la détection de collision </span></span> — <span lang="fr"><span> nous devons toujours mettre au point quand quelque chose frappe quelque chose d'autre.</span> <span>Nous avons des informations disponibles pour votre apprentissage de :</span></span></p>
<ul>
<li><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/2D_collision_detection">détection de collision 2D</a></li>
<li><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_collision_detection">détection de collision 3D</a></li>
</ul>
<h3 id="Réalité_virtuelle_sur_le_web">Réalité virtuelle sur le web</h3>
<p><span id="result_box" lang="fr"><span>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'</span></span> <a href="https://www.oculus.com/en-us/rift/">Oculus Rift</a> <span lang="fr"><span> et l'<a href="https://developer.mozilla.org/fr/docs/Web/API/WebVR_API">API WebVR</a> (actuellement expérimental) pour capturer les informations du matériel de réalité virtuelle et les rendre disponibles pour les applications JavaScript.</span> <span>Pour en savoir plus, lisez <a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/WebVR">WebVR - Réalité virtuelle pour le Web</a>.</span></span></p>
<p><span id="result_box" lang="fr"><span>Il y a aussi la <a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">construction d'une démo de base avec l'article A-Frame</a> qui montre comment il est facile de construire des environnements 3D pour la réalité virtuelle en utilisant le framework </span></span> <a href="http://aframe.io/">A-Frame</a> <span lang="fr"><span>.</span></span></p>
<h2 id="Lessor_des_bibliothèques_et_des_cadres"><span class="short_text" id="result_box" lang="fr"><span>L'essor des bibliothèques et des cadres</span></span></h2>
<p><span id="result_box" lang="fr"><span>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 <a href="https://developer.mozilla.org/fr/docs/Web/API/WebGL_API">documentation WebGL</a> pour commencer). Pour les projets de monde réel, vous utiliserez probablement aussi</span> <span>un </span></span> "framework" <span lang="fr"><span> pour accélérer le développement et vous aider à gérer le projet.</span> <span>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.</span></span></p>
<p><span id="result_box" lang="fr"><span>La bibliothèque 3D JavaScript la plus populaire est </span></span> <a href="http://threejs.org/">Three.js</a><span lang="fr"><span>, un outil polyvalent qui rend les techniques 3D plus simples à implémenter.</span> <span>Il existe d'autres bibliothèques et cadres de développement de jeux populaires qui valent la peine d'être regardés ;</span> </span> <a href="https://aframe.io">A-Frame</a>, <a href="https://playcanvas.com/">PlayCanvas</a> <span lang="fr"><span> et </span></span> <a href="http://www.babylonjs.com/">Babylon.js</a> <span lang="fr"><span> sont parmi les plus reconnaissables avec une documentation riche, des éditeurs en ligne et des communautés actives.</span></span></p>
<h3 id="Construction_dune_démo_de_base_avec_A-Frame"><span class="short_text" id="result_box" lang="fr"><span>Construction d'une démo de base avec A-Frame</span></span></h3>
<p>A-Frame <span id="result_box" lang="fr"><span>est un "framework" web pour construire des expériences 3D et de la réalité virtuelle.</span> <span>Sous le capot, il s'agit d'un "framework" </span></span> three.js <span lang="fr"><span> avec un modèle déclaratif entité-composant, ce qui signifie que nous pouvons construire des scènes avec seulement du HTML.</span> <span>Voir la page</span></span> <a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Construction d'une démo de base avec</a><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame"> A-Frame</a> <span id="result_box" lang="fr"><span>pour le processus étape par étape de création de la démo</span></span> .</p>
<h3 id="Construction_dune_démo_de_base_avec_Babylon.js">Construction d'une démo de base avec Babylon.js</h3>
<p><span class="seosummary">Babylon.js </span> <span id="result_box" lang="fr"><span>est l'un des moteurs de jeux 3D les plus populaires utilisés par les développeurs.</span> <span>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.</span> <span>Voir la page</span></span> <span class="seosummary"> <a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Construction d'une démo de base avec Babylon.js</a> sur les bases et l'utilisation de Babylon.js, </span> <span id="result_box" lang="fr"><span>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</span></span><span class="seosummary">.</span></p>
<h3 id="Construction_dune_démo_de_base_avec_PlayCanvas">Construction d'une démo de base avec PlayCanvas</h3>
<p><span id="result_box" lang="fr"><span>PlayCanvas est un moteur de jeu 3D WebGL populaire ouvert sur GitHub, avec un éditeur disponible en ligne et une bonne documentation.</span> <span>Voir la page</span></span> <a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Construction d'une démo de base avec PlayCanvas</a> pour des détails de haut niveau, <span id="result_box" lang="fr"><span>et d'autres articles montrant comment créer des démos à l'aide de la bibliothèque PlayCanvas et de l'éditeur en ligne.</span></span></p>
<h3 id="Construction_dune_démo_de_base_avec_Three.js">Construction d'une démo de base avec Three.js</h3>
<p>Three.js, <span id="result_box" lang="fr"><span>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.</span> <span>Voir la page</span></span> <a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Construction d'une démo de base avec Three.js</a> <span id="result_box" lang="fr"><span>pour le processus étape par étape de création de la démo</span></span> .</p>
<h3 id="Autres_outils">Autres outils</h3>
<p><span id="result_box" lang="fr"><span>Les deux </span></span> <a href="http://unity3d.com/">Unity</a> <span lang="fr"><span> et </span></span> <a href="https://www.unrealengine.com/">Unreal</a> <span lang="fr"><span> peuvent exporter votre jeu vers </span></span> <a href="https://developer.mozilla.org/fr/docs/Web/API/WebGL_API">WebGL</a> <span lang="fr"><span> avec </span></span> <a href="https://developer.mozilla.org/en-US/docs/Games/Tools/asm.js">asm.js</a> <span lang="fr"><span>, de sorte que vous êtes libre d'utiliser leurs outils et techniques pour construire des jeux qui seront exportés vers le web.</span></span></p>
<p><img alt="" src="http://end3r.github.io/MDN-Games-3D/A-Frame/img/shapes.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
<h2 id="Où_aller_ensuite">Où aller ensuite</h2>
<p><span id="result_box" lang="fr"><span>Avec cet article, nous avons juste effleuré la surface de ce qu'il est possible de faire avec les technologies actuellement disponibles.</span> <span>Vous pouvez créer des jeux 3D immersifs, beaux et rapides à l'aide de WebGL, les bibliothèques et les frameworks s'appuient dessus.</span></span></p>
<h3 id="Code_source">Code source</h3>
<p>Vous pouvez trouver tous les codes source de cette série de <a href="http://end3r.github.io/MDN-Games-3D/">démos sur GitHub</a>.</p>
<h3 id="API">API</h3>
<ul>
<li><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Canvas">Canvas API</a></li>
<li><a href="https://developer.mozilla.org/fr/docs/Web/API/WebGL_API">WebGL API</a></li>
<li><a href="https://developer.mozilla.org/fr/docs/Web/API/WebVR_API">WebVR API</a></li>
</ul>
<h3 id="Frameworks">Frameworks</h3>
<ul>
<li><a href="http://threejs.org/">Three.js</a></li>
<li><a href="http://whitestormjs.xyz/">Whitestorm.js</a> (basé sur Three.js)</li>
<li><a href="https://playcanvas.com/">PlayCanvas</a></li>
<li><a href="http://www.babylonjs.com/">Babylon.js</a></li>
<li><a href="http://aframe.io/">A-Frame</a></li>
</ul>
<h3 id="Tutorials">Tutorials</h3>
<ul>
<li><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js">Construction d'une démo de base avec Three.js</a></li>
<li><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas">Construction d'une démo de base avec PlayCanvas</a></li>
<li><span class="seosummary"><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js">Construction d'une démo de base avec Babylon.js</a></span></li>
<li><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame">Construction d'une démo de base avec</a><a href="https://developer.mozilla.org/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame"> A-Frame</a></li>
</ul>
|
