---
title: WebGL2RenderingContext
slug: Web/API/WebGL2RenderingContext
tags:
  - API
  - Experimental
  - Reference
  - WebGL
  - WebGL2
translation_of: Web/API/WebGL2RenderingContext
---
<div>{{APIRef("WebGL")}} {{SeeCompatTable}}</div>

<p>L'interface <strong>WebGL2RenderingContext</strong> fournit le contexte de rendu OpenGL ES 3.0 pour la surface de dessin d'un élément HTML {{HTMLElement("canvas")}}.</p>

<p>Pour obtenir un objet de cette interface, appelez {{domxref ("HTMLCanvasElement.getContext()", "getContext()")}} sur un élément <code>&lt;canvas&gt;</code>, en fournissant "webgl2" comme argument :</p>

<pre class="brush: js">var canevas = document.getElementById('monCanevas');
var gl = canevas.getContext('webgl2');
</pre>

<div class="note">
<p>WebGL 2 est une extension de WebGL 1. L'interface <code>WebGL2RenderingContext</code> implémente tous les membres de l'interface {{domxref("WebGLRenderingContext")}}. Certaines méthodes du contexte WebGL 1 peuvent accepter des valeurs supplémentaires lorsqu'elles sont utilisées dans un contexte WebGL 2. Vous trouverez cette information sur les pages de référence WebGL 1.</p>
</div>

<p>Le <a href="/fr-FR/docs/Web/API/WebGL_API/Tutorial">didacticiel WebGL</a> contient plus d'informations, d'exemples et de ressources sur la façon de démarrer avec WebGL.</p>

<h2 id="Constantes">Constantes</h2>

<p>Voir la page des <a href="/fr-FR/docs/Web/API/WebGL_API/Constants">constantes WebGL</a>.</p>

<h2 id="Informations_d'état">Informations d'état</h2>

<dl>
 <dt>{{domxref("WebGL2RenderingContext.getIndexedParameter()")}}</dt>
 <dd>Retourne la valeur indexée pour la <code>cible</code> donnée.</dd>
</dl>

<h2 id="Tampons">Tampons</h2>

<dl>
 <dt>{{domxref("WebGL2RenderingContext.bufferData()")}}</dt>
 <dd>Initialise et crée le magasin de données de l'objet tampon.</dd>
 <dt>{{domxref("WebGL2RenderingContext.bufferSubData()")}}</dt>
 <dd>Met à jour un sous-ensemble d'un magasin de données d'un objet tampon.</dd>
 <dt>{{domxref("WebGL2RenderingContext.copyBufferSubData()")}}</dt>
 <dd>Copie une partie des données d'un tampon vers un autre tampon.</dd>
 <dt>{{domxref("WebGL2RenderingContext.getBufferSubData()")}}</dt>
 <dd>Lit les données d'un tampon et les écrit dans un {{jsxref ("ArrayBuffer")}} ou un {{jsxref ("SharedArrayBuffer")}}.</dd>
</dl>

<h2 id="Tampons_d'image">Tampons d'image</h2>

<dl>
 <dt>{{domxref("WebGL2RenderingContext.blitFramebuffer()")}}</dt>
 <dd>Transfère un bloc de pixels du tampon d'image lu vers le tampon d'image de dessin.</dd>
 <dt>{{domxref("WebGL2RenderingContext.framebufferTextureLayer()")}}</dt>
 <dd>Attache une seule couche de texture à un tampon d'image.</dd>
 <dt>{{domxref("WebGL2RenderingContext.invalidateFramebuffer()")}}</dt>
 <dd>Invalide le contenu des éléments joints dans un tampon d'image.</dd>
 <dt>{{domxref("WebGL2RenderingContext.invalidateSubFramebuffer()")}}</dt>
 <dd>Invalide le contenu des éléments joints dans un tampon d'image.</dd>
 <dt>{{domxref("WebGL2RenderingContext.readBuffer()")}}</dt>
 <dd>Sélectionne un tampon de couleur comme source pour les pixels.</dd>
</dl>

<h2 id="Tampons_de_rendu">Tampons de rendu</h2>

<dl>
 <dt>{{domxref("WebGL2RenderingContext.getInternalformatParameter()")}}</dt>
 <dd>Retourne des informations sur le support, dépendant de l'implémentation, des formats internes.</dd>
 <dt>{{domxref("WebGL2RenderingContext.renderbufferStorageMultisample()")}}</dt>
 <dd>Crée et initialise le magasin de données d'un objet tampon de rendu et permet de d'indiquer le nombre d'échantillons à utiliser.</dd>
</dl>

<h2 id="Textures">Textures</h2>

<dl>
 <dt>{{domxref("WebGL2RenderingContext.texStorage2D()")}}</dt>
 <dd>Spécifie tous les niveaux d'un stockage de texture bidimensionnelle.</dd>
 <dt>{{domxref("WebGL2RenderingContext.texStorage3D()")}}</dt>
 <dd>Spécifie tous les niveaux d'une texture tridimensionnelle ou d'une texture de tableau bidimensionnelle.</dd>
 <dt>{{domxref("WebGL2RenderingContext.texImage3D()")}}</dt>
 <dd>Spécifie une image de texture tridimensionnelle.</dd>
 <dt>{{domxref("WebGL2RenderingContext.texSubImage3D()")}}</dt>
 <dd>Spécifie un sous-rectangle de la texture 3D en cours.</dd>
 <dt>{{domxref("WebGL2RenderingContext.copyTexSubImage3D()")}}</dt>
 <dd>Copie des pixels du tampon WebGLFrame en cours dans une sous-image de texture 3D existante.</dd>
 <dt>{{domxref("WebGL2RenderingContext.compressedTexImage3D()")}}</dt>
 <dd>Spécifie une image de texture tridimensionnelle dans un format compressé.</dd>
 <dt>{{domxref("WebGL2RenderingContext.compressedTexSubImage3D()")}}</dt>
 <dd>Spécifie un sous-rectangle tridimensionnel pour une image de texture dans un format compressé.</dd>
</dl>

<h2 id="Programmes_et_shaders">Programmes et shaders</h2>

<dl>
 <dt>{{domxref("WebGL2RenderingContext.getFragDataLocation()")}}</dt>
 <dd>Retourne la liaison des numéros de couleur aux variables de sortie varying définies par l'utilisateur.</dd>
</dl>

<h2 id="Uniforms_et_attributs">Uniforms et attributs</h2>

<dl>
 <dt>{{domxref("WebGL2RenderingContext.uniform()", "WebGL2RenderingContext.uniform[1234][uif][v]()")}}</dt>
 <dd>Méthodes spécifiant les valeurs des variables uniform.</dd>
 <dt>{{domxref("WebGL2RenderingContext.uniformMatrix()", "WebGL2RenderingContext.uniformMatrix[234]x[234]fv()")}}</dt>
 <dd>Méthodes spécifiant les valeurs matricielles pour les variables uniform.</dd>
 <dt>{{domxref("WebGL2RenderingContext.vertexAttribI()", "WebGL2RenderingContext.vertexAttribI4[u]i[v]()")}}</dt>
 <dd>Méthodes spécifiant les valeurs entières des attributs de sommet génériques.</dd>
 <dt>{{domxref("WebGL2RenderingContext.vertexAttribIPointer()")}}</dt>
 <dd>Spécifie les formats et les emplacements des données entières des attributs de sommet dans un tableau d'attributs de sommet.</dd>
</dl>

<h2 id="Tampons_de_dessin">Tampons de dessin</h2>

<dl>
 <dt>{{domxref("WebGL2RenderingContext.vertexAttribDivisor()")}}</dt>
 <dd>Modifie la vitesse à laquelle les attributs de sommet génériques progressent lors du rendu de plusieurs instances de primitives avec {{domxref ("WebGL2RenderingContext.drawArraysInstanced()", "gl.drawArraysInstanced()")}} et {{domxref("WebGL2RenderingContext.drawElementsInstanced()" , "gl.drawElementsInstanced()")}}.</dd>
 <dt>{{domxref("WebGL2RenderingContext.drawArraysInstanced()")}}</dt>
 <dd>Affiche des primitives à partir des données d'un tableau. En outre, elle peut exécuter plusieurs instances de la plage d'éléments.</dd>
 <dt>{{domxref("WebGL2RenderingContext.drawElementsInstanced()")}}</dt>
 <dd>Affiche des primitives à partir des données d'un tableau. En outre, elle peut exécuter plusieurs instances d'un ensemble d'éléments.</dd>
 <dt>{{domxref("WebGL2RenderingContext.drawRangeElements()")}}</dt>
 <dd>Affiche des primitives à partir des données d'un tableau dans la plage donnée.</dd>
 <dt>{{domxref("WebGL2RenderingContext.drawBuffers()")}}</dt>
 <dd>Spécifie une liste de tampons de couleur dans lesquels dessiner.</dd>
 <dt>{{domxref("WebGL2RenderingContext.clearBuffer()", "WebGL2RenderingContext.clearBuffer[fiuv]()")}}</dt>
 <dd>Efface les tampons du tampon d'image actuellement lié.</dd>
</dl>

<h2 id="Objets_requêtes">Objets requêtes</h2>

<p>Méthodes pour travailler avec les objets {{domxref("WebGLQuery")}}.</p>

<dl>
 <dt>{{domxref("WebGL2RenderingContext.createQuery()")}}</dt>
 <dd>Crée un nouvel objet {{domxref("WebGLQuery")}}.</dd>
 <dt>{{domxref("WebGL2RenderingContext.deleteQuery()")}}</dt>
 <dd>Supprime l'objet {{domxref("WebGLQuery")}} donné.</dd>
 <dt>{{domxref("WebGL2RenderingContext.isQuery()")}}</dt>
 <dd>Retourne <code>true</code> si l'objet donné est un objet {{domxref("WebGLQuery")}} valide.</dd>
 <dt>{{domxref("WebGL2RenderingContext.beginQuery()")}}</dt>
 <dd>Commence une requête asynchrone.</dd>
 <dt>{{domxref("WebGL2RenderingContext.endQuery()")}}</dt>
 <dd>Marque la fin d'une requête asynchrone.</dd>
 <dt>{{domxref("WebGL2RenderingContext.getQuery()")}}</dt>
 <dd>Retourne un objet {{domxref("WebGLQuery")}} pour la cible donnée.</dd>
 <dt>{{domxref("WebGL2RenderingContext.getQueryParameter()")}}</dt>
 <dd>Retourne des informations sur une requête.</dd>
</dl>

<h2 id="Objets_échantilloneurs">Objets échantilloneurs</h2>

<dl>
 <dt>{{domxref("WebGL2RenderingContext.createSampler()")}}</dt>
 <dd>Crée un nouvel objet {{domxref("WebGLSampler")}}.</dd>
 <dt>{{domxref("WebGL2RenderingContext.deleteSampler()")}}</dt>
 <dd>Supprime l'objet {{domxref("WebGLSampler")}} donné.</dd>
 <dt>{{domxref("WebGL2RenderingContext.bindSampler()")}}</dt>
 <dd>Lie le {{domxref("WebGLSampler")}} donné à une unité de texture.</dd>
 <dt>{{domxref("WebGL2RenderingContext.isSampler()")}}</dt>
 <dd>Retourne <code>true</code> si l'objet donné est un objet {{domxref("WebGLSampler")}} valide.</dd>
 <dt>{{domxref("WebGL2RenderingContext.samplerParameter()", "WebGL2RenderingContext.samplerParameter[if]()")}}</dt>
 <dd>Définit les paramètres de l'échantillonneur.</dd>
 <dt>{{domxref("WebGL2RenderingContext.getSamplerParameter()")}}</dt>
 <dd>Retourne les informations de paramètres de l'échantillonneur.</dd>
</dl>

<h2 id="Objets_sync">Objets sync</h2>

<dl>
 <dt>{{domxref("WebGL2RenderingContext.fenceSync()")}}</dt>
 <dd>Crée un nouvel objet {{domxref("WebGLSync")}} et l'insère dans le flux de commandes GL.</dd>
 <dt>{{domxref("WebGL2RenderingContext.isSync()")}}</dt>
 <dd>Retourne <code>true</code> si l'objet transmis est un objet {{domxref("WebGLSync")}} valide.</dd>
 <dt>{{domxref("WebGL2RenderingContext.deleteSync()")}}</dt>
 <dd>Supprime l'objet {{domxref("WebGLSync")}} donné.</dd>
 <dt>{{domxref("WebGL2RenderingContext.clientWaitSync()")}}</dt>
 <dd>
 <p>Bloque et attend qu'un objet {{domxref ("WebGLSync")}} reçoive un signal ou que l'expiration du délai donné soit reçue.</p>
 </dd>
 <dt>{{domxref("WebGL2RenderingContext.waitSync()")}}</dt>
 <dd>Retourne immédiatement, mais attend le serveur GL jusqu'à ce que l'objet {{domxref("WebGLSync")}} donné reçoive un signal.</dd>
 <dt>{{domxref("WebGL2RenderingContext.getSyncParameter()")}}</dt>
 <dd>Retourne les informations de paramètres d'un objet {{domxref("WebGLSync")}}.</dd>
</dl>

<h2 id="Retour_de_transformations">Retour de transformations</h2>

