diff options
Diffstat (limited to 'files/fr/web/api/webgl_api/by_example')
15 files changed, 19 insertions, 33 deletions
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 index 8a3bee2e08..2fa7a52da1 100644 --- 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 @@ -15,7 +15,7 @@ original_slug: Web/API/WebGL_API/By_example/Appliquer_des_découpes_simples <p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Masque_de_couleur","Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL")}}</p> -<p class="summary">Dans cet article, on illustre comment dessiner des rectangles et des carrés grâce à des opérations de découpe simple (<em>scissoring</em>).</p> +<p>Dans cet article, on illustre comment dessiner des rectangles et des carrés grâce à des opérations de découpe simple (<em>scissoring</em>).</p> <p>{{EmbedLiveSample("Appliquer_les_changements_sur_le_buffer_lors_de_la_découpe",660,330)}}</p> @@ -52,7 +52,7 @@ canvas { } </pre> -<pre class="brush: js" id="livesample-js">window.addEventListener("load", function setupWebGL (evt) { +<pre class="brush: js">window.addEventListener("load", function setupWebGL (evt) { "use strict" window.removeEventListener(evt.type, setupWebGL, false); var paragraph = document.querySelector("p"); 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 index 134457e0fe..406d868fbd 100644 --- 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 @@ -14,7 +14,7 @@ original_slug: Web/API/WebGL_API/By_example/Modèle_1 <p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Tailles_de_canvas_et_WebGL","Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique")}}</p> -<p class="summary">Dans cet article, on décrit les fragments de code qui seront réutilisés pour les exemples suivants (où ils seront masqués pour une meilleur lisibilité). Parmi ce code, on définit une fonction JavaScript utilitaire qui permet de simplifier l'initialisation de WebGL.</p> +<p>Dans cet article, on décrit les fragments de code qui seront réutilisés pour les exemples suivants (où ils seront masqués pour une meilleur lisibilité). Parmi ce code, on définit une fonction JavaScript utilitaire qui permet de simplifier l'initialisation de WebGL.</p> <p>{{EmbedLiveSample("Socle_pour_l'initialisation_du_contexte_WebGL",660,400)}}</p> 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 index 9cb1d89359..99c382c0ac 100644 --- 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 @@ -16,7 +16,7 @@ original_slug: Web/API/WebGL_API/By_example/Tailles_de_canvas_et_WebGL <p>{{EmbedLiveSample("Les_effets_liés_à_la_taille_du_canevas_sur_le_rendu_avec_WebGL",660,180)}}</p> -<p class="summary">Dans cet exemple, on observe l'effet obtenu quand on définit (ou non) la taille du canevas HTML avec sa taille {{Glossary("CSS")}} (exprimée en pixels CSS), tel qu'il apparaît dans la fenêtre du navigateur.</p> +<p>Dans cet exemple, on observe l'effet obtenu quand on définit (ou non) la taille du canevas HTML avec sa taille {{Glossary("CSS")}} (exprimée en pixels CSS), tel qu'il apparaît dans la fenêtre du navigateur.</p> <h3 id="Les_effets_liés_à_la_taille_du_canevas_sur_le_rendu_avec_WebGL">Les effets liés à la taille du canevas sur le rendu avec WebGL</h3> 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 index eaf21ce19a..91c858dcec 100644 --- 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 @@ -15,7 +15,7 @@ original_slug: Web/API/WebGL_API/By_example/Appliquer_une_couleur_à_la_souris <p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs","Apprendre/WebGL/Par_exemple/Cr%C3%A9er_une_animation_color%C3%A9e")}}</p> -<p class="summary">Dans cet article, on voit comment combiner les interactions de l'utilisateur et les opérations graphiques. Plus précisément, dans cet exemple, chaque clic de l'utilisateur déclenchera l'application d'une couleur aléatoire dans le contexte de rendu.</p> +<p>Dans cet article, on voit comment combiner les interactions de l'utilisateur et les opérations graphiques. Plus précisément, dans cet exemple, chaque clic de l'utilisateur déclenchera l'application d'une couleur aléatoire dans le contexte de rendu.</p> <p>{{EmbedLiveSample("Appliquer_des_couleurs_aléatoires_dans_le_contexte_de_rendu",660,410)}}</p> 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 index c5a6013ed9..fd92c8ce1c 100644 --- 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 @@ -15,7 +15,7 @@ original_slug: Web/API/WebGL_API/By_example/Appliquer_des_couleurs <p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Détecter_WebGL","Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_%C3%A0_la_souris")}}</p> -<p class="summary">Dans cet article, on voit comment appliquer une couleur unie dans le contexte de rendu.</p> +<p>Dans cet article, on voit comment appliquer une couleur unie dans le contexte de rendu.</p> <p>{{EmbedLiveSample("Appliquer_une_couleur_unie_dans_le_contexte_WebGL",660,300)}}</p> 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 index 250b7927a5..f5ef6779ef 100644 --- 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 @@ -15,14 +15,10 @@ original_slug: Web/API/WebGL_API/By_example/Masque_de_couleur <p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_colorée","Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples")}}</p> -<div id="color-masking"> -<div class="summary"> <p>Dans cet article, on modifie des couleurs aléatoires grâce à un masque de couleur. Cela permet de limiter la plage de couleurs affichées à certains tons.</p> -</div> <p>{{EmbedLiveSample("color-masking-source",660,425)}}</p> -<div id="color-masking-intro"> <h3 id="Appliquer_un_masque_sur_des_couleurs_aléatoires">Appliquer un masque sur des couleurs aléatoires</h3> <p>Dans cet exemple, on modifie les couleurs aléatoires utilisées pour une animation grâce à l'opération {{domxref("WebGLRenderingContext.colorMask()","colorMask()")}}. D'une certaine façon, cette opération est analogue à la modification qu'on obtient lorsqu'on regarde à travers du verre teinté ou derrière une filtre coloré. Ainsi, en masquant les canaux vert et bleu, on ne pourra recevoir que les composantes rouges des pixels et cela donnera l'impression de regarder à travers du verre teinté de rouge.</p> @@ -34,9 +30,7 @@ original_slug: Web/API/WebGL_API/By_example/Masque_de_couleur <p>Les masques de couleurs permettent d'avoir un contrôle précis pour mettre à jour les pixels à l'écran. En limitant les canaux de couleur qui sont utilisés à chaque commande de dessin, on peut utiliser chaque canal à bon escient et on peut par exemple stocler une image en ton de gris.</p> <p>Enfin, l'application d'un masque de couleur nous montre que {{Glossary("WebGL")}} n'est pas seulement un automate à états mais aussi un <em>processus</em> graphique. Cela signifie que les opérations graphiques liées à WebGL sont effectuées dans un ordre donné et que le résultat de chaque opération sert de point d'entrée pour l'opération suivante. Ainsi, l'opération d'applique définit la valeur pour chaque pixel. L'application du masque se produit plus tard dans le processus et modifie la couleur. Ainsi, le résultat final affiché à l'écran est teinté par la couleur du masque.</p> -</div> -<div id="color-masking-source"> <pre class="brush: html"><p>Tinting the displayed colors with color masking.</p> <canvas>Il semblerait que votre navigateur ne supporte pas l'élément HTML5 canvas.</canvas> @@ -77,7 +71,7 @@ button { } </pre> -<pre class="brush: js" id="livesample-js">window.addEventListener("load", function setupAnimation (evt) { +<pre class="brush: js">window.addEventListener("load", function setupAnimation (evt) { "use strict" window.removeEventListener(evt.type, setupAnimation, false); @@ -131,7 +125,5 @@ button { </pre> <p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/color-masking">GitHub</a>.</p> -</div> -</div> <p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_colorée","Apprendre/WebGL/Par_exemple/Appliquer_des_découpes_simples")}}</p> diff --git a/files/fr/web/api/webgl_api/by_example/detect_webgl/index.html b/files/fr/web/api/webgl_api/by_example/detect_webgl/index.html index 449d08fa57..b3083ba274 100644 --- 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 @@ -15,7 +15,7 @@ original_slug: Web/API/WebGL_API/By_example/Détecter_WebGL <div>{{PreviousNext("Apprendre/WebGL/Par_exemple","Apprendre/WebGL/Par_exemple/Appliquer_des_couleurs")}}</div> -<p class="summary">Dans cet exemple, on voit comment détecter un contexte de rendu {{Glossary("WebGL")}} et afficher le résultat à l'utilisateur.</p> +<p>Dans cet exemple, on voit comment détecter un contexte de rendu {{Glossary("WebGL")}} et afficher le résultat à l'utilisateur.</p> <p>{{EmbedLiveSample("Détecter_le_support_WebGL",660,150)}}</p> diff --git a/files/fr/web/api/webgl_api/by_example/hello_glsl/index.html b/files/fr/web/api/webgl_api/by_example/hello_glsl/index.html index b26df25f0f..c30e81f2f3 100644 --- a/files/fr/web/api/webgl_api/by_example/hello_glsl/index.html +++ b/files/fr/web/api/webgl_api/by_example/hello_glsl/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/WebGL_API/By_example/Hello_GLSL <p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle","Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex")}}</p> -<p class="summary">Dans cet article, on décrit un programme de manipulation de <em>shaders</em> qui dessine un carré de couleur.</p> +<p>Dans cet article, on décrit un programme de manipulation de <em>shaders</em> qui dessine un carré de couleur.</p> <div class="note"> <p><strong>Note :</strong> Cet exemple devrait fonctionner pour l'ensemble des navigateurs récents. Cependant, pour les versions anciennes ou mobiles, il peut y avoir des dysfonctionnements. Si le canevas reste blanc, vous pouvez vérifier le résultat avec l'exemple suivant qui dessine exactement la même chose. Assurez-vous de bien lire les explications et le code présent sur cette page avant de passer à la suivante.</p> 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 index c829a9b4f9..f00e3a7ea1 100644 --- 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 @@ -15,7 +15,7 @@ original_slug: Web/API/WebGL_API/By_example/Introduction_aux_attributs_vertex <p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Hello_GLSL","Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}</p> -<p class="summary">Avec cet exemple, on voit comment combiner la programmation des <em>shaders</em> et les interactions utilisateurs grâce aux attributs des <em>vertex</em>.</p> +<p>Avec cet exemple, on voit comment combiner la programmation des <em>shaders</em> et les interactions utilisateurs grâce aux attributs des <em>vertex</em>.</p> <p>{{EmbedLiveSample("Un_Hello_World_en_GLSL",660,425)}}</p> diff --git a/files/fr/web/api/webgl_api/by_example/index.html b/files/fr/web/api/webgl_api/by_example/index.html index b7741c417f..037ed0d183 100644 --- a/files/fr/web/api/webgl_api/by_example/index.html +++ b/files/fr/web/api/webgl_api/by_example/index.html @@ -12,9 +12,7 @@ translation_of: Web/API/WebGL_API/By_example <p>{{Next("Apprendre/WebGL/Par_exemple/Détecter_WebGL")}}</p> -<div class="summary"> -<p id="webgl-by-example-summary"><em>WebGL par l'exemple</em> est une série d'articles illustrant les concepts et les possibilités offertes par WebGL. Chaque exemple est accompagné d'explications. Ces démonstrations sont triés par sujet et par niveau de difficulté. Les concepts abordés sont, entre autres, le contexte de rendu, la programmation avec les <em>shaders</em>, les textures, la géométrie et l'interaction avec les utilisateurs.</p> -</div> +<p><em>WebGL par l'exemple</em> est une série d'articles illustrant les concepts et les possibilités offertes par WebGL. Chaque exemple est accompagné d'explications. Ces démonstrations sont triés par sujet et par niveau de difficulté. Les concepts abordés sont, entre autres, le contexte de rendu, la programmation avec les <em>shaders</em>, les textures, la géométrie et l'interaction avec les utilisateurs.</p> <h2 id="Les_exemples_par_catégorie">Les exemples, par catégorie</h2> 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 index 15fae85fc7..de42151f5c 100644 --- 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 @@ -15,7 +15,7 @@ original_slug: Web/API/WebGL_API/By_example/Une_pluie_de_rectangle <p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Créer_une_animation_avec_découpe_et_applique","Apprendre/WebGL/Par_exemple/Hello_GLSL")}}</p> -<p class="summary">Cet exemple permet de créer un jeu simple qui illustre ce qu'il est possible de faire avec du « découpage », des animations et des interactions utilisateur.</p> +<p>Cet exemple permet de créer un jeu simple qui illustre ce qu'il est possible de faire avec du « découpage », des animations et des interactions utilisateur.</p> <p>{{EmbedLiveSample("Utiliser_des_animations_et_des_interactions_grâce_à_des_découpes",660,425)}}</p> @@ -59,7 +59,7 @@ button { <pre class="brush: js hidden">;(function(){ </pre> -<pre class="brush: js" id="livesample-js">"use strict" +<pre class="brush: js">"use strict" window.addEventListener("load", setupAnimation, false); var gl, timer, 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 index 76dfac1def..e151ad4c95 100644 --- 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 @@ -15,7 +15,7 @@ original_slug: Web/API/WebGL_API/By_example/Créer_une_animation_avec_découpe_e <p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Modèle_1","Apprendre/WebGL/Par_exemple/Une_pluie_de_rectangle")}}</p> -<p class="summary">Dans cet article, on voit comment créer des animations grâce à des opérations de découpe et d'applique.</p> +<p>Dans cet article, on voit comment créer des animations grâce à des opérations de découpe et d'applique.</p> <p>{{EmbedLiveSample("Une_animation_grâce_à_des_découpes",660,425)}}</p> 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 index cf2677db28..03897206ae 100644 --- 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 @@ -15,7 +15,7 @@ original_slug: Web/API/WebGL_API/By_example/Créer_une_animation_colorée <p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Appliquer_une_couleur_à_la_souris","Apprendre/WebGL/Par_exemple/Masque_de_couleur")}}</p> -<p class="summary">Dans cet exemple, on crée une animation avec des couleurs en appliquant chaque seconde une couleur aléatoire dans le contexte de rendu {{Glossary("WebGL")}}.</p> +<p>Dans cet exemple, on crée une animation avec des couleurs en appliquant chaque seconde une couleur aléatoire dans le contexte de rendu {{Glossary("WebGL")}}.</p> <p>{{EmbedLiveSample("Créer_une_animation_avec_clear",660,425)}}</p> @@ -56,7 +56,7 @@ canvas { } </pre> -<pre class="brush: js" id="livesample-js">window.addEventListener("load", function setupAnimation (evt) { +<pre class="brush: js">window.addEventListener("load", function setupAnimation (evt) { "use strict" window.removeEventListener(evt.type, setupAnimation, false); 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 index 82d47f2008..f88812a7d3 100644 --- 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 @@ -15,7 +15,7 @@ original_slug: Web/API/WebGL_API/By_example/Générer_des_textures_avec_du_code <p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex","Apprendre/WebGL/Par_exemple/Les_textures_vidéos")}}</p> -<p class="summary">Dans cet article, on illustre simplement comment générer des textures procédurales avec des fragments de <em>shader</em><em>s</em>.</p> +<p>Dans cet article, on illustre simplement comment générer des textures procédurales avec des fragments de <em>shader</em><em>s</em>.</p> <p>{{EmbedLiveSample("Dessiner_des_textures_avec_du_code",660,350)}}</p> @@ -153,13 +153,9 @@ if (program) gl.clear(gl.COLOR_BUFFER_BIT); return gl; } +})(); </pre> -<div class="hidden"> -<pre class="brush: js">})(); -</pre> -</div> - <p>Le code source de cet exemple est également disponible sur <a href="https://github.com/idofilin/webgl-by-example/tree/master/textures-from-code">GitHub</a>.</p> <p>{{PreviousNext("Apprendre/WebGL/Par_exemple/Introduction_aux_attributs_vertex","Apprendre/WebGL/Par_exemple/Les_textures_vidéos")}}</p> diff --git a/files/fr/web/api/webgl_api/by_example/video_textures/index.html b/files/fr/web/api/webgl_api/by_example/video_textures/index.html index 00f4feda91..9f5c93f1f9 100644 --- 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 @@ -15,7 +15,7 @@ original_slug: Web/API/WebGL_API/By_example/Les_textures_vidéos <p>{{Previous("Apprendre/WebGL/Par_exemple/Générer_des_textures_avec_du_code")}}</p> -<p class="summary">Cet exemple illustre comment utiliser des fichiers vidéos comme textures.</p> +<p>Cet exemple illustre comment utiliser des fichiers vidéos comme textures.</p> <h3 id="Des_textures_à_partir_de_vidéos">Des textures à partir de vidéos</h3> |