From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- .../by_example/appliquer_des_couleurs/index.html | 100 ------------ .../index.html" | 90 ----------- .../index.html" | 122 -------------- .../by_example/basic_scissoring/index.html | 90 +++++++++++ .../webgl_api/by_example/boilerplate_1/index.html | 97 ++++++++++++ .../by_example/canvas_size_and_webgl/index.html | 82 ++++++++++ .../by_example/clearing_by_clicking/index.html | 122 ++++++++++++++ .../by_example/clearing_with_colors/index.html | 100 ++++++++++++ .../webgl_api/by_example/color_masking/index.html | 136 ++++++++++++++++ .../index.html" | 162 ------------------- .../index.html" | 139 ---------------- .../webgl_api/by_example/detect_webgl/index.html | 79 +++++++++ .../by_example/d\303\251tecter_webgl/index.html" | 79 --------- .../index.html" | 164 ------------------- .../by_example/hello_vertex_attributes/index.html | 171 ++++++++++++++++++++ .../introduction_aux_attributs_vertex/index.html | 171 -------------------- .../les_textures_vid\303\251os/index.html" | 23 --- .../by_example/masque_de_couleur/index.html | 136 ---------------- .../by_example/mod\303\250le_1/index.html" | 97 ------------ .../by_example/raining_rectangles/index.html | 176 +++++++++++++++++++++ .../by_example/scissor_animation/index.html | 162 +++++++++++++++++++ .../by_example/simple_color_animation/index.html | 139 ++++++++++++++++ .../tailles_de_canvas_et_webgl/index.html | 82 ---------- .../by_example/textures_from_code/index.html | 164 +++++++++++++++++++ .../by_example/une_pluie_de_rectangle/index.html | 176 --------------------- .../webgl_api/by_example/video_textures/index.html | 23 +++ 26 files changed, 1541 insertions(+), 1541 deletions(-) delete mode 100644 files/fr/web/api/webgl_api/by_example/appliquer_des_couleurs/index.html delete mode 100644 "files/fr/web/api/webgl_api/by_example/appliquer_des_d\303\251coupes_simples/index.html" delete mode 100644 "files/fr/web/api/webgl_api/by_example/appliquer_une_couleur_\303\240_la_souris/index.html" create mode 100644 files/fr/web/api/webgl_api/by_example/basic_scissoring/index.html create mode 100644 files/fr/web/api/webgl_api/by_example/boilerplate_1/index.html create mode 100644 files/fr/web/api/webgl_api/by_example/canvas_size_and_webgl/index.html create mode 100644 files/fr/web/api/webgl_api/by_example/clearing_by_clicking/index.html create mode 100644 files/fr/web/api/webgl_api/by_example/clearing_with_colors/index.html create mode 100644 files/fr/web/api/webgl_api/by_example/color_masking/index.html delete mode 100644 "files/fr/web/api/webgl_api/by_example/cr\303\251er_une_animation_avec_d\303\251coupe_et_applique/index.html" delete mode 100644 "files/fr/web/api/webgl_api/by_example/cr\303\251er_une_animation_color\303\251e/index.html" create mode 100644 files/fr/web/api/webgl_api/by_example/detect_webgl/index.html delete mode 100644 "files/fr/web/api/webgl_api/by_example/d\303\251tecter_webgl/index.html" delete mode 100644 "files/fr/web/api/webgl_api/by_example/g\303\251n\303\251rer_des_textures_avec_du_code/index.html" create mode 100644 files/fr/web/api/webgl_api/by_example/hello_vertex_attributes/index.html delete mode 100644 files/fr/web/api/webgl_api/by_example/introduction_aux_attributs_vertex/index.html delete mode 100644 "files/fr/web/api/webgl_api/by_example/les_textures_vid\303\251os/index.html" delete mode 100644 files/fr/web/api/webgl_api/by_example/masque_de_couleur/index.html delete mode 100644 "files/fr/web/api/webgl_api/by_example/mod\303\250le_1/index.html" create mode 100644 files/fr/web/api/webgl_api/by_example/raining_rectangles/index.html create mode 100644 files/fr/web/api/webgl_api/by_example/scissor_animation/index.html create mode 100644 files/fr/web/api/webgl_api/by_example/simple_color_animation/index.html delete mode 100644 files/fr/web/api/webgl_api/by_example/tailles_de_canvas_et_webgl/index.html create mode 100644 files/fr/web/api/webgl_api/by_example/textures_from_code/index.html delete mode 100644 files/fr/web/api/webgl_api/by_example/une_pluie_de_rectangle/index.html create mode 100644 files/fr/web/api/webgl_api/by_example/video_textures/index.html (limited to 'files/fr/web/api/webgl_api/by_example') 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 deleted file mode 100644 index 1d8db41a20..0000000000 --- a/files/fr/web/api/webgl_api/by_example/appliquer_des_couleurs/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -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 ---- -
{{IncludeSubnav("/fr/Apprendre")}}
- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Détecter_WebGL","Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_%C3%A0_la_souris")}}

- -

Dans cet article, on voit comment appliquer une couleur unie dans le contexte de rendu.

- -

{{EmbedLiveSample("Appliquer_une_couleur_unie_dans_le_contexte_WebGL",660,300)}}

- -

Appliquer une couleur unie dans le contexte WebGL

- -

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.

- -

