Revision 328245 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.C3.A9veloppeur">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">Animating objects with WebGL</a></p>
    <p>Shows how to rotate and translate objects to create simple animations.</p>
    <p><a href="/en-US/docs/WebGL/Creating_3D_objects_using_WebGL" title="en-US/docs/WebGL/Creating 3D objects using WebGL">Creating 3D objects using WebGL</a></p>
    <p>Shows how to create and animate a 3D object (in this case, a cube).</p>
    <p><a href="/en-US/docs/WebGL/Using_textures_in_WebGL" title="en-US/docs/WebGL/Using textures in WebGL">Using textures in WebGL</a></p>
    <p>Demonstrates how to map textures onto the faces of an object.</p>
    <p><a href="/en-US/docs/WebGL/Lighting_in_WebGL" title="en-US/docs/WebGL/Lighting in WebGL">Lighting in WebGL</a></p>
    <p>How to simulate lighting effects in your WebGL context.</p>
    <p><a href="/en-US/docs/WebGL/Animating_textures_in_WebGL" title="en-US/docs/WebGL/Animating textures in WebGL">Animating textures in WebGL</a></p>
    <p>Shows how to animate textures; in this case, by mapping an Ogg video onto the faces of a rotating cube.</p>
    <p><a href="/en-US/docs/WebGL/WebGL_best_practices" title="en-US/docs/WebGL/WebGL best practices">WebGL best practices</a></p>
    <p>Tips and suggestions to improve your WebGL content.</p>
    <p><a href="/en-US/docs/WebGL/Cross-Domain_Textures" title="en-US/docs/WebGL/Cross-Domain Textures">Cross-domain textures</a></p>
    <p>Information about loading textures from domains other than the one from which your content was loaded.</p>
    <p><a href="/en-US/docs/WebGL/Using_Extensions" title="en-US/docs/WebGL/Using_Extensions">Using extensions</a></p>
    <p>How to use extensions that are available in 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.C3.A9_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{CompatibilityTable()}}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Firefox (Gecko)</th>
        <th>Chrome</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatGeckoDesktop("2.0")}}</td>
        <td>9</td>
        <td>{{CompatNo()}}</td>
        <td>12</td>
        <td>5.1</td>
      </tr>
      <tr>
        <td>Context name</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><code>drawingBufferWidth</code> and <code>drawingBufferHeight</code> attributes</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>Feature</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>Android</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatUnknown()}}</td>
        <td>{{CompatUnknown()}}</td>
        <td>{{CompatUnknown()}}</td>
        <td>{{CompatUnknown()}}</td>
        <td>{{CompatUnknown()}}</td>
      </tr>
      <tr>
        <td>Context name</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><code>drawingBufferWidth</code> and <code>drawingBufferHeight</code> attributes</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.C3.A9bogger_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>