Revision 831289 of WebGL

<p>WebGL est une spécification d'affichage 3D pour les navigateurs web, créée par le Khronos Group. Elle permet d'utiliser le standard OpenGL ES 2.0 au moyen de l'élement <a href="/fr/docs/HTML/Canvas" title="/fr/docs/HTML/Canvas">canvas </a>du HTML5</p>

<p>WebGL est supporté sur les navigateurs suivants <a href="/en-US/docs/Firefox_4_for_developers" title="en-US/docs/Firefox 4 for developers">Firefox 4</a>+, <a class="external" href="https://www.google.com/chrome/" title="https://www.google.com/chrome/">Google Chrome</a> 9+, <a href="https://www.opera.com/" title="https://www.opera.com/">Opera </a>12+ and <a href="https://www.apple.com/fr/safari/" title="https://www.apple.com/fr/safari/">Safari </a>5.1+.</p>

<div class="cleared row topicpage-table">
<div class="section">
<h2 class="Documentation" id="Articles_pour_développeur">Articles pour développeur</h2>

<p><a href="/fr/docs/WebGL/Commencer_avec_WebGL" title="en-US/docs/WebGL/Getting started with WebGL">Commencer avec WebGL</a></p>

<p>Mettre en place un contexte WebGL</p>

<p><a href="/fr/docs/WebGL/Ajouter_du_contenu_à_WebGL" title="en-US/docs/WebGL/Adding 2D content to a WebGL context">Ajouter du contenu à WebGL</a></p>

<p>Apprendre à aficher des formes simples en utilisant le WebGL.</p>

<p><a href="/fr/docs/WebGL/Ajouter_des_couleurs_avec_les_shaders" title="en-US/docs/WebGL/Using shaders to apply color in WebGL">Ajouter des couleurs avec les shaders</a></p>

<p>Utiliser les shaders pour ajouter de la couleur à nos formes.</p>

<div class="note">
<p><em>Les articles suivant ne sont pas disponible en français</em>.</p>
</div>

<p><a href="/en-US/docs/WebGL/Animating_objects_with_WebGL" title="en-US/docs/WebGL/Animating objects with WebGL">Animer des objets avec WebGL</a></p>

<p>Montre comment faire tourner et bouger des objets pour créer des animations simples.</p>

<p><a href="/en-US/docs/WebGL/Creating_3D_objects_using_WebGL" title="en-US/docs/WebGL/Creating 3D objects using WebGL">Créer des objets 3D avec WebGL</a></p>

<p>Montre comment créer et animer un objet 3D (ici un cube).</p>

<p><a href="/en-US/docs/WebGL/Using_textures_in_WebGL" title="en-US/docs/WebGL/Using textures in WebGL">Utiliser des textures dans WebGL</a></p>

<p>Explique comment appliquer une texture sur les faces d'un objet.</p>

<p><a href="/en-US/docs/WebGL/Lighting_in_WebGL" title="en-US/docs/WebGL/Lighting in WebGL">L'éclairage dans WebGL</a></p>

<p>Comment simuler des effets de lumière dans votre contexte WebGL.</p>

<p><a href="/en-US/docs/WebGL/Animating_textures_in_WebGL" title="en-US/docs/WebGL/Animating textures in WebGL">Animer des textures dans WebGL</a></p>

<p>Montre comment animer des textures ; ici en appliqaunt une vidéo Ogg sur les faces d'un cube qui tourne.</p>

<p><a href="/en-US/docs/WebGL/WebGL_best_practices" title="en-US/docs/WebGL/WebGL best practices">Bonnes pratiques WebGL</a></p>

<p>Astuces et suggestions pour améliorer votre contenu WebGL.</p>

<p><a href="/en-US/docs/WebGL/Cross-Domain_Textures" title="en-US/docs/WebGL/Cross-Domain Textures">Textures cross-domain</a></p>

<p>Informations sur le chargement des textures depuis un autre domaine que celui depuis lequel le contenu est chargé.</p>

