WebGLRenderingContext

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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 :

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.

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: 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: 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(): Renvoie un objet WebGLContextAttributes qui contient les paramètres de contextes réels. Peut renvoyer null si le contexte est perdu.
WebGLRenderingContext.isContextLost(): Renvoie true si le contexte est perdu et false sinon.
WebGLRenderingContext.makeXRCompatible(): 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(): 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(): Définit la source et la destination des facteurs de fusion.
WebGLRenderingContext.blendEquation(): Définit l'équation de fusion RGB et l'équation de fusion alpha avec une seule équation.
WebGLRenderingContext.blendEquationSeparate(): Définit l'équation de fusion RGB et l'équation de fusion alpha séparément.
WebGLRenderingContext.blendFunc(): Definit la fonction utilisée pour l'arithmétique de la fusion des pixels.
WebGLRenderingContext.blendFuncSeparate(): 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(): Définit les valeurs de couleur utilisées lors du nettoyage des tampons de couleur.
WebGLRenderingContext.clearDepth(): Définit la valeur de profondeur utilisée lors du nettoyage du tampon de profondeur.
WebGLRenderingContext.clearStencil(): Définit la valeur du pochoir utilisée lors du nettoyage du tampon de pochoir.
WebGLRenderingContext.colorMask(): Définit les composantes de couleur à activer ou à désactiver lors du dessin ou du rendu dans un objet WebGLFramebuffer.
WebGLRenderingContext.cullFace(): 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(): Indique une fonction qui compare la profondeur du pixel à venir avec la valeur actuelle de profondeur sur le tampon.
WebGLRenderingContext.depthMask(): Indique si l'écriture sur le tampon de profondeur est activée ou désactivée.
WebGLRenderingContext.depthRange(): 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(): 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(): Indique si les polygones font face vers l'avant ou vers l'arrière en indiquant une orientation d'enroulement.
WebGLRenderingContext.getParameter(): Renvoie une valeur pour le nom de paramètre passé en argument.
WebGLRenderingContext.getError(): Renvoie des informations sur l'erreur.
WebGLRenderingContext.hint(): Définit les indications pour certains comportements. L'interprétation de ces indications dépend de l'implémentation.
WebGLRenderingContext.isEnabled(): Teste si une fonctionnalité WebGL donnée est activée ou non pour ce contexte.
WebGLRenderingContext.lineWidth(): Définit la largeur des lignes pour les lignes matricielles.
WebGLRenderingContext.pixelStorei(): Définit le mode de stockage des pixels.
WebGLRenderingContext.polygonOffset(): Définit les facteurs d'échelle et les unités pour calculer les valeurs de profondeur.
WebGLRenderingContext.sampleCoverage(): Définit les paramètres de couverture multi-échantillonnage pour les effets anti-crénelage.
WebGLRenderingContext.stencilFunc(): 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(): Définit la fonction avant et/ou arrière et la valeur de référence pour le test du pochoir.
WebGLRenderingContext.stencilMask(): 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(): 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(): Définit les actions de test du pochoir pour l'avant et pour l'arrière.
WebGLRenderingContext.stencilOpSeparate(): 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(): 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(): 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(): Lie un objet WebGLFrameBuffer à une cible donnée.
WebGLRenderingContext.checkFramebufferStatus(): Renvoie le statut du tampon d'image (framebuffer).
WebGLRenderingContext.createFramebuffer(): Crée un objet WebGLFrameBuffer.
WebGLRenderingContext.deleteFramebuffer(): Supprime un objet WebGLFrameBuffer.
WebGLRenderingContext.framebufferRenderbuffer(): Attache un objet WebGLRenderingBuffer à un objet WebGLFrameBuffer.
WebGLRenderingContext.framebufferTexture2D(): Attache une image de texture à un objet WebGLFrameBuffer.
WebGLRenderingContext.getFramebufferAttachmentParameter(): Renvoie des informations à propos du tampon d'image (framebuffer).
WebGLRenderingContext.isFramebuffer(): Renvoie un booléen indiquant si l'objet WebGLFrameBuffer passé est valide.
WebGLRenderingContext.readPixels(): Lit un bloc de pixels à partir du WebGLFrameBuffer.