Par ailleurs, vous pouvez remarquer que, pour appliquer une couleur unie sur le tampon (buffer) 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 clear()), toutes les autres méthodes permettent d'obtenir ou de modifier les variables liées aux états de WebGL (dont la couleur à appliquer).

- -

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).

- -

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 (green G), bleu (B) et alpha (qui correspond à l'opacité). C'est pour ça que clearColor() prend quatre arguments.

- -
<p>Un programme WebGL très simple qui affiche une couleur.</p>
-<!-- Le texte d'un élément canvas est affiché uniquement
-    si canvas n'est pas supporté. -->
-<canvas>Il semblerait que votre navigateur ne supporte pas
-    le canevas HTML5</canvas>
-
- -
body {
-  text-align : center;
-}
-canvas {
-  display : block;
-  width : 280px;
-  height : 210px;
-  margin : auto;
-  padding : 0;
-  border : none;
-  background-color : black;
-}
-
- -
// 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);
-
- -

Le code source de cet exemple est également disponible sur GitHub.

- -
{{PreviousNext("Apprendre/WebGL/Par_exemple/Détecter_WebGL","Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_%C3%A0_la_souris")}}
diff --git "a/files/fr/web/api/webgl_api/by_example/appliquer_des_d\303\251coupes_simples/index.html" "b/files/fr/web/api/webgl_api/by_example/appliquer_des_d\303\251coupes_simples/index.html" deleted file mode 100644 index 3995861e83..0000000000 --- "a/files/fr/web/api/webgl_api/by_example/appliquer_des_d\303\251coupes_simples/index.html" +++ /dev/null @@ -1,90 +0,0 @@ ---- -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 ---- -
{{IncludeSubnav("/fr/Apprendre")}}
- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Masque_de_couleur","Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL")}}

- -

Dans cet article, on illustre comment dessiner des rectangles et des carrés grâce à des opérations de découpe simple (scissoring).

- -

{{EmbedLiveSample("Appliquer_les_changements_sur_le_buffer_lors_de_la_découpe",660,330)}}

- -

Appliquer les changements sur le buffer lors de la découpe

- -

Voici une démonstration simple des opérations appliquées sur le contexte de rendu avec la méthode {{domxref("WebGLRenderingContext.scissor","scissor")}}.

- -

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 (buffer) 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é.

- -

Cet article représente une excellente occasion pour distinguer les pixels des fragments. 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 fragment fait référence au pixel manipulé par les processus {{Glossary("WebGL")}}.

- -

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).

- -

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.

- -

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()")}} (enable() sera utilisée pour activer de nombreuses autres fonctionnalités liées à WebGL) avec la constante SCISSOR_TEST. 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 clear()) pour commencer le processus de traitement des fragments.

- -
<p>Le résultat de la découpe.</p>
-<canvas>Il semblerait que votre navigateur
-    ne supporte pas l'élément canvas.</canvas>
-
- -
body {
-  text-align : center;
-}
-canvas {
-  display : block;
-  width : 280px;
-  height : 210px;
-  margin : auto;
-  padding : 0;
-  border : none;
-  background-color : black;
-}
-
- -
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);
-
- -

Le code source de cet exemple est également disponible sur GitHub.

- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Masque_de_couleur","Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL")}}

diff --git "a/files/fr/web/api/webgl_api/by_example/appliquer_une_couleur_\303\240_la_souris/index.html" "b/files/fr/web/api/webgl_api/by_example/appliquer_une_couleur_\303\240_la_souris/index.html" deleted file mode 100644 index 7ca07c36e6..0000000000 --- "a/files/fr/web/api/webgl_api/by_example/appliquer_une_couleur_\303\240_la_souris/index.html" +++ /dev/null @@ -1,122 +0,0 @@ ---- -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 ---- -
{{IncludeSubnav("/fr/Apprendre")}}
- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs","Apprendre/WebGL/Par_exemple/Cr%C3%A9er_une_animation_color%C3%A9e")}}

- -

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.

- -

{{EmbedLiveSample("Appliquer_des_couleurs_aléatoires_dans_le_contexte_de_rendu",660,410)}}

- -

Appliquer des couleurs aléatoires dans le contexte de rendu

- -

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.

- -

Ici, on montre comment on place les appels aux fonctions WebGL dans la fonction qui gère les événements :

- -
<p>Un programme WebGL très simple qui affiche des couleurs
-    suite aux interactions utilisateur.</p>
-<p>Vous pouvez cliquer sur le canevas ou sur le bouton pour
-    modifier la couleur.</p>
-<canvas id="canvas-view">Il semblerait que votre navigateur
-    ne supporte pas l'élément canvas.</canvas>
-<button id="color-switcher">Cliquez ici pour changer la couleur</button>
-
- -
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;
-}
-
- -
// 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);
-
- -

Le code source de cet exemple est également disponible sur GitHub.