<p><a href="/en-US/docs/WebGL/Using_Extensions" title="en-US/docs/WebGL/Using_Extensions">Utiliser des extensions</a></p>

<p>Comment utiliser des extensions qui sont disponibles dans WebGL.</p>

<dl>
</dl>
</div>

<div class="section">
<h2 class="Related_Topics" id="Ressources">Ressources</h2>

<dl>
 <dt><a class="link-https" href="https://www.khronos.org/registry/webgl/specs/1.0/" title="https://www.khronos.org/registry/webgl/specs/1.0/">Spécification WebGL</a></dt>
 <dd>La spécification WebGL.</dd>
 <dt><a class="external" href="https://www.khronos.org/webgl/" title="https://www.khronos.org/webgl/">Khronos WebGL site</a></dt>
 <dd>Le site principal du WebGL sur le Khronos Group.</dd>
 <dt><a class="external" href="https://learningwebgl.com/blog/" title="https://learningwebgl.com/blog/">Learning WebGL</a></dt>
 <dd>Un site avec des tutoriels pour apprendre à utiliser le WebGL.</dd>
 <dt><a class="external" href="https://learningwebgl.com/cookbook/index.php/" title="https://learningwebgl.com/cookbook/index.php/">Le livre de cuisine du WebGL</a></dt>
 <dd>Un site avec des astuces et des exemples de codes en WebGL.</dd>
 <dt><a class="external" href="https://planet-webgl.org/" title="https://planet-webgl.org/">Planète WebGL</a></dt>
 <dd>Un agrégateur de contenus pour les personnes souhaitant faire de la veille technologique sur le WebGL.</dd>
 <dt><a class="external" href="https://code.google.com/p/ewgl-matrices/" title="https://code.google.com/p/ewgl-matrices/">ewgl-matrices</a></dt>
 <dd>Une librairie rapide pour le calcul de matrice pour le WebGL</dd>
 <dt><a class="link-https" href="https://github.com/toji/gl-matrix" title="https://github.com/toji/gl-matrix">glMatrix</a></dt>
 <dd>Une librairie JavaScript de matrice et vecteurs pour des applications WebGL de haute performance</dd>
 <dt><a class="external" href="https://code.google.com/p/webgl-mjs/" title="https://code.google.com/p/webgl-mjs/">mjs</a></dt>
 <dd><span>Une librairie de maths sur les vecteurs et les matrices, optimizée pour le WebGL.</span></dd>
 <dt><a class="external" href="https://sylvester.jcoglan.com/" title="https://sylvester.jcoglan.com/">Sylvester</a></dt>
 <dd><span>Une librairie pour manipuler les vecteurs et les matrices, Non optimizée pour le WebGL mais extrêmement robuste.</span></dd>
 <dt><a class="external" href="https://webglplayground.net" title="https://webglplayground.net">WebGL playground</a></dt>
 <dd>Un outil en ligne pour créer et partager des projets WebGL. Pratique pour faire des expériences rapides.</dd>
