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.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Das WebGLRenderingContext Interface bietet eine Schnittstelle zum OpenGL ES 2.0 Grafikkontext für die Zeichenfläche eines HTML-Elements vom Typ <canvas>.

Um Zugriff auf einen WebGL-Kontext für die 2D- und/oder 3D-Grafikdarstellung zu erhalten, rufen Sie getContext() auf einem <canvas> Element auf und übergeben Sie "webgl" als Argument:

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

Sobald Sie den WebGL-Darstellungskontext für ein Canvas haben, können Sie darin rendern. Das WebGL-Tutorial enthält weitere Informationen, Beispiele und Ressourcen, um mit WebGL zu starten.

Wenn Sie einen WebGL 2.0-Kontext benötigen, sehen Sie sich WebGL2RenderingContext an; dieser bietet Zugriff auf eine Implementation von OpenGL ES 3.0 Grafiken.

Konstante

Siehe die Seite WebGL-Konstanten.

Der WebGL-Kontext

Die folgenden Eigenschaften und Methoden bieten allgemeine Informationen und Funktionalitäten zur Arbeit mit dem WebGL-Kontext:

WebGLRenderingContext.canvas

Eine schreibgeschützte Rückverweis auf das HTMLCanvasElement. Kann null sein, wenn es nicht mit einem <canvas> Element verknüpft ist.

WebGLRenderingContext.drawingBufferWidth

Die schreibgeschützte Breite des aktuellen Zeichnungspuffers. Sollte mit der Breite des mit diesem Kontext verknüpften Canvas-Elements übereinstimmen.

WebGLRenderingContext.drawingBufferHeight

Die schreibgeschützte Höhe des aktuellen Zeichnungspuffers. Sollte mit der Höhe des mit diesem Kontext verknüpften Canvas-Elements übereinstimmen.

WebGLRenderingContext.getContextAttributes()

Gibt ein WebGLContextAttributes-Objekt zurück, das die tatsächlichen Kontextparameter enthält. Kann null zurückgeben, wenn der Kontext verloren geht.

WebGLRenderingContext.isContextLost()

Gibt true zurück, wenn der Kontext verloren ist, andernfalls false.

WebGLRenderingContext.makeXRCompatible()

Sorgt dafür, dass der Kontext mit der XR-Hardware des Benutzers kompatibel ist und erstellt bei Bedarf den Kontext mit einer neuen Konfiguration neu. Dies kann verwendet werden, um eine Anwendung mit einer Standard-2D-Präsentation zu starten und dann später auf einen VR- oder AR-Modus zu wechseln.

Ansicht und Clipping

WebGLRenderingContext.scissor()

Definiert das Scherrechteck.

WebGLRenderingContext.viewport()

Setzt den Viewport.

Statusinformationen

WebGLRenderingContext.activeTexture()

Wählt die aktive Textureinheit aus.

WebGLRenderingContext.blendColor()

Setzt die Quellen- und Zielmischfaktoren.

WebGLRenderingContext.blendEquation()

Setzt sowohl die RGB- als auch die Alpha-Mischgleichung auf eine einzelne Gleichung.

WebGLRenderingContext.blendEquationSeparate()

Setzt die RGB- und Alpha-Mischgleichungen separat.

WebGLRenderingContext.blendFunc()

Definiert, welche Funktion für die Pixelarithmetik beim Mischen verwendet wird.

WebGLRenderingContext.blendFuncSeparate()

Definiert, welche Funktion für die Pixelarithmetik beim Mischen für RGB- und Alpha-Komponenten separat verwendet wird.

WebGLRenderingContext.clearColor()

Gibt die Farbwerte an, die beim Löschen von Farbpuffern verwendet werden.

WebGLRenderingContext.clearDepth()

Gibt die Tiefenwerte an, die beim Löschen des Tiefenpuffers verwendet werden.

WebGLRenderingContext.clearStencil()

Gibt die Schablonenwerte an, die beim Löschen des Schablonenpuffers verwendet werden.

WebGLRenderingContext.colorMask()

Legt fest, welche Farbkomponenten beim Zeichnen oder Rendern auf ein WebGLFramebuffer ein- oder ausgeblendet werden sollen.

WebGLRenderingContext.cullFace()