- -
{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs","Apprendre/WebGL/Par_exemple/Cr%C3%A9er_une_animation_color%C3%A9e")}}
diff --git a/files/fr/web/api/webgl_api/by_example/basic_scissoring/index.html b/files/fr/web/api/webgl_api/by_example/basic_scissoring/index.html new file mode 100644 index 0000000000..3995861e83 --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/basic_scissoring/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 +--- +
{{IncludeSubnav("/fr/Apprendre")}}
+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Masque_de_couleur","Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL")}}

+ +

Dans cet article, on illustre comment dessiner des rectangles et des carrés grâce à des opérations de découpe simple (scissoring).

+ +

{{EmbedLiveSample("Appliquer_les_changements_sur_le_buffer_lors_de_la_découpe",660,330)}}

+ +

Appliquer les changements sur le buffer lors de la découpe

+ +

Voici une démonstration simple des opérations appliquées sur le contexte de rendu avec la méthode {{domxref("WebGLRenderingContext.scissor","scissor")}}.

+ +

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 (buffer) 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é.

+ +

Cet article représente une excellente occasion pour distinguer les pixels des fragments. 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 fragment fait référence au pixel manipulé par les processus {{Glossary("WebGL")}}.

+ +

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).

+ +

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.

+ +

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()")}} (enable() sera utilisée pour activer de nombreuses autres fonctionnalités liées à WebGL) avec la constante SCISSOR_TEST. 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 clear()) pour commencer le processus de traitement des fragments.

+ +
<p>Le résultat de la découpe.</p>
+<canvas>Il semblerait que votre navigateur
+    ne supporte pas l'élément canvas.</canvas>
+
+ +
body {
+  text-align : center;
+}
+canvas {
+  display : block;
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+
+ +
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);
+
+ +

Le code source de cet exemple est également disponible sur GitHub.

+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Masque_de_couleur","Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL")}}

diff --git a/files/fr/web/api/webgl_api/by_example/boilerplate_1/index.html b/files/fr/web/api/webgl_api/by_example/boilerplate_1/index.html new file mode 100644 index 0000000000..a055a358c8 --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/boilerplate_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 +--- +
{{IncludeSubnav("/fr/Apprendre")}}
+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL","Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique")}}

+ +

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.

+ +

{{EmbedLiveSample("Socle_pour_l'initialisation_du_contexte_WebGL",660,400)}}

+ +

Socle pour l'initialisation du contexte WebGL

+ +

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")}}.

+ +

Plus précisément, le code HTML contiendra

+ + + +

Les règles CSS s'appliqueront aux éléments body, canvas et button. Les éléments supplémentaires pour le code CSS et HTML seront détaillés dans les pages des exemples concernés.

+ +

Dans les exemples suivants, on utilisera la fonction utilitaire JavaScript getRenderingContext 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

+ + + +

S'il y a une erreur, la fonction affiche un message d'erreur et renvoie null.

+ +

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>[ Un texte qui décrit l'exemple. ]</p>
+<button>[ Un bouton optionnel pour les interactions. ]</button>
+<canvas>Il semblerait que votre navigateur ne supporte
+    pas le canevas HTML5.</canvas>
+
+ +
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;
+}
+
+ +
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;
+}
+
+ +

Le code source de cet exemple est également disponible sur GitHub.

+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL","Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique")}}

diff --git a/files/fr/web/api/webgl_api/by_example/canvas_size_and_webgl/index.html b/files/fr/web/api/webgl_api/by_example/canvas_size_and_webgl/index.html new file mode 100644 index 0000000000..086e0394a7 --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/canvas_size_and_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 +--- +
{{IncludeSubnav("/fr/Apprendre")}}
+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples","Apprendre/WebGL/Par_exemple/Modèle_1")}}

+ +

{{EmbedLiveSample("Les_effets_liés_à_la_taille_du_canevas_sur_le_rendu_avec_WebGL",660,180)}}

+ +

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.

+ +

Les effets liés à la taille du canevas sur le rendu avec WebGL

+ +

Grâce aux méthodes {{domxref("WebGLRenderingContext.scissor()","scissor()")}} et {{domxref("WebGLRenderingContext.clear()","clear()")}} on peut démontrer que le tampon (buffer) de dessin WebGL est affecté par la taille du canevas (l'élément HTML canvas).

+ +

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")}}.

+ +

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 canvas affiché dans le fenêtre du navigateur.

+ +

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>On compare les deux canevas.</p>
+<canvas>Votre navigateur ne semble pas
+    supporter l'élément HTML5 canvas.</canvas>
+<canvas>Votre navigateur ne semble pas
+    supporter l'élément HTML5 canvas.</canvas>
+
+ +
body {
+  text-align : center;
+}
+canvas {
+  width : 120px;
+  height : 80px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+
+ +
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);
+
+ +

Le code source de cet exemple est également disponible sur GitHub.

+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples","Apprendre/WebGL/Par_exemple/Modèle_1")}}

diff --git a/files/fr/web/api/webgl_api/by_example/clearing_by_clicking/index.html b/files/fr/web/api/webgl_api/by_example/clearing_by_clicking/index.html new file mode 100644 index 0000000000..7ca07c36e6 --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/clearing_by_clicking/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 +--- +
{{IncludeSubnav("/fr/Apprendre")}}
+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs","Apprendre/WebGL/Par_exemple/Cr%C3%A9er_une_animation_color%C3%A9e")}}

+ +

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.

+ +

{{EmbedLiveSample("Appliquer_des_couleurs_aléatoires_dans_le_contexte_de_rendu",660,410)}}

+ +

Appliquer des couleurs aléatoires dans le contexte de rendu

+ +

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.

+ +

Ici, on montre comment on place les appels aux fonctions WebGL dans la fonction qui gère les événements :

+ +
<p>Un programme WebGL très simple qui affiche des couleurs
+    suite aux interactions utilisateur.</p>
+<p>Vous pouvez cliquer sur le canevas ou sur le bouton pour
+    modifier la couleur.</p>
+<canvas id="canvas-view">Il semblerait que votre navigateur
+    ne supporte pas l'élément canvas.</canvas>
+<button id="color-switcher">Cliquez ici pour changer la couleur</button>
+
+ +
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;
+}
+
+ +
// 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);
+
+ +

