initial commit

27 files changed, 3660 insertions, 0 deletions

diff --git a/files/fr/web/api/webgl_api/by_example/appliquer_des_couleurs/index.html b/files/fr/web/api/webgl_api/by_example/appliquer_des_couleurs/index.html
new file mode 100644
index 0000000000..1d8db41a20
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/appliquer_des_couleurs/index.html
@@ -0,0 +1,100 @@
+---
+title: Appliquer des couleurs
+slug: Web/API/WebGL_API/By_example/Appliquer_des_couleurs
+tags:
+  - Apprendre
+  - Débutant
+  - Exemple
+  - Graphisme
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Clearing_with_colors
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Détecter_WebGL","Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_%C3%A0_la_souris")}}</p>
+
+<p class="summary">Dans cet article, on voit comment appliquer une couleur unie dans le contexte de rendu.</p>
+
+<p>{{EmbedLiveSample("Appliquer_une_couleur_unie_dans_le_contexte_WebGL",660,300)}}</p>
+
+<h3 id="Appliquer_une_couleur_unie_dans_le_contexte_WebGL">Appliquer une couleur unie dans le contexte WebGL</h3>
+
+<p>Voici l'application la plus simple de {{Glossary("WebGL")}} : appliquer un vert uni dans le {{domxref("WebGLRenderingContext","contexte de rendu")}}. On notera que la feuille de style {{Glossary("CSS")}} définit l'arrière-plan comme étant noir. Ainsi, quand le canevas s'affiche en vert, on sait que {{Glossary("WebGL")}} a fonctionné comme il fallait.</p>
+
+<p>Par ailleurs, vous pouvez remarquer que, pour appliquer une couleur unie sur le tampon (<em>buffer</em>) de dessin, on utilise deux étapes. Tout d'abord, on applique la couleur verte grâce à la méthode {{domxref("WebGLRenderingContext.clearColor()","clearColor()")}}. Cette opération ne modifie que l'état interne de {{Glossary("WebGL")}}, rien n'est peint/affiché pour le moment. Ensuite, on dessine « réellement » avec la méthode {{domxref("WebGLRenderingContext.clear()","clear()")}}. C'est la méthode classique pour dessiner avec WebGL. Il y a seulement quelques méthodes qui « dessinent » (dont <code>clear()</code>), toutes les autres méthodes permettent d'obtenir ou de modifier les variables liées aux états de WebGL (dont la couleur à appliquer).</p>
+
+<p>Il existe de nombreuses options pour modifier les états {{Glossary("WebGL")}}. La couleur à appliquer en est une parmi d'autres.{{Glossary("WebGL")}}/{{Glossary("OpenGL")}} est souvent qualifié d'automate à états. En fait, lorsque vous manipulez ces variables internes, ces « interrupteurs », vous modifiez l'état interne de WebGL, qui modifie à son tour la façon dont la sortie est retranscrite (dans cet exemple, cela correspond à l'étape où les pixels sont passés en vert).</p>
+
+<p>Enfin, vous pouvez voir que les couleurs manipulées en WebGL sont décrites avec le format {{Glossary("RGBA")}}. Ce format décrit quatre composantes numériques pour les intensités respectives des tons rouge (R), vert (<em>green</em> G), bleu (B) et alpha (qui correspond à l'opacité). C'est pour ça que <code>clearColor()</code> prend quatre arguments.</p>
+
+<pre class="brush: html">&lt;p&gt;Un programme WebGL très simple qui affiche une couleur.&lt;/p&gt;
+&lt;!-- Le texte d'un élément canvas est affiché uniquement
+    si canvas n'est pas supporté. --&gt;
+&lt;canvas&gt;Il semblerait que votre navigateur ne supporte pas
+    le canevas HTML5&lt;/canvas&gt;
+</pre>
+
+<pre class="brush: css">body {
+  text-align : center;
+}
+canvas {
+  display : block;
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+</pre>
+
+<pre class="brush: js">// On exécute tout dans le gestionnaire d'événement
+// correspondant au chargement de la fenêtre. De cette
+// façon, le DOM est complètement chargé et mis en forme
+// avant de le manipuler et d'encombrer la portée globale.
+// On donne un nom au gestionnaire (setupWebGL) afin de
+// pouvoir y faire référence par la suite.
+window.addEventListener("load", function setupWebGL (evt) {
+  "use strict"
+
+  // On fait le ménage : le gestionnaire se supprime lui-
+  // même car il n'a besoin d'être exécuté qu'une fois.
+  window.removeEventListener(evt.type, setupWebGL, false);
+
+  // On fait référence aux éléments du document.
+  var paragraph = document.querySelector("p"),
+    canvas = document.querySelector("canvas");
+
+  // On récupère le contexte de rendu WebGL.
+  var gl = canvas.getContext("webgl")
+    || canvas.getContext("experimental-webgl");
+
+  // Si cela échoue, on informe l'utilisateur.
+  // Sinon, on initialise la zone de dessin et on
+  // applique une couleur dans le contexte.
+  if (!gl) {
+    paragraph.innerHTML = "Échec de la récupération du "
+      + "contexte WebGL. Votre navigateur peut ne pas "
+      + " supporter WebGL.";
+    return;
+  }
+  paragraph.innerHTML =
+    "Félicitations, votre navigateur supporte WebGL. ";
+  gl.viewport(0, 0,
+    gl.drawingBufferWidth, gl.drawingBufferHeight);
+
+  // On définit la couleur qu'on veut appliquer
+  // (ici un vert foncé).
+  gl.clearColor(0.0, 0.5, 0.0, 1.0);
+
+  // Enfin, on applique la couleur dans le contexte. C'est
+  // cette fonction qui « dessine » réellement quelque chose.
+  gl.clear(gl.COLOR_BUFFER_BIT);
+
+}, false);
+</pre>
+
+<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/clearing-with-colors">GitHub</a>.</p>
+
+<div>{{PreviousNext("Apprendre/WebGL/Par_exemple/Détecter_WebGL","Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_%C3%A0_la_souris")}}</div>
diff --git a/files/fr/web/api/webgl_api/by_example/appliquer_des_découpes_simples/index.html b/files/fr/web/api/webgl_api/by_example/appliquer_des_découpes_simples/index.html
new file mode 100644
index 0000000000..3995861e83
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/appliquer_des_découpes_simples/index.html
@@ -0,0 +1,90 @@
+---
+title: Appliquer des découpes simples
+slug: Web/API/WebGL_API/By_example/Appliquer_des_découpes_simples
+tags:
+  - Apprendre
+  - Débutant
+  - Exemple
+  - Graphisme
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Basic_scissoring
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Masque_de_couleur","Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL")}}</p>
+
+<p class="summary">Dans cet article, on illustre comment dessiner des rectangles et des carrés grâce à des opérations de découpe simple (<em>scissoring</em>).</p>
+
+<p>{{EmbedLiveSample("Appliquer_les_changements_sur_le_buffer_lors_de_la_découpe",660,330)}}</p>
+
+<h3 id="Appliquer_les_changements_sur_le_buffer_lors_de_la_découpe">Appliquer les changements sur le <em>buffer</em> lors de la découpe</h3>
+
+<p>Voici une démonstration simple des opérations appliquées sur le contexte de rendu avec la méthode {{domxref("WebGLRenderingContext.scissor","scissor")}}.</p>
+
+<p>La commande {{domxref("WebGLRenderingContext.clear","clear()")}} permet de dessiner la couleur d'applique (définie à l'aide de {{domxref("WebGLRenderingContext.clearColor","clearColor()")}}) sur tous les pixels du tampon (<em>buffer</em>) de dessin. La commande  {{domxref("WebGLRenderingContext.scissor","scissor()")}} permet quant à elle de définir un masque qui permet de ne modifier que les pixels contenus dans un rectangle donné.</p>
+
+<p>Cet article représente une excellente occasion pour distinguer les <em>pixels</em> des <em>fragments</em>. Un pixel est un élément d'une image (en pratique c'est un point) sur l'écran ou un élément unique du tampon de dessin (l'espace mémoire qui contient les données relatives aux pixels comme les différentes composantes couleur). Un <em>fragment</em> fait référence au pixel manipulé par les processus {{Glossary("WebGL")}}.</p>
+
+<p>Cette distinction existe car la couleur d'un fragment (et ses autres caractéristiques comme la profondeur) peut être manipulée et modifiée à plusieurs reprises avant d'être écrite à l'écran. On a déjà vu comment la couleur d'un fragment pouvait être modifiée au cours des opérations graphiques en appliquant un {{domxref("WebGLRenderingContext.colorMask()","masque de couleur", "", 1)}}. Il existe d'autres cas où les fragments sont ignorés (le pixel n'est pass mis à jour) ou d'autres où ils interagissent avec la valeur du pixel existant (afin de fusionner les couleurs pour les éléments transparents qui composent une scène).</p>
+
+<p>Ici, on voit une autre distinction entre les fragments et les pixels. La découpe est une étape distincte du processus graphique de  {{Glossary("WebGL")}}/{{Glossary("OpenGL")}} (elle est traitée après l'applique de couleur et avant le masque de couleur). Avant que les pixels réels soient mis à jour, les fragments doivent passer le test de la découpe. S'ils réussissent ce test, ils continuent dans le processus de traitement et les pixels correspondants sont mis à jours. S'ils échouent, le processus rejette les fragments et ils ne sont plus gérés pour les traitements ultérieurs, les pixels correspondants ne seront pas mis à jour. Seuls les fragments appartenant à la zone rectangulaire donnée réussissent le test et seuls les pixels correspondants sont mis à jour. Au final, on obtient un rectangle qui est dessiné à l'écran.</p>
+
+<p>Par défaut, l'étape de découpe est désactivée dans le processus. Ici, on l'active avec la méthode  {{domxref("WebGLRenderingContext.enable","enable()")}} (<code>enable()</code> sera utilisée pour activer de nombreuses autres fonctionnalités liées à WebGL) avec la constante <code>SCISSOR_TEST</code>. Là aussi, on voit l'ordre généralement utilisé pour les commandes {{Glossary("WebGL")}}. Tout d'abord, on modifie l'état de WebGL (ici on active le test de découpe et on crée un masque rectangulaire). Une fois que l'état a bien été modifié, on exécute les commandes de dessin (ici <code>clear()</code>) pour commencer le processus de traitement des fragments.</p>
+
+<pre class="brush: html">&lt;p&gt;Le résultat de la découpe.&lt;/p&gt;
+&lt;canvas&gt;Il semblerait que votre navigateur
+    ne supporte pas l'élément canvas.&lt;/canvas&gt;
+</pre>
+
+<pre class="brush: css">body {
+  text-align : center;
+}
+canvas {
+  display : block;
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+</pre>
+
+<pre class="brush: js" id="livesample-js">window.addEventListener("load", function setupWebGL (evt) {
+  "use strict"
+  window.removeEventListener(evt.type, setupWebGL, false);
+  var paragraph = document.querySelector("p");
+  var canvas = document.querySelector("canvas");
+
+  // Les deux lignes suivantes définissent la taille,
+  // en pixels CSS, du buffer de dessin qui est la même
+  // que celle du canevas (définie avec CSS).
+  canvas.width = canvas.clientWidth;
+  canvas.height = canvas.clientHeight;
+
+  var gl = canvas.getContext("webgl")
+    || canvas.getContext("experimental-webgl");
+  if (!gl) {
+    paragraph.innerHTML = "Échec de la récupération du "
+      + "contexte WebGL. Votre navigateur pourrait ne pas "
+      + "supporter WebGL.";
+    return;
+  }
+  gl.viewport(0, 0,
+    gl.drawingBufferWidth, gl.drawingBufferHeight);
+
+  // On applique une découpe et on définit la taille de
+  // la zone de découpe.
+  gl.enable(gl.SCISSOR_TEST);
+  gl.scissor(40, 20, 60, 170);
+
+  // On applique un jaune uni dans le contexte de rendu.
+  gl.clearColor(1.0, 1.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+}, false);
+</pre>
+
+<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/basic-scissoring">GitHub</a>.</p>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Masque_de_couleur","Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL")}}</p>
diff --git a/files/fr/web/api/webgl_api/by_example/appliquer_une_couleur_à_la_souris/index.html b/files/fr/web/api/webgl_api/by_example/appliquer_une_couleur_à_la_souris/index.html
new file mode 100644
index 0000000000..7ca07c36e6
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/appliquer_une_couleur_à_la_souris/index.html
@@ -0,0 +1,122 @@
+---
+title: Appliquer une couleur à la souris
+slug: Web/API/WebGL_API/By_example/Appliquer_une_couleur_à_la_souris
+tags:
+  - Apprendre
+  - Débutant
+  - Exemple
+  - Graphisme
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Clearing_by_clicking
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs","Apprendre/WebGL/Par_exemple/Cr%C3%A9er_une_animation_color%C3%A9e")}}</p>
+
+<p class="summary">Dans cet article, on voit comment combiner les interactions de l'utilisateur et les opérations graphiques. Plus précisément, dans cet exemple, chaque clic de l'utilisateur déclenchera l'application d'une couleur aléatoire dans le contexte de rendu.</p>
+
+<p>{{EmbedLiveSample("Appliquer_des_couleurs_aléatoires_dans_le_contexte_de_rendu",660,410)}}</p>
+
+<h3 id="Appliquer_des_couleurs_aléatoires_dans_le_contexte_de_rendu">Appliquer des couleurs aléatoires dans le contexte de rendu</h3>
+
+<p>Cet exemple illustre simplement comment associer WebGL aux interactions utilisateur. Chaque fois que l'utilisateur cliquera sur le canevas ou sur le bouton, une couleur aléatoire sera appliquée sur le contexte de rendu.</p>
+
+<p>Ici, on montre comment on place les appels aux fonctions WebGL dans la fonction qui gère les événements :</p>
+
+<pre class="brush: html">&lt;p&gt;Un programme WebGL très simple qui affiche des couleurs
+    suite aux interactions utilisateur.&lt;/p&gt;
+&lt;p&gt;Vous pouvez cliquer sur le canevas ou sur le bouton pour
+    modifier la couleur.&lt;/p&gt;
+&lt;canvas id="canvas-view"&gt;Il semblerait que votre navigateur
+    ne supporte pas l'élément canvas.&lt;/canvas&gt;
+&lt;button id="color-switcher"&gt;Cliquez ici pour changer la couleur&lt;/button&gt;
+</pre>
+
+<pre class="brush: css">body {
+  text-align : center;
+}
+button {
+  display : inline-block;
+  font-size : inherit;
+  margin : auto;
+  padding : 0.6em;
+}
+canvas {
+  display : block;
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+</pre>
+
+<pre class="brush: js">// On exécute tout dans le gestionnaire d'événement
+// correspondant au chargement de la fenêtre. De cette
+// façon, le DOM est complètement chargé et mis en forme
+// avant de le manipuler et d'encombrer la portée globale.
+// On donne un nom au gestionnaire (setupWebGL) afin de
+// pouvoir y faire référence par la suite.
+window.addEventListener("load", function setupWebGL (evt) {
+  "use strict"
+
+  // On fait le ménage : le gestionnaire se supprime lui-
+  // même car il n'a besoin d'être exécuté qu'une fois.
+  window.removeEventListener(evt.type, setupWebGL, false);
+
+  // On ajoute le même gestionnaire de clic sur le canevas
+  // et sur le bouton.
+  var canvas = document.querySelector("#canvas-view");
+  var button = document.querySelector("#color-switcher");
+  canvas.addEventListener("click", switchColor, false);
+  button.addEventListener("click", switchColor, false);
+
+  // On crée une variable qui contiendra WebGLRenderingContext.
+  var gl;
+
+  // La déclaration du gestionnaire d'événement pour le clic.
+  function switchColor () {
+
+    // On utilise la variable gl définie en dehors.
+    // Si elle n'est pas définie, on récupère WebGLRenderingContext.
+    // Si cela échoue, on avertit l'utilisateur. Sinon, on
+    // initialise la zone de dessin (viewport)
+    if (!gl) {
+      gl = canvas.getContext("webgl")
+        || canvas.getContext("experimental-webgl");
+      if (!gl) {
+        alert("Échec de la récupération du \n"
+          + "contexte WebGL. Votre navigateur peut ne pas \n"
+          + " supporter WebGL.");
+        return;
+      }
+      gl.viewport(0, 0,
+        gl.drawingBufferWidth, gl.drawingBufferHeight);
+    }
+
+    // On obtient une couleur aléatoire grâce
+    // à une fonction auxiliaire.
+    var color = getRandomColor();
+
+    // On choisit cette couleur comme couleur à appliquer.
+    gl.clearColor(color[0], color[1], color[2], 1.0);
+
+    // On applique la nouvelle couleur dans le contexte.
+    // C'est cette fonction qui effectue « réellement »
+    // le dessin sur la zone.
+    gl.clear(gl.COLOR_BUFFER_BIT);
+  }
+
+  // Une fonction auxiliaire pour créer une couleur aléatoire.
+  function getRandomColor() {
+    return [Math.random(), Math.random(), Math.random()];
+  }
+
+}, false);
+</pre>
+
+<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/clearing-by-clicking">GitHub</a>.</p>
+
+<div>{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs","Apprendre/WebGL/Par_exemple/Cr%C3%A9er_une_animation_color%C3%A9e")}}</div>
diff --git a/files/fr/web/api/webgl_api/by_example/créer_une_animation_avec_découpe_et_applique/index.html b/files/fr/web/api/webgl_api/by_example/créer_une_animation_avec_découpe_et_applique/index.html
new file mode 100644
index 0000000000..8eb25287ab
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/créer_une_animation_avec_découpe_et_applique/index.html
@@ -0,0 +1,162 @@
+---
+title: Créer une animation avec découpe et applique
+slug: Web/API/WebGL_API/By_example/Créer_une_animation_avec_découpe_et_applique
+tags:
+  - Apprendre
+  - Débutant
+  - Exemple
+  - Graphisme
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Scissor_animation
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Modèle_1","Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle")}}</p>
+
+<p class="summary">Dans cet article, on voit comment créer des animations grâce à des opérations de découpe et d'applique.</p>
+
+<p>{{EmbedLiveSample("Une_animation_grâce_à_des_découpes",660,425)}}</p>
+
+<h3 id="Une_animation_grâce_à_des_découpes">Une animation grâce à des découpes</h3>
+
+<p>Dans cet exemple, on anime des carrés grâce aux méthodes {{domxref("WebGLRenderingContext.scissor()","scissor()")}} et {{domxref("WebGLRenderingContext.clear()","clear()")}}. Ensuite, on crée à nouveau une boucle d'animation grâce aux <em>timers</em>. Cette fois-ci, la position du carré (la zone de découpe) est mise à jour à chaque <em>frame </em>(on a environ une frame rafraîchie toutes les 17 millisecondes, ce qui correspond environ à 60fps (<em>frame per second</em> ou <em>frame </em>par seconde).</p>
+
+<p>En revanche, la couleur du carré (définie avec {{domxref("WebGLRenderingContext.clearColor()","clearColor")}}) est uniquement mise à jour lorsqu'un nouveau carré est créé. On voit ici que {{Glossary("WebGL")}} est un automate. Pour chaque carré, on définit sa couleur une fois puis on met à jour sa position à chaque <em>frame</em>. L'état lié à la couleur reste tel quel jusqu'à ce qu'un nouveau carré soit créé.</p>
+
+<pre class="brush: html hidden">&lt;p&gt;Une animation WebGL obtenue en appliquant des couleurs
+unies sur le buffer de dessin et en utilisant des tests de découpe.&lt;/p&gt;
+&lt;button id="animation-onoff"&gt;
+  Cliquez ici pour
+&lt;strong&gt;[verbe ici]&lt;/strong&gt;
+  l'animation&lt;/button&gt;
+&lt;canvas&gt;Il semblerait que votre navigateur
+    ne supporte pas l'élément HTML5 canvas.&lt;/canvas&gt;
+</pre>
+
+<pre class="brush: css hidden">body {
+  text-align : center;
+}
+canvas {
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+button {
+  display : block;
+  font-size : inherit;
+  margin : auto;
+  padding : 0.6em;
+}
+</pre>
+
+<pre class="brush: js hidden">;(function(){
+</pre>
+
+<pre class="brush: js">"use strict"
+window.addEventListener("load", setupAnimation, false);
+// Voici les variables qui permettront de
+// manipuler le contexte WebGL, la couleur
+// et la position des carrés.
+var gl,
+  color = getRandomColor(),
+  position;
+
+function setupAnimation (evt) {
+  window.removeEventListener(evt.type, setupAnimation, false);
+  if (!(gl = getRenderingContext()))
+    return;
+
+  gl.enable(gl.SCISSOR_TEST);
+  gl.clearColor(color[0], color[1], color[2], 1.0);
+
+  // À la différence de la fenêtre du navigateur,
+  // l'axe vertical de WebGL va dans le sens croissant
+  // du bas vers le haut. Dans cette position, on indique
+  // que la position initiale du carré est en haut à gauche
+  // du contexte de dessin
+  position = [0, gl.drawingBufferHeight];
+
+  var button = document.querySelector("button");
+  var timer;
+  function startAnimation(evt) {
+    button.removeEventListener(evt.type, startAnimation, false);
+    button.addEventListener("click", stopAnimation, false);
+    document.querySelector("strong").innerHTML = "arrêter";
+    timer = setInterval(drawAnimation, 17);
+    drawAnimation();
+  }
+  function stopAnimation(evt) {
+    button.removeEventListener(evt.type, stopAnimation, false);
+    button.addEventListener("click", startAnimation, false);
+    document.querySelector("strong").innerHTML = "lancer";
+    clearInterval(timer);
+  }
+  stopAnimation({type: "click"});
+}
+
+// Les variables qui permettront de stocker la taille
+// et la vitesse du carré.
+var size = [60, 60],
+  velocity = 3.0;
+function drawAnimation () {
+  gl.scissor(position[0], position[1], size[0] , size[1]);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  // À chaque frame, on définit une position plus basse
+  // pour le carré, c'est cela qui crée une illusion
+  // de mouvement.
+  position[1] -= velocity;
+  // Lorsque le carré atteint le bas, on crée un nouveau
+  // carré avec une nouvelle vitesse et une nouvelle
+  // couleur.
+  if (position[1] &lt; 0) {
+    // La position horizontale est choisie aléatoirement.
+    // La position verticale correspond au haut
+    // du buffer de dessin.
+    position = [
+      Math.random()*(gl.drawingBufferWidth - size[0]),
+      gl.drawingBufferHeight
+    ];
+    // Ici on détermine une vitesse aléatoire
+    // comprise entre 1.0 et 7.0
+    velocity = 1.0 + 6.0*Math.random();
+    color = getRandomColor();
+    gl.clearColor(color[0], color[1], color[2], 1.0);
+  }
+}
+
+function getRandomColor() {
+  return [Math.random(), Math.random(), Math.random()];
+}
+</pre>
+
+<pre class="brush: js hidden">function getRenderingContext() {
+  var canvas = document.querySelector("canvas");
+  canvas.width = canvas.clientWidth;
+  canvas.height = canvas.clientHeight;
+  var gl = canvas.getContext("webgl")
+    || canvas.getContext("experimental-webgl");
+  if (!gl) {
+    var paragraph = document.querySelector("p");
+    paragraph.innerHTML = "Échec de l'obtention du contexte "
+      + "WebGL. Votre navigateur ne supporte peut-être pas "
+      + "WebGL.";
+    return null;
+  }
+  gl.viewport(0, 0,
+    gl.drawingBufferWidth, gl.drawingBufferHeight);
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  return gl;
+}
+</pre>
+
+<pre class="brush: js hidden">})();
+</pre>
+
+<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/scissor-animation">GitHub</a>.</p>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Modèle_1","Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle")}}</p>
diff --git a/files/fr/web/api/webgl_api/by_example/créer_une_animation_colorée/index.html b/files/fr/web/api/webgl_api/by_example/créer_une_animation_colorée/index.html
new file mode 100644
index 0000000000..a38d174808
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/créer_une_animation_colorée/index.html
@@ -0,0 +1,139 @@
+---
+title: Créer une animation colorée
+slug: Web/API/WebGL_API/By_example/Créer_une_animation_colorée
+tags:
+  - Apprendre
+  - Débutant
+  - Exemple
+  - Graphisme
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Simple_color_animation
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_à_la_souris","Apprendre/WebGL/Par_exemple/Masque_de_couleur")}}</p>
+
+<p class="summary">Dans cet exemple, on crée une animation avec des couleurs en appliquant chaque seconde une couleur aléatoire dans le contexte de rendu {{Glossary("WebGL")}}.</p>
+
+<p>{{EmbedLiveSample("Créer_une_animation_avec_clear",660,425)}}</p>
+
+<h3 id="Créer_une_animation_avec_clear">Créer une animation avec <code> clear</code></h3>
+
+<p>Cet exemple illustre comment lancer une animation avec WebGL et gérer les interactions de l'utilisateur. L'utilisateur peut lancer, arrêter et reprendre l'animation en cliquant sur le bouton.</p>
+
+<p>Cette fois, on place les appels à la fonction WebGL à l'intérieur d'un gestionnaire d'événement de <em>timer</em>. Un gestionnaire d'événements pour les clics permet de gérer les interactions simples (lancer et arrêter l'animation). Le <em>timer</em> et la fonction de gestion du <em>timer</em> créent une boucle d'animation qui permet d'exécuter un ensemble de commandes pour le dessin à des intervalles réguliers (généralement, pour chaque <em>frame</em>, dans ce cas, on a une fréquence d'une <em>frame </em>par seconde).</p>
+
+<pre class="brush: html">&lt;p&gt;Un programme WebGL simple qui crée une animation colorée.&lt;/p&gt;
+&lt;p&gt;Vous pouvez sur le bouton pour activer/désactiver l'animation.&lt;/p&gt;
+&lt;canvas id="canvas-view"&gt;Il semblerait que votre navigateur ne
+    supporte pas l'élément canvas.&lt;/canvas&gt;
+&lt;button id="animation-onoff"&gt;
+  Cliquez ici pour
+&lt;strong&gt;[le verbe de l'action]&lt;/strong&gt;
+  l'animation
+&lt;/button&gt;
+</pre>
+
+<pre class="brush: css">body {
+  text-align : center;
+}
+button {
+  display : inline-block;
+  font-size : inherit;
+  margin : auto;
+  padding : 0.6em;
+}
+canvas {
+  display : block;
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+</pre>
+
+<pre class="brush: js" id="livesample-js">window.addEventListener("load", function setupAnimation (evt) {
+  "use strict"
+  window.removeEventListener(evt.type, setupAnimation, false);
+
+  // Une variable pour gérer le timer qui contrôle
+  // l'animation.
+  var timer;
+
+  // On ajoute un gestionnaire d'événement pour le clic.
+  var button = document.querySelector("#animation-onoff");
+  var verb = document.querySelector("strong");
+  function startAnimation(evt) {
+    button.removeEventListener(evt.type, startAnimation, false);
+    button.addEventListener("click", stopAnimation, false);
+    verb.innerHTML="arrêter";
+
+    // On place une boucle d'animation : on repeint
+    // environ chaque seconde.
+    timer = setInterval(drawAnimation, 1000);
+
+    // On dessine une frame d'animation afin de
+    // fournir un feedback à l'utilisateur.
+    drawAnimation();
+  }
+
+  function stopAnimation(evt) {
+    button.removeEventListener(evt.type, stopAnimation, false);
+    button.addEventListener("click", startAnimation, false);
+    verb.innerHTML="lancer";
+    // On arrête l'animation en réinitialisant le timer.
+    clearInterval(timer);
+  }
+
+  // On appelle stopAnimation() une fois pour mettre en place
+  // les gestionnaires d'événement pour le canevas et le bouton.
+  stopAnimation({type: "click"});
+
+  var gl;
+  function drawAnimation () {
+    if (!gl) {
+      var canvas = document.getElementById("canvas-view");
+      gl = canvas.getContext("webgl")
+        ||canvas.getContext("experimental-webgl");
+      if (!gl) {
+
+        // On ne veut pas avoir plusieurs messages d'alerte
+        // donc on arrête l'animation en réinitialisant le
+        // timer.
+        clearInterval(timer);
+        alert("Échec du chargement du contexte WebGL.\n"
+          + "Votre navigateur peut ne pas supporter WebGL.");
+        return;
+
+      }
+      gl.viewport(0, 0,
+        gl.drawingBufferWidth, gl.drawingBufferHeight);
+    }
+
+    // On génère une couleur aléatoire avec une fonction
+    // auxiliaire.
+    var color = getRandomColor();
+
+    // On applique la couleur obtenue dans le
+    // contexte WebGLRenderingContext
+    gl.clearColor(color[0], color[1], color[2], 1.0);
+
+    // On propage le changement dans le contexte
+    // avec la méthode clear.
+    gl.clear(gl.COLOR_BUFFER_BIT);
+  }
+
+  // Une fonction auxiliaire qui fournit une
+  // couleur aléatoire.
+  function getRandomColor() {
+    return [Math.random(), Math.random(), Math.random()];
+  }
+}, false);
+</pre>
+
+<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/simple-color-animation">GitHub</a>.</p>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_à_la_souris","Apprendre/WebGL/Par_exemple/Masque_de_couleur")}}</p>
diff --git a/files/fr/web/api/webgl_api/by_example/détecter_webgl/index.html b/files/fr/web/api/webgl_api/by_example/détecter_webgl/index.html
new file mode 100644
index 0000000000..fec1fd88a0
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/détecter_webgl/index.html
@@ -0,0 +1,79 @@
+---
+title: Détecter WebGL
+slug: Web/API/WebGL_API/By_example/Détecter_WebGL
+tags:
+  - Apprendre
+  - Débutant
+  - Exemple
+  - Graphisme
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Detect_WebGL
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<div>{{PreviousNext("Apprendre/WebGL/Par_exemple","Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs")}}</div>
+
+<p class="summary">Dans cet exemple, on voit comment détecter un contexte de rendu {{Glossary("WebGL")}} et afficher le résultat à l'utilisateur.</p>
+
+<p>{{EmbedLiveSample("Détecter_le_support_WebGL",660,150)}}</p>
+
+<h3 id="Détecter_le_support_WebGL">Détecter le support WebGL</h3>
+
+<p>Dans ce premier exemple, on vérifie si le navigateur prend en charge {{Glossary("WebGL")}}. Pour cela, on essaye d'obtenir le {{domxref("WebGLRenderingContext","contexte de rendu WebGL","",1)}} à partir d'un élément {{domxref("HTMLCanvasElement","canvas")}}. Le {{domxref("WebGLRenderingContext","contexte de rendu WebGL", "", 1)}} est une interface qui permet de connaître et de modifier l'état du moteur graphique WebGL, d'envoyer des données à WebGL et d'exécuter des commandes de dessin.</p>
+
+<p>La gestion d'une machine graphique au sein d'une seule interface n'est pas propre à {{Glossary("WebGL")}}. Les autres {̣{Glossary("API")}} graphiques comme {{domxref("CanvasRenderingContext2D","le contexte de rendu 2D du canevas", "", 1)}}. Cependant, les propriétés et variables qui peuvent être manipulées changent d'une API à l'autre.</p>
+
+<pre class="brush: html">&lt;p&gt;[ On affichera ici le résultat de la détection du support WebGL ]&lt;/p&gt;
+&lt;button&gt;Cliquez ici pour détecter WebGLRenderingContext&lt;/button&gt;
+</pre>
+
+<pre class="brush: css">body {
+  text-align : center;
+}
+button {
+  display : block;
+  font-size : inherit;
+  margin : auto;
+  padding : 0.6em;
+}
+</pre>
+
+<pre class="brush: js">// On exécute tout dans le gestionnaire d'événement
+// correspondant au chargement de la fenêtre. De cette
+// façon, le DOM est complètement chargé et mis en forme
+// avant de le manipuler.
+window.addEventListener("load", function() {
+  var paragraph = document.querySelector("p"),
+    button = document.querySelector("button");
+
+  // On ajoute un gestionnaire d'événement pour
+  // le clic sur le bouton
+  button.addEventListener("click", detectWebGLContext, false);
+  function detectWebGLContext () {
+
+    // On crée un élément canvas. Le canvas n'est pas
+    // ajouté au document et il n'est donc jamais
+    // affiché dans la fenêtre du navigateur
+    var canvas = document.createElement("canvas");
+
+    // On récupère le contexte WebGLRenderingContext
+    // depuis l'élément canvas.
+    var gl = canvas.getContext("webgl")
+      || canvas.getContext("experimental-webgl");
+
+    // On affiche le résultat.
+    if (gl &amp;&amp; gl instanceof WebGLRenderingContext) {
+      paragraph.innerHTML =
+        "Félicitations, votre navigateur supporte WebGL.";
+    } else {
+      paragraph.innerHTML = "Échec du contexte WebGL. "
+        + "Votre navigateur peut ne pas supporter WebGL.";
+    }
+  }
+}, false);
+</pre>
+
+<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/detect-webgl">GitHub</a>.</p>
+
+<div>{{PreviousNext("Apprendre/WebGL/Par_exemple","Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs")}}</div>
diff --git a/files/fr/web/api/webgl_api/by_example/générer_des_textures_avec_du_code/index.html b/files/fr/web/api/webgl_api/by_example/générer_des_textures_avec_du_code/index.html
new file mode 100644
index 0000000000..cd7d71f0c5
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/générer_des_textures_avec_du_code/index.html
@@ -0,0 +1,164 @@
+---
+title: Générer des textures avec du code
+slug: Web/API/WebGL_API/By_example/Générer_des_textures_avec_du_code
+tags:
+  - Apprendre
+  - Débutant
+  - Exemple
+  - Graphisme
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Textures_from_code
+---
+<div>{{draft}}{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex","Apprendre/WebGL/Par_exemple/Les_textures_vidéos")}}</p>
+
+<p class="summary">Dans cet article, on illustre simplement comment générer des textures procédurales avec des fragments de <em>shader</em><em>s</em>.</p>
+
+<p>{{EmbedLiveSample("Dessiner_des_textures_avec_du_code",660,350)}}</p>
+
+<h3 id="Dessiner_des_textures_avec_du_code">Dessiner des textures avec du  code</h3>
+
+<p>Il est possible d'appliquer des textures en effectuant des calculs pour chaque pixel du fragment de <em>shader</em>.</p>
+
+<pre class="brush: html hidden">&lt;p&gt;Génération d'une texture à partir de code. Simple demonstration
+    de la génération de textures procédurale&lt;/p&gt;
+&lt;canvas&gt;Il semblerait que votre navigateur ne supporte
+    pas l'élément canvas.&lt;/canvas&gt;
+</pre>
+
+<pre class="brush: css hidden">body {
+  text-align : center;
+}
+canvas {
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+button {
+  display : block;
+  font-size : inherit;
+  margin : auto;
+  padding : 0.6em;
+}
+</pre>
+
+<pre class="brush: html">&lt;script type="x-shader/x-vertex" id="vertex-shader"&gt;
+#version 100
+precision highp float;
+void main() {
+  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
+  gl_PointSize = 128.0;
+}
+&lt;/script&gt;
+</pre>
+
+<pre class="brush: html">&lt;script type="x-shader/x-fragment" id="fragment-shader"&gt;
+#version 100
+precision mediump float;
+// On définit une variation radiale (à partir du centre)
+void main() {
+  vec2 fragmentPosition = 2.0*gl_PointCoord - 1.0;
+  float distance = length(fragmentPosition);
+  float distanceSqrd = distance * distance;
+  gl_FragColor = vec4(
+    0.2/distanceSqrd,
+    0.1/distanceSqrd,
+    0.0, 1.0 );
+}
+&lt;/script&gt;
+</pre>
+
+<pre class="brush: js hidden">;(function(){
+</pre>
+
+<pre class="brush: js">"use strict"
+window.addEventListener("load", setupWebGL, false);
+var gl,
+  program;
+function setupWebGL (evt) {
+  window.removeEventListener(evt.type, setupWebGL, false);
+  if (!(gl = getRenderingContext()))
+    return;
+
+  var source = document.querySelector("#vertex-shader").innerHTML;
+  var vertexShader = gl.createShader(gl.VERTEX_SHADER);
+  gl.shaderSource(vertexShader,source);
+  gl.compileShader(vertexShader);
+  source = document.querySelector("#fragment-shader").innerHTML
+  var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+  gl.shaderSource(fragmentShader,source);
+  gl.compileShader(fragmentShader);
+  program = gl.createProgram();
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+  gl.linkProgram(program);
+  gl.detachShader(program, vertexShader);
+  gl.detachShader(program, fragmentShader);
+  gl.deleteShader(vertexShader);
+  gl.deleteShader(fragmentShader);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    var linkErrLog = gl.getProgramInfoLog(program);
+    cleanup();
+    document.querySelector("p").innerHTML =
+      "La liaison du programme de shader a échoué. "
+      + "Journal d'erreur : " + linkErrLog;
+    return;
+  }
+  initializeAttributes();
+  gl.useProgram(program);
+  gl.drawArrays(gl.POINTS, 0, 1);
+  cleanup();
+}
+
+var buffer;
+function initializeAttributes() {
+  gl.enableVertexAttribArray(0);
+  buffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0.0, 0.0]), gl.STATIC_DRAW);
+  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+}
+
+function cleanup() {
+gl.useProgram(null);
+if (buffer)
+  gl.deleteBuffer(buffer);
+if (program)
+  gl.deleteProgram(program);
+}
+</pre>
+
+<pre class="brush: js hidden">function getRenderingContext() {
+  var canvas = document.querySelector("canvas");
+  canvas.width = canvas.clientWidth;
+  canvas.height = canvas.clientHeight;
+  var gl = canvas.getContext("webgl")
+    || canvas.getContext("experimental-webgl");
+  if (!gl) {
+    var paragraph = document.querySelector("p");
+    paragraph.innerHTML = "Échec de l'obtention du contexte"
+      + " WebGL. Votre navigateur ne supporte peut-être"
+      + " pas WebGL.";
+    return null;
+  }
+  gl.viewport(0, 0,
+    gl.drawingBufferWidth, gl.drawingBufferHeight);
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  return gl;
+}
+</pre>
+
+<div class="hidden">
+<pre class="brush: js">})();
+</pre>
+</div>
+
+<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/textures-from-code">GitHub</a>.</p>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex","Apprendre/WebGL/Par_exemple/Les_textures_vidéos")}}</p>
diff --git a/files/fr/web/api/webgl_api/by_example/hello_glsl/index.html b/files/fr/web/api/webgl_api/by_example/hello_glsl/index.html
new file mode 100644
index 0000000000..b26df25f0f
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/hello_glsl/index.html
@@ -0,0 +1,159 @@
+---
+title: Hello GLSL
+slug: Web/API/WebGL_API/By_example/Hello_GLSL
+tags:
+  - Apprendre
+  - Débutant
+  - Exemple
+  - Graphisme
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Hello_GLSL
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle","Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex")}}</p>
+
+<p class="summary">Dans cet article, on décrit un programme de manipulation de <em>shaders</em> qui dessine un carré de couleur.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cet exemple devrait fonctionner pour l'ensemble des navigateurs récents. Cependant, pour les versions anciennes ou mobiles, il peut y avoir des dysfonctionnements. Si le canevas reste blanc, vous pouvez vérifier le résultat avec l'exemple suivant qui dessine exactement la même chose. Assurez-vous de bien lire les explications et le code présent sur cette page avant de passer à la suivante.</p>
+</div>
+
+<p>{{EmbedLiveSample("Hello_World_en_GLSL",660,425)}}</p>
+
+<h3 id="Hello_World_en_GLSL"><em>Hello World</em> en GLSL</h3>
+
+<p>Voici un exemple de premier programme qu'on peut écrire pour manipuler des <em>shaders</em>.</p>
+
+<pre class="brush: html hidden">&lt;p&gt;Hello World! Hello GLSL!&lt;/p&gt;
+&lt;canvas&gt;Votre navigateur semble ne pas
+    supporter l'élément HTML5.&lt;/canvas&gt;
+</pre>
+
+<pre class="brush: css hidden">body {
+  text-align : center;
+}
+canvas {
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+
+button {
+  display : block;
+  font-size : inherit;
+  margin : auto;
+  padding : 0.6em;
+}
+</pre>
+
+<pre class="brush: html">&lt;script type="x-shader/x-vertex" id="vertex-shader"&gt;
+#version 100
+void main() {
+  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
+  gl_PointSize = 64.0;
+}
+&lt;/script&gt;
+</pre>
+
+<pre class="brush: html">&lt;script type="x-shader/x-fragment" id="fragment-shader"&gt;
+#version 100
+void main() {
+  gl_FragColor = vec4(0.18, 0.54, 0.34, 1.0);
+}
+&lt;/script&gt;
+</pre>
+
+<pre class="brush: js hidden">;(function(){
+</pre>
+
+<pre class="brush: js">"use strict"
+window.addEventListener("load", setupWebGL, false);
+var gl,
+  program;
+function setupWebGL (evt) {
+  window.removeEventListener(evt.type, setupWebGL, false);
+  if (!(gl = getRenderingContext()))
+    return;
+
+  var source = document.querySelector("#vertex-shader").innerHTML;
+  var vertexShader = gl.createShader(gl.VERTEX_SHADER);
+  gl.shaderSource(vertexShader,source);
+  gl.compileShader(vertexShader);
+  source = document.querySelector("#fragment-shader").innerHTML
+  var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+  gl.shaderSource(fragmentShader,source);
+  gl.compileShader(fragmentShader);
+  program = gl.createProgram();
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+  gl.linkProgram(program);
+  gl.detachShader(program, vertexShader);
+  gl.detachShader(program, fragmentShader);
+  gl.deleteShader(vertexShader);
+  gl.deleteShader(fragmentShader);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    var linkErrLog = gl.getProgramInfoLog(program);
+    cleanup();
+    document.querySelector("p").innerHTML =
+      "La liaison du programme a échoué."
+      + "Journal d'erreur : " + linkErrLog;
+    return;
+  }
+
+  initializeAttributes();
+
+  gl.useProgram(program);
+  gl.drawArrays(gl.POINTS, 0, 1);
+
+  cleanup();
+}
+
+var buffer;
+function initializeAttributes() {
+  gl.enableVertexAttribArray(0);
+  buffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.vertexAttribPointer(0, 1, gl.FLOAT, false, 0, 0);
+}
+
+function cleanup() {
+gl.useProgram(null);
+if (buffer)
+  gl.deleteBuffer(buffer);
+if (program)
+  gl.deleteProgram(program);
+}
+</pre>
+
+<pre class="brush: js hidden">function getRenderingContext() {
+  var canvas = document.querySelector("canvas");
+  canvas.width = canvas.clientWidth;
+  canvas.height = canvas.clientHeight;
+  var gl = canvas.getContext("webgl")
+    || canvas.getContext("experimental-webgl");
+  if (!gl) {
+    var paragraph = document.querySelector("p");
+    paragraph.innerHTML = "Échec de l'obtention du contexte"
+      + " WebGL. Votre navigateur ne supporte peut-être"
+      + " pas WebGL.";
+    return null;
+  }
+  gl.viewport(0, 0,
+    gl.drawingBufferWidth, gl.drawingBufferHeight);
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  return gl;
+}
+</pre>
+
+<pre class="brush: js hidden">})();
+</pre>
+
+<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/hello-glsl">GitHub</a>.</p>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle","Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex")}}</p>
diff --git a/files/fr/web/api/webgl_api/by_example/index.html b/files/fr/web/api/webgl_api/by_example/index.html
new file mode 100644
index 0000000000..b7741c417f
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/index.html
@@ -0,0 +1,72 @@
+---
+title: WebGL par l'exemple
+slug: Web/API/WebGL_API/By_example
+tags:
+  - Apprendre
+  - Débutant
+  - Graphisme
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example
+---
+<div>{{IncludeSubnav("/fr/docs/Apprendre")}}</div>
+
+<p>{{Next("Apprendre/WebGL/Par_exemple/Détecter_WebGL")}}</p>
+
+<div class="summary">
+<p id="webgl-by-example-summary"><em>WebGL par l'exemple</em> est une série d'articles illustrant les concepts et les possibilités offertes par WebGL. Chaque exemple est accompagné d'explications. Ces démonstrations sont triés par sujet et par niveau de difficulté. Les concepts abordés sont, entre autres, le contexte de rendu, la programmation avec les <em>shaders</em>, les textures, la géométrie et l'interaction avec les utilisateurs.</p>
+</div>
+
+<h2 id="Les_exemples_par_catégorie">Les exemples, par catégorie</h2>
+
+<p>Les exemples de cette section sont triés par ordre de difficulté croissante. Plutôt que de les présenter sous la forme d'une longue liste, ils sont également répartis selon différentes catégories. Un sujet peut être abordé dans plusieurs exemples afin de couvrir des notions simples, intermédiaires ou avancées.</p>
+
+<p>Plutôt que de manipuler des <em>shaders</em>, optimiser des géométrie et gérer la mémoire {{Glossary("GPU")}} dans le premier exemple, la progression se fera étape par étape afin que les exemples et les concepts puissent mieux être compris.</p>
+
+<p>Les exemples sont expliqués, avec des commentaires dans le code et des paragraphes dédiés. Nous vous invitons à lire l'ensemble des commentaires au fur et à mesure, notamment pour les exemples plus avancés où ce qui a été vu auparavant ne sera pas expliqué à nouveau.</p>
+
+<h3 id="Apprendre_à_connaître_le_contexte_de_rendu">Apprendre à connaître le contexte de rendu</h3>
+
+<dl>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Détecter_WebGL">Détecter WebGL</a></dt>
+ <dd>Dans cet exemple, on montre comment détecter un contexte de rendu {{Glossary("WebGL")}} et l'afficher pour l'utilisateur.</dd>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs">Appliquer des couleurs</a></dt>
+ <dd>Dans cet exemple, on illustre comment appliquer une couleur unie dans un contexte de rendu.</dd>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_à_la_souris">Appliquer une couleur à la souris</a></dt>
+ <dd>Ici, on montre comment combiner des interactions utilisateurs avec des opérations graphiques (là, on appliquera une couleur aléatoire dans le contexte à chaque clic de l'utilisateur).</dd>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Créer_une_animation_colorée">Créer une animation colorée</a></dt>
+ <dd>Dans cet exemple, on crée une animation simple avec des couleurs en appliquant chaque seconde une couleur aléatoire dans le contexte de rendu WebGL.</dd>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Masque_de_couleur">Avoir un masque de couleur</a></dt>
+ <dd>Modifier des couleurs aléatoires avec des masques de couleur pour limiter l'intervalle de couleurs qu'on souhaite utiliser.</dd>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples">Appliquer des découpes simples</a></dt>
+ <dd>Dans cet exemple, on dessine des rectangles et des carrés simples grâce à des opérations de découpage (<em>scissoring</em>).</dd>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL">La taille du canevas et WebGL</a></dt>
+ <dd>Dans cet exemple, on observe ce qui se produit quand on définit (ou pas) la taille de l'élément <code>canvas</code> associé.</dd>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Modèle_1">Modèle 1</a></dt>
+ <dd>Dans cet exemple, on évoque les fragments de code qui seront utilisés pour les exemples qui suivent (et dans lesquels ils seront cachés car identiques). On définiera également une fonction JavaScript utilitaire pour initialiser WebGL plus facilement.</dd>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique">Créer une animation avec du découpage et de l'applique</a></dt>
+ <dd>Avec cet article, on illustre comment créer des animations grâce aux opérations de découpe et d'applique.</dd>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle">Une pluie de rectangle</a></dt>
+ <dd>On voit ici un jeu, simple, qui mélange les découpes, les animations et les interactions utilisateurs.</dd>
+</dl>
+
+<div>
+<h3 id="Les_bases_de_la_programmation_avec_les_shaders">Les bases de la programmation avec les <em>shaders</em></h3>
+
+<dl>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Hello_GLSL">Hello GLSL</a></dt>
+ <dd>Un programme de manipulation des shaders simple qui dessine un carré.</dd>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex">Introduction aux attributs de vertex</a></dt>
+ <dd>Ici, on combine la programmation des shaders et les interactions utilisateurs grâce aux attributs de vertex.</dd>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code">Générer des textures avec du code</a></dt>
+ <dd>Une démonstration simple sur l'utilisation des <em>shaders</em> et des textures procédurales.</dd>
+</dl>
+
+<h3 id="Divers_exemples_avancés">Divers exemples avancés</h3>
+
+<dl>
+ <dt><a href="/fr/docs/Apprendre/WebGL/Par_exemple/Les_textures_vidéos">Les textures vidéos</a></dt>
+ <dd>Dans cet exemple, on voit comment utiliser des fichiers vidéos comme des textures.</dd>
+</dl>
+
+<p>{{Next("Apprendre/WebGL/Par_exemple/Détecter_WebGL")}}</p>
+</div>
diff --git a/files/fr/web/api/webgl_api/by_example/introduction_aux_attributs_vertex/index.html b/files/fr/web/api/webgl_api/by_example/introduction_aux_attributs_vertex/index.html
new file mode 100644
index 0000000000..612dbad79c
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/introduction_aux_attributs_vertex/index.html
@@ -0,0 +1,171 @@
+---
+title: Introduction aux attributs de vertex
+slug: Web/API/WebGL_API/By_example/Introduction_aux_attributs_vertex
+tags:
+  - Apprendre
+  - Débutant
+  - Exemple
+  - Graphisme
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Hello_vertex_attributes
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Hello_GLSL","Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}</p>
+
+<p class="summary">Avec cet exemple, on voit comment combiner la programmation des <em>shaders</em> et les interactions utilisateurs grâce aux attributs des <em>vertex</em>.</p>
+
+<p>{{EmbedLiveSample("Un_Hello_World_en_GLSL",660,425)}}</p>
+
+<h3 id="Un_Hello_World_en_GLSL">Un <em>Hello World</em> en GLSL</h3>
+
+<p>Voici comment envoyer des données saisies à un programme de manipulation des <em>shaders</em> en utilisant la mémoire GPU.</p>
+
+<pre class="brush: html hidden">&lt;p&gt;Voici le premier exemple où on manipule des attributs et où
+on envoie des données au GPU. Cliquez sur le canevas pour modifier
+la position horizontale du carré.&lt;/p&gt;
+&lt;canvas&gt;Il semblerait que votre navigateur ne supporte pas
+    l'élément HTML5 canvas.&lt;/canvas&gt;
+</pre>
+
+<pre class="brush: css hidden">body {
+  text-align : center;
+}
+canvas {
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+button {
+  display : block;
+  font-size : inherit;
+  margin : auto;
+  padding : 0.6em;
+}
+</pre>
+
+<pre class="brush: html">&lt;script type="x-shader/x-vertex" id="vertex-shader"&gt;
+#version 100
+precision highp float;
+
+attribute float position;
+
+void main() {
+  gl_Position = vec4(position, 0.0, 0.0, 1.0);
+  gl_PointSize = 64.0;
+}
+&lt;/script&gt;
+</pre>
+
+<pre class="brush: html">&lt;script type="x-shader/x-fragment" id="fragment-shader"&gt;
+#version 100
+precision mediump float;
+void main() {
+  gl_FragColor = vec4(0.18, 0.54, 0.34, 1.0);
+}
+&lt;/script&gt;
+</pre>
+
+<pre class="brush: js hidden">;(function(){
+</pre>
+
+<pre class="brush: js">"use strict"
+window.addEventListener("load", setupWebGL, false);
+var gl,
+  program;
+function setupWebGL (evt) {
+  window.removeEventListener(evt.type, setupWebGL, false);
+  if (!(gl = getRenderingContext()))
+    return;
+
+  var source = document.querySelector("#vertex-shader").innerHTML;
+  var vertexShader = gl.createShader(gl.VERTEX_SHADER);
+  gl.shaderSource(vertexShader,source);
+  gl.compileShader(vertexShader);
+  source = document.querySelector("#fragment-shader").innerHTML
+  var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+  gl.shaderSource(fragmentShader,source);
+  gl.compileShader(fragmentShader);
+  program = gl.createProgram();
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+  gl.linkProgram(program);
+  gl.detachShader(program, vertexShader);
+  gl.detachShader(program, fragmentShader);
+  gl.deleteShader(vertexShader);
+  gl.deleteShader(fragmentShader);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    var linkErrLog = gl.getProgramInfoLog(program);
+    cleanup();
+    document.querySelector("p").innerHTML =
+      "Shader program did not link successfully. "
+      + "Error log: " + linkErrLog;
+    return;
+  }
+
+  initializeAttributes();
+  gl.useProgram(program);
+  gl.drawArrays(gl.POINTS, 0, 1);
+
+  document.querySelector("canvas").addEventListener("click",
+    function (evt) {
+      var clickXrelativToCanvas =
+          evt.pageX - evt.target.offsetLeft;
+      var clickXinWebGLCoords =
+          2.0 * (clickXrelativToCanvas- gl.drawingBufferWidth/2)
+          / gl.drawingBufferWidth;
+      gl.bufferData(gl.ARRAY_BUFFER,
+        new Float32Array([clickXinWebGLCoords]), gl.STATIC_DRAW);
+      gl.drawArrays(gl.POINTS, 0, 1);
+    }, false);
+}
+
+var buffer;
+function initializeAttributes() {
+  gl.enableVertexAttribArray(0);
+  buffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0.0]), gl.STATIC_DRAW);
+  gl.vertexAttribPointer(0, 1, gl.FLOAT, false, 0, 0);
+}
+
+window.addEventListener("beforeunload", cleanup, true);
+function cleanup() {
+  gl.useProgram(null);
+  if (buffer)
+    gl.deleteBuffer(buffer);
+  if (program)
+    gl.deleteProgram(program);
+}
+</pre>
+
+<pre class="brush: js hidden">function getRenderingContext() {
+  var canvas = document.querySelector("canvas");
+  canvas.width = canvas.clientWidth;
+  canvas.height = canvas.clientHeight;
+  var gl = canvas.getContext("webgl")
+    || canvas.getContext("experimental-webgl");
+  if (!gl) {
+    var paragraph = document.querySelector("p");
+    paragraph.innerHTML = "Failed to get WebGL context."
+      + "Your browser or device may not support WebGL.";
+    return null;
+  }
+  gl.viewport(0, 0,
+    gl.drawingBufferWidth, gl.drawingBufferHeight);
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  return gl;
+}
+</pre>
+
+<pre class="brush: js hidden">})();
+</pre>
+
+<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/hello-vertex-attributes">GitHub</a>.</p>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Hello_GLSL","Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}</p>
diff --git a/files/fr/web/api/webgl_api/by_example/les_textures_vidéos/index.html b/files/fr/web/api/webgl_api/by_example/les_textures_vidéos/index.html
new file mode 100644
index 0000000000..ab1ea5a388
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/les_textures_vidéos/index.html
@@ -0,0 +1,23 @@
+---
+title: Les textures vidéos
+slug: Web/API/WebGL_API/By_example/Les_textures_vidéos
+tags:
+  - Apprendre
+  - Avancé
+  - Exemple
+  - Graphisme
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Video_textures
+---
+<div>{{draft}}{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<p>{{Previous("Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}</p>
+
+<p class="summary">Cet exemple illustre comment utiliser des fichiers vidéos comme textures.</p>
+
+<h3 id="Des_textures_à_partir_de_vidéos">Des textures à partir de vidéos</h3>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample8/index.html', 670, 510)}}</p>
+
+<p>{{Previous("Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}</p>
diff --git a/files/fr/web/api/webgl_api/by_example/masque_de_couleur/index.html b/files/fr/web/api/webgl_api/by_example/masque_de_couleur/index.html
new file mode 100644
index 0000000000..ad5e0dd461
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/masque_de_couleur/index.html
@@ -0,0 +1,136 @@
+---
+title: Masque de couleur
+slug: Web/API/WebGL_API/By_example/Masque_de_couleur
+tags:
+  - Apprendre
+  - Débutant
+  - Exemple
+  - Graphisme
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Color_masking
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_colorée","Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples")}}</p>
+
+<div id="color-masking">
+<div class="summary">
+<p>Dans cet article, on modifie des couleurs aléatoires grâce à un masque de couleur. Cela permet de limiter la plage de couleurs affichées à certains tons.</p>
+</div>
+
+<p>{{EmbedLiveSample("color-masking-source",660,425)}}</p>
+
+<div id="color-masking-intro">
+<h3 id="Appliquer_un_masque_sur_des_couleurs_aléatoires">Appliquer un masque sur des couleurs aléatoires</h3>
+
+<p>Dans cet exemple, on modifie les couleurs aléatoires utilisées pour une animation grâce à l'opération {{domxref("WebGLRenderingContext.colorMask()","colorMask()")}}. D'une certaine façon, cette opération est analogue à la modification qu'on obtient lorsqu'on regarde à travers du verre teinté ou derrière une filtre coloré. Ainsi, en masquant les canaux vert et bleu, on ne pourra recevoir que les composantes rouges des pixels et cela donnera l'impression de regarder à travers du verre teinté de rouge.</p>
+
+<p>Les masques de couleur nous permettent d'illustrer quelques concepts de base <a href="https://en.wikipedia.org/wiki/Color_theory">de la théorie des couleurs</a>. En masquant certaines composantes, on rapproche les couleurs affichées de la couleur complémentaire. Ainsi, en masquant le bleu et le rouge, on obtiendrait des tons de vert. En masquant uniquement le canal bleu, on obtiendra des tons de jaune (dont orange, marron, olive, etc.) qui est la couleur complémentaire du bleu. De la même façon, en masquant uniquement le vert, on obtiendrait des tons magenta (pourpres, rouges, etc.) et en masquant uniquement le rouge, on obtiendrait des tons cyan.</p>
+
+<p>On voit que les appels à <code>colorMask()</code> sont uniquement déclenchés lorsque l'utilisateur clique sur l'un des boutons. En revanche, le rendu est fait chaque seconde grâce au timer. L'état du masque de couleur lié à {{Glossary("WebGL")}} est conservé et il n'est donc pas nécessaire d'appeler <code>colorMask()</code> à chaque frame pour régler le masque. Cela illustre la manière dont WebGL est un automate a état. Dans un premier temps, on initialise l'état de WebGL et ensuite, à chaque frame, on déclenche uniquement les opérations de dessin.</p>
+
+<p>Les masques de couleurs permettent d'avoir un contrôle précis pour mettre à jour les pixels à l'écran. En limitant les canaux de couleur qui sont utilisés à chaque commande de dessin, on peut utiliser chaque canal à bon escient et on peut par exemple stocler une image en ton de gris.</p>
+
+<p>Enfin, l'application d'un masque de couleur nous montre que {{Glossary("WebGL")}} n'est pas seulement un automate à états mais aussi un <em>processus</em> graphique. Cela signifie que les opérations graphiques liées à WebGL sont effectuées dans un ordre donné et que le résultat de chaque opération sert de point d'entrée pour l'opération suivante. Ainsi, l'opération d'applique définit la valeur pour chaque pixel. L'application du masque se produit plus tard dans le processus et modifie la couleur. Ainsi, le résultat final affiché à l'écran est teinté par la couleur du masque.</p>
+</div>
+
+<div id="color-masking-source">
+<pre class="brush: html">&lt;p&gt;Tinting the displayed colors with color masking.&lt;/p&gt;
+&lt;canvas&gt;Il semblerait que votre navigateur ne supporte pas
+    l'élément HTML5 canvas.&lt;/canvas&gt;
+&lt;button id="red-toggle"&gt;On&lt;/button&gt;
+&lt;button id="green-toggle"&gt;On&lt;/button&gt;
+&lt;button id="blue-toggle"&gt;On&lt;/button&gt;
+</pre>
+
+<pre class="brush: css">body {
+  text-align : center;
+}
+canvas {
+  display : block;
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+button {
+  display : inline-block;
+  font-family : serif;
+  font-size : inherit;
+  font-weight : 900;
+  color : white;
+  margin : auto;
+  padding : 0.6em 1.2em;
+}
+#red-toggle {
+  background-color : red;
+}
+#green-toggle {
+  background-color : green;
+}
+#blue-toggle {
+  background-color : blue;
+}
+</pre>
+
+<pre class="brush: js" id="livesample-js">window.addEventListener("load", function setupAnimation (evt) {
+  "use strict"
+  window.removeEventListener(evt.type, setupAnimation, false);
+
+  var canvas = document.querySelector("canvas");
+  var gl = canvas.getContext("webgl")
+      || canvas.getContext("experimental-webgl");
+  if (!gl) {
+    document.querySelector("p").innerHTML =
+      "Échec lors de l'obtention du contexte WebGL."
+      + "Votre navigateur ou appareil ne supporte "
+      + "peut-être pas WebGL.";
+    return;
+  }
+  gl.viewport(0, 0,
+    gl.drawingBufferWidth, gl.drawingBufferHeight);
+
+  var timer = setInterval(drawAnimation, 1000);
+
+  var mask = [true, true, true];
+  var redtoggle = document.querySelector("#red-toggle"),
+    greentoggle = document.querySelector("#green-toggle"),
+    bluetoggle = document.querySelector("#blue-toggle");
+  redtoggle.addEventListener("click", setColorMask, false);
+  greentoggle.addEventListener("click", setColorMask, false);
+  bluetoggle.addEventListener("click", setColorMask, false);
+
+  function setColorMask(evt) {
+    var index =
+      evt.target === greentoggle &amp;&amp; 1
+      || evt.target === bluetoggle &amp;&amp; 2
+      || 0;
+    mask[index] = !mask[index];
+    if (mask[index] === true)
+      evt.target.innerHTML="On";
+    else
+      evt.target.innerHTML="Off";
+    gl.colorMask(mask[0], mask[1], mask[2], true);
+    drawAnimation();
+  };
+
+  function drawAnimation () {
+    var color = getRandomColor();
+    gl.clearColor(color[0], color[1], color[2], 1.0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+  }
+
+  function getRandomColor() {
+    return [Math.random(), Math.random(), Math.random()];
+  }
+}, false);
+</pre>
+
+<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/color-masking">GitHub</a>.</p>
+</div>
+</div>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_colorée","Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples")}}</p>
diff --git a/files/fr/web/api/webgl_api/by_example/modèle_1/index.html b/files/fr/web/api/webgl_api/by_example/modèle_1/index.html
new file mode 100644
index 0000000000..a055a358c8
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/modèle_1/index.html
@@ -0,0 +1,97 @@
+---
+title: Modèle 1
+slug: Web/API/WebGL_API/By_example/Modèle_1
+tags:
+  - Apprendre
+  - Débutant
+  - Exemple
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Boilerplate_1
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL","Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique")}}</p>
+
+<p class="summary">Dans cet article, on décrit les fragments de code qui seront réutilisés pour les exemples suivants (où ils seront masqués pour une meilleur lisibilité). Parmi ce code, on définit une fonction JavaScript utilitaire qui permet de simplifier l'initialisation de WebGL.</p>
+
+<p>{{EmbedLiveSample("Socle_pour_l'initialisation_du_contexte_WebGL",660,400)}}</p>
+
+<h2 id="Socle_pour_l'initialisation_du_contexte_WebGL">Socle pour l'initialisation du contexte WebGL</h2>
+
+<p>Nous avons vu plusieurs fois les mêmes morceaux de {{Glossary("HTML")}}, {{Glossary("CSS")}} et {{Glossary("JavaScript")}}. Nous allons donc les cacher par la suite afin de mieux nous concentrer sur les parties du code qui sont pertinentes pour l'apprentissage de {{Glossary("WebGL")}}.</p>
+
+<p>Plus précisément, le code HTML contiendra</p>
+
+<ul>
+ <li>Un élément {{HTMLElement("p")}} qui décrira l'exemple et qui permettra d'afficher des messages d'erreur</li>
+ <li>Un élément {{HTMLElement("canvas")}}</li>
+ <li>Un bouton (élément {{HTMLElement("button")}})</li>
+</ul>
+
+<p>Les règles CSS s'appliqueront aux éléments <code>body</code>, <code>canvas</code> et <code>button</code>. Les éléments supplémentaires pour le code CSS et HTML seront détaillés dans les pages des exemples concernés.</p>
+
+<p>Dans les exemples suivants, on utilisera la fonction utilitaire JavaScript <code>getRenderingContext</code> pour initialiser {{domxref("WebGLRenderingContext","le contexte de rendu WebGL", "", 1)}}. Grâce aux exemples précédents, vous devriez pouvoir comprendre le rôle de cette fonction. Pour résumer, celle-ci</p>
+
+<ul>
+ <li>Obtient le contexte de rendu de la part de l'élément <code>canvas</code></li>
+ <li>Initialise le buffer de dessin</li>
+ <li>Nettoie le buffer avec <code>clear</code></li>
+ <li>Applique le contexte initialisé</li>
+</ul>
+
+<p>S'il y a une erreur, la fonction affiche un message d'erreur et renvoie <code>null</code>.</p>
+
+<p>Enfin, tout le code JavaScript est exécuté par une fonction immédiatement appelée (une technique plutôt commune avec JavaScript). La déclaration de la fonction et son invocation seront cachées.</p>
+
+<pre class="brush: html">&lt;p&gt;[ Un texte qui décrit l'exemple. ]&lt;/p&gt;
+&lt;button&gt;[ Un bouton optionnel pour les interactions. ]&lt;/button&gt;
+&lt;canvas&gt;Il semblerait que votre navigateur ne supporte
+    pas le canevas HTML5.&lt;/canvas&gt;
+</pre>
+
+<pre class="brush: css">body {
+  text-align : center;
+}
+canvas {
+  display : block;
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+button {
+  display : block;
+  font-size : inherit;
+  margin : auto;
+  padding : 0.6em;
+}
+</pre>
+
+<pre class="brush: js">function getRenderingContext() {
+  var canvas = document.querySelector("canvas");
+  canvas.width = canvas.clientWidth;
+  canvas.height = canvas.clientHeight;
+  var gl = canvas.getContext("webgl")
+    || canvas.getContext("experimental-webgl");
+  if (!gl) {
+    var paragraph = document.querySelector("p");
+    paragraph.innerHTML = "Échec de l'obtention du "
+      + "contexte WebGL."
+      + "Votre navigateur ou appareil ne supporte "
+      + "peut-être pas WebGL.";
+    return null;
+  }
+  gl.viewport(0, 0,
+    gl.drawingBufferWidth, gl.drawingBufferHeight);
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  return gl;
+}
+</pre>
+
+<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/boilerplate-1">GitHub</a>.</p>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL","Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique")}}</p>
diff --git a/files/fr/web/api/webgl_api/by_example/tailles_de_canvas_et_webgl/index.html b/files/fr/web/api/webgl_api/by_example/tailles_de_canvas_et_webgl/index.html
new file mode 100644
index 0000000000..086e0394a7
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/tailles_de_canvas_et_webgl/index.html
@@ -0,0 +1,82 @@
+---
+title: Tailles de canvas et WebGL
+slug: Web/API/WebGL_API/By_example/Tailles_de_canvas_et_WebGL
+tags:
+  - Apprendre
+  - Débutant
+  - Exemple
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Canvas_size_and_WebGL
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples","Apprendre/WebGL/Par_exemple/Modèle_1")}}</p>
+
+<p>{{EmbedLiveSample("Les_effets_liés_à_la_taille_du_canevas_sur_le_rendu_avec_WebGL",660,180)}}</p>
+
+<p class="summary">Dans cet exemple, on observe l'effet obtenu quand on définit (ou non) la taille du canevas HTML avec sa taille {{Glossary("CSS")}} (exprimée en pixels CSS), tel qu'il apparaît dans la fenêtre du navigateur.</p>
+
+<h3 id="Les_effets_liés_à_la_taille_du_canevas_sur_le_rendu_avec_WebGL">Les effets liés à la taille du canevas sur le rendu avec WebGL</h3>
+
+<p>Grâce aux méthodes {{domxref("WebGLRenderingContext.scissor()","scissor()")}} et {{domxref("WebGLRenderingContext.clear()","clear()")}} on peut démontrer que le tampon (<em>buffer</em>) de dessin WebGL est affecté par la taille du canevas (l'élément HTML <code>canvas</code>).</p>
+
+<p>La taille du premier canevas est définie avec la taille de l'élément, mis en forme, qui est déterminée par {{Glossary("CSS")}}. Pour cela, on affecte respectivement les valeurs {{domxref("Element.clientWidth","clientWidth")}} and {{domxref("Element.clientHeight","clientHeight")}} aux propriétés {{domxref("HTMLCanvasElement.width","width")}} et {{domxref("HTMLCanvasElement.height","height")}}.</p>
+
+<p>Pour le deuxième canevas, on n'applique pas ce traitement, c'est donc les dimensions internes du canevas : {{domxref("HTMLCanvasElement.width","width")}} et {{domxref("HTMLCanvasElement.height","height")}} qui sont prises en compte. Celles-ci sont différentes des dimensions de l'élément <code>canvas</code> affiché dans le fenêtre du navigateur.</p>
+
+<p>L'effet devient visible quand on utilise les méthodes {{domxref("WebGLRenderingContext.scissor()","scissor()")}} et {{domxref("WebGLRenderingContext.clear()","clear()")}} pour dessiner un carré au centre du canevas en définissant sa position et sa taille en pixels. Dans le premier canevas, on obtient bien le bon résultat et dans le deuxième, on a la mauvaise forme, la mauvaise taille et la mauvaise position.</p>
+
+<pre class="brush: html">&lt;p&gt;On compare les deux canevas.&lt;/p&gt;
+&lt;canvas&gt;Votre navigateur ne semble pas
+    supporter l'élément HTML5 canvas.&lt;/canvas&gt;
+&lt;canvas&gt;Votre navigateur ne semble pas
+    supporter l'élément HTML5 canvas.&lt;/canvas&gt;
+</pre>
+
+<pre class="brush: css">body {
+  text-align : center;
+}
+canvas {
+  width : 120px;
+  height : 80px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+</pre>
+
+<pre class="brush: js">window.addEventListener("load", function() {
+  "use strict"
+  var firstCanvas = document.getElementsByTagName("canvas")[0],
+    secondCanvas = document.getElementsByTagName("canvas")[1];
+
+  // Ici on applique le traitement spécifique au premier
+  // canevas
+  firstCanvas.width = firstCanvas.clientWidth;
+  firstCanvas.height = firstCanvas.clientHeight;
+
+  // Ensuite on traite les deux canevas de la même façon
+  [firstCanvas, secondCanvas].forEach(function(canvas) {
+    var gl = canvas.getContext("webgl")
+      || canvas.getContext("experimental-webgl");
+    if (!gl) {
+      document.querySelector("p").innerHTML =
+        "Échec de l'obtention du contexte WebGL. "
+        + "Votre navigateur peut ne pas supporter WebGL.";
+      return;
+    }
+    gl.viewport(0, 0,
+      gl.drawingBufferWidth, gl.drawingBufferHeight);
+    gl.enable(gl.SCISSOR_TEST);
+    gl.scissor(30, 10, 60, 60);
+    gl.clearColor(1.0, 1.0, 0.0, 1.0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+  });
+}, false);
+</pre>
+
+<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/canvas-size-and-webgl">GitHub</a>.</p>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples","Apprendre/WebGL/Par_exemple/Modèle_1")}}</p>
diff --git a/files/fr/web/api/webgl_api/by_example/une_pluie_de_rectangle/index.html b/files/fr/web/api/webgl_api/by_example/une_pluie_de_rectangle/index.html
new file mode 100644
index 0000000000..e9f9bcdf8c
--- /dev/null
+++ b/files/fr/web/api/webgl_api/by_example/une_pluie_de_rectangle/index.html
@@ -0,0 +1,176 @@
+---
+title: Une pluie de rectangle
+slug: Web/API/WebGL_API/By_example/Une_pluie_de_rectangle
+tags:
+  - Apprendre
+  - Débutant
+  - Exemple
+  - Graphisme
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/By_example/Raining_rectangles
+---
+<div>{{IncludeSubnav("/fr/Apprendre")}}</div>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique","Apprendre/WebGL/Par_exemple/Hello_GLSL")}}</p>
+
+<p class="summary">Cet exemple permet de créer un jeu simple qui illustre ce qu'il est possible de faire avec du « découpage », des animations et des interactions utilisateur.</p>
+
+<p>{{EmbedLiveSample("Utiliser_des_animations_et_des_interactions_grâce_à_des_découpes",660,425)}}</p>
+
+<h3 id="Utiliser_des_animations_et_des_interactions_grâce_à_des_découpes">Utiliser des animations et des interactions grâce à des découpes</h3>
+
+<p>Voici un jeu simple où il faut essayer de cliquer sur les rectangles qui tombent pour en attraper le plus possible. Dans cet exemple, on utilise un approche orientée objet pour représenter les rectangles. Cela permet de mieux gérer l'état du rectangle (sa position, sa couleur, etc.) et cela rend le code plus compact et plus facile à réutiliser.</p>
+
+<p>Dans cet exemple, on combine l'applique de couleurs unis dans le tampon de dessin et des opérations de découpe. C'est un aperçu d'une application graphique complète qui manipule les différentes phases des processus {{Glossary("WebGL")}} et de son automate.</p>
+
+<p>De plus, cet exmple illustre comment intégrer des fonctions WebGL dans une boucle de jeu. La boucle de jeu est responsable du dessin pour l'animation, de la gestion des entrées utilisateur et de la réactivité de l'ensemble. Voici comment la boucle de jeu est implémentée avec des  <code>setTimeout</code>.</p>
+
+<pre class="brush: html hidden">&lt;p&gt;Vous en avez attrapé
+&lt;strong&gt;0&lt;/strong&gt;.
+  Vous en avez loupé
+&lt;strong&gt;0&lt;/strong&gt;.&lt;/p&gt;
+&lt;canvas&gt;Il semblerait que votre
+    navigateur ne supporte pas l'élément
+    HTML5 canvas.&lt;/canvas&gt;
+</pre>
+
+<pre class="brush: css hidden">body {
+  text-align : center;
+}
+canvas {
+  display : block;
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+button {
+  display : block;
+  font-size : inherit;
+  margin : auto;
+  padding : 0.6em;
+}
+</pre>
+
+<pre class="brush: js hidden">;(function(){
+</pre>
+
+<pre class="brush: js" id="livesample-js">"use strict"
+window.addEventListener("load", setupAnimation, false);
+var gl,
+  timer,
+  rainingRect,
+  scoreDisplay,
+  missesDisplay;
+function setupAnimation (evt) {
+  window.removeEventListener(evt.type, setupAnimation, false);
+  if (!(gl = getRenderingContext()))
+    return;
+  gl.enable(gl.SCISSOR_TEST);
+
+  rainingRect = new Rectangle();
+  timer = setTimeout(drawAnimation, 17);
+  document.querySelector("canvas")
+      .addEventListener("click", playerClick, false);
+  var displays = document.querySelectorAll("strong");
+  scoreDisplay = displays[0];
+  missesDisplay = displays[1];
+}
+
+var score = 0,
+  misses = 0;
+function drawAnimation () {
+  gl.scissor(rainingRect.position[0], rainingRect.position[1],
+      rainingRect.size[0] , rainingRect.size[1]);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  rainingRect.position[1] -= rainingRect.velocity;
+  if (rainingRect.position[1] &lt; 0) {
+    misses += 1;
+    missesDisplay.innerHTML = misses;
+    rainingRect = new Rectangle();
+  }
+  // On utilise la fonction setTimeout pour l'animation
+  // et on appelle ainsi la fonction drawAnimation toutes
+  // les 17ms, sinon, on n'aurait pas d'animation.
+  timer = setTimeout(drawAnimation, 17);
+}
+
+function playerClick (evt) {
+  // Il est nécessaire de transfomer la position de l'événement
+  // déclenché par le clic, exprimée dans le repèree de la fenêtre
+  // pour obtenir la position relative au canevas.
+  // De plus, on rappelle qu'avec WebGL les ordonnées croissent
+  // selon l'axe vertical, c'est-à-dire l'inverse du système
+  // utilisé pour la fenêtre du navigateur.
+  var position = [
+      evt.pageX - evt.target.offsetLeft,
+      gl.drawingBufferHeight - (evt.pageY - evt.target.offsetTop),
+    ];
+  // si le clic est sur un rectangle, on l'attrape.
+  // On incrémente donc le score et on crée un nouveau rectangle
+  var diffPos = [ position[0] - rainingRect.position[0],
+      position[1] - rainingRect.position[1] ];
+  if ( diffPos[0] &gt;= 0 &amp;&amp; diffPos[0] &lt; rainingRect.size[0]
+      &amp;&amp; diffPos[1] &gt;= 0 &amp;&amp; diffPos[1] &lt; rainingRect.size[1] ) {
+    score += 1;
+    scoreDisplay.innerHTML = score;
+    rainingRect = new Rectangle();
+  }
+}
+
+function Rectangle () {
+  // On garde une référence au nouvel objet Rectangle
+  // plutôt que de risquer une confusion avec this.
+  var rect = this;
+  // On prend trois nombres aléatoires pour la taille
+  // et la position du nouveau rectangle. On utilise
+  // un nombre différent pour la position et la taille
+  // car on veut que celles-ci soient indépendantes.
+  var randNums = getRandomVector();
+  rect.size = [
+    5 + 120 * randNums[0],
+    5 + 120 * randNums[1]
+  ];
+  rect.position = [
+    randNums[2]*(gl.drawingBufferWidth - rect.size[0]),
+    gl.drawingBufferHeight
+  ];
+  rect.velocity = 1.0 + 6.0*Math.random();
+  rect.color = getRandomVector();
+  gl.clearColor(rect.color[0], rect.color[1], rect.color[2], 1.0);
+  function getRandomVector() {
+    return [Math.random(), Math.random(), Math.random()];
+  }
+}
+</pre>
+
+<pre class="brush: js hidden">function getRenderingContext() {
+  var canvas = document.querySelector("canvas");
+  canvas.width = canvas.clientWidth;
+  canvas.height = canvas.clientHeight;
+  var gl = canvas.getContext("webgl")
+    || canvas.getContext("experimental-webgl");
+  if (!gl) {
+    var paragraph = document.querySelector("p");
+    paragraph.innerHTML = "Échec de l'obtention du contexte."
+      + " WebGL. Votre navigateur ne supporte peut-être pas "
+      + " WebGL.";
+    return null;
+  }
+  gl.viewport(0, 0,
+    gl.drawingBufferWidth, gl.drawingBufferHeight);
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  return gl;
+}
+</pre>
+
+<pre class="brush: js hidden">})();
+</pre>
+
+<p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/raining-rectangles">GitHub</a>.</p>
+
+<p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique","Apprendre/WebGL/Par_exemple/Hello_GLSL")}}</p>
diff --git a/files/fr/web/api/webgl_api/données/index.html b/files/fr/web/api/webgl_api/données/index.html
new file mode 100644
index 0000000000..f41b0e2f1d
--- /dev/null
+++ b/files/fr/web/api/webgl_api/données/index.html
@@ -0,0 +1,56 @@
+---
+title: Les données en WebGL
+slug: Web/API/WebGL_API/Données
+tags:
+  - 3D
+  - API WebGL
+  - Attributs
+  - BesoinDExemple
+  - BesoinDeContenu
+  - Graphismes
+  - Graphismes 3D
+  - Guide
+  - Intermédiaire
+  - Uniformes
+  - Variants
+  - WebGL
+  - dessin
+translation_of: Web/API/WebGL_API/Data
+---
+<div>{{WebGLSidebar}}{{draft}}</div>
+
+<p>Les programmes shaders ont accès à trois types de stockage de données, chacun d'entre eux ayant un usage particulier. Chaque type de variable est accessible par l'un des types de programmes de shader ou par les deux (en fonction du type de stockage de données), et éventuellement, par le code JavaScript du site, suivant le type de variable particulier.</p>
+
+<h2 id="Types_de_données_GLSL">Types de données GLSL</h2>
+
+<p>&lt;&lt;documenter les types de base, les vecteurs, etc. ; voir <a href="https://www.khronos.org/opengl/wiki/Data_Type_(GLSL)">Data Type (GLSL)</a>  sur le wiki WebGL de Khronos &gt;&gt;</p>
+
+<h2 id="Variables_GLSL">Variables GLSL</h2>
+
+<p>Il existe trois types de stockage "variable" ou de stockage de données dans GLSL, chacun ayant son propre but et ses propres cas d'utilisation : <strong>{{anch("Attributes", "attributes")}}</strong>, <strong>{{anch("Varyings", "varyings")}}</strong>, et <strong>{{anch("Uniforms", "uniforms")}}</strong>.</p>
+
+<h3 id="Attributes">Attributes</h3>
+
+<p>Les <strong>attributes</strong> sont des variables GLSL qui ne sont disponibles que pour le shader de sommet (en tant que variables) et le code JavaScript. Les attributs sont généralement utilisés pour stocker des informations de couleur, des coordonnées de texture et toutes les autres données calculées ou récupérées qui doivent être partagées entre le code JavaScript et le shader de sommet.</p>
+
+<p>&lt;&lt;add how to use them&gt;&gt;</p>
+
+<h3 id="Varyings">Varyings</h3>
+
+<p>Les <strong>varyings</strong> sont des variables déclarées par le shader de sommet et elle sont utilisées pour transmettre des données du shader de sommet au shader de fragment. Ceci est communément utilisé pour partager un sommet {{interwiki ("wikipedia", "Normal_ (géométrie)", "vecteur normal")}} après qu'il a été calculé par le shader de sommet.</p>
+
+<p>&lt;&lt;how to use&gt;&gt;</p>
+
+<h3 id="Uniforms">Uniforms</h3>
+
+<p>Les <strong>uniforms</strong> sont définis par le code JavaScript et sont disponibles à la fois pour le shader de sommet et pour celui de fragment. Ils sont utilisés pour fournir des valeurs qui seront les mêmes pour tout ce qui est dessiné dans le cadre, telles que les positions et les intensités d'éclairage, la transformation globale et les détails de la perspective, et ainsi de suite.</p>
+
+<p>&lt;&lt;add details&gt;&gt;</p>
+
+<h2 id="Tampons">Tampons</h2>
+
+<p>&lt;&lt;add information&gt;&gt;</p>
+
+<h2 id="Textures">Textures</h2>
+
+<p>&lt;&lt;add information&gt;&gt;</p>
diff --git a/files/fr/web/api/webgl_api/index.html b/files/fr/web/api/webgl_api/index.html
new file mode 100644
index 0000000000..27bb717381
--- /dev/null
+++ b/files/fr/web/api/webgl_api/index.html
@@ -0,0 +1,303 @@
+---
+title: 'L''API WebGL : graphismes 2D et 3D pour le web'
+slug: Web/API/WebGL_API
+tags:
+  - 3D
+  - API WebGL
+  - Avancé
+  - Graphiques
+  - Graphiques 3D
+  - Media
+  - Vue d'ensemble
+  - WebGL
+translation_of: Web/API/WebGL_API
+---
+<div>{{WebGLSidebar}}</div>
+
+<div class="summary">
+<p>WebGL (Bibliothèque de Graphismes Web) est une API JavaScript pour l'affichage de graphismes 2D et 3D dans n'importe quel navigateur web compatible sans utilisation de modules complémentaires. WebGl réalise cela en introduisant une API qui se conforme de façon très proche à OpenGL ES 2.0 et qui peut être utilisée dans les éléments <a href="/fr/docs/HTML/Canvas" title="/fr/docs/HTML/Canvas">canvas </a>d'HTML5.</p>
+</div>
+
+<p>Le support pour WebGL est présent dans <a href="https://developer.mozilla.org/fr-FR/Firefox" title="Firefox 4 for developers">Firefox</a> 4+, <a href="http://www.google.com/chrome/" title="http://www.google.com/chrome/">Google Chrome</a> 9+, <a href="http://www.opera.com/" title="http://www.opera.com/">Opera</a> 12+, <a href="http://www.apple.com/safari/" title="http://www.apple.com/fr/safari/">Safari </a>5.1+ and <a href="http://windows.microsoft.com/fr-fr/internet-explorer/browser-ie" title="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> 11+ ; toutefois, l'appareil de l'utilisateur doit aussi avoir le matériel qui supporte ces fonctionnalités.</p>
+
+<p>L'élément {{HTMLElement("canvas")}} est aussi utilisé par <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/Canvas_API">Canvas 2D</a> pour faire des graphismes 2D sur les pages web.</p>
+
+<h2 id="Référence">Référence</h2>
+
+<h3 id="Interfaces_standard">Interfaces standard</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("WebGLRenderingContext")}}</li>
+ <li>{{domxref("WebGL2RenderingContext")}} {{experimental_inline}}</li>
+ <li>{{domxref("WebGLActiveInfo")}}</li>
+ <li>{{domxref("WebGLBuffer")}}</li>
+ <li>{{domxref("WebGLContextEvent")}}</li>
+ <li>{{domxref("WebGLFramebuffer")}}</li>
+ <li>{{domxref("WebGLProgram")}}</li>
+ <li>{{domxref("WebGLQuery")}} {{experimental_inline}}</li>
+ <li>{{domxref("WebGLRenderbuffer")}}</li>
+ <li>{{domxref("WebGLSampler")}} {{experimental_inline}}</li>
+ <li>{{domxref("WebGLShader")}}</li>
+ <li>{{domxref("WebGLShaderPrecisionFormat")}}</li>
+ <li>{{domxref("WebGLSync")}} {{experimental_inline}}</li>
+ <li>{{domxref("WebGLTexture")}}</li>
+ <li>{{domxref("WebGLTransformFeedback")}} {{experimental_inline}}</li>
+ <li>{{domxref("WebGLUniformLocation")}}</li>
+ <li>{{domxref("WebGLVertexArrayObject")}} {{experimental_inline}}</li>
+</ul>
+</div>
+
+<h3 id="Extensions">Extensions</h3>
+
+<div class="index">
+<ul>
+ <li>{{domxref("ANGLE_instanced_arrays")}}</li>
+ <li>{{domxref("EXT_blend_minmax")}}</li>
+ <li>{{domxref("EXT_color_buffer_float")}}</li>
+ <li>{{domxref("EXT_color_buffer_half_float")}}</li>
+ <li>{{domxref("EXT_disjoint_timer_query")}}</li>
+ <li>{{domxref("EXT_frag_depth")}}</li>
+ <li>{{domxref("EXT_sRGB")}}</li>
+ <li>{{domxref("EXT_shader_texture_lod")}}</li>
+ <li>{{domxref("EXT_texture_filter_anisotropic")}}</li>
+ <li>{{domxref("OES_element_index_uint")}}</li>
+ <li>{{domxref("OES_standard_derivatives")}}</li>
+ <li>{{domxref("OES_texture_float")}}</li>
+ <li>{{domxref("OES_texture_float_linear")}}</li>
+ <li>{{domxref("OES_texture_half_float")}}</li>
+ <li>{{domxref("OES_texture_half_float_linear")}}</li>
+ <li>{{domxref("OES_vertex_array_object")}}</li>
+ <li>{{domxref("WEBGL_color_buffer_float")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_astc")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_atc")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_etc")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_etc1")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_pvrtc")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_s3tc")}}</li>
+ <li>{{domxref("WEBGL_compressed_texture_s3tc_srgb")}}</li>
+ <li>{{domxref("WEBGL_debug_renderer_info")}}</li>
+ <li>{{domxref("WEBGL_debug_shaders")}}</li>
+ <li>{{domxref("WEBGL_depth_texture")}}</li>
+ <li>{{domxref("WEBGL_draw_buffers")}}</li>
+ <li>{{domxref("WEBGL_lose_context")}}</li>
+</ul>
+</div>
+
+<h3 id="Evènements">Evènements</h3>
+
+<ul>
+ <li>{{Event("webglcontextlost")}}</li>
+ <li>{{Event("webglcontextrestored")}}</li>
+ <li>{{Event("webglcontextcreationerror")}}</li>
+</ul>
+
+<h3 id="Constantes_et_types">Constantes et types</h3>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/Constants">Constantes WebGL</a></li>
+ <li><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/Types">Types WebGL </a></li>
+</ul>
+
+<h3 id="WebGL_2">WebGL 2</h3>
+
+<p>WebGL 2 est une mise à jour majeure de WebGL, qui est fournie à travers l'interface {{domxref("WebGL2RenderingContext")}}. Elle est basée sur OpenGL ES 3.0, et ses nouvelles fonctionnalités comprennent :</p>
+
+<ul>
+ <li>les <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL2RenderingContext/texImage3D">textures 3D</a>,</li>
+ <li>les <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGLSampler">objets Sampler</a>,</li>
+ <li>les <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL2RenderingContext#Uniform_buffer_objects">objets de tampon Uniform</a>,</li>
+ <li>les <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGLSync">objets Sync</a>,</li>
+ <li>les <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLQuery">objets Query</a>,</li>
+ <li>les <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGLTransformFeedback">objets Tranform Feedback</a>,</li>
+ <li>des extensions promues, qui sont maintenant essentielles pour WebGL 2 : les <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGLVertexArrayObject">objets Vertex Array</a>, l'<a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL2RenderingContext/drawArraysInstanced">instanciation</a>, les <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL2RenderingContext/drawBuffers">cibles de rendu multiples</a>, la <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/EXT_frag_depth">profondeur de fragment</a>.</li>
+</ul>
+
+<p>Voir aussi le post de blog <a href="https://hacks.mozilla.org/2017/01/webgl-2-lands-in-firefox/">"WebGL 2 lands in Firefox"</a> et <a href="http://webglsamples.org/WebGL2Samples/">webglsamples.org/WebGL2Samples</a> pour quelques démos.</p>
+
+<h2 id="Guides_et_tutoriels">Guides et tutoriels</h2>
+
+<p>Ci-dessous, vous pourrez trouver divers guides pour vous aider à apprendre les concepts WebGL, et des tutoriels qui proposent des leçons et des exemples pas-à-pas.</p>
+
+<h3 id="Guides">Guides</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/Data">Données en WebGL</a></dt>
+ <dd>Un guide pour les variables, les tampons et autres types de données utilisés lors de l'écriture de code WebGL.</dd>
+ <dt><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/WebGL_best_practices">Meilleures pratiques WebGL</a></dt>
+ <dd>Des indications et des suggestions pour vous aider à améliore la qualité, les performances et la fiabilité de votre contenu WebGL.</dd>
+ <dt><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/Using_Extensions">Utilisation des extensions</a></dt>
+ <dd>Un guide pour l'utilisation des extensions WebGL.</dd>
+</dl>
+
+<h3 id="Tutoriels">Tutoriels</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/Tutorial">Tutoriel WebGL</a></dt>
+ <dd>Un guide pour les débutants sur les concepts essentiels de WebGL. Un bon endroit pour démarrer si vous n'avez pas d'expérience antérieure de WebGL.</dd>
+</dl>
+
+<h3 id="Exemples">Exemples</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example">Un exemple de base d'animation WebGL 2D</a></dt>
+ <dd>Cet exemple montre l'animation simple d'une forme monochrome. Les sujets abordés sont l'adaptation aux différences de ratio d'aspect, une fonction pour construire des programmes de shader à partir d'ensembles de plusieurs shaders, et les bases du dessin dans WebGL.</dd>
+</dl>
+
+<h3 id="Tutoriels_avancés">Tutoriels avancés</h3>
+
+<dl>
+ <dt><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/WebGL_model_view_projection">Projection de vue de modèle WebGL</a></dt>
+ <dd>Une explication détaillée des trois matrices de base qui sont typiquement utilisées pour représenter une vue d'un objet 3D : les matrices de modèle, de vue et de projection.</dd>
+ <dt><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/Matrix_math_for_the_web">Mathématiques matricielles pour le web</a></dt>
+ <dd>Un guide utile sur le fonctionnement des matrices de transformation 3D, qui peut être utilisé sur le web - à la fois pour les calculs WebGL et dans les transformations CSS3.</dd>
+</dl>
+
+<h2 id="Ressources">Ressources</h2>
+
+<ul>
+ <li><a href="https://www.youtube.com/embed/H4c8t6myAWU/?feature=player_detailpage">Raw WebGL: An introduction to WebGL</a> Une conférence de Nick Desaulniers qui présente les bases de WebGL. C'est un bon endroit pour commencer si vous n'avez jamais fait de programmation graphique de bas niveau.</li>
+ <li><a href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">Khronos WebGL site</a> Le site principal pour WebGL chez le groupe Khronos.</li>
+ <li><a href="http://learningwebgl.com/blog/?page_id=1217" title="http://learningwebgl.com/blog/">Learning WebGL</a> Un site proposant des tutoriels sur la façon d'utiliser WebGL.</li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/" title="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/">WebGL Fundamentals</a> Un tutoriel de base sur les fondamentaux de WebGL.</li>
+ <li><a href="http://webglplayground.net/" title="http://webglplayground.net">WebGL playground</a> Un outil en ligne pour créer et partager des projets WebGL. Bon pour le prototypage rapide et l'expérimentation.</li>
+ <li><a href="http://www.webglacademy.com/" title="http://www.webglacademy.com">WebGL Academy</a> Un éditeur HTML / JavaScript proposant des tutoriels pour apprendre les bases de la programmation webgl.</li>
+ <li><a href="http://webglstats.com/">WebGL Stats</a> Un site proposant des statistiques sur les possibilités WebGL des navigateurs sur différentes plates-formes.</li>
+</ul>
+
+<h3 id="Bibliothèques">Bibliothèques</h3>
+
+<ul>
+ <li><a href="https://github.com/toji/gl-matrix" title="https://github.com/toji/gl-matrix">glMatrix</a> Bibliothèque matricielle et vectorielle JavaScript pour les applications WebGL hautes performances</li>
+ <li><a href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a> Une bibliothèque open source pour manipuler des vecteurs et des matrices. Non optimisée pour WebGL mais extrêmement robuste.</li>
+</ul>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WebGL')}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition. Basée sur OpenGL ES 2.0</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL2')}}</td>
+   <td>{{Spec2('WebGL2')}}</td>
+   <td>Construite au-dessus de WebGL 1. Basée sur OpenGL ES 3.0.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 2.0')}}</td>
+   <td>{{Spec2('OpenGL ES 2.0')}}</td>
+   <td> </td>
+  </tr>
+  <tr>
+   <td>{{SpecName('OpenGL ES 3.0')}}</td>
+   <td>{{Spec2('OpenGL ES 3.0')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>9</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatGeckoDesktop("2.0")}}</td>
+   <td>11</td>
+   <td>12</td>
+   <td>5.1</td>
+  </tr>
+  <tr>
+   <td>WebGL 2</td>
+   <td>56</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("51")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>43</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Fonctionnalité</th>
+   <th>Chrome pour Android</th>
+   <th>Edge</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Support de base</td>
+   <td>25</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>4</td>
+   <td>{{CompatNo}}</td>
+   <td>12</td>
+   <td>8.1</td>
+  </tr>
+  <tr>
+   <td>WebGL 2</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Notes_de_compatibilité">Notes de compatibilité</h3>
+
+<p>En plus du navigateur, la GPU elle-même doit également prendre en charge la fonctionnalité. Ainsi, par exemple, S3 Texture Compression (S3TC) n'est disponible que sur les tablettes à base de Tegra. La plupart des navigateurs rendent le contexte WebGL disponible via le nom de contexte <code>webgl</code>, mais les plus anciens ont aussi besoin d'<code>experimental-webgl</code>. De plus, le prochain <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL2RenderingContext">WebGL 2</a> sera entièrement rétrocompatible et comprendra le nom de contexte <code>webgl2</code>.</p>
+
+<h3 id="Notes_Gecko">Notes Gecko</h3>
+
+<h4 id="Débogage_et_test_WebGL">Débogage et test WebGL</h4>
+
+<p>À partir de Gecko 10.0 {{geckoRelease("10.0")}}, deux préférences sont disponibles pour vous permettre de contrôler les fonctionnalités de WebGL à des fins de test :</p>
+
+<dl>
+ <dt><code>webgl.min_capability_mode</code></dt>
+ <dd>Propriété booléenne qui, lorsqu'elle est <code>true</code>, active un mode de possibilités minimales. Dans ce mode, WebGL est configuré pour prendre en charge uniquement le jeu de fonctionnalités minimal et les fonctionnalités requises par la spécification WebGL. Cela vous permet de vous assurer que votre code WebGL fonctionnera sur n'importe quel appareil ou navigateur, indépendamment de leurs possibilités. Elle est <code>false</code> par défaut.</dd>
+ <dt><code>webgl.disable_extensions</code></dt>
+ <dd>Propriété booléenne qui, lorsqu'elle est <code>true</code>, désactive toutes les extensions WebGL. Elle est <code>false</code> par défaut.</dd>
+</dl>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/Canvas_API">Canvas</a></li>
+ <li><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGLRenderingContext/getSupportedExtensions#Browser_compatibility">Informations de compatibilité à propos des extensions WebGL</a></li>
+</ul>
diff --git a/files/fr/web/api/webgl_api/tutorial/ajouter_des_couleurs_avec_les_shaders/index.html b/files/fr/web/api/webgl_api/tutorial/ajouter_des_couleurs_avec_les_shaders/index.html
new file mode 100644
index 0000000000..2bd786c015
--- /dev/null
+++ b/files/fr/web/api/webgl_api/tutorial/ajouter_des_couleurs_avec_les_shaders/index.html
@@ -0,0 +1,117 @@
+---
+title: Ajouter des couleurs avec les nuanceurs
+slug: Web/API/WebGL_API/Tutorial/Ajouter_des_couleurs_avec_les_shaders
+tags:
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}</p>
+
+<p>Dans la <a href="/fr/docs/WebGL/Ajouter_du_contenu_à_WebGL" title="/fr/docs/WebGL/Ajouter_du_contenu_à_WebGL">démonstration précédente</a>, nous avons créé un carré 2D, la prochaine étape évidente consiste à lui appliquer de la couleur. Nous allons faire cela en révisant les nuanceurs.</p>
+
+<h2 id="Application_de_couleur_aux_sommets">Application de couleur aux sommets</h2>
+
+<p>En WebGL, les objets sont construits en utilisant des sommets, chacun d'entre eux ayant une position et une couleur ; par défaut, les couleurs des autres sommets (et tous leurs autres attributs, incluant leur position) sont calculés en utilisant une interpolation linéaire, créant ainsi automatiquement des dégradés. Précédemment, notre nuanceur de sommet n'appliquait aucunes couleurs spécifiques aux sommets ; entre cela et le fait que le nuanceur de fragment assignait la valeur blanche à chaque pixel, le carré entier était rendu en blanc uni.</p>
+
+<p>Supposons que nous voulions faire un rendu en dégradé dans lequel chaque coin du carré est de couleur différente : rouge, bleu, vert et blanc. La première chose à faire est de définir ces couleurs pour les quatre sommets. Pour ce faire, nous devons d'abord créer un tableau des couleurs des sommets, puis le stocker dans un tampon WebGL ; nous le ferons en ajoutant le code suivant à notre fonction <code>initBuffers()</code> :</p>
+
+<pre><code>  const colors = [
+    1.0,  1.0,  1.0,  1.0,    // blanc
+    1.0,  0.0,  0.0,  1.0,    // rouge
+    0.0,  1.0,  0.0,  1.0,    // vert
+    0.0,  0.0,  1.0,  1.0,    // bleu
+  ];
+
+  const colorBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
+
+  return {
+    position: positionBuffer,
+    color: colorBuffer,
+  };
+}</code></pre>
+
+<p>Ce code commence par créer un tableau JavaScript contenant des vecteurs à 4 valeurs, un pour chaque couleur de sommet. Un tampon WebGL est alors alloué pour stocker ces couleurs, et le tableau est converti en flottants et stocké dans le tampon.</p>
+
+<p>Pour que ces couleurs soient effectivement utilisées, le nuanceur de sommet doit être mis à jour pour extraire la couleur appropriée du tampon des couleurs :</p>
+
+<pre><code>  const vsSource = `
+    attribute vec4 aVertexPosition;
+    attribute vec4 aVertexColor;
+
+    uniform mat4 uModelViewMatrix;
+    uniform mat4 uProjectionMatrix;
+
+    varying lowp vec4 vColor;
+
+    void main(void) {
+      gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
+      vColor = aVertexColor;
+    }
+  `;</code></pre>
+
+<p>La différence clé est ici que, pour chaque sommet, nous passons sa couleur au nuanceur de fragment en utilisant un <code>varying</code>.</p>
+
+<h2 id="Coloriage_des_fragments">Coloriage des fragments</h2>
+
+<p>Pour mémoire, voici à quoi ressemblait précédemment notre nuanceur de fragment :</p>
+
+<pre><code>  const fsSource = `
+    void main() {
+      gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+    }
+  `;</code></pre>
+
+<p>Afin de choisir la couleur interpolée pour chaque pixel, nous devons le changer pour récupérer la valeur depuis le varying <code>vColor</code> :</p>
+
+<pre><code>  const fsSource = `
+    varying lowp vec4 vColor;
+
+    void main(void) {
+      gl_FragColor = vColor;
+    }
+  `;</code></pre>
+
+<p>La principale différence ici c'est que pour chaque sommet, on assigne la valeur correspondant à sa couleur dans le tableau.</p>
+
+<h2 id="Dessiner_en_utilisant_les_couleurs">Dessiner en utilisant les couleurs</h2>
+
+<p>Ensuite, il est nécessaire d'ajouter le code recherchant les couleurs dans l'emplacement de l'attribut, et de configurer cet attribut pour le programme nuanceur :</p>
+
+<pre><code>  const programInfo = {
+    program: shaderProgram,
+    attribLocations: {
+      vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
+      vertexColor: gl.getAttribLocation(shaderProgram, 'aVertexColor'),
+    },
+    ...</code></pre>
+
+<p>Ensuite, <code>drawScene()</code> peut être modifié pour utiliser réellement ces couleurs lors du dessin du carré :</p>
+
+<pre><code>  // Indiquer à WebGL comment transférer les couleurs du tampon des couleurs
+  // dans l'attribut vertexColor.
+  {
+    const numComponents = 4;
+    const type = gl.FLOAT;
+    const normalize = false;
+    const stride = 0;
+    const offset = 0;
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.color);
+    gl.vertexAttribPointer(
+        programInfo.attribLocations.vertexColor,
+        numComponents,
+        type,
+        normalize,
+        stride,
+        offset);
+    gl.enableVertexAttribArray(
+        programInfo.attribLocations.vertexColor);
+  }</code></pre>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample3/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample3">Voir le code complet</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample3/">Ouvrir cette démo dans une nouvelle page</a></p>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}</p>
diff --git a/files/fr/web/api/webgl_api/tutorial/ajouter_du_contenu_à_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/ajouter_du_contenu_à_webgl/index.html
new file mode 100644
index 0000000000..c7afe5f9ae
--- /dev/null
+++ b/files/fr/web/api/webgl_api/tutorial/ajouter_du_contenu_à_webgl/index.html
@@ -0,0 +1,307 @@
+---
+title: Ajouter du contenu à WebGL
+slug: Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL
+tags:
+  - 3D
+  - API WebGL
+  - Graphismes
+  - Graphismes 2D
+  - Graphismes 3D
+  - Intermédiaire
+  - Shaders
+  - Tutoriel
+  - WebGL
+  - dessin
+translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}</p>
+
+<p>Une fois que vous avez correctement <a title="Commencer avec le WebGL">créé un contexte WebGL</a>, vous pouvez commencer à y dessiner. Une chose simple que nous pouvons faire est de dessiner un simple carré 2D sans texture, commençons donc par là, en construisant un code pour dessiner un carré 2D.</p>
+
+<h2 id="Dessiner_la_scène">Dessiner la scène</h2>
+
+<p>La chose la plus importante à comprendre avant que nous ne commencions est que, bien que nous dessinions seulement un carré 2D dans cet exemple, nous sommes toujours en train de dessiner dans un espace 3D. Nous dessinons juste un carré et nous le mettons exactement en face de la caméra, perpendiculairement à la direction de vision. Nous avons besoin de définir les shaders qui créeront la couleur pour notre scène simple, et qui dessineront notre objet. Cela définira comment notre carré 2D apparaîtra à l'écran.</p>
+
+<h3 id="Les_shaders">Les shaders</h3>
+
+<p>Un shader est un programme, écrit en utilisant le <a class="external" href="https://www.khronos.org/files/opengles_shading_language.pdf" title="https://www.khronos.org/files/opengles_shading_language.pdf">OpenGL ES Shading Language</a> (GLSL), qui utilise les informations des sommets constituant une forme, et qui génère les données nécessaires pour faire un rendu des pixels à l'écran : nommément, les positions des pixels et leurs couleurs.</p>
+
+<p>Deux fonctions de shader sont exécutées lors du dessin d'un contenu WebGL : le <strong>shader  de sommet</strong> et le <strong>shader de fragment</strong>. Vous les écrivez en GLSL et vous passez le texte du code à WebGL pour qu'il soit compilé pour exécution dans la GPU. Pris conjointement, un ensemble de shaders de sommet et de fragment sont appelés un <strong>programme shader</strong>.</p>
+
+<p>Jetons un coup d'œil rapide aux deux types de shaders, en gardant présent à l'esprit l'exemple du dessin d'une forme 2D dans le contexte WebGL.</p>
+
+<h4 id="Le_shader_de_sommet">Le shader de sommet</h4>
+
+<p>Chaque fois qu'une forme est rendue, le shader de sommet est exécuté pour chaque sommet de la forme. Son travail consiste à effectuer les transformations souhaitées sur la position du sommet.</p>
+
+<p>Les informations de position sont stockées dans une variable spéciale fournie par GLSL, appelée <code>gl_Position</code>.</p>
+
+<p>Le shader de sommet peut, au besoin, aussi faire des choses comme déterminer les coordonnées dans la texture des faces du {{interwiki ("wikipedia", "texel")}} à appliquer au sommet, appliquer les normales pour déterminer le facteur d'éclairage à appliquer au sommet, et ainsi de suite. Ces informations peuvent alors être stockées dans des variations ou des attributs comme approprié, pour être partagées avec le shader de fragment.</p>
+
+<p>Notre shader de sommet ci-dessous reçoit des valeurs de position de sommet à partir d'un attribut que nous définissons, appelé <code>aVertexPosition</code>. Cette position est ensuite multipliée par deux matrices 4x4 que nous fournissons, appelées <code>uProjectionMatrix</code> et <code>uModelMatrix</code> ; <code>gl_Position</code> est définie comme étant le résultat. Pour plus d'informations sur la projection et autres matrices, <a href="https://webglfundamentals.org/webgl/lessons/webgl-3d-perspective.html">vous pourriez trouver cet article utile</a>.</p>
+
+<pre><code>// Programme shader de sommet
+
+const vsSource = `
+  attribute vec4 aVertexPosition;
+
+  uniform mat4 uModelViewMatrix;
+  uniform mat4 uProjectionMatrix;
+
+  void main() {
+    gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
+  }
+`;</code></pre>
+
+<p>Dans cet exemple, nous ne calculons pas d'éclairage du tout, puisque nous n'en avons pas encore appliqué à la scène. Cela viendra plus tard, dans l'exemple <a href="/fr-FR/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL">Éclairage en WebGL</a>. Notez également l'absence de tout travail sur les textures ici ; cela sera ajouté dans <a href="/fr-FR/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">Utilisation de textures en WebGL</a>.</p>
+
+<h4 id="Le_shader_de_fragment">Le shader de fragment</h4>
+
+<p>Le <strong>shader de fragment</strong> est appelé une fois pour chaque pixel de chaque forme à dessiner, une fois que les sommets de la forme ont été traités par le shader de sommet. Son travail consiste à déterminer la couleur de ce pixel en déterminant quel texel (c'est-à-dire le pixel de la texture de la forme) appliquer au pixel, à obtenir la couleur de ce texel, puis à appliquer l'éclairage approprié à la couleur. La couleur est ensuite renvoyée à la couche WebGL en la stockant dans la variable spéciale <code>gl_FragColor</code>. Cette couleur est alors dessinée à l'écran dans la position correcte pour le pixel correspondant de la forme.</p>
+
+<p>Dans ce cas, nous retournons simplement du blanc à chaque fois, car nous sommes seulement en train de dessiner un carré blanc, sans éclairage.</p>
+
+<pre><code>  const fsSource = `
+    void main() {
+      gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+    }
+  `;</code>
+</pre>
+
+<h3 id="Initialisation_des_shaders">Initialisation des shaders</h3>
+
+<p>Maintenant que nous avons défini les deux shaders, nous devons les transmettre à WebGL, les compiler et les lier ensemble. Le code ci-dessous crée les deux shaders en appelant <code>loadShader()</code>, lui passant le type et la source du shader. Il crée alors un programme, attache les shaders et les relie ensemble. Si la compilation ou la liaison échoue, le code affiche une alerte.</p>
+
+<pre><code>//
+// Initialiser un programme shader, de façon à ce que WebGL sache comment dessiner nos données
+//
+function initShaderProgram(gl, vsSource, fsSource) {
+  const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
+  const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
+
+  // Créer le programme shader
+
+  const shaderProgram = gl.createProgram();
+  gl.attachShader(shaderProgram, vertexShader);
+  gl.attachShader(shaderProgram, fragmentShader);
+  gl.linkProgram(shaderProgram);
+
+  // Si la création du programme shader a échoué, alerte
+
+  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+    alert('Impossible d'initialiser le programme shader : ' + gl.getProgramInfoLog(shaderProgram));
+    return null;
+  }
+
+  return shaderProgram;
+}
+
+//
+// Crée un shader du type fourni, charge le source et le compile.
+//
+function loadShader(gl, type, source) {
+  const shader = gl.createShader(type);
+
+  // Envoyer le source à l'objet shader
+
+  gl.shaderSource(shader, source);
+
+  // Compiler le programme shader
+
+  gl.compileShader(shader);
+
+  // Vérifier s'il a ét compilé avec succès
+
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
+    gl.deleteShader(shader);
+    return null;
+  }
+
+  return shader;
+}</code></pre>
+
+<p>La fonction <code>loadShader()</code> prend en entrée le contexte WebGL, le type de shader et le code source, puis crée et compile le shader comme suit :</p>
+
+<ol>
+ <li>un nouveau shader est créé en appelant {{domxref("WebGLRenderingContext.createShader", "gl.createShader()")}} ;</li>
+ <li>le code source du shader est envoyé au shader en appelant {{domxref("WebGLRenderingContext.shaderSource", "gl.shaderSource()")}} ;</li>
+ <li>une fois que le shader a le code source, il est compilé en utilisant {{domxref("WebGLRenderingContext.compileShader", "gl.compileShader()")}} ;</li>
+ <li>pour vérifier que le shader a été compilé avec succès, le paramètre <code>gl.COMPILE_STATUS</code> du shader est vérifié ; pour obtenir sa valeur, nous appelons {{domxref("WebGLRenderingContext.getShaderParameter", "gl.getShaderParameter()")}}, en indiquant le shader et le nom du paramètre que nous voulons vérifier (<code>gl.COMPILE_STATUS</code>) ; si c'est <code>false</code>, nous savons que le shader n'a pas pu être compilé, aussi nous affichons une alerte avec les informations du journalisation obtenues du compilateur en utilisant {{domxref ("WebGLRenderingContext.getShaderInfoLog", "gl.getShaderInfoLog()")}}, puis nous supprimons le shader et nous renvoyons <code>null</code> pour indiquer l'échec du chargement du shader ;</li>
+ <li>si le shader a été chargé et compilé avec succès, le shader compilé est renvoyé à l'appelant.</li>
+</ol>
+
+<p>Pour utiliser ce code, nous l'appelons de la façon suivante :</p>
+
+<pre><code> const shaderProgram = initShaderProgram(gl, vsSource, fsSource);</code>
+</pre>
+
+<p>Après avoir créé un programme de shaders, nous devons rechercher les emplacements que WebGL a assignés à nos entrées. Dans ce cas, nous avons un attribut et deux uniformes. Les attributs reçoivent des valeurs des tampons. Chaque itération du shader des sommets reçoit la valeur suivante du tampon affecté à cet attribut. Les uniformes sont similaires aux variables globales JavaScript. Ils conservent la même valeur pour toutes les itérations d'un shader. Du fait que les attributs et les emplacements des uniformes sont spécifiques à un programme de shader donné, nous les stockerons ensemble pour les rendre plus faciles à transmettre.</p>
+
+<pre><code>  const programInfo = {
+    program: shaderProgram,
+    attribLocations: {
+      vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
+    },
+    uniformLocations: {
+      projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
+      modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
+    },
+  };</code>
+</pre>
+
+<h2 id="Création_du_carré_2D">Création du carré 2D</h2>
+
+<p>Avant de pouvoir faire un rendu de notre carré 2D, nous devons créer le tampon qui contiendra les positions de ses sommets et y placer les positions des sommets. Nous ferons cela en utilisant une fonction que nous appelerons <code>initBuffers()</code> ; à mesure que nous explorerons des concepts WebGL plus avancés, cette routine sera augmentée pour créer plus d'objets 3D, et plus complexes.</p>
+
+<pre><code>function initBuffers(gl) {
+
+  // Créer un tampon des positions pour le carré.
+
+  const positionBuffer = gl.createBuffer();
+
+  // Définir le positionBuffer comme étant celui auquel appliquer les opérations
+  // de tampon à partir d'ici.
+
+  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+
+  // Créer maintenant un tableau des positions pour le carré.
+
+  const positions = [
+     1.0,  1.0,
+    -1.0,  1.0,
+     1.0, -1.0,
+    -1.0, -1.0,
+  ];
+
+  // Passer mainenant la liste des positions à WebGL pour construire la forme.
+  // Nous faisons cela en créant un Float32Array à partir du tableau JavaScript,
+  // puis en l'utilisant pour remplir le tampon en cours.
+
+  gl.bufferData(gl.ARRAY_BUFFER,
+                new Float32Array(positions),
+                gl.STATIC_DRAW);
+
+  return {
+    position: positionBuffer,
+  };
+}</code></pre>
+
+<p>Cette routine est assez simpliste du fait de la nature basique de la scène dans cet exemple. Elle commence par appeler la méthode {{domxref ("WebGLRenderingContext.createBuffer()", "createBuffer()")}} de l'objet gl pour obtenir un tampon dans lequel nous stockerons les positions des sommets. Ce dernier est ensuite lié au contexte en appelant la méthode {{domxref ("WebGLRenderingContext.bindBuffer()", "bindBuffer()")}}.</p>
+
+<p>Une fois que cela est fait, nous créons un tableau JavaScript contenant la position de chaque sommet du carré 2D. Ce dernier est ensuite converti en un tableau de flottants et transmis à la méthode {{domxref ("WebGLRenderingContext.bufferData()", "bufferData()")}} de l'objet <code>gl</code> pour définir les positions des sommets de l'objet.</p>
+
+<h2 id="Rendu_de_la_scène">Rendu de la scène</h2>
+
+<p>Une fois que les shaders sont définis, que les emplacements sont retrouvés, et que les positions des sommets du carré 2D sont stockées dans le tampon, nous pouvons faire effectivement le rendu de la scène. Puisque nous n'animons rien dans cet exemple, notre fonction <code>drawScene()</code> est très simple. Elle utilise quelques routines utilitaires que nous décrirons sous peu.</p>
+
+<div class="blockIndicator note">
+<p>Vous pourriez obtenir une erreur JavaScript indiquant <em>"mat4 n'est pas défini"</em>. Cela signifie qu'il existe une dépendance à <strong>glmatrix</strong>. Vous pouvez inclure <a href="https://mdn.github.io/webgl-examples/tutorial/gl-matrix.js">gl-matrix.js</a> pour résoudre ce problème, comme suggéré <a href="https://github.com/mdn/webgl-examples/issues/20">ici</a>.</p>
+</div>
+
+<pre><code>function drawScene(gl, programInfo, buffers) {
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);  // effacement en noir, complètement opaque
+  gl.clearDepth(1.0);                 // tout effacer
+  gl.enable(gl.DEPTH_TEST);           // activer le test de profondeur
+  gl.depthFunc(gl.LEQUAL);            // les choses proches cachent les choses lointaines
+
+  // Effacer le canevas avant que nous ne commencions à dessiner dessus.
+
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+  // Créer une matrice de perspective, une matrice spéciale qui est utilisée pour
+  // simuler la distorsion de la perspective dans une caméra.
+  // Notre champ de vision est de 45 degrés, avec un rapport largeur/hauteur qui
+  // correspond à la taille d'affichage du canvas ;
+  // et nous voulons seulement voir les objets situés entre 0,1 unité et 100 unités
+  // à partir de la caméra.
+
+  const fieldOfView = 45 * Math.PI / 180;   // en radians
+  const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
+  const zNear = 0.1;
+  const zFar = 100.0;
+  const projectionMatrix = mat4.create();
+
+  // note: glmatrix.js a toujours comme premier argument la destination
+  // où stocker le résultat.
+  mat4.perspective(projectionMatrix,
+                   fieldOfView,
+                   aspect,
+                   zNear,
+                   zFar);
+
+  // Définir la position de dessin comme étant le point "origine", qui est
+  // le centre de la scène.
+  const modelViewMatrix = mat4.create();
+
+  // Commencer maintenant à déplacer la position de dessin un peu vers là où
+  // nous voulons commencer à dessiner le carré.
+
+  mat4.translate(modelViewMatrix,     // matrice de destination
+                 modelViewMatrix,     // matrice de déplacement
+                 [-0.0, 0.0, -6.0]);  // quantité de déplacement
+
+  // Indiquer à WebGL comment extraire les positions à partir du tampon des
+  // positions pour les mettre dans l'attribut vertexPosition.
+  {
+    const numComponents = 2;  // extraire 2 valeurs par itération
+    const type = gl.FLOAT;    // les données dans le tampon sont des flottants 32bit
+    const normalize = false;  // ne pas normaliser
+    const stride = 0;         // combien d'octets à extraire entre un jeu de valeurs et le suivant
+                              // 0 = utiliser le type et numComponents ci-dessus
+    const offset = 0;         // démarrer à partir de combien d'octets dans le tampon
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
+    gl.vertexAttribPointer(
+        programInfo.attribLocations.vertexPosition,
+        numComponents,
+        type,
+        normalize,
+        stride,
+        offset);
+    gl.enableVertexAttribArray(
+        programInfo.attribLocations.vertexPosition);
+  }
+
+  // Indiquer à WebGL d'utiliser notre programme pour dessiner
+
+  gl.useProgram(programInfo.program);
+
+  // Définir les uniformes du shader
+
+  gl.uniformMatrix4fv(
+      programInfo.uniformLocations.projectionMatrix,
+      false,
+      projectionMatrix);
+  gl.uniformMatrix4fv(
+      programInfo.uniformLocations.modelViewMatrix,
+      false,
+      modelViewMatrix);
+
+  {
+    const offset = 0;
+    const vertexCount = 4;
+    gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount);
+  }
+}</code></pre>
+
+<p>La première étape consiste à effacer le canevas avec notre arrière plan ; ensuite, nous établissons la perspective de la caméra. Nous définissons un champ de vision de 45°, avec un rapport largeur sur hauteur qui correspond aux dimensions d'affichage de notre canevas. Nous indiquons également que seuls les objets situés entre 0,1 et 100 unités à partir de la caméra doivent être rendus.</p>
+
+<p>Ensuite, nous établissons la position du carré 2D en chargeant la position de l'origine et en nous déplaçant de 6 unités à partir de la caméra. Après cela, nous lions le tampon des sommets du carré à l'attribut que le shader utilise comme <code>aVertexPosition</code> et nous indiquons à WebGL comment en extraire les données. Enfin, nous dessinons l'objet en appelant la méthode {{domxref ("WebGLRenderingContext.drawArrays()", "drawArrays()")}}.</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample2/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample2">Voir le code complet</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample2/">Ouvrir cette démo dans une nouvelle page</a></p>
+
+<h2 id="Opérations_utilitaires_matricielles">Opérations utilitaires matricielles</h2>
+
+<p>Les opérations matricielles peuvent sembler compliquées, mais <a href="https://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html">elles sont en fait assez simples si vous en prenez une à la fois</a>. En général, les gens utilisent une bibliothèque matricielle plutôt que d'écrire la leur. Dans notre cas, nous utilisons la bibliothèque populaire <a href="http://glmatrix.net/">glMatrix</a>.</p>
+
+<p>Voir aussi :</p>
+
+<ul>
+ <li>les <a href="https://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html">matrices</a> sur WebGLFundamentals ;</li>
+ <li>les <a href="http://mathworld.wolfram.com/Matrix.html">matrices</a> sur Wolfram MathWorld ;</li>
+ <li>l'article <a href="https://fr.wikipedia.org/wiki/Matrice_(math%C3%A9matiques)">matrice</a> sur Wikipedia.</li>
+</ul>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}</p>
diff --git a/files/fr/web/api/webgl_api/tutorial/animation_de_textures_en_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/animation_de_textures_en_webgl/index.html
new file mode 100644
index 0000000000..1c9efb8966
--- /dev/null
+++ b/files/fr/web/api/webgl_api/tutorial/animation_de_textures_en_webgl/index.html
@@ -0,0 +1,144 @@
+---
+title: Animation de textures en WebGL
+slug: Web/API/WebGL_API/Tutorial/Animation_de_textures_en_WebGL
+tags:
+  - Media
+  - Tutoriel
+  - Video
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL
+---
+<p>{{WebGLSidebar("Tutorial") }} {{Previous("Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}</p>
+
+<p>Dans cette démonstration, nous construisons sur l'exemple précédent en remplaçant nos textures statiques par les images d'un fichier vidéo mp4 en cours de lecture. C'est en fait assez facile à faire, mais c'est amusant à regarder, alors commençons. Un code similaire peut être réalisé pour utiliser n'importe quel type de données (comme un {{HTMLElement ("canvas")}}) comme source pour vos textures..</p>
+
+<h2 id="Accéder_à_la_vidéo">Accéder à la vidéo</h2>
+
+<p>La première étape consiste à créer l'élément {{HTMLElement("video")}} que nous utiliserons pour récupérer les images vidéo :</p>
+
+<pre class="brush: js">// sera mis à true quand la vidéo pourra être copiée dans la texture
+var copierVideo = false;
+
+function configurerVideo(url) {
+  const video = document.createElement('video');
+
+  var playing = false;
+  var timeupdate = false;
+
+  video.autoplay = true;
+  video.muted = true;
+  video.loop = true;
+
+  <code>// </code>Le fait d'attendre ces 2 évènements assure<code>
+  // </code>qu'il y a des données dans la vidéo
+
+  video.addEventListener('playing', function() {
+     playing = true;
+     verifierPret();
+  }, true);
+
+  video.addEventListener('timeupdate', function() {
+     timeupdate = true;
+     verifierPret();
+  }, true);
+
+  video.src = url;
+  video.play();
+
+  function verifierPret() {
+    if (playing &amp;&amp; timeupdate) {
+      copierVideo = true;
+    }
+  }
+
+  return video;
+}
+</pre>
+
+<p>D'abord, nous créons un élément vidéo. Nous le mettons en lecture automatique, nous coupons le son et nous faisons tourner la vidéo en boucle. Nous configurons ensuite 2 événements pour voir que la vidéo est en cours de lecture et que le temps a été mis à jour. Nous avons besoin de ces deux vérifications, car c'est une erreur que d'essayer de télécharger sur WebGL une vidéo qui n'a pas encore de données disponibles. La vérification de ces deux événements garantit que des données sont disponibles et que l'on peut démarrer en toute sécurité le chargement de la vidéo dans une texture WebGL. Dans le code ci-dessus, nous vérifions si nous avons reçu ces deux événements et si c'est le cas, nous mettons une variable globale, <code>copierVideo</code>, à true pour nous dire qu'il est possible de commencer à copier la vidéo dans une texture.</p>
+
+<p>Et enfin, nous définissons l'attribut <code>src</code> pour commencer, et nous appelons <code>play</code> pour démarrer le chargement et la lecture de la vidéo.</p>
+
+<h2 id="Utilisation_des_images_vidéo_comme_texture">Utilisation des images vidéo comme texture</h2>
+
+<p>La prochaine modification porte sur <code>initTexture()</code>, qui devient beaucoup plus simple, car elle n'a plus besoin de charger un fichier image. A la place, tout ce qu'elle fait est de créer un objet texture vide, d'y mettre un unique pixel et de définir son filtrage pour une utilisation ultérieure :</p>
+
+<pre class="brush: js">function initTexture(gl, url) {
+  const texture = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+
+<code>  // </code>Parce que la vidéo doit être téléchargée depuis sur Internet,<code>
+  // </code>cela peut prendre un certain temps jusqu'à ce qu'elle soit prête, donc<code>
+  // </code>mettre un seul pixel dans la texture, de façon à ce que nous puissions<code>
+  // </code>l'utiliser immédiatement.
+  const niveau = 0;
+  const formatInterne = gl.RGBA;
+  const largeur = 1;
+  const hauteur = 1;
+  const bordure = 0;
+  const formatSrc = gl.RGBA;
+  const typeSrc = gl.UNSIGNED_BYTE;
+  const pixel = new Uint8Array([0, 0, 255, 255]);  // bleu opaque
+  gl.texImage2D(gl.TEXTURE_2D, niveau, formatInterne,
+                largeur, hauteur, bordure, formatSrc, typeSrc,
+                pixel);
+
+  // Désactiver mips et définir l'emballage comme accroché au bord afin qu'il
+  // fonctionne indépendamment des dimensions de la vidéo.
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+
+  return texture;
+}
+</pre>
+
+<div>Voici à quoi ressemble la fonction <code>mettreAJourTexture()</code> ; c'est là où le vrai travail est fait :</div>
+
+<pre class="brush: js">function mettreAJourTexture(gl, texture, video) {
+  const niveau = 0;
+  const formatInterne = gl.RGBA;
+  const formatSrc = gl.RGBA;
+  const typeSrc = gl.UNSIGNED_BYTE;
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texImage2D(gl.TEXTURE_2D, niveau, formatInterne,
+                formatSrc, typeSrc, video);
+}
+</pre>
+
+<p>Vous avez déjà vu ce code. Il est presque identique à la fonction onload de l'image dans l'exemple précédent, sauf quand nous appellons <code>texImage2D()</code>, au lieu de passer un objet <code>Image</code>, nous passons l'élément {{HTMLElement ("video")}}. WebGL sait comment extraire l'image en cours et l'utiliser comme texture.</p>
+
+<p>Si <code>copierVideo</code> est true, alors <code>mettreAJourTexture()</code> est appelé à chaque fois juste avant que nous appellions la fonction <code>dessinerScene()</code>.</p>
+
+<pre class="brush: js">  var alors = 0;
+
+  // Dessiner la scène répétitivement
+  function dessiner(maintenant) {
+    maintenant *= 0.001;  // convertir en seconds
+    const ecartTemps = maintenant - alors;
+    alors = maintenant;
+
+    if (copierVideo) {
+      <code>mettreAJour</code>Texture(gl, texture, video);
+    }
+
+    dessinerScene(gl, programInfo, buffers, texture, ecartTemps);
+
+    requestAnimationFrame(dessiner);
+  }
+  requestAnimationFrame(dessiner);
+</pre>
+
+<p>C'est tout pour ce qu'il y a à faire pour cela !</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample8/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample8">Voir le code complet</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample8/">Ouvrir cette démo dans une nouvelle page</a></p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="/fr/Using_HTML5_audio_and_video" title="En/Using audio and video in Firefox">Utilisation de l'audio et de la video dans Firefox</a></li>
+</ul>
+
+<p>{{Previous("Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}</p>
diff --git a/files/fr/web/api/webgl_api/tutorial/animer_des_objets_avec_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/animer_des_objets_avec_webgl/index.html
new file mode 100644
index 0000000000..534d6ef995
--- /dev/null
+++ b/files/fr/web/api/webgl_api/tutorial/animer_des_objets_avec_webgl/index.html
@@ -0,0 +1,59 @@
+---
+title: Animer des objets avec WebGL
+slug: Web/API/WebGL_API/Tutorial/Animer_des_objets_avec_WebGL
+tags:
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }}</p>
+
+<p>Dans cet exemple, nous allons faire tourner notre carré 2D.</p>
+
+<h2 id="Faire_tourner_le_carré">Faire tourner le carré</h2>
+
+<p>Commençons par faire tourner le carré. La première chose dont nous avons besoin est une variable pour mémoriser la rotation courante du carré :</p>
+
+<pre class="brush: js">var <code>squareRotation</code> = 0.0;
+</pre>
+
+<p>Maintenant, nous devons modifier la fonction <code>drawScene() </code>pour appliquer la rotation courante du carré quand on le dessine. Après déplacement à la position de dessin initiale du carré, nous appliquons la rotation comme suit :  </p>
+
+<pre><code>  mat4.rotate(modelViewMatrix,  // matrice de destination
+              modelViewMatrix,  // matrice de rotation
+              squareRotation,   // rotation en radians
+              [0, 0, 1]);       // axe autour duquel tourner</code></pre>
+
+<p>Ceci fait tourner la modelViewMatrix de la valeur courante de <code>squareRotation</code>, autour de l'axe Z.</p>
+
+<p>Pour réaliser effectivement l'animation, nous avons besoin d'ajouter du code qui change la valeur de <code>squareRotation</code> au fil du temps. Nous pouvons faire cela en créant une nouvelle variable pour mémoriser l'instant auquel nous avons réalisé l'animation pour la dernière fois (appelons le <code>then</code>), puis en ajoutant le code suivant à la fin de la fonction principale :</p>
+
+<pre><code>var then = 0;
+
+// Dessiner la scène répétitivement
+function render(now) {
+  now *= 0.001;  // conversion en secondes
+  const deltaTime = now - then;
+  then = now;
+
+  drawScene(gl, programInfo, buffers, deltaTime);
+
+  requestAnimationFrame(render);
+}
+requestAnimationFrame(render);</code></pre>
+
+<p>Ce code utilise <code>requestAnimationFrame</code> pour demander au navigateur d'appeler la fonction "<code>render</code>" à chaque image. <code>requestAnimationFrame</code> nous transmet le temps en millisecondes depuis le chargement de la page. Nous le convertissons en secondes, puis nous lui soustrayons le dernier instant pour calculer <code>deltaTime</code>, qui est le nombre de secondes depuis le rendu de la dernière image. À la fin de drawscene, nous ajoutons le code pour mettre à jour <code>squareRotation</code>.</p>
+
+<pre><code>  squareRotation += deltaTime;</code></pre>
+
+<p>Ce code utilise le laps de temps qui s'est écoulé depuis la dernière fois que nous avons mis à jour la valeur <code>squareRotation</code> pour déterminer de combien faire tourner le carré.</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample4/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample4">Voir le code complet</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample4/">Ouvrir cette démo dans une nouvelle page</a></p>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }}</p>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/fr/web/api/webgl_api/tutorial/commencer_avec_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/commencer_avec_webgl/index.html
new file mode 100644
index 0000000000..4388934aeb
--- /dev/null
+++ b/files/fr/web/api/webgl_api/tutorial/commencer_avec_webgl/index.html
@@ -0,0 +1,73 @@
+---
+title: Commencer avec WebGL
+slug: Web/API/WebGL_API/Tutorial/Commencer_avec_WebGL
+tags:
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL")}}<a class="external" href="http://www.khronos.org/webgl/" rel="external" title="http://www.khronos.org/webgl/">WebGL</a> permet à un contenu web d'utiliser l'API basée sur <a class="external" href="http://www.khronos.org/opengles/" rel="external" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 pour effectuer un rendu 2D et 3D dans un <a class="internal" href="/fr/HTML/Canvas" title="fr/HTML/Canvas">canvas</a> dans les navigateurs qui le supportent, sans utilisation d'un module complémentaire. Les programmes WebGL sont constitués de code de contrôle écrit en JavaScript, et le code d'ombrage (GLSL) est exécuté dans l'Unité de Traitement Graphique (GPU) de l'ordinateur. Les éléments WebGL peuvent être mélangés avec d'autres éléments HTML, et composés d'autres parties de la page ou de l'arrière-plan de la page.</p>
+
+<p>Cet article va vous donner une introduction aux bases de l'utilisation de WebGL. Il est supposé que vous avez déjà une compréhension des mathématiques impliquées dans les graphismes 3D, et cet article ne prétend pas vous enseigner les concepts des graphismes 3D par eux-mêmes.</p>
+
+<p>Les exemples de code de ce tutoriel peuvent aussi être trouvés dans le <a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial">webgl-examples GitHub repository</a>.</p>
+
+<h2 class="editable" id="Préparation_au_rendu_3D"><span>Préparation au rendu 3D</span></h2>
+
+<p>La première chose dont vous avez besoin pour utiliser WebGL pour faire un rendu est un canvas. Le fragment d'HTML ci-dessous déclare un canvas dans lequel notre exemple se dessinera.</p>
+
+<pre class="brush: html"><span class="plain"><code>&lt;body&gt;
+  &lt;canvas id="glCanvas" width="640" height="480"&gt;&lt;/canvas&gt;
+&lt;/body&gt;</code></span>
+</pre>
+
+<div id="section_2">
+<h3 class="editable" id="Préparation_du_contexte_WebGL"><span>Préparation du contexte WebGL</span></h3>
+
+<p>La fonction <code>main()</code> dans notre code JavaScript est appelée quand notre script est chargé. Son but est de créer le contexte WebGL et de commencer à rendre du contenu.</p>
+
+<pre class="brush: js"><code>main();
+
+//
+// Début ici
+//
+function main() {
+ </code> const canvas = document.querySelector("#glCanvas");
+  // Initialisation du contexte WebGL
+  const gl = canvas.getContext("webgl");
+
+  // Continuer seulement si WebGL est disponible et fonctionnel
+  if (!gl) {
+    alert("Impossible d'initialiser WebGL. Votre navigateur ou votre machine peut ne pas le supporter.");
+    return;
+  }
+
+  // Définir la couleur d'effacement comme étant le noir, complètement opaque
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  // Effacer le tampon de couleur avec la couleur d'effacement spécifiée
+  gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
+}
+</pre>
+
+<p>La première chose que nous faisons ici est d'obtenir une référence au canvas, en l'affectant à une variable dénommée <code>canvas</code>.</p>
+
+<p>Une fois que nous avons le canvas, nous essayons de lui obtenir un <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGLRenderingContext">WebGLRenderingContext</a>, en appelant <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/HTMLCanvasElement/getContext">getContext</a> et en lui passant la chaîne <code>"webgl"</code>. Si le navigateur ne supporte pas WebGL, <code>getContext</code> retournera <code>null</code>, auquel cas nous afficherons un message pour l'utilisateur, et nous sortirons.</p>
+
+<p>Si le contexte est initialisé avec succès, la variable <code>gl</code> sera notre référence à celui-ci. Dans ce cas, nous définissons la couleur d'effacement comme étant le noir, et nous effaçons le contexte avec cette couleur (redessin du canvas avec la couleur d'arrière-plan).</p>
+
+<p>A ce stade, votre code est suffisant pour que le contexte WebGL puisse s'initialiser avec succès, et vous devriez vous retrouver avec une grande boîte noire et vide, prête à - et attendant de - recevoir du contenu.</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample1/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample1">Voir le code complet</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample1/">Ouvrir cette démo dans une nouvelle page</a></p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li><a href="https://dev.opera.com/articles/introduction-to-webgl-part-1/">An introduction to WebGL</a> : écrite par Luz Caballero, publiée sur dev.opera.com. Cet article traite de ce qu'est WebGL, explique comment WebGL fonctionne (incluant le concept de pipeline de rendu), et présente quelques bibliothèques WebGL.</li>
+ <li><a href="http://webglfundamentals.org/">WebGL Fundamentals</a></li>
+ <li><a href="http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Table-of-Contents.html">An intro to modern OpenGL :</a> une série de bons articles sur OpenGL écrits par Joe Groff, fournissant une introduction claire à OpenGL, depuis son histoire jusqu'au concept important de pipeline de graphismes, qui comprend aussi quelques exemples montrant comment OpenGL fonctionne. Si vous n'avez aucune idée de ce qu'est OpenGL, c'est un bon endroit pour commencer.</li>
+</ul>
+
+<p>{{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}</p>
+</div>
diff --git a/files/fr/web/api/webgl_api/tutorial/creer_des_objets_3d_avec_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/creer_des_objets_3d_avec_webgl/index.html
new file mode 100644
index 0000000000..ccbff1a2d6
--- /dev/null
+++ b/files/fr/web/api/webgl_api/tutorial/creer_des_objets_3d_avec_webgl/index.html
@@ -0,0 +1,167 @@
+---
+title: Créer des objets 3D avec WebGL
+slug: Web/API/WebGL_API/Tutorial/Creer_des_objets_3D_avec_WebGL
+tags:
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}</p>
+
+<p>Transformons notre carré en trois dimensions en lui ajoutant cinq faces supplémentaires pour créer un cube. Pour faire cela efficacement, nous allons passer du dessin de sommets par l'appel direct de la méthode {{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}}, à l'utilisation du tableau des sommets comme une table, et à référencer les sommets individuels dans cette table pour définir les positions des sommets de chaque face, en appelant directement {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}.</p>
+
+<p>Notez que chaque face nécessite quatre sommets pour la définir, mais que chaque sommet est partagé entre trois faces. Nous pouvons donc passer beaucoup moins de données en faisant un tableau des 24 sommets, puis en référençant chaque sommet par son indice dans ce tableau, au lieu de passer des ensembles complets de coordonnées. Si vous vous demandez pourquoi nous avons besoin de 24 sommets, et non pas seulement de 8, c'est parce que chaque coin appartient à trois faces de couleurs différentes, et qu'un sommet donné doit avoir une couleur spécifique - c'est pourquoi nous allons créer 3 copies de chaque sommet dans les trois couleurs différentes, une pour chaque face.</p>
+
+<h2 id="Définir_la_position_des_sommets_du_cube">Définir la position des sommets du cube</h2>
+
+<p>Tout d'abord, construisons le tampon des sommets du cube en mettant à jour le code de <code>initBuffer()</code>. C'est sensiblement le même que pour le carré, mais en plus long, du fait qu'il y a 24 sommets (4 par côté) :</p>
+
+<pre class="brush: js">  const positions = [
+    // Face avant
+    -1.0, -1.0,  1.0,
+     1.0, -1.0,  1.0,
+     1.0,  1.0,  1.0,
+    -1.0,  1.0,  1.0,
+
+    // Face arrière
+    -1.0, -1.0, -1.0,
+    -1.0,  1.0, -1.0,
+     1.0,  1.0, -1.0,
+     1.0, -1.0, -1.0,
+
+    // Face supérieure
+    -1.0,  1.0, -1.0,
+    -1.0,  1.0,  1.0,
+     1.0,  1.0,  1.0,
+     1.0,  1.0, -1.0,
+
+    // Face inférieure
+    -1.0, -1.0, -1.0,
+     1.0, -1.0, -1.0,
+     1.0, -1.0,  1.0,
+    -1.0, -1.0,  1.0,
+
+    // Face droite
+     1.0, -1.0, -1.0,
+     1.0,  1.0, -1.0,
+     1.0,  1.0,  1.0,
+     1.0, -1.0,  1.0,
+
+    // Face gauche
+    -1.0, -1.0, -1.0,
+    -1.0, -1.0,  1.0,
+    -1.0,  1.0,  1.0,
+    -1.0,  1.0, -1.0
+  ];
+</pre>
+
+<p>Du fait que nous avons ajouté une composante z à nos sommets, nous avons besoin de changer en 3 le <code>numComponents</code> de notre attribut <code>vertexPosition</code>.</p>
+
+<pre><code>// Indiquer à WebGL comment extraire les positions du tampon des
+// positions dans l'attribut vertexPosition
+{
+  const numComponents = 3;
+  ...
+  gl.vertexAttribPointer(
+      programInfo.attribLocations.vertexPosition,
+      numComponents,
+      type,
+      normalize,
+      stride,
+      offset);
+  gl.enableVertexAttribArray(
+      programInfo.attribLocations.vertexPosition);
+}</code></pre>
+
+<h2 id="Définir_les_couleurs_des_sommets">Définir les couleurs des sommets</h2>
+
+<p>Nous avons aussi besoin de construire un tableau des couleurs pour chacun des 24 sommets. Ce code commence par définir une couleur pour chaque face, puis il utilise une boucle pour assembler le tableau de toutes les couleurs pour chacun des sommets.</p>
+
+<pre class="brush: js">  const <code>faceColors </code>= [
+    [1.0,  1.0,  1.0,  1.0],    // Face avant : blanc
+    [1.0,  0.0,  0.0,  1.0],    // Face arrière : rouge
+    [0.0,  1.0,  0.0,  1.0],    // Face supérieure : vert
+    [0.0,  0.0,  1.0,  1.0],    // Face infiérieure : bleu
+    [1.0,  1.0,  0.0,  1.0],    // Face droite : jaune
+    [1.0,  0.0,  1.0,  1.0]     // Face gauche : violet
+  ];
+
+  // Conversion du tableau des couleurs en une table pour tous les sommets
+
+  var <code>colors </code>= [];
+
+  for (j=0; j&lt;<code>faceColors</code>.length; j++) {
+    const c = faceColors[j];
+
+    // Répéter chaque couleur quatre fois pour les quatre sommets d'une face
+    colors = colors<code>.concat(c, c, c, c);
+  </code>}
+
+  const colorBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
+</pre>
+
+<h2 id="Définir_le_tableau_des_éléments">Définir le tableau des éléments</h2>
+
+<p>Une fois que les tableaux des sommets sont générés, nous devons construire le tableau des éléments.</p>
+
+<pre class="brush: js">  <code>const indexBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
+
+  // Ce tableau définit chaque face comme deux triangles, en utilisant les
+  // indices dans le tableau des sommets pour spécifier la position de chaque
+  // triangle.
+
+  const indices = [
+    0,  1,  2,      0,  2,  3,    // avant
+    4,  5,  6,      4,  6,  7,    // arrière
+    8,  9,  10,     8,  10, 11,   // haut
+    12, 13, 14,     12, 14, 15,   // bas
+    16, 17, 18,     16, 18, 19,   // droite
+    20, 21, 22,     20, 22, 23,   // gauche
+  ];
+
+  // Envoyer maintenant le tableau des éléments à GL
+
+  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
+      new Uint16Array(indices), gl.STATIC_DRAW);
+
+  return {
+    position: positionBuffer</code><code>,
+    color: colorBuffer</code><code>,
+    indices: indexBuffer</code><code>,
+  };
+}</code></pre>
+
+<p>Le tableau <code>indices</code> définit chaque face comme étant une paire de triangles, en spécifiant chaque sommet du triangle comme un indice dans les tableaux des sommets du cube. Ainsi le cube est décrit comme une collection de 12 triangles.</p>
+
+<h2 id="Dessiner_le_cube">Dessiner le cube</h2>
+
+<p>Ensuite, nous devons ajouter du code à notre fonction <code>drawScene()</code> pour dessiner le tampon des indices du cube, en ajoutant de nouveaux appels à {{domxref("WebGLRenderingContext.bindBuffer()", "gl.bindBuffer()")}} et {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}} :</p>
+
+<pre><code>  // Indiquer à WebGL quels indices utiliser pour indexer les sommets
+  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, tampons.indices);
+
+...
+
+  {
+    const vertexCount = 36;
+    const type = gl.UNSIGNED_SHORT;
+    const offset = 0;
+    gl.drawElements(gl.TRIANGLES, vertexCount, type, offset);
+  }</code></pre>
+
+<p>Du fait que chaque face de notre cube est composée de deux triangles, il y a 6 sommets par côté, soit 36 sommets au total dans le cube, même si beaucoup d'entre eux sont des doublons.</p>
+
+<p>Finalement, remplaçons notre variable <code>squareRotation</code> par <code>cubeRotation</code> et ajoutons une seconde rotation autour de l'axe des x :</p>
+
+<pre><code>mat4.rotate(modelViewMatrix, modelViewMatrix, cubeRotation * .7, [0, 1, 0]);</code></pre>
+
+<p>À ce stade, nous avons un cube animé en rotation, ses six faces ayant des couleurs assez vives.</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample5/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample5">Voir le code complet</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample5/">Ouvrir cette démo dans une nouvelle page</a></p>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}</p>
diff --git a/files/fr/web/api/webgl_api/tutorial/eclairage_en_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/eclairage_en_webgl/index.html
new file mode 100644
index 0000000000..db767fe9bb
--- /dev/null
+++ b/files/fr/web/api/webgl_api/tutorial/eclairage_en_webgl/index.html
@@ -0,0 +1,175 @@
+---
+title: Éclairage en WebGL
+slug: Web/API/WebGL_API/Tutorial/Eclairage_en_WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Utiliser_les_textures_avec_WebGL", "Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL")}}</p>
+
+<p>La première chose à comprendre à propos de WebGL est que contrairement au standard OpenGL, WebGL n'a pas de support pour l'éclairage. Vous avez à le faire par vous même. Heureusement ce n'est pas si dur à faire, et cet article va vous expliquer quelques bases.</p>
+
+<h2 id="Simuler_l'éclairage_et_les_ombres_en_3D">Simuler l'éclairage et les ombres en 3D</h2>
+
+<p>Rentrer dans les détails de la théorie derrière la simulation de l'éclairage 3D est assez loin du sujet de cet article mais il vaut mieux en connaitre un minimum le sujet. Au lieu de rentrer dans le vif du sujet ici, jetez un coup d'oeil sur <a href="https://fr.wikipedia.org/wiki/Ombrage_de_Phong">l'ombrage de Phong</a> sur Wikipédia, qui fourni une bonne vue d'ensemble comme modèle d'éclairage.</p>
+
+<p>Il y a trois types basiques d'éclairage :</p>
+
+<ol>
+ <li><strong>Ambient light (Lumière Ambiante) </strong>est la lumière qui imprègne, qui se répand sur la scène. Elle n'a pas de direction et s'applique sur toutes les faces de la scène de la même façon.</li>
+ <li><strong>Directional light (Lumière Directionnelle)</strong> est une lumière émise depuis une direction spécifique. Par exemple le soleil, est une lumière directionnelle.</li>
+ <li><strong>Point light</strong> <strong>(Point de lumière) </strong>est une lumière émise depuis un point, éméttant une lumière dans toutes les directions, contrairement à la Lumière Directionnelle. C'est comme ceci que les lumières fonctionnent principalement dans notre monde, comme par exemple une ampoule.</li>
+</ol>
+
+<p>Pour notre tutorial, nous allons simplifier le model d'éclairage, en considérant seulement une unique lumière directionnelle et une lumière ambiante. Nous allons réutiliser notre <a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">précédent exemple avec le cube en rotation</a>.</p>
+
+<p>Une fois que nous avons appréhendé le concept de source et de réfléction de la lumière, il y a deux choses que nous avons besoin d'implémenter pour nos lumières directionnelles.</p>
+
+<ol>
+ <li>Nous avons besoin d'associer la <strong>surface normale</strong> avec chaque sommet. C'est un vecteur qui est perpendiculaire à la face associé à ce sommet.</li>
+ <li>Nous avons besoin de connaître la direction dans laquelle la lumière arrive. Ceci est défini par la direction du vecteur.</li>
+</ol>
+
+<p>Puis nous mettons à jour le vertex shader pour ajuster la couleur de chaque sommet. en prenant en compte la lumière ambiante ainsi que l'effet de la lumière directionnelle donné par l'angle qui rencontre la face du cube. Nous allons voir comment faire avec les shaders.</p>
+
+<h2 id="Créer_les_normales_pour_les_sommets">Créer les normales pour les sommets</h2>
+
+<p>La première chose dont nous avons besoin, est de générer le tableau des <strong>normales</strong> pour tous les sommets que constituent notre cube. Comme un cube est un simple objet, c'est plutôt simple à faire, évidemment pour des objets plus complexe, calculer les normales sera plus compliqué.</p>
+
+<pre class="brush: js">cubeVerticesNormalBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);
+
+var vertexNormals = [
+  // Front
+   0.0,  0.0,  1.0,
+   0.0,  0.0,  1.0,
+   0.0,  0.0,  1.0,
+   0.0,  0.0,  1.0,
+
+  // Back
+   0.0,  0.0, -1.0,
+   0.0,  0.0, -1.0,
+   0.0,  0.0, -1.0,
+   0.0,  0.0, -1.0,
+
+  // Top
+   0.0,  1.0,  0.0,
+   0.0,  1.0,  0.0,
+   0.0,  1.0,  0.0,
+   0.0,  1.0,  0.0,
+
+  // Bottom
+   0.0, -1.0,  0.0,
+   0.0, -1.0,  0.0,
+   0.0, -1.0,  0.0,
+   0.0, -1.0,  0.0,
+
+  // Right
+   1.0,  0.0,  0.0,
+   1.0,  0.0,  0.0,
+   1.0,  0.0,  0.0,
+   1.0,  0.0,  0.0,
+
+  // Left
+  -1.0,  0.0,  0.0,
+  -1.0,  0.0,  0.0,
+  -1.0,  0.0,  0.0,
+  -1.0,  0.0,  0.0
+];
+
+gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(vertexNormals), gl.STATIC_DRAW);
+</pre>
+
+<p>Ceci doit vous être plutôt familier maintenant. Nous créons un nouveau buffer, on le lie avec le tableau sur lequel nous allons travailler, puis nous allons envoyer l'ensemble de notre tableau au buffer en appelant la méthode <code>bufferData()</code>.</p>
+
+<p>Ensuite nous allons ajouter le code à la fonction <code>drawScene() </code>pour attacher le tableau de normales à l'attribut du shader, comme ça le code du shader y aura accès:</p>
+
+<pre class="brush: js">gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);
+gl.vertexAttribPointer(vertexNormalAttribute, 3, gl.FLOAT, false, 0, 0);
+</pre>
+
+<p>Enfin, nous avons besoin de mettre à jour le code qui construit les matrices uniformes pour générer et livrer au shader une matrice normale, qui sera utilisée pour transformer les normales en fonction de l'orientation actuelle du cube par rapport à la source de lumière.</p>
+
+<pre class="brush: js">var normalMatrix = mvMatrix.inverse();
+normalMatrix = normalMatrix.transpose();
+var nUniform = gl.getUniformLocation(shaderProgram, 'uNormalMatrix');
+gl.uniformMatrix4fv(nUniform, false, new WebGLFloatArray(normalMatrix.flatten()));
+</pre>
+
+<h2 id="Mettre_à_jour_les_shaders">Mettre à jour les shaders</h2>
+
+<p>Maintenant que les shaders ont toutes les données dont ils ont besoin, nous mettons à jour leur code.</p>
+
+<h3 id="Le_vertex_shader">Le vertex shader</h3>
+
+<p>La première chose à faire est de mettre à jour le vertex shader en générant une valeur pour l'ombre de chaque sommet, en se basant sur l'éclairage ambiant ainsi que la direction de la lumière. Jettons un oeil sur le code suivant:</p>
+
+<pre class="brush: html">&lt;script id="shader-vs" type="x-shader/x-vertex"&gt;
+  attribute highp vec3 aVertexNormal;
+  attribute highp vec3 aVertexPosition;
+  attribute highp vec2 aTextureCoord;
+
+  uniform highp mat4 uNormalMatrix;
+  uniform highp mat4 uMVMatrix;
+  uniform highp mat4 uPMatrix;
+
+  varying highp vec2 vTextureCoord;
+  varying highp vec3 vLighting;
+
+  void main(void) {
+    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+    vTextureCoord = aTextureCoord;
+
+    // Apply lighting effect
+
+    highp vec3 ambientLight = vec3(0.6, 0.6, 0.6);
+    highp vec3 directionalLightColor = vec3(0.5, 0.5, 0.75);
+    highp vec3 directionalVector = vec3(0.85, 0.8, 0.75);
+
+    highp vec4 transformedNormal = uNormalMatrix * vec4(aVertexNormal, 1.0);
+
+    highp float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0);
+    vLighting = ambientLight + (directionalLightColor * directional);
+  }
+&lt;/script&gt;
+</pre>
+
+<p>Une fois que la position du sommet est calculée, et que nous obtenons les coordonnées des texels (tas de pixel pour une texture) correspondant au sommet, nous pouvons travailler sur le calcul de l'ombre de chaque sommet.</p>
+
+<p>La première chose que nous allons faire est de transformer la base normale sur la position actuelle et l'orientation du cube, en calculant les normales des sommets par la matrice normale. Nous pouvons alors calculer la quantité d'éclairage qui doit être appliquée au sommet en calculant le produit de la normale transformée et du vecteur directionnel (la direction d'où la lumière vient). Si le résultat est inférieur à zéro, alors on le met à 0. Car une lumière négative n'a pas de sens dans notre cas.</p>
+
+<p>Une fois la quantité de lumière directionnelle calculée, nous pouvons générer la valeur d'éclairage en prenant l'éclairage ambiant et en y ajoutant le produit de la couleur de la lumière directionnelle, et aussi la quantité de la lumière directionnelle à fournir. Comme résultat, nous avons maintenant une valeur RGB qui sera utilisé par le fragment shader pour ajuster la couleur de chaque pixel.</p>
+
+<h3 id="Le_fragment_shader">Le fragment shader</h3>
+
+<p>Le fragment shader a maintenant besoin d'être mis à jour en prenant en compte la quantité de lumière calculée précédemment par le vertex shader:</p>
+
+<pre class="brush: js">&lt;script id="shader-fs" type="x-shader/x-fragment"&gt;
+  varying highp vec2 vTextureCoord;
+  varying highp vec3 vLighting;
+
+  uniform sampler2D uSampler;
+
+  void main(void) {
+    mediump vec4 texelColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
+
+    gl_FragColor = vec4(texelColor.rgb * vLighting, texelColor.a);
+  }
+&lt;/script&gt;
+</pre>
+
+<p>Ici nous récupérons la couleur de chaque texel (tas de pixel pour une texture) , comme nous avons fait pour l'exemple précédent, mais avant d'ajuster la couleur du fragment, nous multiplions la couleur des pixels par la quantité de lumière, pour appliquer l'effet d'éclairage.</p>
+
+<p>Et c'est tout !</p>
+
+<p> </p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample7/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample7">Voir le code complet</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample7/">Ouvrir cette démo dans une nouvelle page</a></p>
+
+<h2 id="Exercices">Exercices</h2>
+
+<p>Évidemment, ceci est un simple exemple, une implémentation basique de calcul de lumière par sommet. Pour aller plus loin, nous voulons implémenter un calcul de lumière par pixel, mais ceci vous mènera dans la bonne direction. </p>
+
+<p>Vous pouvez aussi implémenter avec la direction de source de lumière, la couleur de la source, la distance, etc..</p>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL", "Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL")}}</p>
diff --git a/files/fr/web/api/webgl_api/tutorial/index.html b/files/fr/web/api/webgl_api/tutorial/index.html
new file mode 100644
index 0000000000..92a4c9f119
--- /dev/null
+++ b/files/fr/web/api/webgl_api/tutorial/index.html
@@ -0,0 +1,42 @@
+---
+title: Tutoriel WebGL
+slug: Web/API/WebGL_API/Tutorial
+tags:
+  - API WebGL
+  - Tutoriel
+  - Vue d'ensemble
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial
+---
+<div>{{WebGLSidebar}}</div>
+
+<div class="summary">
+<p><a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a> permet au contenu web d'utiliser une API basée sur <a class="external" href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 pour effectuer des rendus 3D dans un {{HTMLElement("canvas")}} HTML dans les navigateurs qui le supportent, sans avoir recours à des modules complémentaires. Les programmes WebGL sont constitués de code de contrôle rédigé en JavaScript, et de code d'effets spéciaux (code shader) qui est exécuté sur l'Unité de Traitement Graphique (GPU) d'un ordinateur. Les éléments WebGL peuvent être mélangés avec d'autres éléments HTML et composés avec d'autres parties de la page ou du fond de la page.</p>
+</div>
+
+<p><span class="seoSummary">Ce tutoriel décrit comment utiliser l'élément <code>&lt;canvas&gt;</code> pour dessiner des graphiques WebGL, en commençant par les bases. Les exemples suivants devraient vous donner des idées de ce que vous pouvez faire avec WebGL et vont vous fournir des fragments de code qui pourraient vous aider à construire votre propre contenu.</span></p>
+
+<h2 id="Avant_que_vous_ne_commenciez">Avant que vous ne commenciez</h2>
+
+<p>L'utilisation de l'élément <code>&lt;canvas&gt;</code> n'est pas très difficile, mais vous avez besoin d'une compréhension de base de l'<a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> et du <a href="/en-US/docs/Web/JavaScript" title="JavaScript">JavaScript</a>. L'élément <code>&lt;canvas&gt;</code> et WebGL ne sont pas supportés par certains anciens navigateurs, mais ils sont supportés dans les versions récentes de tous les principaux navigateurs. Pour dessiner des graphiques sur le canevas, on utilise un objet de contexte Javascript, qui crée des graphiques à la volée.</p>
+
+<h2 id="Dans_ce_tutoriel">Dans ce tutoriel</h2>
+
+<dl>
+ <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Commencer_avec_WebGL">Commencer avec WebGL</a></dt>
+ <dd>Comment mettre en place un contexte WebGL.</dd>
+ <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL">Ajouter du contenu à WebGL</a></dt>
+ <dd>Comment faire un rendu simple de figures planes avec WebGL.</dd>
+ <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Ajouter_des_couleurs_avec_les_shaders">Ajouter des couleurs avec les nuanceurs</a></dt>
+ <dd>Démontre comment ajouter de la couleur aux formes avec des nuanceurs.</dd>
+ <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Animer_des_objets_avec_WebGL">Animer des objets avec WebGL</a></dt>
+ <dd>Montre comment tourner et déplacer des objets pour créer des animations simples.</dd>
+ <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Creer_des_objets_3D_avec_WebGL">Créer des objets 3D avec WebGL</a></dt>
+ <dd>Montre comment créer et animer un objet 3D (dans ce cas, un cube).</dd>
+ <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Utiliser_les_textures_avec_WebGL">Utilisation des textures dans WebGL</a></dt>
+ <dd>Démontrer comment appliquer des textures sur les faces d'un objet.</dd>
+ <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Eclairage_en_WebGL"> Éclairage en WebGL</a></dt>
+ <dd>Comment simuler des effets d'illumination dans votre contexte WebGL.</dd>
+ <dt><a href="/fr/docs/Web/API/WebGL_API/Tutorial/Animation_de_textures_en_WebGL">Animation de textures en WebGL</a></dt>
+ <dd>Montre comment animer des textures ; dans ce cas, en appliquant une vidéo Ogg sur les faces d'un cube en rotation.</dd>
+</dl>
diff --git a/files/fr/web/api/webgl_api/tutorial/utiliser_les_textures_avec_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/utiliser_les_textures_avec_webgl/index.html
new file mode 100644
index 0000000000..6e1d7bb67d
--- /dev/null
+++ b/files/fr/web/api/webgl_api/tutorial/utiliser_les_textures_avec_webgl/index.html
@@ -0,0 +1,278 @@
+---
+title: Utilisation des textures en WebGL
+slug: Web/API/WebGL_API/Tutorial/Utiliser_les_textures_avec_WebGL
+tags:
+  - Tutoriel
+  - WebGL
+translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL
+---
+<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}</p>
+
+<p>Maintenant que notre programme peut faire tourner un cube 3D, appliquons lui une texture, au lieu d'avoir des couleurs unies pour ses faces.</p>
+
+<h2 id="Chargement_des_textures">Chargement des textures</h2>
+
+<p>La première chose à faire est d'ajouter le code pour charger les textures. Dans notre cas, nous utiliserons une texture unique, appliquée à chacune des six faces de notre cube en rotation ; mais la même technique peut être utilisée un nombre quelconque de textures.</p>
+
+<div class="note"><strong>Note :</strong> il est important de noter que le chargement des textures suit les <a href="/fr-FR/docs/Web/HTTP/CORS" title="en/HTTP access control">règles inter-domaines</a> ; donc vous pouvez seulement charger des textures depuis les sites pour lesquels votre contenu a l'approbation CORS. Voir les textures inter-domaines ci-dessous pour plus de détails.</div>
+
+<p>Le code qui charge la texture ressemble à ce qui suit : </p>
+
+<pre><code>//
+// Initialiser une texture et charger une image.
+// Quand le chargement d'une image est terminé, la copier dans la texture.
+//
+function loadTexture(gl, url) {
+  const texture = gl.createTexture();
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+
+  // Du fait que les images doivent être téléchargées depuis l'internet,
+  // il peut s'écouler un certain temps avant qu'elles ne soient prêtes.
+  // Jusque là, mettre un seul pixel dans la texture, de sorte que nous puissions
+  // l'utiliser immédiatement. Quand le téléchargement de la page sera terminé,
+  // nous mettrons à jour la texture avec le contenu de l'image.
+  const level = 0;
+  const internalFormat = gl.RGBA;
+  const width = 1;
+  const height = 1;
+  const border = 0;
+  const srcFormat = gl.RGBA;
+  const srcType = gl.UNSIGNED_BYTE;
+  const pixel = new Uint8Array([0, 0, 255, 255]);  // bleu opaque
+  gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
+                width, height, border, srcFormat, srcType,
+                pixel);
+
+  const image = new Image();
+  image.onload = function() {
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
+                  srcFormat, srcType, image);
+
+    // WebGL1 a des spécifications différentes pour les images puissances de 2
+    // par rapport aux images non puissances de 2 ; aussi vérifier si l'image est une
+    // puissance de 2 sur chacune de ses dimensions.
+    if (isPowerOf2(image.width) &amp;&amp; isPowerOf2(image.height)) {
+       // Oui, c'est une puissance de 2. Générer les mips.
+       gl.generateMipmap(gl.TEXTURE_2D);
+    } else {
+       // Non, ce n'est pas une puissance de 2. Désactiver les mips et définir l'habillage
+       // comme "accrocher au bord"
+       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    }
+  };
+  image.src = url;
+
+  return texture;
+}
+
+function isPowerOf2(value) {
+  return (value &amp; (value - 1)) == 0;
+}</code></pre>
+
+<p>La routine <code>loadTexture()</code> commence par créer un objet texture WebGL <code>texture</code> en appelant la fonction WebGL {{domxref ("WebGLRenderingContext.createTexture()", "createTexture()")}}. Il téléverse ensuite un seul pixel bleu en utilisant {{domxref ("WebGLRenderingContext.texImage2D()", "texImage2D()")}}. Cela rend la texture immédiatement utilisable comme une couleur bleue unie, alors que cela peut prendre quelques instants pour télécharger notre image.</p>
+
+<p>Pour charger la texture à partir du fichier image, elle crée ensuite un objet Image et en affecte le src à l'URL de l'image que nous souhaitons utiliser comme texture. La fonction que nous affectons à <code>image.onload</code> sera appelée une fois terminé le téléchargement de l'image. À ce stade, nous appelons à nouveau {{domxref ("WebGLRenderingContext.texImage2D()", "texImage2D()")}}, cette fois en utilisant l'image comme source pour la texture. Après cela, nous configurons le filtrage et l'habillage de la texture suivant que l'image que nous téléchargeons a ou non une puissance de 2 selon ses deux dimensions.</p>
+
+<p>WebGL1 ne peut utiliser que des textures non puissances de 2 avec d'un filtrage défini à NEAREST ou LINEAR, et il ne peut pas générer de mipmap pour elles. Leur mode d'habillage doit également être défini à CLAMP_TO_EDGE. Inversement, si la texture est une puissance de 2 dans les deux dimensions, alors WebGL peut faire un filtrage de meilleure qualité, il peut utiliser mipmap, et il peut définir le mode d'habillage à REPEAT ou MIRRORED_REPEAT.</p>
+
+<p>Un exemple de texture répétée est le pavage d'une image par quelques briques pour couvrir un mur de briques.</p>
+
+<p>Le mipmapping et la répétition UV peuvent être désactivés avec {{domxref ("WebGLRenderingContext.texParameter()", "texParameteri()")}}. Cela permettra des textures non-puissances-de-deux (NPOT) au prix du mipmapping, de l'habillage UV, du pavage UV, et de votre contrôle sur la manière dont le périphérique gérera votre texture.</p>
+
+<pre><code>// gl.NEAREST est aussi permis, au lieu de gl.LINEAR, du fait qu'aucun ne fait de mipmap.
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+// Empêcher l'habillage selon la coordonnée s (répétition).
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+// Empêcher l'habillage selon la coordonnée t (répétition).
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);</code></pre>
+
+<p>A nouveau, avec ces paramètres, les appareils WebGL compatibles accepteront automatiquement toute résolution pour cette texture (jusqu'à leurs dimensions maximum). A défaut de la configuration ci-dessus, WebGL requiert que tous les échantillons de textures NPOT échouent, en retournant du noir transparent : <code>rgba (0,0,0,0)</code>.</p>
+
+<p>Pour charger l'image, ajoutons un appel à notre fonction <code>loadTexture()</code> dans notre fonction <code>main()</code>. Cela peut être ajouté après l'appel <code>initBuffers(gl)</code>.</p>
+
+<pre><code>// Charger la texture
+const texture = loadTexture(gl, 'cubetexture.png');</code>
+</pre>
+
+<h2 id="Application_de_la_texture_sur_les_faces">Application de la texture sur les faces</h2>
+
+<p>À ce stade, la texture est chargée et prête à être utilisée. Mais avant de pouvoir l'utiliser, nous devons définir l'application des coordonnées de texture aux sommets des faces de notre cube. Cela remplace tout le code précédemment existant pour la configuration des couleurs pour chacune des faces du cube dans <code>initBuffers()</code>.</p>
+
+<pre><code> const textureCoordBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer);
+
+  const textureCoordinates = [
+    // Front
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // Back
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // Top
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // Bottom
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // Right
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // Left
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+  ];
+
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordinates),
+                gl.STATIC_DRAW);
+
+...
+  return {
+    position: positionBuffer,
+    textureCoord: textureCoordBuffer,
+    indices: indexBuffer,
+  };</code></pre>
+
+<p>Tout d'abord, ce code crée un tampon WebGL dans lequel nous stockerons les coordonnées de texture pour chaque face, puis nous lions ce tampon comme étant le tableau dans lequel nous allons écrire.</p>
+
+<p>Le tableau <code>textureCoordinates</code> définit les coordonnées de texture correspondant à chaque sommet de chaque face. Notez que les coordonnées de texture vont de 0,0 à 1,0 ; les dimensions des textures sont normalisées dans une plage de 0,0 à 1,0 quelque soit leur taille réelle, aux fins d'application de la texture.</p>
+
+<p>Une fois que nous avons mis en place le tableau d'application de la texture, nous l'envoyons dans le tampon, de sorte que WebGL ait ces données prêtes pour son utilisation.</p>
+
+<h2 id="Mise_à_jour_des_shaders">Mise à jour des shaders</h2>
+
+<p>Le programme shader doit également être mis à jour pour utiliser des textures au lieu de couleurs unies.</p>
+
+<h3 id="Le_shader_de_sommet">Le shader de sommet</h3>
+
+<p>Nous avons besoin de remplacer le shader de sommet de façon à ce qu'au lieu de récupérer des données de couleur, il récupère à la place des données de coordonnées de texture.</p>
+
+<pre><code>const vsSource = `
+    attribute vec4 aVertexPosition;
+    attribute vec2 aTextureCoord;
+
+    uniform mat4 uModelViewMatrix;
+    uniform mat4 uProjectionMatrix;
+
+    varying highp vec2 vTextureCoord;
+
+    void main(void) {
+      gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
+      vTextureCoord = aTextureCoord;
+    }
+  `;</code></pre>
+
+<p>Le changement clé est ici qu'au lieu d'aller chercher la couleur du sommet, nous récupérons les coordonnées de la texture, et nous les transmettons au shader de sommet ; ceci indiquera l'emplacement dans la texture correspondant au sommet.</p>
+
+<h3 id="Le_shader_de_fragment">Le shader de fragment</h3>
+
+<p>Le shader de fragment doit également être mis à jour :</p>
+
+<pre><code>const fsSource = `
+    varying highp vec2 vTextureCoord;
+
+    uniform sampler2D uSampler;
+
+    void main(void) {
+      gl_FragColor = texture2D(uSampler, vTextureCoord);
+    }
+  `;</code></pre>
+
+<p>Au lieu d'attribuer une valeur de couleur à la couleur du fragment, la couleur du fragment est calculée en récupérant le <strong>texel</strong> (c'est-à-dire, le pixel dans la texture) sur la base de la valeur de <code>vTextureCoord</code>, qui est interpolée comme les sommets.</p>
+
+<h3 id="Emplacements_des_attributs_et_des_uniformes">Emplacements des attributs et des uniformes</h3>
+
+<p>Du fait que nous avons changé un attribut et ajouté un uniforme, nous devons rechercher leurs emplacements :</p>
+
+<pre><code>  const programInfo = {
+    program: shaderProgram,
+    attribLocations: {
+      vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
+      textureCoord: gl.getAttribLocation(shaderProgram, 'aTextureCoord'),
+    },
+    uniformLocations: {
+      projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
+      modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
+      uSampler: gl.getUniformLocation(shaderProgram, 'uSampler'),
+    },
+  };</code>
+</pre>
+
+<h2 id="Dessin_du_cube_texturé">Dessin du cube texturé</h2>
+
+<p>Les modifications apportées à la fonction <code>drawScene()</code> sont simples.</p>
+
+<p>Tout d'abord, le code pour spécifier le tampon de couleurs a disparu, remplacé par ce qui suit :</p>
+
+<pre><code>// Indiquer à WebGL comment extraire les coordonnées de texture du tampon
+{
+    const num = 2; // chaque coordonnée est composée de 2 valeurs
+    const type = gl.FLOAT; // les données dans le tampon sont des flottants 32 bits
+    const normalize = false; // ne pas normaliser
+    const stride = 0; // combien d'octets à récupérer entre un jeu et le suivant
+    const offset = 0; // à combien d'octets du début faut-il commencer
+    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.textureCoord);
+    gl.vertexAttribPointer(programInfo.attributeLocations.textureCoord, num, type, normalize, stride, offset);
+    gl.enableVertexAttribArray(programInfo.attributeLocations.textureCoord);
+}</code></pre>
+
+<p>Ajoutez alors le code pour spécifier la texture à appliquer sur les faces, juste avant de dessiner :</p>
+
+<pre><code>  // Indiquer à WebGL que nous voulons affecter l'unité de texture 0
+  gl.activeTexture(gl.TEXTURE0);
+
+  // Lier la texture à l'unité de texture 0
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+
+  // Indiquer au shader que nous avons lié la texture à l'unité de texture 0
+  gl.uniform1i(programInfo.uniformLocations.uSampler, 0);</code></pre>
+
+<p>WebGL fournit un minimum de 8 unités de texture ; la première d'entre elles est <code>gl.TEXTURE0</code>. Nous indiquons à WebGL que nous voulons affecter l'unité 0. Nous appelons alors {{domxref ("WebGLRenderingContext.bindTexture()", "bindTexture()")}}, qui lie la texture au point de liaison <code>TEXTURE_2D</code> de l'unité de texture 0. Nous indiquons alors au shader que pour l'<code>uSampler</code>, il faut utiliser l'unité de texture 0.</p>
+
+<p>Finalement, ajoutez <code>texture</code> comme paramètre de la fonction <code>drawScene()</code>, où elle est à la fois définie et appelée.</p>
+
+<pre><code>drawScene(gl, programInfo, buffers, texture, deltaTime);
+...
+function drawScene(gl, programInfo, buffers, texture, deltaTime) {</code></pre>
+
+<p>Arrivés ce point, le cube en rotation devrait être prêt à fonctionner.</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample6/index.html', 670, 510) }}</p>
+
+<p><a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample6">Voir le code complet</a> | <a href="http://mdn.github.io/webgl-examples/tutorial/sample6/">Ouvrir cette démo dans une nouvelle page</a></p>
+
+<h2 id="Textures_inter-domaines">Textures inter-domaines</h2>
+
+<p>Le chargement des textures WebGL est soumis aux contrôles d'accès inter-domaines. Pour que votre contenu puisse charger une texture d'un autre domaine, une approbation CORS doit être obtenue. Voir le <a href="https://developer.mozilla.org/fr/docs/HTTP/Access_control_CORS">Contrôle d'accès HTTP</a> pour plus de détails sur CORS.</p>
+
+<p>Voir cet <a href="http://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/">article sur hacks.mozilla.org</a> pour une explication de l'utilisation des images approuvées CORS comme textures WebGL, avec <a href="http://people.mozilla.org/~bjacob/webgltexture-cors-js.html">un exemple complet</a>.</p>
+
+<div class="note">
+<p><strong>Note :</strong> le support CORS pour les texture WebGL et l'attribut <code>crossOrigin</code> pour les éléments image est implémenté dans {{Gecko("8.0")}}.</p>
+</div>
+
+<p>Les canevas 2D dégradés (en écriture seule) ne peuvent pas être utilisés comme des textures WebGL. Un {{HTMLElement ("canvas")}} 2D devient dégradé par exemple lorsqu'il est utilisé pour dessiner une image inter-domaine.</p>
+
+<div class="note">
+<p><strong>Note :</strong> le support CORS pour <code>drawImage</code> de Canvas 2D est implémenté dans {{Gecko ("9.0")}}. Cela signifie que l'utilisation d'une image inter-domaine ayant l'approbation CORS ne dégrade plus le canevas 2D, de sorte que le canevas 2D reste utilisable comme source d'une texture WebGL.</p>
+</div>
+
+<div class="note">
+<p><strong>Note :</strong> le support CORS pour les vidéos inter-domaines et l'attribut <code>crossorigin</code> pour les éléments {{HTMLElement ("video")}} est implémenté dans {{Gecko ("12.0")}}.</p>
+</div>
+
+<p>{{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}</p>
diff --git a/files/fr/web/api/webgl_api/types/index.html b/files/fr/web/api/webgl_api/types/index.html
new file mode 100644
index 0000000000..8c7156a119
--- /dev/null
+++ b/files/fr/web/api/webgl_api/types/index.html
@@ -0,0 +1,167 @@
+---
+title: Types WebGL
+slug: Web/API/WebGL_API/Types
+tags:
+  - Reference
+  - Types
+  - WebGL
+translation_of: Web/API/WebGL_API/Types
+---
+<div>{{WebGLSidebar}}</div>
+
+<p>Les types suivants sont utilisés dans les interfaces <a href="/fr-FR/docs/Web/API/WebGL_API">WebGL</a>.</p>
+
+<h2 id="WebGL_1">WebGL 1</h2>
+
+<p>Ces types sont utilisés à l'intérieur d'un {{domxref("WebGLRenderingContext")}}.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Type</td>
+   <td class="header">Type Web IDL</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>GLenum</code></td>
+   <td><code>unsigned long</code></td>
+   <td>Utilisé pour les enums. Voir aussi la liste des <a href="/fr-FR/docs/Web/API/WebGL_API/Constants">constantes</a>.</td>
+  </tr>
+  <tr>
+   <td><code>GLboolean</code></td>
+   <td><code>boolean</code></td>
+   <td>Un {{jsxref("Boolean")}}.</td>
+  </tr>
+  <tr>
+   <td><code>GLbitfield</code></td>
+   <td><code>unsigned long</code></td>
+   <td>Un champ de bits stockant plusieurs bits logiques. Utilisé par exemple dans {{domxref("WebGLRenderingContext.clear()")}}.</td>
+  </tr>
+  <tr>
+   <td><code>GLbyte</code></td>
+   <td><code>byte</code></td>
+   <td>Entier signé en complément à deux sur 8 bits.</td>
+  </tr>
+  <tr>
+   <td><code>GLshort</code></td>
+   <td><code>short</code></td>
+   <td>Entier signé en complément à deux sur 16 bits.</td>
+  </tr>
+  <tr>
+   <td><code>GLint</code></td>
+   <td><code>long</code></td>
+   <td>Entier signé en complément à deux sur 32 bits.</td>
+  </tr>
+  <tr>
+   <td><code>GLsizei</code></td>
+   <td><code>long</code></td>
+   <td>Utilisé pour les tailles (par ex., la largeur et la hauteur du tampon de dessin).</td>
+  </tr>
+  <tr>
+   <td><code>GLintptr</code></td>
+   <td><code>long long</code></td>
+   <td>Type spécial pour l'arithmétique de pointeur.</td>
+  </tr>
+  <tr>
+   <td><code>GLsizeiptr</code></td>
+   <td><code>long long</code></td>
+   <td>Type spécial pour l'arithmétique de pointeur.</td>
+  </tr>
+  <tr>
+   <td><code>GLubyte</code></td>
+   <td><code>octet</code></td>
+   <td>Entier non signé en complément à deux sur 8 bits.</td>
+  </tr>
+  <tr>
+   <td><code>GLushort</code></td>
+   <td><code>unsigned short</code></td>
+   <td>Entier non signé en complément à deux sur 16 bits.</td>
+  </tr>
+  <tr>
+   <td><code>GLuint</code></td>
+   <td><code>unsigned long</code></td>
+   <td>Entier non signé en complément à deux sur 32 bits.</td>
+  </tr>
+  <tr>
+   <td><code>GLfloat</code></td>
+   <td><code>unrestricted float</code></td>
+   <td>Nombre en virgule flottante IEEE sur 32 bits.</td>
+  </tr>
+  <tr>
+   <td><code>GLclampf</code></td>
+   <td><code>unrestricted float</code></td>
+   <td>Nombre en virgule flottante IEEE sur 32 bits borné.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="WebGL_2">WebGL 2</h2>
+
+<p>Ces types sont utilisés à l'intérieur d'un {{domxref("WebGL2RenderingContext")}}. Tous les types WebGL 1 sont également utilisés.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Type</td>
+   <td class="header">Type Web IDL</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>GLint64</code></td>
+   <td><code>long long</code></td>
+   <td>Nombre entier sur 64 bits signé.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Extensions_WebGL">Extensions WebGL</h2>
+
+<p>Ces types sont utilisés à l'intérieur des <a href="/fr-FR/docs/Web/API/WebGL_API/Using_Extensions">extensions WebGL</a>.</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td class="header">Type</td>
+   <td class="header">Type Web IDL</td>
+   <td class="header">Description</td>
+  </tr>
+  <tr>
+   <td><code>GLuint64EXT</code></td>
+   <td><code>long long</code></td>
+   <td>Nombre entier sur 64 bits non signé.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">Statut</th>
+   <th scope="col">Commentaire</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL', "#5.1", "Types")}}</td>
+   <td>{{Spec2('WebGL')}}</td>
+   <td>Définition initiale</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('WebGL2', "#3.1", "Types")}}</td>
+   <td>{{Spec2('WebGL2')}}</td>
+   <td>Définit des types supplémentaires.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('EXT_disjoint_timer_query', "", "GLuint64EXT")}}</td>
+   <td>{{Spec2('EXT_disjoint_timer_query')}}</td>
+   <td>Ajoute <code>GLuint64EXT</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{domxref("WebGLRenderingContext")}}</li>
+</ul>