WebGLRenderingContext

Baseline Widely available *

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

* Some parts of this feature may have varying levels of support.

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. 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

Siehe auch

HTMLCanvasElement

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden