WebGLRenderingContext
=====================

L'interface **`WebGLRenderingContext`** fournit une interface pour le contexte de rendu graphique OpenGL ES 2.0 de la surface de dessin fournie par un élément HTML `<canvas>`.

Pour obtenir un accès à un contexte WebGL pour le rendu graphique 2D et/ou 3D, on appellera `getContext()` sur un élément `<canvas>` en fournissant la chaîne de caractères `webgl` :


```js
let canvas = document.getElementById("myCanvas");
let gl = canvas.getContext("webgl");
```


Une fois le contexte de rendu WebGL obtenu pour le canevas, on peut l'utiliser pour le rendu graphique d'objets à l'intérieur de ce canevas. Le tutoriel WebGL contient de plus amples informations, exemples et ressources pour débuter avec WebGL.

Si vous avez besoin d'un contexte WebGL 2.0, voyez `WebGL2RenderingContext` qui permet d'utiliser une implémentation avec des graphismes OpenGL ES 3.0.

Constantes
----------

Voir la page sur les constantes WebGL (en-US).

Le contexte WebGL
-----------------

Les propriétés et méthodes suivantes fournissent des informations et fonctionnalités générales pour manipuler le contexte WebGL :

`WebGLRenderingContext.canvas`

Une référence en lecture seule vers l'objet `HTMLCanvasElement` correspondant. Peut valoir `null` si le contexte n'est pas associé à un élément `<canvas>`.

`WebGLRenderingContext.commit()` 
Expérimental

Pousse les *frames* sur l'élément `HTMLCanvasElement`, si le contexte n'est pas directement rattaché à un canevas donné.

`WebGLRenderingContext.drawingBufferWidth` (en-US)

La largeur, en lecture seule, du tampon de dessin courant. Celle-ci devrait correspondre à la largeur de l'élément canevas associé à ce contexte.

`WebGLRenderingContext.drawingBufferHeight` (en-US)

La hauteur, en lecture seule, du tampon de dessin courant. Celle-ci devrait correspondre à la hauteur de l'élément canevas associé à ce contexte.

`WebGLRenderingContext.getContextAttributes()` (en-US)

Renvoie un objet `WebGLContextAttributes` qui contient les paramètres de contextes réels. Peut renvoyer `null` si le contexte est perdu.

`WebGLRenderingContext.isContextLost()` (en-US)

Renvoie `true` si le contexte est perdu et `false` sinon.

`WebGLRenderingContext.makeXRCompatible()` (en-US)

S'assure que le contexte est compatible avec le matériel de réalité mixte, recréant si besoin le contexte avec une nouvelle configuration. Cette méthode peut être utilisée pour démarrer une application dont l'affichage commence en 2D puis passe ensuite dans un mode de réalité virtuelle ou augmentée.

Vue et rognage
--------------

`WebGLRenderingContext.scissor()` (en-US)

Définit la boîte de découpe (*scissor box*).

`WebGLRenderingContext.viewport()`

Définit la zone d'affichage (*viewport*).

Informations sur l'état
-----------------------

`WebGLRenderingContext.activeTexture()`

Sélectionne l'unité de texture active.

`WebGLRenderingContext.blendColor()` (en-US)

Définit la source et la destination des facteurs de fusion.

`WebGLRenderingContext.blendEquation()` (en-US)

Définit l'équation de fusion RGB et l'équation de fusion alpha avec une seule équation.

`WebGLRenderingContext.blendEquationSeparate()` (en-US)

Définit l'équation de fusion RGB et l'équation de fusion alpha séparément.

`WebGLRenderingContext.blendFunc()` (en-US)

Definit la fonction utilisée pour l'arithmétique de la fusion des pixels.

`WebGLRenderingContext.blendFuncSeparate()` (en-US)

Definit séparément la fonction utilisée pour l'arithmétique de la fusion des pixels pour les composantes RGB d'une part et alpha d'autre part.

`WebGLRenderingContext.clearColor()` (en-US)

Définit les valeurs de couleur utilisées lors du nettoyage des tampons de couleur.

`WebGLRenderingContext.clearDepth()` (en-US)

Définit la valeur de profondeur utilisée lors du nettoyage du tampon de profondeur.

`WebGLRenderingContext.clearStencil()` (en-US)

Définit la valeur du pochoir utilisée lors du nettoyage du tampon de pochoir.

`WebGLRenderingContext.colorMask()` (en-US)