Le code source de cet exemple est également disponible sur GitHub.

+ +
{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs","Apprendre/WebGL/Par_exemple/Cr%C3%A9er_une_animation_color%C3%A9e")}}
diff --git a/files/fr/web/api/webgl_api/by_example/clearing_with_colors/index.html b/files/fr/web/api/webgl_api/by_example/clearing_with_colors/index.html new file mode 100644 index 0000000000..1d8db41a20 --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/clearing_with_colors/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 +--- +
{{IncludeSubnav("/fr/Apprendre")}}
+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Détecter_WebGL","Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_%C3%A0_la_souris")}}

+ +

Dans cet article, on voit comment appliquer une couleur unie dans le contexte de rendu.

+ +

{{EmbedLiveSample("Appliquer_une_couleur_unie_dans_le_contexte_WebGL",660,300)}}

+ +

Appliquer une couleur unie dans le contexte WebGL

+ +

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.

+ +

Par ailleurs, vous pouvez remarquer que, pour appliquer une couleur unie sur le tampon (buffer) 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 clear()), toutes les autres méthodes permettent d'obtenir ou de modifier les variables liées aux états de WebGL (dont la couleur à appliquer).

+ +

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).

+ +

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 (green G), bleu (B) et alpha (qui correspond à l'opacité). C'est pour ça que clearColor() prend quatre arguments.

+ +
<p>Un programme WebGL très simple qui affiche une couleur.</p>
+<!-- Le texte d'un élément canvas est affiché uniquement
+    si canvas n'est pas supporté. -->
+<canvas>Il semblerait que votre navigateur ne supporte pas
+    le canevas HTML5</canvas>
+
+ +
body {
+  text-align : center;
+}
+canvas {
+  display : block;
+  width : 280px;
+  height : 210px;
+  margin : auto;
+  padding : 0;
+  border : none;
+  background-color : black;
+}
+
+ +
// 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);
+
+ +

Le code source de cet exemple est également disponible sur GitHub.

+ +
{{PreviousNext("Apprendre/WebGL/Par_exemple/Détecter_WebGL","Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_%C3%A0_la_souris")}}
diff --git a/files/fr/web/api/webgl_api/by_example/color_masking/index.html b/files/fr/web/api/webgl_api/by_example/color_masking/index.html new file mode 100644 index 0000000000..ad5e0dd461 --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/color_masking/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 +--- +
{{IncludeSubnav("/fr/Apprendre")}}
+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_colorée","Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples")}}

+ +
+
+

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.

+
+ +

{{EmbedLiveSample("color-masking-source",660,425)}}

+ +
+

Appliquer un masque sur des couleurs aléatoires

+ +

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.

+ +

Les masques de couleur nous permettent d'illustrer quelques concepts de base de la théorie des couleurs. 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.

+ +

On voit que les appels à colorMask() 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 colorMask() à 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.

+ +

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.

+ +

Enfin, l'application d'un masque de couleur nous montre que {{Glossary("WebGL")}} n'est pas seulement un automate à états mais aussi un processus 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>Tinting the displayed colors with color masking.</p>
+<canvas>Il semblerait que votre navigateur ne supporte pas
+    l'élément HTML5 canvas.</canvas>
+<button id="red-toggle">On</button>
+<button id="green-toggle">On</button>
+<button id="blue-toggle">On</button>
+
+ +
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;
+}
+
+ +
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 && 1
+      || evt.target === bluetoggle && 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);
+
+ +

Le code source de cet exemple est également disponible sur GitHub.

+
+
+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_colorée","Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples")}}

diff --git "a/files/fr/web/api/webgl_api/by_example/cr\303\251er_une_animation_avec_d\303\251coupe_et_applique/index.html" "b/files/fr/web/api/webgl_api/by_example/cr\303\251er_une_animation_avec_d\303\251coupe_et_applique/index.html" deleted file mode 100644 index 8eb25287ab..0000000000 --- "a/files/fr/web/api/webgl_api/by_example/cr\303\251er_une_animation_avec_d\303\251coupe_et_applique/index.html" +++ /dev/null @@ -1,162 +0,0 @@ ---- -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 ---- -
{{IncludeSubnav("/fr/Apprendre")}}
- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Modèle_1","Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle")}}

- -

Dans cet article, on voit comment créer des animations grâce à des opérations de découpe et d'applique.

- -

{{EmbedLiveSample("Une_animation_grâce_à_des_découpes",660,425)}}

- -

Une animation grâce à des découpes

- -

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 timers. Cette fois-ci, la position du carré (la zone de découpe) est mise à jour à chaque frame (on a environ une frame rafraîchie toutes les 17 millisecondes, ce qui correspond environ à 60fps (frame per second ou frame par seconde).

- -

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 frame. L'état lié à la couleur reste tel quel jusqu'à ce qu'un nouveau carré soit créé.

- - - - - - - -
"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] < 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()];
-}
-
- - - - - -