Tampons de rendu

WebGLRenderingContext.bindRenderbuffer(): Lie un objet WebGLRenderBuffer à une cible donnée.
WebGLRenderingContext.createRenderbuffer(): Crée un objet WebGLRenderBuffer.
WebGLRenderingContext.deleteRenderbuffer(): Supprime un objet WebGLRenderBuffer.
WebGLRenderingContext.getRenderbufferParameter(): Renvoie des informations à propos du tampon de rendu.
WebGLRenderingContext.isRenderbuffer(): Renvoie un booléen indiquant si l'objet WebGLRenderingBuffer passé est valide.
WebGLRenderingContext.renderbufferStorage(): 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(): Indique une image de texture 2D dans un format compressé.
WebGLRenderingContext.compressedTexSubImage2D(): Indique une sous-image de texture 2D dans un format compressé.
WebGLRenderingContext.copyTexImage2D(): Copie une image de texture 2D.
WebGLRenderingContext.copyTexSubImage2D(): Copie une sous-image de texture 2D.
WebGLRenderingContext.createTexture(): Crée un objet WebGLTexture.
WebGLRenderingContext.deleteTexture(): 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(): Renvoie un booléen qui indique sur l'objet WebGLTexture passé est valide.
WebGLRenderingContext.texImage2D(): Indique une image de texture 2D.
WebGLRenderingContext.texSubImage2D(): 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(): 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(): Supprime un WebGLProgram.
WebGLRenderingContext.deleteShader(): Supprime un WebGLShader.
WebGLRenderingContext.detachShader(): Détache un WebGLShader.
WebGLRenderingContext.getAttachedShaders(): Renvoie une liste d'objets WebGLShader attachés à un WebGLProgram.
WebGLRenderingContext.getProgramParameter(): Renvoie des informations à propos du programme.
WebGLRenderingContext.getProgramInfoLog(): Renvoie le journal d'informations pour un objet WebGLProgram.
WebGLRenderingContext.getShaderParameter(): Renvoie des informations à propos du shader.
WebGLRenderingContext.getShaderPrecisionFormat(): Renvoie un objet WebGLShaderPrecisionFormat décrivant la précision pour le format numérique du shader.
WebGLRenderingContext.getShaderInfoLog(): Renvoie le journal d'informations pour un objet WebGLShader.
WebGLRenderingContext.getShaderSource(): Renvoie le code source d'un WebGLShader sous la forme d'une chaîne de caractères.
WebGLRenderingContext.isProgram(): Renvoie un booléen indiquant si l'objet WebGLProgram passé est valide.
WebGLRenderingContext.isShader(): Renvoie un booléen indiquant si l'objet WebGLShader passé est valide.
WebGLRenderingContext.linkProgram(): 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(): Valide un WebGLProgram.

Uniformes et attributs

WebGLRenderingContext.disableVertexAttribArray(): 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(): Renvoie des informations à propos d'une variable d'attribut active.
WebGLRenderingContext.getActiveUniform(): Renvoie des informations à propos d'une variable d'uniforme active.
WebGLRenderingContext.getAttribLocation(): Renvoie l'emplacement d'une variable d'attribut.
WebGLRenderingContext.getUniform(): Renvoie la valeur d'une variable d'uniforme à un emplacement donné.
WebGLRenderingContext.getUniformLocation(): Renvoie l'emplacement d'une variable d'uniforme.
WebGLRenderingContext.getVertexAttrib(): Renvoie les informations à propos d'un attribut de sommet à une position donnée.
WebGLRenderingContext.getVertexAttribOffset(): 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](): 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(): Effectue le rendu des primitives à partir des données d'élément.
WebGLRenderingContext.finish(): Bloque l'exécution jusqu'à ce que les commandes précédemment appelées soient terminées.
WebGLRenderingContext.flush(): 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(): 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(): Renvoie un objet d'extension.

Spécifications

Specification
WebGL Specification # 5.14

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi

HTMLCanvasElement