Définit les composantes de couleur à activer ou à désactiver lors du dessin ou du rendu dans un objet `WebGLFramebuffer`.

`WebGLRenderingContext.cullFace()` (en-US)

Indique si les polygones masqués en face arrière ou en face avant sont coupés (voir l'article Wikipédia sur *Back-face culling*).

`WebGLRenderingContext.depthFunc()` (en-US)

Indique une fonction qui compare la profondeur du pixel à venir avec la valeur actuelle de profondeur sur le tampon.

`WebGLRenderingContext.depthMask()` (en-US)

Indique si l'écriture sur le tampon de profondeur est activée ou désactivée.

`WebGLRenderingContext.depthRange()` (en-US)

Indique la correspondance pour l'intervalle de profondeur entre les coordonnées normalisées de l'appareil et les coordonnées de la fenêtre ou de la zone d'affichage.

`WebGLRenderingContext.disable()` (en-US)

Désactive les capacités spécifiques à WebGL pour ce contexte.

`WebGLRenderingContext.enable()`

Active les capacités spécifiques à WebGL pour ce contexte.

`WebGLRenderingContext.frontFace()` (en-US)

Indique si les polygones font face vers l'avant ou vers l'arrière en indiquant une orientation d'enroulement.

`WebGLRenderingContext.getParameter()` (en-US)

Renvoie une valeur pour le nom de paramètre passé en argument.

`WebGLRenderingContext.getError()`

Renvoie des informations sur l'erreur.

`WebGLRenderingContext.hint()` (en-US)

Définit les indications pour certains comportements. L'interprétation de ces indications dépend de l'implémentation.

`WebGLRenderingContext.isEnabled()` (en-US)

Teste si une fonctionnalité WebGL donnée est activée ou non pour ce contexte.

`WebGLRenderingContext.lineWidth()` (en-US)

Définit la largeur des lignes pour les lignes matricielles.

`WebGLRenderingContext.pixelStorei()` (en-US)

Définit le mode de stockage des pixels.

`WebGLRenderingContext.polygonOffset()` (en-US)

Définit les facteurs d'échelle et les unités pour calculer les valeurs de profondeur.

`WebGLRenderingContext.sampleCoverage()` (en-US)

Définit les paramètres de couverture multi-échantillonnage pour les effets anti-crénelage.

`WebGLRenderingContext.stencilFunc()` (en-US)

Définit la fonction et la valeur de référence pour les fonctions avant et arrière pour le test du pochoir.

`WebGLRenderingContext.stencilFuncSeparate()` (en-US)

Définit la fonction avant et/ou arrière et la valeur de référence pour le test du pochoir.

`WebGLRenderingContext.stencilMask()` (en-US)

Contrôle l'activation/la désactivation des modes d'écriture avant et arrière pour les bits individuels sur les plans du pochoir.

`WebGLRenderingContext.stencilMaskSeparate()` (en-US)

Contrôle l'activation/la désactivation des modes d'écriture avant et/ou arrière pour les bits individuels sur les plans du pochoir.

`WebGLRenderingContext.stencilOp()` (en-US)

Définit les actions de test du pochoir pour l'avant et pour l'arrière.

`WebGLRenderingContext.stencilOpSeparate()` (en-US)

Définit les actions de test du pochoir pour l'avant et/ou pour l'arrière.

Tampons
-------

`WebGLRenderingContext.bindBuffer()`

Lie un objet `WebGLBuffer` à une cible donnée.

`WebGLRenderingContext.bufferData()`

Met à jour les données du tampon.

`WebGLRenderingContext.bufferSubData()` (en-US)

Met à jour les données du tampon à partir d'un décalage donné.

`WebGLRenderingContext.createBuffer()`

Crée un objet `WebGLBuffer`.

`WebGLRenderingContext.deleteBuffer()`

Supprime un objet `WebGLBuffer`.

`WebGLRenderingContext.getBufferParameter()` (en-US)

Renvoie des informations à propos du tampon.

`WebGLRenderingContext.isBuffer()`

Renvoie un booléen indiquant si le tampon passé est valide.

Tampons d'image (*framebuffers*)
--------------------------------

`WebGLRenderingContext.bindFramebuffer()` (en-US)

Lie un objet `WebGLFrameBuffer` à une cible donnée.

`WebGLRenderingContext.checkFramebufferStatus()` (en-US)

Renvoie le statut du tampon d'image (*framebuffer*).

`WebGLRenderingContext.createFramebuffer()` (en-US)

Crée un objet `WebGLFrameBuffer`.

`WebGLRenderingContext.deleteFramebuffer()` (en-US)

Supprime un objet `WebGLFrameBuffer`.

`WebGLRenderingContext.framebufferRenderbuffer()` (en-US)

Attache un objet `WebGLRenderingBuffer` à un objet `WebGLFrameBuffer`.

`WebGLRenderingContext.framebufferTexture2D()` (en-US)

Attache une image de texture à un objet `WebGLFrameBuffer`.

`WebGLRenderingContext.getFramebufferAttachmentParameter()` (en-US)

Renvoie des informations à propos du tampon d'image (*framebuffer*).

`WebGLRenderingContext.isFramebuffer()` (en-US)

Renvoie un booléen indiquant si l'objet `WebGLFrameBuffer` passé est valide.

`WebGLRenderingContext.readPixels()` (en-US)

Lit un bloc de pixels à partir du `WebGLFrameBuffer`.

Tampons de rendu
----------------

`WebGLRenderingContext.bindRenderbuffer()` (en-US)

Lie un objet `WebGLRenderBuffer` à une cible donnée.

`WebGLRenderingContext.createRenderbuffer()` (en-US)

Crée un objet `WebGLRenderBuffer`.

`WebGLRenderingContext.deleteRenderbuffer()` (en-US)

Supprime un objet `WebGLRenderBuffer`.

`WebGLRenderingContext.getRenderbufferParameter()` (en-US)

Renvoie des informations à propos du tampon de rendu.

`WebGLRenderingContext.isRenderbuffer()` (en-US)

Renvoie un booléen indiquant si l'objet `WebGLRenderingBuffer` passé est valide.

`WebGLRenderingContext.renderbufferStorage()` (en-US)

Crée un magasin de données pour le tampon de rendu.

Textures
--------

`WebGLRenderingContext.bindTexture()`

Lie un objet `WebGLTexture` à une cible donnée.

`WebGLRenderingContext.compressedTexImage2D()` (en-US)

Indique une image de texture 2D dans un format compressé.

`WebGLRenderingContext.compressedTexSubImage2D()` (en-US)

Indique une sous-image de texture 2D dans un format compressé.

`WebGLRenderingContext.copyTexImage2D()` (en-US)

Copie une image de texture 2D.

`WebGLRenderingContext.copyTexSubImage2D()` (en-US)

Copie une sous-image de texture 2D.

`WebGLRenderingContext.createTexture()`

Crée un objet `WebGLTexture`.

`WebGLRenderingContext.deleteTexture()` (en-US)

Supprime un objet `WebGLTexture`.

`WebGLRenderingContext.generateMipmap()`

Génère un ensemble de mipmaps pour un objet `WebGLTexture`.

`WebGLRenderingContext.getTexParameter()`

Renvoie des informations à propos de la texture.

`WebGLRenderingContext.isTexture()` (en-US)

Renvoie un booléen qui indique sur l'objet `WebGLTexture` passé est valide.

`WebGLRenderingContext.texImage2D()`

Indique une image de texture 2D.

`WebGLRenderingContext.texSubImage2D()` (en-US)

Met à jour le sous-rectangle de l'objet `WebGLTexture` courant.

`WebGLRenderingContext.texParameterf()`

Définit les paramètres de texture.

`WebGLRenderingContext.texParameteri()`

Définit les paramètres de texture.

Programmes et *shaders*
-----------------------

`WebGLRenderingContext.attachShader()`

Attache un `WebGLShader` à un `WebGLProgram`.

`WebGLRenderingContext.bindAttribLocation()` (en-US)

Lie un index de sommet générique à une variable d'attribut nommée.

`WebGLRenderingContext.compileShader()`

Compile un `WebGLShader`.

`WebGLRenderingContext.createProgram()`

Crée un `WebGLProgram`.

`WebGLRenderingContext.createShader()`

Crée un `WebGLShader`.

`WebGLRenderingContext.deleteProgram()` (en-US)

Supprime un `WebGLProgram`.

`WebGLRenderingContext.deleteShader()`

Supprime un `WebGLShader`.

`WebGLRenderingContext.detachShader()` (en-US)

Détache un `WebGLShader`.

`WebGLRenderingContext.getAttachedShaders()` (en-US)

Renvoie une liste d'objets `WebGLShader` attachés à un `WebGLProgram`.

`WebGLRenderingContext.getProgramParameter()` (en-US)

Renvoie des informations à propos du programme.

`WebGLRenderingContext.getProgramInfoLog()` (en-US)

Renvoie le journal d'informations pour un objet `WebGLProgram`.

`WebGLRenderingContext.getShaderParameter()`

Renvoie des informations à propos du *shader*.

`WebGLRenderingContext.getShaderPrecisionFormat()` (en-US)

Renvoie un objet `WebGLShaderPrecisionFormat` décrivant la précision pour le format numérique du *shader*.

`WebGLRenderingContext.getShaderInfoLog()` (en-US)

Renvoie le journal d'informations pour un objet `WebGLShader`.

`WebGLRenderingContext.getShaderSource()` (en-US)

Renvoie le code source d'un `WebGLShader` sous la forme d'une chaîne de caractères.

`WebGLRenderingContext.isProgram()` (en-US)

Renvoie un booléen indiquant si l'objet `WebGLProgram` passé est valide.

`WebGLRenderingContext.isShader()` (en-US)

Renvoie un booléen indiquant si l'objet `WebGLShader` passé est valide.

`WebGLRenderingContext.linkProgram()` (en-US)

Effectue les liaisons pour l'objet `WebGLProgram` passé.

`WebGLRenderingContext.shaderSource()`

Définit le code source d'un `WebGLShader`.

`WebGLRenderingContext.useProgram()`

Utilise le `WebGLProgram` indiqué comme partie de l'état de rendu courant.

`WebGLRenderingContext.validateProgram()` (en-US)

Valide un `WebGLProgram`.

Uniformes et attributs
----------------------

`WebGLRenderingContext.disableVertexAttribArray()` (en-US)

Désactive un tableau d'attribut de sommet à une position donnée.

`WebGLRenderingContext.enableVertexAttribArray()`

Active un tableau d'attribut de sommet à une position donnée.

`WebGLRenderingContext.getActiveAttrib()` (en-US)

Renvoie des informations à propos d'une variable d'attribut active.

`WebGLRenderingContext.getActiveUniform()` (en-US)

Renvoie des informations à propos d'une variable d'uniforme active.

`WebGLRenderingContext.getAttribLocation()`

Renvoie l'emplacement d'une variable d'attribut.

`WebGLRenderingContext.getUniform()` (en-US)

Renvoie la valeur d'une variable d'uniforme à un emplacement donné.

`WebGLRenderingContext.getUniformLocation()`

Renvoie l'emplacement d'une variable d'uniforme.

`WebGLRenderingContext.getVertexAttrib()` (en-US)

Renvoie les informations à propos d'un attribut de sommet à une position donnée.

`WebGLRenderingContext.getVertexAttribOffset()` (en-US)

Renvoie l'adresse d'un attribut de sommet donné.

`WebGLRenderingContext.uniform[1234][fi][v]()`

Définit une valeur pour une variable d'uniforme.

`WebGLRenderingContext.uniformMatrix[234]fv()`

Définit la valeur matricielle pour une variable d'uniforme.

`WebGLRenderingContext.vertexAttrib[1234]f[v]()` (en-US)

Définit une valeur pour un attribut de sommet générique.

`WebGLRenderingContext.vertexAttribPointer()`

Définit les formats de données et les emplacements des attributs de sommet dans un tableau d'attributs de sommet.

Dessiner les tampons
--------------------

`WebGLRenderingContext.clear()`

Nettoie les tampons indiqués avec les valeurs prédéfinies.

`WebGLRenderingContext.drawArrays()`

Effectue le rendu des primitives à partir des données de tableaux.

`WebGLRenderingContext.drawElements()` (en-US)

Effectue le rendu des primitives à partir des données d'élément.

`WebGLRenderingContext.finish()` (en-US)

Bloque l'exécution jusqu'à ce que les commandes précédemment appelées soient terminées.

`WebGLRenderingContext.flush()` (en-US)

Vide les différents tampons de commandes, entraînant l'exécution la plus rapide possible pour toutes les commandes.

Utiliser les extensions
-----------------------

Ces méthodes permettent de gérer les extensions WebGL :

`WebGLRenderingContext.getSupportedExtensions()` (en-US)

Renvoie un tableau (`Array`) de chaînes de caractères (`DOMString`). Les éléments sont les noms des extensions WebGL prises en charge.

`WebGLRenderingContext.getExtension()` (en-US)

Renvoie un objet d'extension.

Spécifications
--------------

| Specification |
| --- |
| WebGL Specification # 5.14 |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `HTMLCanvasElement`