Le code source de cet exemple est également disponible sur GitHub.

- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Modèle_1","Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle")}}

diff --git "a/files/fr/web/api/webgl_api/by_example/cr\303\251er_une_animation_color\303\251e/index.html" "b/files/fr/web/api/webgl_api/by_example/cr\303\251er_une_animation_color\303\251e/index.html" deleted file mode 100644 index a38d174808..0000000000 --- "a/files/fr/web/api/webgl_api/by_example/cr\303\251er_une_animation_color\303\251e/index.html" +++ /dev/null @@ -1,139 +0,0 @@ ---- -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 ---- -
{{IncludeSubnav("/fr/Apprendre")}}
- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_à_la_souris","Apprendre/WebGL/Par_exemple/Masque_de_couleur")}}

- -

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")}}.

- -

{{EmbedLiveSample("Créer_une_animation_avec_clear",660,425)}}

- -

Créer une animation avec clear

- -

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.

- -

Cette fois, on place les appels à la fonction WebGL à l'intérieur d'un gestionnaire d'événement de timer. Un gestionnaire d'événements pour les clics permet de gérer les interactions simples (lancer et arrêter l'animation). Le timer et la fonction de gestion du timer 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 frame, dans ce cas, on a une fréquence d'une frame par seconde).

- -
<p>Un programme WebGL simple qui crée une animation colorée.</p>
-<p>Vous pouvez sur le bouton pour activer/désactiver l'animation.</p>
-<canvas id="canvas-view">Il semblerait que votre navigateur ne
-    supporte pas l'élément canvas.</canvas>
-<button id="animation-onoff">
-  Cliquez ici pour
-<strong>[le verbe de l'action]</strong>
-  l'animation
-</button>
-
- -
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;
-}
-
- -
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);
-
- -

Le code source de cet exemple est également disponible sur GitHub.

- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_à_la_souris","Apprendre/WebGL/Par_exemple/Masque_de_couleur")}}

diff --git a/files/fr/web/api/webgl_api/by_example/detect_webgl/index.html b/files/fr/web/api/webgl_api/by_example/detect_webgl/index.html new file mode 100644 index 0000000000..fec1fd88a0 --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/detect_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 +--- +
{{IncludeSubnav("/fr/Apprendre")}}
+ +
{{PreviousNext("Apprendre/WebGL/Par_exemple","Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs")}}
+ +

Dans cet exemple, on voit comment détecter un contexte de rendu {{Glossary("WebGL")}} et afficher le résultat à l'utilisateur.

+ +

{{EmbedLiveSample("Détecter_le_support_WebGL",660,150)}}

+ +

Détecter le support WebGL

+ +

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.

+ +

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>[ On affichera ici le résultat de la détection du support WebGL ]</p>
+<button>Cliquez ici pour détecter WebGLRenderingContext</button>
+
+ +
body {
+  text-align : center;
+}
+button {
+  display : block;
+  font-size : inherit;
+  margin : auto;
+  padding : 0.6em;
+}
+
+ +
// 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 && 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);
+
+ +

Le code source de cet exemple est également disponible sur GitHub.

+ +
{{PreviousNext("Apprendre/WebGL/Par_exemple","Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs")}}
diff --git "a/files/fr/web/api/webgl_api/by_example/d\303\251tecter_webgl/index.html" "b/files/fr/web/api/webgl_api/by_example/d\303\251tecter_webgl/index.html" deleted file mode 100644 index fec1fd88a0..0000000000 --- "a/files/fr/web/api/webgl_api/by_example/d\303\251tecter_webgl/index.html" +++ /dev/null @@ -1,79 +0,0 @@ ---- -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 ---- -
{{IncludeSubnav("/fr/Apprendre")}}
- -
{{PreviousNext("Apprendre/WebGL/Par_exemple","Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs")}}
- -

Dans cet exemple, on voit comment détecter un contexte de rendu {{Glossary("WebGL")}} et afficher le résultat à l'utilisateur.

- -

{{EmbedLiveSample("Détecter_le_support_WebGL",660,150)}}

- -

Détecter le support WebGL

- -

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.

- -

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>[ On affichera ici le résultat de la détection du support WebGL ]</p>
-<button>Cliquez ici pour détecter WebGLRenderingContext</button>
-
- -
body {
-  text-align : center;
-}
-button {
-  display : block;
-  font-size : inherit;
-  margin : auto;
-  padding : 0.6em;
-}
-
- -
// 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 && 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);
-
- -

Le code source de cet exemple est également disponible sur GitHub.

- -
{{PreviousNext("Apprendre/WebGL/Par_exemple","Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs")}}
diff --git "a/files/fr/web/api/webgl_api/by_example/g\303\251n\303\251rer_des_textures_avec_du_code/index.html" "b/files/fr/web/api/webgl_api/by_example/g\303\251n\303\251rer_des_textures_avec_du_code/index.html" deleted file mode 100644 index cd7d71f0c5..0000000000 --- "a/files/fr/web/api/webgl_api/by_example/g\303\251n\303\251rer_des_textures_avec_du_code/index.html" +++ /dev/null @@ -1,164 +0,0 @@ ---- -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 ---- -
{{draft}}{{IncludeSubnav("/fr/Apprendre")}}
- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex","Apprendre/WebGL/Par_exemple/Les_textures_vidéos")}}

- -

Dans cet article, on illustre simplement comment générer des textures procédurales avec des fragments de shaders.

- -

{{EmbedLiveSample("Dessiner_des_textures_avec_du_code",660,350)}}

- -

Dessiner des textures avec du  code

- -

Il est possible d'appliquer des textures en effectuant des calculs pour chaque pixel du fragment de shader.

- - - - - -
<script type="x-shader/x-vertex" id="vertex-shader">
-#version 100
-precision highp float;
-void main() {
-  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
-  gl_PointSize = 128.0;
-}
-</script>
-
- -
<script type="x-shader/x-fragment" id="fragment-shader">
-#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 );
-}
-</script>
-
- - - -
"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);
-}
-
- - - - - -

Le code source de cet exemple est également disponible sur GitHub.

- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex","Apprendre/WebGL/Par_exemple/Les_textures_vidéos")}}

diff --git a/files/fr/web/api/webgl_api/by_example/hello_vertex_attributes/index.html b/files/fr/web/api/webgl_api/by_example/hello_vertex_attributes/index.html new file mode 100644 index 0000000000..612dbad79c --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/hello_vertex_attributes/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 +--- +
{{IncludeSubnav("/fr/Apprendre")}}
+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Hello_GLSL","Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}

+ +

Avec cet exemple, on voit comment combiner la programmation des shaders et les interactions utilisateurs grâce aux attributs des vertex.

+ +

{{EmbedLiveSample("Un_Hello_World_en_GLSL",660,425)}}

+ +

Un Hello World en GLSL

+ +

Voici comment envoyer des données saisies à un programme de manipulation des shaders en utilisant la mémoire GPU.

+ + + + + +
<script type="x-shader/x-vertex" id="vertex-shader">
+#version 100
+precision highp float;
+
+attribute float position;
+
+void main() {
+  gl_Position = vec4(position, 0.0, 0.0, 1.0);
+  gl_PointSize = 64.0;
+}
+</script>
+
+ +
<script type="x-shader/x-fragment" id="fragment-shader">
+#version 100
+precision mediump float;
+void main() {
+  gl_FragColor = vec4(0.18, 0.54, 0.34, 1.0);
+}
+</script>
+
+ + + +
"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);
+}
+
+ + + + + +

Le code source de cet exemple est également disponible sur GitHub.

+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Hello_GLSL","Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}

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 deleted file mode 100644 index 612dbad79c..0000000000 --- a/files/fr/web/api/webgl_api/by_example/introduction_aux_attributs_vertex/index.html +++ /dev/null @@ -1,171 +0,0 @@ ---- -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 ---- -
{{IncludeSubnav("/fr/Apprendre")}}
- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Hello_GLSL","Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}

- -

Avec cet exemple, on voit comment combiner la programmation des shaders et les interactions utilisateurs grâce aux attributs des vertex.

- -

{{EmbedLiveSample("Un_Hello_World_en_GLSL",660,425)}}

- -

Un Hello World en GLSL

- -

Voici comment envoyer des données saisies à un programme de manipulation des shaders en utilisant la mémoire GPU.

- - - - - -
<script type="x-shader/x-vertex" id="vertex-shader">
-#version 100
-precision highp float;
-
-attribute float position;
-
-void main() {
-  gl_Position = vec4(position, 0.0, 0.0, 1.0);
-  gl_PointSize = 64.0;
-}
-</script>
-
- -
<script type="x-shader/x-fragment" id="fragment-shader">
-#version 100
-precision mediump float;
-void main() {
-  gl_FragColor = vec4(0.18, 0.54, 0.34, 1.0);
-}
-</script>
-
- - - -
"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);
-}
-
- - - - - -

Le code source de cet exemple est également disponible sur GitHub.

- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Hello_GLSL","Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}

diff --git "a/files/fr/web/api/webgl_api/by_example/les_textures_vid\303\251os/index.html" "b/files/fr/web/api/webgl_api/by_example/les_textures_vid\303\251os/index.html" deleted file mode 100644 index ab1ea5a388..0000000000 --- "a/files/fr/web/api/webgl_api/by_example/les_textures_vid\303\251os/index.html" +++ /dev/null @@ -1,23 +0,0 @@ ---- -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 ---- -
{{draft}}{{IncludeSubnav("/fr/Apprendre")}}
- -