</dl>
</div>
</div>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p>{{CompatibilityTable()}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Fonctionnalité</th>
   <th>Firefox (Gecko)</th>
   <th>Chrome</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Support basique</td>
   <td>{{CompatGeckoDesktop("2.0")}}</td>
   <td>9</td>
   <td>{{CompatNo()}}</td>
   <td>12</td>
   <td>5.1</td>
  </tr>
  <tr>
   <td>Nom du contexte</td>
   <td><code>experimental-webgl</code></td>
   <td><code>experimental-webgl</code></td>
   <td>n/a</td>
   <td><code>experimental-webgl</code></td>
   <td><code>experimental-webgl</code></td>
  </tr>
  <tr>
   <td><a class="external" href="https://www.khronos.org/registry/gles/extensions/OES/OES_texture_float.txt" title="https://www.khronos.org/registry/gles/extensions/OES/OES_texture_float.txt"><code>OES_texture_float</code></a></td>
   <td>{{CompatGeckoDesktop("6.0")}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
  </tr>
  <tr>
   <td><a class="external" href="https://www.khronos.org/registry/webgl/extensions/OES_standard_derivatives/" title="https://www.khronos.org/registry/webgl/extensions/OES_standard_derivatives/"><code>OES_standard_derivatives</code></a></td>
   <td>{{CompatGeckoDesktop("10.0")}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/WebGL/Using_Extensions#EXT_texture_filter_anisotropic" title="en-US/docs/WebGL/Using_Extensions#EXT_texture_filter_anisotropic"><code>EXT_texture_filter_anisotropic</code></a></td>
   <td>{{CompatGeckoDesktop("13.0")}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/WebGL/Using_Extensions#WEBGL_compressed_texture_s3tc" title="en-US/docs/WebGL/Using_Extensions#WEBGL_compressed_texture_s3tc"><code>WEBGL_compressed_texture_s3tc</code></a></td>
   <td>{{CompatGeckoDesktop("15.0")}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
  </tr>
  <tr>
   <td>Attriuts<code> drawingBufferWidth</code> et <code>drawingBufferHeight</code></td>
   <td>{{CompatGeckoDesktop("9.0")}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Fonctionnalité</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Android</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Support Basique</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
  </tr>
  <tr>
   <td>Nom du contexte</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
  </tr>
  <tr>
   <td><a class="external" href="https://www.khronos.org/registry/gles/extensions/OES/OES_texture_float.txt" title="https://www.khronos.org/registry/gles/extensions/OES/OES_texture_float.txt"><code>OES_texture_float</code></a></td>
   <td>{{CompatGeckoMobile("6.0")}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
  </tr>
  <tr>
   <td><a class="external" href="https://www.khronos.org/registry/webgl/extensions/OES_standard_derivatives/" title="https://www.khronos.org/registry/webgl/extensions/OES_standard_derivatives/"><code>OES_standard_derivatives</code></a></td>
   <td>{{CompatGeckoMobile("10.0")}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/WebGL/Using_Extensions#EXT_texture_filter_anisotropic" title="en-US/docs/WebGL/Using_Extensions#EXT_texture_filter_anisotropic"><code>EXT_texture_filter_anisotropic</code></a></td>
   <td>{{CompatGeckoMobile("13.0")}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/WebGL/Using_Extensions#WEBGL_compressed_texture_s3tc" title="en-US/docs/WebGL/Using_Extensions#WEBGL_compressed_texture_s3tc"><code>WEBGL_compressed_texture_s3tc</code></a></td>
   <td>{{CompatGeckoMobile("15.0")}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
  </tr>
  <tr>
   <td>Attriuts<code> drawingBufferWidth</code> et <code>drawingBufferHeight</code></td>
   <td>{{CompatGeckoMobile("9.0")}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
   <td>{{CompatUnknown()}}</td>
  </tr>
 </tbody>
</table>
</div>

<h3 id="Notes_de_Gecko">Notes de Gecko</h3>

<h4 id="Tester_et_débogger_sur_Gecko">Tester et débogger sur Gecko</h4>

<p>A partir de Gecko 10.0 {{geckoRelease("10.0")}}, il existe deux options qui vous laissent contrôler les possibilités du WebGL :</p>

<dl>
 <dt><code>webgl.min_capability_mode</code></dt>
 <dd>Un booléen qui, quand il est sur <code>true</code>, active le mode minimum de possibilité. Quand ce mode est activé, WebGL est configuré pour seulement supporté le minimum de cas d'utilisation et de possibilité inscrit dans la spécification WebGL. Ceci vous permet de vérifier que votre code WebGL fonctionnera sur n'importe qu'elle appareil ou navigateur. La valeur est à <code>false</code> par défaut.</dd>
 <dt><code>webgl.disable_extensions</code></dt>
 <dd>Un booléen qui, quand il est sur <code>true</code>, désactive toute les extensions WebGL . La valeur est à <code>false</code> par défaut.</dd>
</dl>

<div>{{HTML5ArticleTOC()}}</div>