Gibt an, ob Vorder- und/oder Rückseitenpolygone ausgeschnitten werden können.

WebGLRenderingContext.depthFunc()

Gibt eine Funktion an, die die eingehende Pixel-Dichte mit dem aktuellen Tiefenpufferwert vergleicht.

WebGLRenderingContext.depthMask()

Legt fest, ob das Schreiben in den Tiefenpuffer aktiviert oder deaktiviert ist.

WebGLRenderingContext.depthRange()

Gibt die Tiefenbereichsabbildung von normalisierten Gerätekoordinaten zu Fenster- oder Viewport-Koordinaten an.

WebGLRenderingContext.disable()

Deaktiviert spezifische WebGL-Funktionen für diesen Kontext.

WebGLRenderingContext.enable()

Aktiviert spezifische WebGL-Funktionen für diesen Kontext.

WebGLRenderingContext.frontFace()

Gibt an, ob Polygone durch das Setzen einer Wicklungsorientierung vorne oder hinten sind.

WebGLRenderingContext.getParameter()

Gibt einen Wert für den übergebenen Parameternamen zurück.

WebGLRenderingContext.getError()

Gibt Fehlerinformationen zurück.

WebGLRenderingContext.hint()

Gibt Hinweise für bestimmte Verhaltensweisen an. Die Interpretation dieser Hinweise hängt von der Implementierung ab.

WebGLRenderingContext.isEnabled()

Prüft, ob eine bestimmte WebGL-Funktion für diesen Kontext aktiviert oder nicht aktiviert ist.

WebGLRenderingContext.lineWidth()

Setzt die Linienbreite von gerasterten Linien.

WebGLRenderingContext.pixelStorei()

Gibt die Pixel-Speichermodi an.

WebGLRenderingContext.polygonOffset()

Gibt die Skalierungsfaktoren und Einheiten zur Berechnung von Tiefenwerten an.

WebGLRenderingContext.sampleCoverage()

Gibt Parameter zur Multisample-Abdeckung für Antialiasing-Effekte an.

WebGLRenderingContext.stencilFunc()

Setzt sowohl die Front- als auch die Back-Funktion und den Referenzwert für den Schablonentest.

WebGLRenderingContext.stencilFuncSeparate()

Setzt die Front- und/oder Back-Funktion und den Referenzwert für den Schablonentest.

WebGLRenderingContext.stencilMask()

Steuert die Aktivierung und Deaktivierung sowohl des Front- als auch des Back-Schreibens einzelner Bits in den Schablonenebenen.

WebGLRenderingContext.stencilMaskSeparate()

Steuert die Aktivierung und Deaktivierung des Front- und/oder Back-Schreibens einzelner Bits in den Schablonenebenen.

WebGLRenderingContext.stencilOp()

Setzt sowohl die Front- als auch die Back-facings Schablonentestaktionen.

WebGLRenderingContext.stencilOpSeparate()

Setzt die Front- und/oder Back-facings Schablonentestaktionen.

Puffer

WebGLRenderingContext.bindBuffer()

Bindet ein WebGLBuffer-Objekt an ein gegebenes Ziel.

WebGLRenderingContext.bufferData()

Aktualisiert die Pufferdaten.

WebGLRenderingContext.bufferSubData()

Aktualisiert die Pufferdaten ab einem übergebenen Offset.

WebGLRenderingContext.createBuffer()

Erstellt ein WebGLBuffer-Objekt.

WebGLRenderingContext.deleteBuffer()

Löscht ein WebGLBuffer-Objekt.

WebGLRenderingContext.getBufferParameter()

Gibt Informationen über den Puffer zurück.

WebGLRenderingContext.isBuffer()

Gibt einen Boolean-Wert zurück, der angibt, ob der übergebene Puffer gültig ist.

Framebuffer

WebGLRenderingContext.bindFramebuffer()

Bindet ein WebGLFramebuffer-Objekt an ein gegebenes Ziel.

WebGLRenderingContext.checkFramebufferStatus()

Gibt den Status des Framebuffers zurück.

WebGLRenderingContext.createFramebuffer()

Erstellt ein WebGLFramebuffer-Objekt.

WebGLRenderingContext.deleteFramebuffer()

Löscht ein WebGLFramebuffer-Objekt.