{{Previous("Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}

- -

Cet exemple illustre comment utiliser des fichiers vidéos comme textures.

- -

Des textures à partir de vidéos

- -

{{EmbedGHLiveSample('webgl-examples/tutorial/sample8/index.html', 670, 510)}}

- -

{{Previous("Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}

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 deleted file mode 100644 index ad5e0dd461..0000000000 --- a/files/fr/web/api/webgl_api/by_example/masque_de_couleur/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -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 ---- -
{{IncludeSubnav("/fr/Apprendre")}}
- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_colorée","Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples")}}

- -
-
-

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.

-
- -

{{EmbedLiveSample("color-masking-source",660,425)}}

- -
-

Appliquer un masque sur des couleurs aléatoires

- -

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.

- -

Les masques de couleur nous permettent d'illustrer quelques concepts de base de la théorie des couleurs. 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.

- -

On voit que les appels à colorMask() 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 colorMask() à 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.

- -

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.

- -

Enfin, l'application d'un masque de couleur nous montre que {{Glossary("WebGL")}} n'est pas seulement un automate à états mais aussi un processus 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>Tinting the displayed colors with color masking.</p>
-<canvas>Il semblerait que votre navigateur ne supporte pas
-    l'élément HTML5 canvas.</canvas>
-<button id="red-toggle">On</button>
-<button id="green-toggle">On</button>
-<button id="blue-toggle">On</button>
-
- -
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;
-}
-
- -
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 && 1
-      || evt.target === bluetoggle && 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);
-
- -

Le code source de cet exemple est également disponible sur GitHub.

-
-
- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_colorée","Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples")}}

diff --git "a/files/fr/web/api/webgl_api/by_example/mod\303\250le_1/index.html" "b/files/fr/web/api/webgl_api/by_example/mod\303\250le_1/index.html" deleted file mode 100644 index a055a358c8..0000000000 --- "a/files/fr/web/api/webgl_api/by_example/mod\303\250le_1/index.html" +++ /dev/null @@ -1,97 +0,0 @@ ---- -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 ---- -
{{IncludeSubnav("/fr/Apprendre")}}
- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL","Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique")}}

- -

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.

- -

{{EmbedLiveSample("Socle_pour_l'initialisation_du_contexte_WebGL",660,400)}}

- -

Socle pour l'initialisation du contexte WebGL

- -

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")}}.

- -

Plus précisément, le code HTML contiendra

- - - -

Les règles CSS s'appliqueront aux éléments body, canvas et button. Les éléments supplémentaires pour le code CSS et HTML seront détaillés dans les pages des exemples concernés.

- -

Dans les exemples suivants, on utilisera la fonction utilitaire JavaScript getRenderingContext 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

- - - -

S'il y a une erreur, la fonction affiche un message d'erreur et renvoie null.

- -

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>[ Un texte qui décrit l'exemple. ]</p>
-<button>[ Un bouton optionnel pour les interactions. ]</button>
-<canvas>Il semblerait que votre navigateur ne supporte
-    pas le canevas HTML5.</canvas>
-
- -
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;
-}
-
- -
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;
-}
-
- -

Le code source de cet exemple est également disponible sur GitHub.

- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL","Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique")}}

diff --git a/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.html b/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.html new file mode 100644 index 0000000000..e9f9bcdf8c --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/raining_rectangles/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 +--- +
{{IncludeSubnav("/fr/Apprendre")}}
+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique","Apprendre/WebGL/Par_exemple/Hello_GLSL")}}

+ +

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.

+ +

{{EmbedLiveSample("Utiliser_des_animations_et_des_interactions_grâce_à_des_découpes",660,425)}}

+ +

Utiliser des animations et des interactions grâce à des découpes

+ +

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.

+ +

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.

+ +

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  setTimeout.

+ + + + + + + +
"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] < 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] >= 0 && diffPos[0] < rainingRect.size[0]
+      && diffPos[1] >= 0 && diffPos[1] < 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()];
+  }
+}
+
+ + + + + +

Le code source de cet exemple est également disponible sur GitHub.

+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique","Apprendre/WebGL/Par_exemple/Hello_GLSL")}}

diff --git a/files/fr/web/api/webgl_api/by_example/scissor_animation/index.html b/files/fr/web/api/webgl_api/by_example/scissor_animation/index.html new file mode 100644 index 0000000000..8eb25287ab --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/scissor_animation/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 +--- +
{{IncludeSubnav("/fr/Apprendre")}}
+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Modèle_1","Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle")}}

+ +

Dans cet article, on voit comment créer des animations grâce à des opérations de découpe et d'applique.

+ +

{{EmbedLiveSample("Une_animation_grâce_à_des_découpes",660,425)}}

+ +

Une animation grâce à des découpes

+ +

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 timers. Cette fois-ci, la position du carré (la zone de découpe) est mise à jour à chaque frame (on a environ une frame rafraîchie toutes les 17 millisecondes, ce qui correspond environ à 60fps (frame per second ou frame par seconde).

+ +

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 frame. L'état lié à la couleur reste tel quel jusqu'à ce qu'un nouveau carré soit créé.

+ + + + + + + +
"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] < 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()];
+}
+
+ + + + + +

Le code source de cet exemple est également disponible sur GitHub.

+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Modèle_1","Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle")}}

diff --git a/files/fr/web/api/webgl_api/by_example/simple_color_animation/index.html b/files/fr/web/api/webgl_api/by_example/simple_color_animation/index.html new file mode 100644 index 0000000000..a38d174808 --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/simple_color_animation/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 +--- +
{{IncludeSubnav("/fr/Apprendre")}}
+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_à_la_souris","Apprendre/WebGL/Par_exemple/Masque_de_couleur")}}

+ +

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")}}.

+ +

{{EmbedLiveSample("Créer_une_animation_avec_clear",660,425)}}

+ +

Créer une animation avec clear

+ +

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.

+ +

Cette fois, on place les appels à la fonction WebGL à l'intérieur d'un gestionnaire d'événement de timer. Un gestionnaire d'événements pour les clics permet de gérer les interactions simples (lancer et arrêter l'animation). Le timer et la fonction de gestion du timer 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 frame, dans ce cas, on a une fréquence d'une frame par seconde).

