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:
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
. Kannnull
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. Kannnull
zurückgeben, wenn der Kontext verloren geht. WebGLRenderingContext.isContextLost()
-
Gibt
true
zurück, wenn der Kontext verloren ist, andernfallsfalse
. 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 einWebGLFramebuffer
-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 einWebGLProgram
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 einWebGLProgram
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