WebGL2RenderingContext

Baseline Widely available

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

Hinweis: Dieses Feature ist verfügbar in Web Workers.

Das WebGL2RenderingContext-Interface bietet den OpenGL ES 3.0-Rendering-Kontext für die Zeichenfläche eines HTML-<canvas>-Elements.

Um ein Objekt dieses Interfaces zu erhalten, rufen Sie getContext() auf einem <canvas>-Element auf und geben Sie "webgl2" als Argument:

const canvas = document.getElementById("myCanvas");
const gl = canvas.getContext("webgl2");

Hinweis: WebGL 2 ist eine Erweiterung von WebGL 1. Das WebGL2RenderingContext-Interface implementiert alle Mitglieder des WebGLRenderingContext-Interfaces. Einige Methoden des WebGL 1-Kontexts können zusätzliche Werte akzeptieren, wenn sie in einem WebGL 2-Kontext verwendet werden. Diese Informationen finden Sie auf den WebGL 1-Referenzseiten.

Das WebGL-Tutorial bietet mehr Informationen, Beispiele und Ressourcen, um mit WebGL zu beginnen.

Konstanten

Siehe die Seite zu WebGL-Konstanten.

Statusinformationen

WebGL2RenderingContext.getIndexedParameter(): Gibt den indizierten Wert für das gegebene target zurück.

Puffer

WebGL2RenderingContext.bufferData(): Initialisiert und erstellt den Datenspeicher des Pufferobjekts.
WebGL2RenderingContext.bufferSubData(): Aktualisiert einen Teil des Datenspeichers eines Pufferobjekts.
WebGL2RenderingContext.copyBufferSubData(): Kopiert Teile der Daten eines Puffers in einen anderen Puffer.
WebGL2RenderingContext.getBufferSubData(): Liest Daten aus einem Puffer und schreibt sie in einen ArrayBuffer oder SharedArrayBuffer.

Framebuffer

WebGL2RenderingContext.blitFramebuffer(): Überträgt einen Block von Pixeln vom Lese-Framebuffer zum Zeichnungs-Framebuffer.
WebGL2RenderingContext.framebufferTextureLayer(): Fügt eine einzelne Schicht einer Textur an einen Framebuffer an.
WebGL2RenderingContext.invalidateFramebuffer(): Invaliert den Inhalt von Anhängen in einem Framebuffer.
WebGL2RenderingContext.invalidateSubFramebuffer(): Invaliert Teile des Inhalts von Anhängen in einem Framebuffer.
WebGL2RenderingContext.readBuffer(): Wählt einen Farb-Puffer als Quelle für Pixel aus.

Renderbuffer

WebGL2RenderingContext.getInternalformatParameter(): Gibt Informationen über Implementierungs-abhängige Unterstützung für interne Formate zurück.
WebGL2RenderingContext.renderbufferStorageMultisample(): Erstellt und initialisiert den Datenspeicher eines Renderpufferobjekts und erlaubt die Angabe der zu verwendenden Anzahl von Samples.

Texturen

WebGL2RenderingContext.texStorage2D(): Bestimmt alle Ebenen des zweidimensionalen Texturspeichers.
WebGL2RenderingContext.texStorage3D(): Bestimmt alle Ebenen eines dreidimensionalen Texturspeichers oder eines zweidimensionalen Array-Texturspeichers.
WebGL2RenderingContext.texImage3D(): Bestimmt ein dreidimensionales Texturbild.
WebGL2RenderingContext.texSubImage3D(): Bestimmt ein Teilrechteck der aktuellen 3D-Textur.
WebGL2RenderingContext.copyTexSubImage3D(): Kopiert Pixel aus dem aktuellen WebGLFramebuffer in ein bestehendes 3D-Textur-Sub-Image.
WebGL2RenderingContext.compressedTexImage3D: Bestimmt ein dreidimensionales Texturbild in einem komprimierten Format.
WebGL2RenderingContext.compressedTexSubImage3D(): Bestimmt ein dreidimensionales Teilrechteck für ein Texturbild in einem komprimierten Format.

Programme und Shader

WebGL2RenderingContext.getFragDataLocation(): Gibt die Bindung von Farbnummern an benutzerdefinierte, variierende Ausgabewerte zurück.

Uniforms und Attribute

WebGL2RenderingContext.uniform[1234][uif][v](): Methoden, die Werte von Uniform-Variablen spezifizieren.
WebGL2RenderingContext.uniformMatrix[234]x[234]fv(): Methoden, die Matrixwerte für Uniform-Variablen spezifizieren.
WebGL2RenderingContext.vertexAttribI4[u]i[v](): Methoden, die Ganzzahlen für generische Vertex-Attribute spezifizieren.
WebGL2RenderingContext.vertexAttribIPointer(): Spezifiziert Ganzzahl-Datenformate und -Positionen von Vertex-Attributen in einem Vertex-Attributs-Array.

Farbräume

WebGL2RenderingContext.drawingBufferColorSpace: Bestimmt den Farbraum des WebGL-Zeichenpuffers.
WebGL2RenderingContext.unpackColorSpace: Bestimmt den Farbraum, in den beim Importieren von Texturen konvertiert werden soll.

Zeichenbuffer

WebGL2RenderingContext.vertexAttribDivisor(): Ändert die Rate, mit der generische Vertex-Attribute voranschreiten, wenn mehrere Instanzen von Primitiven mit gl.drawArraysInstanced() und gl.drawElementsInstanced() gerendert werden.
WebGL2RenderingContext.drawArraysInstanced(): Rendert Primitiven aus Array-Daten. Außerdem kann es mehrere Instanzen des Elementsbereichs ausführen.
WebGL2RenderingContext.drawElementsInstanced(): Rendert Primitiven aus Array-Daten. Darüber hinaus kann es mehrere Instanzen eines Elementsatzes ausführen.
WebGL2RenderingContext.drawRangeElements(): Rendert Primitiven aus Array-Daten in einem bestimmten Bereich.
WebGL2RenderingContext.drawBuffers(): Bestimmt eine Liste von Farb-Puffern, in die gezeichnet werden soll.
WebGL2RenderingContext.clearBuffer[fiuv](): Löscht Puffer aus dem aktuell gebundenen Framebuffer.

Abfrageobjekte

Methoden zur Arbeit mit WebGLQuery-Objekten.

WebGL2RenderingContext.createQuery(): Erstellt ein neues WebGLQuery-Objekt.
WebGL2RenderingContext.deleteQuery(): Löscht ein gegebenes WebGLQuery-Objekt.
WebGL2RenderingContext.isQuery(): Gibt true zurück, wenn ein gegebenes Objekt ein gültiges WebGLQuery-Objekt ist.
WebGL2RenderingContext.beginQuery(): Startet eine asynchrone Abfrage.
WebGL2RenderingContext.endQuery(): Markiert das Ende einer asynchronen Abfrage.
WebGL2RenderingContext.getQuery(): Gibt ein WebGLQuery-Objekt für ein gegebenes Ziel zurück.
WebGL2RenderingContext.getQueryParameter(): Gibt Informationen über eine Abfrage zurück.

Sampler-Objekte

WebGL2RenderingContext.createSampler(): Erstellt ein neues WebGLSampler-Objekt.
WebGL2RenderingContext.deleteSampler(): Löscht ein gegebenes WebGLSampler-Objekt.
WebGL2RenderingContext.bindSampler(): Bindet ein gegebenes WebGLSampler an eine Textureinheit.
WebGL2RenderingContext.isSampler(): Gibt true zurück, wenn ein gegebenes Objekt ein gültiges WebGLSampler-Objekt ist.
WebGL2RenderingContext.samplerParameter[if](): Legt Sampler-Parameter fest.
WebGL2RenderingContext.getSamplerParameter(): Gibt Sampler-Parameterinformationen zurück.

Synchronisationsobjekte