+ +
<p>Un programme WebGL simple qui crée une animation colorée.</p>
+<p>Vous pouvez sur le bouton pour activer/désactiver l'animation.</p>
+<canvas id="canvas-view">Il semblerait que votre navigateur ne
+    supporte pas l'élément canvas.</canvas>
+<button id="animation-onoff">
+  Cliquez ici pour
+<strong>[le verbe de l'action]</strong>
+  l'animation
+</button>
+
+ +
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;
+}
+
+ +
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);
+
+ +

Le code source de cet exemple est également disponible sur GitHub.

+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_à_la_souris","Apprendre/WebGL/Par_exemple/Masque_de_couleur")}}

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 deleted file mode 100644 index 086e0394a7..0000000000 --- a/files/fr/web/api/webgl_api/by_example/tailles_de_canvas_et_webgl/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -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 ---- -
{{IncludeSubnav("/fr/Apprendre")}}
- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples","Apprendre/WebGL/Par_exemple/Modèle_1")}}

- -

{{EmbedLiveSample("Les_effets_liés_à_la_taille_du_canevas_sur_le_rendu_avec_WebGL",660,180)}}

- -

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.

- -

Les effets liés à la taille du canevas sur le rendu avec WebGL

- -

Grâce aux méthodes {{domxref("WebGLRenderingContext.scissor()","scissor()")}} et {{domxref("WebGLRenderingContext.clear()","clear()")}} on peut démontrer que le tampon (buffer) de dessin WebGL est affecté par la taille du canevas (l'élément HTML canvas).

- -

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")}}.

- -

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 canvas affiché dans le fenêtre du navigateur.

- -

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>On compare les deux canevas.</p>
-<canvas>Votre navigateur ne semble pas
-    supporter l'élément HTML5 canvas.</canvas>
-<canvas>Votre navigateur ne semble pas
-    supporter l'élément HTML5 canvas.</canvas>
-
- -
body {
-  text-align : center;
-}
-canvas {
-  width : 120px;
-  height : 80px;
-  margin : auto;
-  padding : 0;
-  border : none;
-  background-color : black;
-}
-
- -
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);
-
- -

Le code source de cet exemple est également disponible sur GitHub.

- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples","Apprendre/WebGL/Par_exemple/Modèle_1")}}

diff --git a/files/fr/web/api/webgl_api/by_example/textures_from_code/index.html b/files/fr/web/api/webgl_api/by_example/textures_from_code/index.html new file mode 100644 index 0000000000..cd7d71f0c5 --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/textures_from_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 +--- +
{{draft}}{{IncludeSubnav("/fr/Apprendre")}}
+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex","Apprendre/WebGL/Par_exemple/Les_textures_vidéos")}}

+ +

Dans cet article, on illustre simplement comment générer des textures procédurales avec des fragments de shaders.

+ +

{{EmbedLiveSample("Dessiner_des_textures_avec_du_code",660,350)}}

+ +

Dessiner des textures avec du  code

+ +

Il est possible d'appliquer des textures en effectuant des calculs pour chaque pixel du fragment de shader.

+ + + + + +
<script type="x-shader/x-vertex" id="vertex-shader">
+#version 100
+precision highp float;
+void main() {
+  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
+  gl_PointSize = 128.0;
+}
+</script>
+
+ +
<script type="x-shader/x-fragment" id="fragment-shader">
+#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 );
+}
+</script>
+
+ + + +
"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);
+}
+
+ + + + + +

Le code source de cet exemple est également disponible sur GitHub.

+ +

{{PreviousNext("Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex","Apprendre/WebGL/Par_exemple/Les_textures_vidéos")}}

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 deleted file mode 100644 index e9f9bcdf8c..0000000000 --- a/files/fr/web/api/webgl_api/by_example/une_pluie_de_rectangle/index.html +++ /dev/null @@ -1,176 +0,0 @@ ---- -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 ---- -
{{IncludeSubnav("/fr/Apprendre")}}
- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique","Apprendre/WebGL/Par_exemple/Hello_GLSL")}}

- -

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.

- -

{{EmbedLiveSample("Utiliser_des_animations_et_des_interactions_grâce_à_des_découpes",660,425)}}

- -

Utiliser des animations et des interactions grâce à des découpes

- -

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.

- -

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.

- -

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  setTimeout.

- - - - - - - -
"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] < 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] >= 0 && diffPos[0] < rainingRect.size[0]
-      && diffPos[1] >= 0 && diffPos[1] < 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()];
-  }
-}
-
- - - - - -

Le code source de cet exemple est également disponible sur GitHub.

- -

{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique","Apprendre/WebGL/Par_exemple/Hello_GLSL")}}

diff --git a/files/fr/web/api/webgl_api/by_example/video_textures/index.html b/files/fr/web/api/webgl_api/by_example/video_textures/index.html new file mode 100644 index 0000000000..ab1ea5a388 --- /dev/null +++ b/files/fr/web/api/webgl_api/by_example/video_textures/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 +--- +
{{draft}}{{IncludeSubnav("/fr/Apprendre")}}
+ +

{{Previous("Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}

+ +

Cet exemple illustre comment utiliser des fichiers vidéos comme textures.

+ +

Des textures à partir de vidéos

+ +

{{EmbedGHLiveSample('webgl-examples/tutorial/sample8/index.html', 670, 510)}}

+ +

{{Previous("Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}

-- cgit v1.2.3-54-g00ecf