WebGLRenderingContext.framebufferRenderbuffer()

Hängt ein WebGLRenderingBuffer-Objekt an ein WebGLFramebuffer-Objekt an.

WebGLRenderingContext.framebufferTexture2D()

Hängt ein Texturbild an ein WebGLFramebuffer-Objekt an.

WebGLRenderingContext.getFramebufferAttachmentParameter()

Gibt Informationen über den Framebuffer zurück.

WebGLRenderingContext.isFramebuffer()

Gibt einen Boolean-Wert zurück, der angibt, ob das übergebene WebGLFramebuffer-Objekt gültig ist.

WebGLRenderingContext.readPixels()

Liest einen Block von Pixeln aus dem WebGLFramebuffer.

Renderbuffer

WebGLRenderingContext.bindRenderbuffer()

Bindet ein WebGLRenderBuffer-Objekt an ein gegebenes Ziel.

WebGLRenderingContext.createRenderbuffer()

Erstellt ein WebGLRenderBuffer-Objekt.

WebGLRenderingContext.deleteRenderbuffer()

Löscht ein WebGLRenderBuffer-Objekt.

WebGLRenderingContext.getRenderbufferParameter()

Gibt Informationen über den Renderbuffer zurück.

WebGLRenderingContext.isRenderbuffer()

Gibt einen Boolean-Wert zurück, der angibt, ob das übergebene WebGLRenderingBuffer gültig ist.

WebGLRenderingContext.renderbufferStorage()

Erstellt ein Renderbuffer-Datenspeicher.

Texturen

WebGLRenderingContext.bindTexture()

Bindet ein WebGLTexture-Objekt an ein gegebenes Ziel.

WebGLRenderingContext.compressedTexImage2D()

Gibt ein 2D-Texturbild im komprimierten Format an.

WebGLRenderingContext.compressedTexSubImage2D()

Gibt ein 2D-Textur-Subbild im komprimierten Format an.

WebGLRenderingContext.copyTexImage2D()

Kopiert ein 2D-Texturbild.

WebGLRenderingContext.copyTexSubImage2D()

Kopiert ein 2D-Textur-Subbild.

WebGLRenderingContext.createTexture()

Erstellt ein WebGLTexture-Objekt.

WebGLRenderingContext.deleteTexture()

Löscht ein WebGLTexture-Objekt.

WebGLRenderingContext.generateMipmap()

Erzeugt eine Reihe von Mipmaps für ein WebGLTexture-Objekt.

WebGLRenderingContext.getTexParameter()

Gibt Informationen über die Textur zurück.

WebGLRenderingContext.isTexture()

Gibt einen Boolean-Wert zurück, der angibt, ob die übergebene WebGLTexture gültig ist.

WebGLRenderingContext.texImage2D()

Gibt ein 2D-Texturbild an.

WebGLRenderingContext.texSubImage2D()

Aktualisiert ein rechteckiges Teilstück der aktuellen WebGLTexture.

WebGLRenderingContext.texParameterf()

Setzt Texturparameter.

WebGLRenderingContext.texParameteri()

Setzt Texturparameter.

Programme und Shader

WebGLRenderingContext.attachShader()

Hängt einen WebGLShader an ein WebGLProgram an.

WebGLRenderingContext.bindAttribLocation()

Bindet einen generischen Vertex-Index an eine benannte Attributvariable.

WebGLRenderingContext.compileShader()

Kompiliert einen WebGLShader.

WebGLRenderingContext.createProgram()

Erstellt ein WebGLProgram.

WebGLRenderingContext.createShader()

Erstellt einen WebGLShader.

WebGLRenderingContext.deleteProgram()

Löscht ein WebGLProgram.

WebGLRenderingContext.deleteShader()

Löscht einen WebGLShader.

WebGLRenderingContext.detachShader()

Trennt einen WebGLShader.

WebGLRenderingContext.getAttachedShaders()

Gibt eine Liste von WebGLShader-Objekten zurück, die an ein WebGLProgram angehängt sind.

WebGLRenderingContext.getProgramParameter()

Gibt Informationen über das Programm zurück.

WebGLRenderingContext.getProgramInfoLog()

Gibt das Informationsprotokoll für ein WebGLProgram-Objekt zurück.

WebGLRenderingContext.getShaderParameter()