WebGL2RenderingContext.fenceSync(): Erstellt ein neues WebGLSync-Objekt und fügt es in den GL-Befehlsstream ein.
WebGL2RenderingContext.isSync(): Gibt true zurück, wenn das übergebene Objekt ein gültiges WebGLSync-Objekt ist.
WebGL2RenderingContext.deleteSync(): Löscht ein gegebenes WebGLSync-Objekt.
WebGL2RenderingContext.clientWaitSync(): Blockiert und wartet darauf, dass ein WebGLSync-Objekt signaliert wird oder ein gegebener Timeout überschritten wird.
WebGL2RenderingContext.waitSync(): Gibt sofort zurück, wartet jedoch auf dem GL-Server, bis das gegebene WebGLSync-Objekt signaliert wird.
WebGL2RenderingContext.getSyncParameter(): Gibt Parameterinformationen eines WebGLSync-Objekts zurück.

Transform-Feedback

WebGL2RenderingContext.createTransformFeedback(): Erstellt und initialisiert WebGLTransformFeedback-Objekte.
WebGL2RenderingContext.deleteTransformFeedback(): Löscht ein gegebenes WebGLTransformFeedback-Objekt.
WebGL2RenderingContext.isTransformFeedback(): Gibt true zurück, wenn das übergebene Objekt ein gültiges WebGLTransformFeedback-Objekt ist.
WebGL2RenderingContext.bindTransformFeedback(): Bindet ein übergebenes WebGLTransformFeedback-Objekt an den aktuellen GL-Zustand.
WebGL2RenderingContext.beginTransformFeedback(): Startet eine Transform-Feedback-Operation.
WebGL2RenderingContext.endTransformFeedback(): Beendet eine Transform-Feedback-Operation.
WebGL2RenderingContext.transformFeedbackVaryings(): Bestimmt Werte, die in WebGLTransformFeedback-Puffer aufgezeichnet werden sollen.
WebGL2RenderingContext.getTransformFeedbackVarying(): Gibt Informationen über variierende Variablen aus WebGLTransformFeedback-Puffern zurück.
WebGL2RenderingContext.pauseTransformFeedback(): Pausiert eine Transform-Feedback-Operation.
WebGL2RenderingContext.resumeTransformFeedback(): Setzt eine Transform-Feedback-Operation fort.

Uniform-Buffer-Objekte

WebGL2RenderingContext.bindBufferBase(): Bindet ein gegebenes WebGLBuffer an eine gegebene Bindungsstelle (target) an einem gegebenen index.
WebGL2RenderingContext.bindBufferRange(): Bindet einen Bereich eines gegebenen WebGLBuffer an eine gegebene Bindungsstelle (target) an einem gegebenen index.
WebGL2RenderingContext.getUniformIndices(): Ruft die Indizes einer Anzahl von Uniforms innerhalb eines WebGLProgram ab.
WebGL2RenderingContext.getActiveUniforms(): Ruft Informationen über aktive Uniforms innerhalb eines WebGLProgram ab.
WebGL2RenderingContext.getUniformBlockIndex(): Ruft den Index eines Uniform-Blocks innerhalb eines WebGLProgram ab.
WebGL2RenderingContext.getActiveUniformBlockParameter(): Ruft Informationen über einen aktiven Uniform-Block innerhalb eines WebGLProgram ab.
WebGL2RenderingContext.getActiveUniformBlockName(): Ruft den Namen des aktiven Uniform-Blocks an einem gegebenen Index innerhalb eines WebGLProgram ab.
WebGL2RenderingContext.uniformBlockBinding(): Weist Bindungspunkte für aktive Uniform-Blöcke zu.

Vertex-Array-Objekte

Methoden zur Arbeit mit WebGLVertexArrayObject (VAO)-Objekten.

WebGL2RenderingContext.createVertexArray(): Erstellt ein neues WebGLVertexArrayObject.
WebGL2RenderingContext.deleteVertexArray(): Löscht ein gegebenes WebGLVertexArrayObject.
WebGL2RenderingContext.isVertexArray(): Gibt true zurück, wenn ein gegebenes Objekt ein gültiges WebGLVertexArrayObject ist.
WebGL2RenderingContext.bindVertexArray(): Bindet ein gegebenes WebGLVertexArrayObject an den Puffer.

Spezifikationen

Specification
WebGL 2.0 Specification # 3.7

Browser-Kompatibilität

BCD tables only load in the browser