<dl>
 <dt>{{domxref("WebGL2RenderingContext.createTransformFeedback()")}}</dt>
 <dd>Crée et initialise les objets {{domxref("WebGLTransformFeedback")}}.</dd>
 <dt>{{domxref("WebGL2RenderingContext.deleteTransformFeedback()")}}</dt>
 <dd>Supprime l'objet {{domxref ("WebGLTransformFeedback")}} donné.</dd>
 <dt>{{domxref("WebGL2RenderingContext.isTransformFeedback()")}}</dt>
 <dd>Retourne <code>true</code> si l'objet transmis est un objet {{domxref("WebGLTransformFeedback")}} valide.</dd>
 <dt>{{domxref("WebGL2RenderingContext.bindTransformFeedback()")}}</dt>
 <dd>Lie l'objet {{domxref("WebGLTransformFeedback")}} transmis à l'état GL en cours.</dd>
 <dt>{{domxref("WebGL2RenderingContext.beginTransformFeedback()")}}</dt>
 <dd>Démarre une opération de retour de transformations.</dd>
 <dt>{{domxref("WebGL2RenderingContext.endTransformFeedback()")}}</dt>
 <dd>Termine une opération de retour de transformations.</dd>
 <dt>{{domxref("WebGL2RenderingContext.transformFeedbackVaryings()")}}</dt>
 <dd>Indique les valeurs à enregistrer dans les tampons {{domxref("WebGLTransformFeedback")}}.</dd>
 <dt>{{domxref("WebGL2RenderingContext.getTransformFeedbackVarying()")}}</dt>
 <dd>Retourne des informations sur les variables varying à partir des tampons {{domxref("WebGLTransformFeedback")}}.</dd>
 <dt>{{domxref("WebGL2RenderingContext.pauseTransformFeedback()")}}</dt>
 <dd>Suspend une opération de retour de transformations.</dd>
 <dt>{{domxref("WebGL2RenderingContext.resumeTransformFeedback()")}}</dt>
 <dd>Reprend une opération de retour de transformations.</dd>
</dl>

<h2 id="Objets_tampons_uniforms">Objets tampons uniforms</h2>

<dl>
 <dt>{{domxref("WebGL2RenderingContext.bindBufferBase()")}}</dt>
 <dd>Lie le {{domxref("WebGLBuffer")}} donné au point de liaison donné (<code>cible</code>) à l'<code>indice</code> donné.</dd>
 <dt>{{domxref("WebGL2RenderingContext.bindBufferRange()")}}</dt>
 <dd>Lie une plage du {{domxref("WebGLBuffer")}} donné au point de liaison donné (<code>cible</code>) à l'<code>indice</code> donné.</dd>
 <dt>{{domxref("WebGL2RenderingContext.getUniformIndices()")}}</dt>
 <dd>
 <p>Récupère les indices d'un certain nombre d'uniforms dans un {{domxref("WebGLProgram")}}.</p>
 </dd>
 <dt>{{domxref("WebGL2RenderingContext.getActiveUniforms()")}}</dt>
 <dd>Récupère des informations sur les uniforms actifs dans un {{domxref("WebGLProgram")}}.</dd>
 <dt>{{domxref("WebGL2RenderingContext.getUniformBlockIndex()")}}</dt>
 <dd>Récupère l'indice d'un bloc uniform dans un {{domxref("WebGLProgram")}}.</dd>
 <dt>{{domxref("WebGL2RenderingContext.getActiveUniformBlockParameter()")}}</dt>
 <dd>Récupère des informations d'un bloc uniform actif dans un {{domxref("WebGLProgram")}}.</dd>
 <dt>{{domxref("WebGL2RenderingContext.getActiveUniformBlockName()")}}</dt>
 <dd>Récupère le nom du bloc uniform actif à l'indice donné dans un {{domxref("WebGLProgram")}}.</dd>
 <dt>{{domxref("WebGL2RenderingContext.uniformBlockBinding()")}}</dt>
 <dd>Affecte des points de liaison aux blocs uniforms actifs.</dd>
</dl>

<h2 id="Objets_de_tableaux_de_sommets">Objets de tableaux de sommets</h2>

<p>Méthodes pour travailler avec les objets {{domxref("WebGLVertexArrayObject")}} (VAO).</p>

<dl>
 <dt>{{domxref("WebGL2RenderingContext.createVertexArray()")}}</dt>
 <dd>Crée un nouveau {{domxref("WebGLVertexArrayObject")}}.</dd>
 <dt>{{domxref("WebGL2RenderingContext.deleteVertexArray()")}}</dt>
 <dd>Supprime le {{domxref("WebGLVertexArrayObject")}} donné.</dd>
 <dt>{{domxref("WebGL2RenderingContext.isVertexArray()")}}</dt>
 <dd>Retourne <code>true</code> si l'objet donné est un {{domxref ("WebGLVertexArrayObject")}} valide.</dd>
 <dt>{{domxref("WebGL2RenderingContext.bindVertexArray()")}}</dt>
 <dd>Lie le {{domxref ("WebGLVertexArrayObject")}} donné au tampon.</dd>
</dl>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">Statut</th>
   <th scope="col">Commentaire</th>
  </tr>
  <tr>
   <td>{{SpecName('WebGL2', "#3.7", "WebGL2RenderingContext")}}</td>
   <td>{{Spec2('WebGL2')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

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

<p class="hidden">Le tableau de compatibilité de cette page est généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une pull request.</p>

<p>{{Compat("api.WebGL2RenderingContext")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>{{domxref("HTMLCanvasElement")}}</li>
 <li>{{domxref("WebGLRenderingContext")}}</li>
</ul>