Gibt Informationen über den Shader zurück.

WebGLRenderingContext.getShaderPrecisionFormat()

Gibt ein WebGLShaderPrecisionFormat-Objekt zurück, das die Genauigkeit des numerischen Formats des Shaders beschreibt.

WebGLRenderingContext.getShaderInfoLog()

Gibt das Informationsprotokoll für ein WebGLShader-Objekt zurück.

WebGLRenderingContext.getShaderSource()

Gibt den Quellcode eines WebGLShader als String zurück.

WebGLRenderingContext.isProgram()

Gibt einen Boolean-Wert zurück, der angibt, ob das übergebene WebGLProgram gültig ist.

WebGLRenderingContext.isShader()

Gibt einen Boolean-Wert zurück, der angibt, ob der übergebene WebGLShader gültig ist.

WebGLRenderingContext.linkProgram()

Verknüpft das übergebene WebGLProgram-Objekt.

WebGLRenderingContext.shaderSource()

Setzt den Quellcode in einem WebGLShader.

WebGLRenderingContext.useProgram()

Verwendet das angegebene WebGLProgram als Teil des aktuellen Darstellungszustandes.

WebGLRenderingContext.validateProgram()

Überprüft ein WebGLProgram.

Uniformen und Attribute

WebGLRenderingContext.disableVertexAttribArray()

Deaktiviert ein Vertex-Attribut-Array an einer gegebenen Position.

WebGLRenderingContext.enableVertexAttribArray()

Aktiviert ein Vertex-Attribut-Array an einer gegebenen Position.

WebGLRenderingContext.getActiveAttrib()

Gibt Informationen über eine aktive Attributvariable zurück.

WebGLRenderingContext.getActiveUniform()

Gibt Informationen über eine aktive Uniformvariable zurück.

WebGLRenderingContext.getAttribLocation()

Gibt den Speicherort einer Attributvariable zurück.

WebGLRenderingContext.getUniform()

Gibt den Wert einer Uniformvariable an einem gegebenen Speicherort zurück.

WebGLRenderingContext.getUniformLocation()

Gibt den Speicherort einer Uniformvariable zurück.

WebGLRenderingContext.getVertexAttrib()

Gibt Informationen über ein Vertex-Attribut an einer gegebenen Position zurück.

WebGLRenderingContext.getVertexAttribOffset()

Gibt die Adresse eines gegebenen Vertex-Attributs zurück.

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

Gibt einen Wert für eine Uniformvariable an.

WebGLRenderingContext.uniformMatrix[234]fv()

Gibt einen Matrixwert für eine Uniformvariable an.

WebGLRenderingContext.vertexAttrib[1234]f[v]()

Gibt einen Wert für ein generisches Vertex-Attribut an.

WebGLRenderingContext.vertexAttribPointer()

Gibt die Datenformate und Positionen von Vertex-Attributen in einem Vertex-Attribut-Array an.

Darstellungs-Puffer

WebGLRenderingContext.clear()

Löscht bestimmte Puffer auf voreingestellte Werte.

WebGLRenderingContext.drawArrays()

Rendert Primitive aus Array-Daten.

WebGLRenderingContext.drawElements()

Rendert Primitive aus Element-Array-Daten.

WebGLRenderingContext.finish()

Blockiert die Ausführung, bis alle zuvor aufgerufenen Befehle abgeschlossen sind.

WebGLRenderingContext.flush()

Leert verschiedene Pufferbefehle, sodass alle Befehle so schnell wie möglich ausgeführt werden.

Farbräume

WebGLRenderingContext.drawingBufferColorSpace

Gibt den Farbraum des WebGL-Zeichenpuffers an.

WebGLRenderingContext.unpackColorSpace

Gibt den Farbraum an, in den konvertiert werden soll, wenn Texturen importiert werden.

Arbeiten mit Erweiterungen

Diese Methoden verwalten WebGL-Erweiterungen:

WebGLRenderingContext.getSupportedExtensions()

Gibt ein Array von Strings zurück, die alle unterstützen WebGL-Erweiterungen enthalten.

WebGLRenderingContext.getExtension()

Gibt ein Erweiterungsobjekt zurück.

Spezifikationen

Specification
WebGL Specification
# 5.14

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch