diff options
Diffstat (limited to 'files/fr/web/api/webgl_api')
22 files changed, 61 insertions, 83 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> diff --git a/files/fr/web/api/webgl_api/index.html b/files/fr/web/api/webgl_api/index.html index 8117eff285..cd73e5b62b 100644 --- a/files/fr/web/api/webgl_api/index.html +++ b/files/fr/web/api/webgl_api/index.html @@ -14,19 +14,16 @@ translation_of: Web/API/WebGL_API --- <div>{{WebGLSidebar}}</div> -<div class="summary"> -<p>WebGL (Bibliothèque de Graphismes Web) est une API JavaScript pour l'affichage de graphismes 2D et 3D dans n'importe quel navigateur web compatible sans utilisation de modules complémentaires. WebGl réalise cela en introduisant une API qui se conforme de façon très proche à OpenGL ES 2.0 et qui peut être utilisée dans les éléments <a href="/fr/docs/HTML/Canvas" title="/fr/docs/HTML/Canvas">canvas </a>d'HTML5.</p> -</div> +<p>WebGL (Bibliothèque de Graphismes Web) est une API JavaScript pour l'affichage de graphismes 2D et 3D dans n'importe quel navigateur web compatible sans utilisation de modules complémentaires. WebGl réalise cela en introduisant une API qui se conforme de façon très proche à OpenGL ES 2.0 et qui peut être utilisée dans les éléments <a href="/fr/docs/HTML/Canvas">canvas </a>d'HTML5.</p> -<p>Le support pour WebGL est présent dans <a href="https://developer.mozilla.org/fr-FR/Firefox" title="Firefox 4 for developers">Firefox</a> 4+, <a href="http://www.google.com/chrome/" title="http://www.google.com/chrome/">Google Chrome</a> 9+, <a href="http://www.opera.com/" title="http://www.opera.com/">Opera</a> 12+, <a href="http://www.apple.com/safari/" title="http://www.apple.com/fr/safari/">Safari </a>5.1+ and <a href="http://windows.microsoft.com/fr-fr/internet-explorer/browser-ie">Internet Explorer</a> 11+ ; toutefois, l'appareil de l'utilisateur doit aussi avoir le matériel qui supporte ces fonctionnalités.</p> +<p>Le support pour WebGL est présent dans <a href="/fr-FR/Firefox">Firefox</a> 4+, <a href="http://www.google.com/chrome/">Google Chrome</a> 9+, <a href="http://www.opera.com/">Opera</a> 12+, <a href="http://www.apple.com/safari/">Safari </a>5.1+ and <a href="http://windows.microsoft.com/fr-fr/internet-explorer/browser-ie">Internet Explorer</a> 11+ ; toutefois, l'appareil de l'utilisateur doit aussi avoir le matériel qui supporte ces fonctionnalités.</p> -<p>L'élément {{HTMLElement("canvas")}} est aussi utilisé par <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/Canvas_API">Canvas 2D</a> pour faire des graphismes 2D sur les pages web.</p> +<p>L'élément {{HTMLElement("canvas")}} est aussi utilisé par <a href="/fr-FR/docs/Web/API/Canvas_API">Canvas 2D</a> pour faire des graphismes 2D sur les pages web.</p> <h2 id="Référence">Référence</h2> <h3 id="Interfaces_standard">Interfaces standard</h3> -<div class="index"> <ul> <li>{{domxref("WebGLRenderingContext")}}</li> <li>{{domxref("WebGL2RenderingContext")}} {{experimental_inline}}</li> @@ -46,11 +43,9 @@ translation_of: Web/API/WebGL_API <li>{{domxref("WebGLUniformLocation")}}</li> <li>{{domxref("WebGLVertexArrayObject")}} {{experimental_inline}}</li> </ul> -</div> <h3 id="Extensions">Extensions</h3> -<div class="index"> <ul> <li>{{domxref("ANGLE_instanced_arrays")}}</li> <li>{{domxref("EXT_blend_minmax")}}</li> @@ -82,7 +77,6 @@ translation_of: Web/API/WebGL_API <li>{{domxref("WEBGL_draw_buffers")}}</li> <li>{{domxref("WEBGL_lose_context")}}</li> </ul> -</div> <h3 id="Evènements">Evènements</h3> @@ -95,8 +89,8 @@ translation_of: Web/API/WebGL_API <h3 id="Constantes_et_types">Constantes et types</h3> <ul> - <li><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/Constants">Constantes WebGL</a></li> - <li><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/Types">Types WebGL </a></li> + <li><a href="/fr-FR/docs/Web/API/WebGL_API/Constants">Constantes WebGL</a></li> + <li><a href="/fr-FR/docs/Web/API/WebGL_API/Types">Types WebGL </a></li> </ul> <h3 id="WebGL_2">WebGL 2</h3> @@ -104,13 +98,13 @@ translation_of: Web/API/WebGL_API <p>WebGL 2 est une mise à jour majeure de WebGL, qui est fournie à travers l'interface {{domxref("WebGL2RenderingContext")}}. Elle est basée sur OpenGL ES 3.0, et ses nouvelles fonctionnalités comprennent :</p> <ul> - <li>les <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL2RenderingContext/texImage3D">textures 3D</a>,</li> - <li>les <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGLSampler">objets Sampler</a>,</li> - <li>les <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL2RenderingContext#Uniform_buffer_objects">objets de tampon Uniform</a>,</li> - <li>les <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGLSync">objets Sync</a>,</li> - <li>les <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGLQuery">objets Query</a>,</li> - <li>les <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGLTransformFeedback">objets Tranform Feedback</a>,</li> - <li>des extensions promues, qui sont maintenant essentielles pour WebGL 2 : les <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGLVertexArrayObject">objets Vertex Array</a>, l'<a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL2RenderingContext/drawArraysInstanced">instanciation</a>, les <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL2RenderingContext/drawBuffers">cibles de rendu multiples</a>, la <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/EXT_frag_depth">profondeur de fragment</a>.</li> + <li>les <a href="/fr-FR/docs/Web/API/WebGL2RenderingContext/texImage3D">textures 3D</a>,</li> + <li>les <a href="/fr-FR/docs/Web/API/WebGLSampler">objets Sampler</a>,</li> + <li>les <a href="/fr-FR/docs/Web/API/WebGL2RenderingContext#Uniform_buffer_objects">objets de tampon Uniform</a>,</li> + <li>les <a href="/fr-FR/docs/Web/API/WebGLSync">objets Sync</a>,</li> + <li>les <a href="/en-US/docs/Web/API/WebGLQuery">objets Query</a>,</li> + <li>les <a href="/fr-FR/docs/Web/API/WebGLTransformFeedback">objets Tranform Feedback</a>,</li> + <li>des extensions promues, qui sont maintenant essentielles pour WebGL 2 : les <a href="/fr-FR/docs/Web/API/WebGLVertexArrayObject">objets Vertex Array</a>, l'<a href="/fr-FR/docs/Web/API/WebGL2RenderingContext/drawArraysInstanced">instanciation</a>, les <a href="/fr-FR/docs/Web/API/WebGL2RenderingContext/drawBuffers">cibles de rendu multiples</a>, la <a href="/fr-FR/docs/Web/API/EXT_frag_depth">profondeur de fragment</a>.</li> </ul> <p>Voir aussi le post de blog <a href="https://hacks.mozilla.org/2017/01/webgl-2-lands-in-firefox/">"WebGL 2 lands in Firefox"</a> et <a href="http://webglsamples.org/WebGL2Samples/">webglsamples.org/WebGL2Samples</a> pour quelques démos.</p> @@ -122,34 +116,34 @@ translation_of: Web/API/WebGL_API <h3 id="Guides">Guides</h3> <dl> - <dt><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/Data">Données en WebGL</a></dt> + <dt><a href="/fr-FR/docs/Web/API/WebGL_API/Data">Données en WebGL</a></dt> <dd>Un guide pour les variables, les tampons et autres types de données utilisés lors de l'écriture de code WebGL.</dd> - <dt><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/WebGL_best_practices">Meilleures pratiques WebGL</a></dt> + <dt><a href="/fr-FR/docs/Web/API/WebGL_API/WebGL_best_practices">Meilleures pratiques WebGL</a></dt> <dd>Des indications et des suggestions pour vous aider à améliore la qualité, les performances et la fiabilité de votre contenu WebGL.</dd> - <dt><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/Using_Extensions">Utilisation des extensions</a></dt> + <dt><a href="/fr-FR/docs/Web/API/WebGL_API/Using_Extensions">Utilisation des extensions</a></dt> <dd>Un guide pour l'utilisation des extensions WebGL.</dd> </dl> <h3 id="Tutoriels">Tutoriels</h3> <dl> - <dt><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/Tutorial">Tutoriel WebGL</a></dt> + <dt><a href="/fr-FR/docs/Web/API/WebGL_API/Tutorial">Tutoriel WebGL</a></dt> <dd>Un guide pour les débutants sur les concepts essentiels de WebGL. Un bon endroit pour démarrer si vous n'avez pas d'expérience antérieure de WebGL.</dd> </dl> <h3 id="Exemples">Exemples</h3> <dl> - <dt><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example">Un exemple de base d'animation WebGL 2D</a></dt> + <dt><a href="/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example">Un exemple de base d'animation WebGL 2D</a></dt> <dd>Cet exemple montre l'animation simple d'une forme monochrome. Les sujets abordés sont l'adaptation aux différences de ratio d'aspect, une fonction pour construire des programmes de shader à partir d'ensembles de plusieurs shaders, et les bases du dessin dans WebGL.</dd> </dl> <h3 id="Tutoriels_avancés">Tutoriels avancés</h3> <dl> - <dt><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/WebGL_model_view_projection">Projection de vue de modèle WebGL</a></dt> + <dt><a href="/fr-FR/docs/Web/API/WebGL_API/WebGL_model_view_projection">Projection de vue de modèle WebGL</a></dt> <dd>Une explication détaillée des trois matrices de base qui sont typiquement utilisées pour représenter une vue d'un objet 3D : les matrices de modèle, de vue et de projection.</dd> - <dt><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL_API/Matrix_math_for_the_web">Mathématiques matricielles pour le web</a></dt> + <dt><a href="/fr-FR/docs/Web/API/WebGL_API/Matrix_math_for_the_web">Mathématiques matricielles pour le web</a></dt> <dd>Un guide utile sur le fonctionnement des matrices de transformation 3D, qui peut être utilisé sur le web - à la fois pour les calculs WebGL et dans les transformations CSS3.</dd> </dl> @@ -218,7 +212,7 @@ translation_of: Web/API/WebGL_API <h3 id="Notes_de_compatibilité">Notes de compatibilité</h3> -<p>En plus du navigateur, la GPU elle-même doit également prendre en charge la fonctionnalité. Ainsi, par exemple, S3 Texture Compression (S3TC) n'est disponible que sur les tablettes à base de Tegra. La plupart des navigateurs rendent le contexte WebGL disponible via le nom de contexte <code>webgl</code>, mais les plus anciens ont aussi besoin d'<code>experimental-webgl</code>. De plus, le prochain <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGL2RenderingContext">WebGL 2</a> sera entièrement rétrocompatible et comprendra le nom de contexte <code>webgl2</code>.</p> +<p>En plus du navigateur, la GPU elle-même doit également prendre en charge la fonctionnalité. Ainsi, par exemple, S3 Texture Compression (S3TC) n'est disponible que sur les tablettes à base de Tegra. La plupart des navigateurs rendent le contexte WebGL disponible via le nom de contexte <code>webgl</code>, mais les plus anciens ont aussi besoin d'<code>experimental-webgl</code>. De plus, le prochain <a href="/fr-FR/docs/Web/API/WebGL2RenderingContext">WebGL 2</a> sera entièrement rétrocompatible et comprendra le nom de contexte <code>webgl2</code>.</p> <h3 id="Notes_Gecko">Notes Gecko</h3> @@ -236,6 +230,6 @@ translation_of: Web/API/WebGL_API <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/Canvas_API">Canvas</a></li> - <li><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGLRenderingContext/getSupportedExtensions#Browser_compatibility">Informations de compatibilité à propos des extensions WebGL</a></li> + <li><a href="/fr-FR/docs/Web/API/Canvas_API">Canvas</a></li> + <li><a href="/fr-FR/docs/Web/API/WebGLRenderingContext/getSupportedExtensions#Browser_compatibility">Informations de compatibilité à propos des extensions WebGL</a></li> </ul> diff --git a/files/fr/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html b/files/fr/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html index 7c731ca050..2369abb5e4 100644 --- a/files/fr/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html +++ b/files/fr/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html @@ -17,7 +17,7 @@ original_slug: Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL --- <p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}}</p> -<p>Une fois que vous avez correctement <a title="Commencer avec le WebGL">créé un contexte WebGL</a>, vous pouvez commencer à y dessiner. Une chose simple que nous pouvons faire est de dessiner un simple carré 2D sans texture, commençons donc par là, en construisant un code pour dessiner un carré 2D.</p> +<p>Une fois que vous avez correctement créé un contexte WebGL, vous pouvez commencer à y dessiner. Une chose simple que nous pouvons faire est de dessiner un simple carré 2D sans texture, commençons donc par là, en construisant un code pour dessiner un carré 2D.</p> <h2 id="Dessiner_la_scène">Dessiner la scène</h2> @@ -25,7 +25,7 @@ original_slug: Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL <h3 id="Les_shaders">Les shaders</h3> -<p>Un shader est un programme, écrit en utilisant le <a class="external" href="https://www.khronos.org/files/opengles_shading_language.pdf">OpenGL ES Shading Language</a> (GLSL), qui utilise les informations des sommets constituant une forme, et qui génère les données nécessaires pour faire un rendu des pixels à l'écran : nommément, les positions des pixels et leurs couleurs.</p> +<p>Un shader est un programme, écrit en utilisant le <a href="https://www.khronos.org/files/opengles_shading_language.pdf">OpenGL ES Shading Language</a> (GLSL), qui utilise les informations des sommets constituant une forme, et qui génère les données nécessaires pour faire un rendu des pixels à l'écran : nommément, les positions des pixels et leurs couleurs.</p> <p>Deux fonctions de shader sont exécutées lors du dessin d'un contenu WebGL : le <strong>shader de sommet</strong> et le <strong>shader de fragment</strong>. Vous les écrivez en GLSL et vous passez le texte du code à WebGL pour qu'il soit compilé pour exécution dans la GPU. Pris conjointement, un ensemble de shaders de sommet et de fragment sont appelés un <strong>programme shader</strong>.</p> @@ -196,8 +196,8 @@ function loadShader(gl, type, source) { <p>Une fois que les shaders sont définis, que les emplacements sont retrouvés, et que les positions des sommets du carré 2D sont stockées dans le tampon, nous pouvons faire effectivement le rendu de la scène. Puisque nous n'animons rien dans cet exemple, notre fonction <code>drawScene()</code> est très simple. Elle utilise quelques routines utilitaires que nous décrirons sous peu.</p> -<div class="blockIndicator note"> -<p>Vous pourriez obtenir une erreur JavaScript indiquant <em>"mat4 n'est pas défini"</em>. Cela signifie qu'il existe une dépendance à <strong>glmatrix</strong>. Vous pouvez inclure <a href="https://mdn.github.io/webgl-examples/tutorial/gl-matrix.js">gl-matrix.js</a> pour résoudre ce problème, comme suggéré <a href="https://github.com/mdn/webgl-examples/issues/20">ici</a>.</p> +<div class="note"> +<p><strong>Note :</strong> Vous pourriez obtenir une erreur JavaScript indiquant <em>"mat4 n'est pas défini"</em>. Cela signifie qu'il existe une dépendance à <strong>glmatrix</strong>. Vous pouvez inclure <a href="https://mdn.github.io/webgl-examples/tutorial/gl-matrix.js">gl-matrix.js</a> pour résoudre ce problème, comme suggéré <a href="https://github.com/mdn/webgl-examples/issues/20">ici</a>.</p> </div> <pre><code>function drawScene(gl, programInfo, buffers) { diff --git a/files/fr/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html index dcf9a4285f..df7fcb4658 100644 --- a/files/fr/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html +++ b/files/fr/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html @@ -139,7 +139,7 @@ function configurerVideo(url) { <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/fr/Using_HTML5_audio_and_video" title="En/Using audio and video in Firefox">Utilisation de l'audio et de la video dans Firefox</a></li> + <li><a href="/fr/Using_HTML5_audio_and_video">Utilisation de l'audio et de la video dans Firefox</a></li> </ul> <p>{{Previous("Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}</p> diff --git a/files/fr/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html index 20d4223182..10adde485e 100644 --- a/files/fr/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html +++ b/files/fr/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html @@ -7,23 +7,22 @@ tags: translation_of: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL original_slug: Web/API/WebGL_API/Tutorial/Commencer_avec_WebGL --- -<p>{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL")}}<a class="external" href="http://www.khronos.org/webgl/" rel="external" title="http://www.khronos.org/webgl/">WebGL</a> permet à un contenu web d'utiliser l'API basée sur <a class="external" href="http://www.khronos.org/opengles/" rel="external">OpenGL ES</a> 2.0 pour effectuer un rendu 2D et 3D dans un <a class="internal" href="/fr/HTML/Canvas" title="fr/HTML/Canvas">canvas</a> dans les navigateurs qui le supportent, sans utilisation d'un module complémentaire. Les programmes WebGL sont constitués de code de contrôle écrit en JavaScript, et le code d'ombrage (GLSL) est exécuté dans l'Unité de Traitement Graphique (GPU) de l'ordinateur. Les éléments WebGL peuvent être mélangés avec d'autres éléments HTML, et composés d'autres parties de la page ou de l'arrière-plan de la page.</p> +<p>{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL")}}<a href="http://www.khronos.org/webgl/">WebGL</a> permet à un contenu web d'utiliser l'API basée sur <a href="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 pour effectuer un rendu 2D et 3D dans un <a href="/fr/HTML/Canvas">canvas</a> dans les navigateurs qui le supportent, sans utilisation d'un module complémentaire. Les programmes WebGL sont constitués de code de contrôle écrit en JavaScript, et le code d'ombrage (GLSL) est exécuté dans l'Unité de Traitement Graphique (GPU) de l'ordinateur. Les éléments WebGL peuvent être mélangés avec d'autres éléments HTML, et composés d'autres parties de la page ou de l'arrière-plan de la page.</p> <p>Cet article va vous donner une introduction aux bases de l'utilisation de WebGL. Il est supposé que vous avez déjà une compréhension des mathématiques impliquées dans les graphismes 3D, et cet article ne prétend pas vous enseigner les concepts des graphismes 3D par eux-mêmes.</p> <p>Les exemples de code de ce tutoriel peuvent aussi être trouvés dans le <a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial">webgl-examples GitHub repository</a>.</p> -<h2 class="editable" id="Préparation_au_rendu_3D"><span>Préparation au rendu 3D</span></h2> +<h2 id="Préparation_au_rendu_3D">Préparation au rendu 3D</h2> <p>La première chose dont vous avez besoin pour utiliser WebGL pour faire un rendu est un canvas. Le fragment d'HTML ci-dessous déclare un canvas dans lequel notre exemple se dessinera.</p> -<pre class="brush: html"><span class="plain"><code><body> +<pre class="brush: html"><code><body> <canvas id="glCanvas" width="640" height="480"></canvas> -</body></code></span> +</body></code> </pre> -<div id="section_2"> -<h3 class="editable" id="Préparation_du_contexte_WebGL"><span>Préparation du contexte WebGL</span></h3> +<h3 id="Préparation_du_contexte_WebGL">Préparation du contexte WebGL</h3> <p>La fonction <code>main()</code> dans notre code JavaScript est appelée quand notre script est chargé. Son but est de créer le contexte WebGL et de commencer à rendre du contenu.</p> @@ -52,7 +51,7 @@ function main() { <p>La première chose que nous faisons ici est d'obtenir une référence au canvas, en l'affectant à une variable dénommée <code>canvas</code>.</p> -<p>Une fois que nous avons le canvas, nous essayons de lui obtenir un <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/WebGLRenderingContext">WebGLRenderingContext</a>, en appelant <a href="https://developer.mozilla.org/fr-FR/docs/Web/API/HTMLCanvasElement/getContext">getContext</a> et en lui passant la chaîne <code>"webgl"</code>. Si le navigateur ne supporte pas WebGL, <code>getContext</code> retournera <code>null</code>, auquel cas nous afficherons un message pour l'utilisateur, et nous sortirons.</p> +<p>Une fois que nous avons le canvas, nous essayons de lui obtenir un <a href="/fr-FR/docs/Web/API/WebGLRenderingContext">WebGLRenderingContext</a>, en appelant <a href="/fr-FR/docs/Web/API/HTMLCanvasElement/getContext">getContext</a> et en lui passant la chaîne <code>"webgl"</code>. Si le navigateur ne supporte pas WebGL, <code>getContext</code> retournera <code>null</code>, auquel cas nous afficherons un message pour l'utilisateur, et nous sortirons.</p> <p>Si le contexte est initialisé avec succès, la variable <code>gl</code> sera notre référence à celui-ci. Dans ce cas, nous définissons la couleur d'effacement comme étant le noir, et nous effaçons le contexte avec cette couleur (redessin du canvas avec la couleur d'arrière-plan).</p> @@ -70,5 +69,4 @@ function main() { <li><a href="http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Table-of-Contents.html">An intro to modern OpenGL :</a> une série de bons articles sur OpenGL écrits par Joe Groff, fournissant une introduction claire à OpenGL, depuis son histoire jusqu'au concept important de pipeline de graphismes, qui comprend aussi quelques exemples montrant comment OpenGL fonctionne. Si vous n'avez aucune idée de ce qu'est OpenGL, c'est un bon endroit pour commencer.</li> </ul> -<p>{{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}</p> -</div> +<p>{{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}</p>
\ No newline at end of file diff --git a/files/fr/web/api/webgl_api/tutorial/index.html b/files/fr/web/api/webgl_api/tutorial/index.html index 28c6e1c8b3..671b448a9d 100644 --- a/files/fr/web/api/webgl_api/tutorial/index.html +++ b/files/fr/web/api/webgl_api/tutorial/index.html @@ -10,15 +10,13 @@ translation_of: Web/API/WebGL_API/Tutorial --- <div>{{WebGLSidebar}}</div> -<div class="summary"> -<p><a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a> permet au contenu web d'utiliser une API basée sur <a class="external" href="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 pour effectuer des rendus 3D dans un {{HTMLElement("canvas")}} HTML dans les navigateurs qui le supportent, sans avoir recours à des modules complémentaires. Les programmes WebGL sont constitués de code de contrôle rédigé en JavaScript, et de code d'effets spéciaux (code shader) qui est exécuté sur l'Unité de Traitement Graphique (GPU) d'un ordinateur. Les éléments WebGL peuvent être mélangés avec d'autres éléments HTML et composés avec d'autres parties de la page ou du fond de la page.</p> -</div> +<p><a href="http://www.khronos.org/webgl/">WebGL</a> permet au contenu web d'utiliser une API basée sur <a href="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0 pour effectuer des rendus 3D dans un {{HTMLElement("canvas")}} HTML dans les navigateurs qui le supportent, sans avoir recours à des modules complémentaires. Les programmes WebGL sont constitués de code de contrôle rédigé en JavaScript, et de code d'effets spéciaux (code shader) qui est exécuté sur l'Unité de Traitement Graphique (GPU) d'un ordinateur. Les éléments WebGL peuvent être mélangés avec d'autres éléments HTML et composés avec d'autres parties de la page ou du fond de la page.</p> -<p><span class="seoSummary">Ce tutoriel décrit comment utiliser l'élément <code><canvas></code> pour dessiner des graphiques WebGL, en commençant par les bases. Les exemples suivants devraient vous donner des idées de ce que vous pouvez faire avec WebGL et vont vous fournir des fragments de code qui pourraient vous aider à construire votre propre contenu.</span></p> +<p>Ce tutoriel décrit comment utiliser l'élément <code><canvas></code> pour dessiner des graphiques WebGL, en commençant par les bases. Les exemples suivants devraient vous donner des idées de ce que vous pouvez faire avec WebGL et vont vous fournir des fragments de code qui pourraient vous aider à construire votre propre contenu.</p> <h2 id="Avant_que_vous_ne_commenciez">Avant que vous ne commenciez</h2> -<p>L'utilisation de l'élément <code><canvas></code> n'est pas très difficile, mais vous avez besoin d'une compréhension de base de l'<a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> et du <a href="/en-US/docs/Web/JavaScript" title="JavaScript">JavaScript</a>. L'élément <code><canvas></code> et WebGL ne sont pas supportés par certains anciens navigateurs, mais ils sont supportés dans les versions récentes de tous les principaux navigateurs. Pour dessiner des graphiques sur le canevas, on utilise un objet de contexte Javascript, qui crée des graphiques à la volée.</p> +<p>L'utilisation de l'élément <code><canvas></code> n'est pas très difficile, mais vous avez besoin d'une compréhension de base de l'<a href="/en-US/docs/Web/HTML">HTML</a> et du <a href="/en-US/docs/Web/JavaScript">JavaScript</a>. L'élément <code><canvas></code> et WebGL ne sont pas supportés par certains anciens navigateurs, mais ils sont supportés dans les versions récentes de tous les principaux navigateurs. Pour dessiner des graphiques sur le canevas, on utilise un objet de contexte Javascript, qui crée des graphiques à la volée.</p> <h2 id="Dans_ce_tutoriel">Dans ce tutoriel</h2> diff --git a/files/fr/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html index 37d48469cd..0bd4a47c5d 100644 --- a/files/fr/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html +++ b/files/fr/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html @@ -9,7 +9,7 @@ original_slug: Web/API/WebGL_API/Tutorial/Ajouter_des_couleurs_avec_les_shaders --- <p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}}</p> -<p>Dans la <a href="/fr/docs/WebGL/Ajouter_du_contenu_à_WebGL" title="/fr/docs/WebGL/Ajouter_du_contenu_à_WebGL">démonstration précédente</a>, nous avons créé un carré 2D, la prochaine étape évidente consiste à lui appliquer de la couleur. Nous allons faire cela en révisant les nuanceurs.</p> +<p>Dans la <a href="/fr/docs/WebGL/Ajouter_du_contenu_à_WebGL">démonstration précédente</a>, nous avons créé un carré 2D, la prochaine étape évidente consiste à lui appliquer de la couleur. Nous allons faire cela en révisant les nuanceurs.</p> <h2 id="Application_de_couleur_aux_sommets">Application de couleur aux sommets</h2> diff --git a/files/fr/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html b/files/fr/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html index c28419742e..002be155c6 100644 --- a/files/fr/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html +++ b/files/fr/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html @@ -15,7 +15,9 @@ original_slug: Web/API/WebGL_API/Tutorial/Utiliser_les_textures_avec_WebGL <p>La première chose à faire est d'ajouter le code pour charger les textures. Dans notre cas, nous utiliserons une texture unique, appliquée à chacune des six faces de notre cube en rotation ; mais la même technique peut être utilisée un nombre quelconque de textures.</p> -<div class="note"><strong>Note :</strong> il est important de noter que le chargement des textures suit les <a href="/fr-FR/docs/Web/HTTP/CORS" title="en/HTTP access control">règles inter-domaines</a> ; donc vous pouvez seulement charger des textures depuis les sites pour lesquels votre contenu a l'approbation CORS. Voir les textures inter-domaines ci-dessous pour plus de détails.</div> +<div class="note"> + <p><strong>Note :</strong> il est important de noter que le chargement des textures suit les <a href="/fr-FR/docs/Web/HTTP/CORS">règles inter-domaines</a> ; donc vous pouvez seulement charger des textures depuis les sites pour lesquels votre contenu a l'approbation CORS. Voir les textures inter-domaines ci-dessous pour plus de détails.</p> +</div> <p>Le code qui charge la texture ressemble à ce qui suit : </p> @@ -258,7 +260,7 @@ function drawScene(gl, programInfo, buffers, texture, deltaTime) {</code></pre> <h2 id="Textures_inter-domaines">Textures inter-domaines</h2> -<p>Le chargement des textures WebGL est soumis aux contrôles d'accès inter-domaines. Pour que votre contenu puisse charger une texture d'un autre domaine, une approbation CORS doit être obtenue. Voir le <a href="https://developer.mozilla.org/fr/docs/HTTP/Access_control_CORS">Contrôle d'accès HTTP</a> pour plus de détails sur CORS.</p> +<p>Le chargement des textures WebGL est soumis aux contrôles d'accès inter-domaines. Pour que votre contenu puisse charger une texture d'un autre domaine, une approbation CORS doit être obtenue. Voir le <a href="/fr/docs/HTTP/Access_control_CORS">Contrôle d'accès HTTP</a> pour plus de détails sur CORS.</p> <p>Voir cet <a href="http://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/">article sur hacks.mozilla.org</a> pour une explication de l'utilisation des images approuvées CORS comme textures WebGL, avec <a href="http://people.mozilla.org/~bjacob/webgltexture-cors-js.html">un exemple complet</a>.</p> |