WebGLRenderingContext

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Vollständige Kompatibilität anzeigen
Mehr erfahren

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

Die WebGLRenderingContext Schnittstelle bietet eine Schnittstelle zum OpenGL ES 2.0 Grafik-Rendering-Kontext für die Zeichenfläche eines HTML <canvas> Elements.

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

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

Sobald Sie den WebGL-Rendering-Kontext für ein Canvas haben, können Sie darin rendern. Das WebGL-Tutorial bietet weitere Informationen, Beispiele und Ressourcen zum Einstieg in WebGL.

Wenn Sie einen WebGL 2.0 Kontext benötigen, siehe WebGL2RenderingContext; dieser bietet Zugang zu einer Implementierung von OpenGL ES 3.0 Grafiken.

Konstanten

Siehe die Seite zu den WebGL-Konstanten.

Der WebGL-Kontext

Die folgenden Eigenschaften und Methoden bieten allgemeine Informationen und Funktionen zur Handhabung des WebGL-Kontexts:

WebGLRenderingContext.canvas: Eine schreibgeschützte Rückverbindung zum HTMLCanvasElement. Kann null sein, wenn es nicht mit einem <canvas> Element verbunden ist.
WebGLRenderingContext.drawingBufferWidth: Die schreibgeschützte Breite des aktuellen Zeichenpuffers. Sollte der Breite des mit diesem Kontext verbundenen Canvas-Elements entsprechen.
WebGLRenderingContext.drawingBufferHeight: Die schreibgeschützte Höhe des aktuellen Zeichenpuffers. Sollte der Höhe des mit diesem Kontext verbundenen Canvas-Elements entsprechen.
WebGLRenderingContext.getContextAttributes(): Gibt ein WebGLContextAttributes Objekt zurück, das die aktuellen Kontextparameter enthält. Könnte null zurückgeben, wenn der Kontext verloren ist.
WebGLRenderingContext.isContextLost(): Gibt true zurück, wenn der Kontext verloren ist, andernfalls false.
WebGLRenderingContext.makeXRCompatible(): Stellt sicher, dass der Kontext mit der XR-Hardware des Nutzers kompatibel ist und erstellt den Kontext gegebenenfalls mit einer neuen Konfiguration neu, um dies zu erreichen. Dies kann verwendet werden, um eine Anwendung zu starten, die eine standardmäßige 2D-Präsentation nutzt und dann später zu einem VR- oder AR-Modus zu wechseln.

Ansichten und Clipping

WebGLRenderingContext.scissor(): Definiert den Scherenschnittbereich.
WebGLRenderingContext.viewport(): Legt den Viewport fest.

Zustandsinformationen

WebGLRenderingContext.activeTexture(): Wählt die aktive Textureinheit aus.
WebGLRenderingContext.blendColor(): Setzt die Quell- und Ziel-Blendingfaktoren.
WebGLRenderingContext.blendEquation(): Setzt sowohl die RGB-Blending-Gleichung als auch die Alpha-Blending-Gleichung auf eine einzelne Gleichung.
WebGLRenderingContext.blendEquationSeparate(): Setzt die RGB-Blending-Gleichung und die Alpha-Blending-Gleichung separat.
WebGLRenderingContext.blendFunc(): Definiert, welche Funktion für das Pixel-Arithmetik-Blending verwendet wird.
WebGLRenderingContext.blendFuncSeparate(): Definiert, welche Funktion für das Pixel-Arithmetik-Blending 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 den Tiefenwert an, der beim Löschen des Tiefenpuffers verwendet wird.
WebGLRenderingContext.clearStencil(): Gibt den Stencil-Wert an, der beim Löschen des Stencil-Puffers verwendet wird.
WebGLRenderingContext.colorMask(): Legt fest, welche Farbkomponenten aktiviert oder deaktiviert werden sollen, wenn auf ein WebGLFramebuffer gezeichnet oder gerendert wird.
WebGLRenderingContext.cullFace(): Gibt an, ob Vorder- und/oder Rückseitenpolygone ausgelassen werden können.
WebGLRenderingContext.depthFunc(): Gibt eine Funktion an, die die eingehende Pixeltiefe mit dem aktuellen Tiefenpufferwert vergleicht.
WebGLRenderingContext.depthMask(): Legt fest, ob das Schreiben in den Tiefenpuffer aktiviert oder deaktiviert ist.
WebGLRenderingContext.depthRange(): Gibt die Tiefenbereichstransformation 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 als Vorder- oder Rückseiten angesehen werden, indem eine Wickelrichtung festgelegt wird.
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 ist oder nicht.
WebGLRenderingContext.lineWidth(): Legt die Linienstärke von rasterisierten Linien fest.
WebGLRenderingContext.pixelStorei(): Gibt die Pixel-Speichermodi an.
WebGLRenderingContext.polygonOffset(): Gibt die Skalierungsfaktoren und Einheiten zur Berechnung von Tiefenwerten an.
WebGLRenderingContext.sampleCoverage(): Gibt Multi-Sample-Coverage-Parameter für Antialiasing-Effekte an.
WebGLRenderingContext.stencilFunc(): Setzt sowohl die vorderseitige als auch die rückseitige Funktion und den Referenzwert für Stencil-Tests.
WebGLRenderingContext.stencilFuncSeparate(): Setzt die vorder- und/oder rückseitige Funktion und den Referenzwert für Stencil-Tests.
WebGLRenderingContext.stencilMask(): Steuert das Aktivieren und Deaktivieren des Vorder- und Rückseitenschreibens von einzelnen Bits in den Stencil-Ebenen.
WebGLRenderingContext.stencilMaskSeparate(): Steuert das Aktivieren und Deaktivieren des Vorder- und/oder Rückseitenschreibens von einzelnen Bits in den Stencil-Ebenen.
WebGLRenderingContext.stencilOp(): Setzt die vorder- und rückseitigen Stencil-Test-Aktionen.
WebGLRenderingContext.stencilOpSeparate(): Setzt die vorder- und/oder rückseitigen Stencil-Test-Aktionen.

Puffer

WebGLRenderingContext.bindBuffer(): Bindet ein WebGLBuffer Objekt an ein gegebenes Ziel.
WebGLRenderingContext.bufferData(): Aktualisiert Pufferdaten.
WebGLRenderingContext.bufferSubData(): Aktualisiert Pufferdaten ab einem angegebenen 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(): Verbindet ein WebGLRenderingBuffer Objekt mit einem WebGLFrameBuffer Objekt.
WebGLRenderingContext.framebufferTexture2D(): Verbindet ein Texturbild mit einem WebGLFrameBuffer Objekt.
WebGLRenderingContext.getFramebufferAttachmentParameter(): Gibt Informationen über das 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 einen Renderbuffer-Datenspeicher.

Texturen

WebGLRenderingContext.bindTexture(): Bindet ein WebGLTexture Objekt an ein gegebenes Ziel.
WebGLRenderingContext.compressedTexImage2D(): Gibt ein 2D-Texturbild in einem komprimierten Format an.
WebGLRenderingContext.compressedTexSubImage2D(): Gibt ein 2D-Textur-Subimage in einem komprimierten Format an.
WebGLRenderingContext.copyTexImage2D(): Kopiert ein 2D-Texturbild.
WebGLRenderingContext.copyTexSubImage2D(): Kopiert ein 2D-Textur-Subimage.
WebGLRenderingContext.createTexture(): Erstellt ein WebGLTexture Objekt.
WebGLRenderingContext.deleteTexture(): Löscht ein WebGLTexture Objekt.
WebGLRenderingContext.generateMipmap(): Generiert eine Menge 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 das übergebene WebGLTexture gültig ist.
WebGLRenderingContext.texImage2D(): Gibt ein 2D-Texturbild an.
WebGLRenderingContext.texSubImage2D(): Aktualisiert ein Teilrechteck der aktuellen WebGLTexture.
WebGLRenderingContext.texParameterf(): Setzt Texturparameter.
WebGLRenderingContext.texParameteri(): Setzt Texturparameter.

Programme und Shader

WebGLRenderingContext.attachShader(): Verbindet einen WebGLShader mit einem WebGLProgram.
WebGLRenderingContext.bindAttribLocation(): Bindet einen generischen Vertex-Index an eine benannte Attribut-Variable.
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 der WebGLShader Objekte zurück, die mit einem WebGLProgram verbunden 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 Präzision für das numerische Format des Shaders beschreibt.
WebGLRenderingContext.getShaderInfoLog(): Gibt das Informationsprotokoll für ein WebGLShader Objekt zurück.
WebGLRenderingContext.getShaderSource(): Gibt den Quellcode eines WebGLShader als Zeichenkette 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(): Verlinkt das übergebene WebGLProgram Objekt.
WebGLRenderingContext.shaderSource(): Setzt den Quellcode in einem WebGLShader.
WebGLRenderingContext.useProgram(): Nutzt das angegebene WebGLProgram als Teil des aktuellen Rendering-Zustands.
WebGLRenderingContext.validateProgram(): Validiert ein WebGLProgram.

Uniforms 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 Attribut-Variable zurück.
WebGLRenderingContext.getActiveUniform(): Gibt Informationen über eine aktive Uniform-Variable zurück.
WebGLRenderingContext.getAttribLocation(): Gibt den Ort einer Attribut-Variable zurück.
WebGLRenderingContext.getUniform(): Gibt den Wert einer Uniform-Variable an einem bestimmten Ort zurück.
WebGLRenderingContext.getUniformLocation(): Gibt den Ort einer Uniform-Variable zurück.
WebGLRenderingContext.getVertexAttrib(): Gibt Informationen über ein Vertex-Attribut an einer angegebenen Position zurück.
WebGLRenderingContext.getVertexAttribOffset(): Gibt die Adresse eines bestimmten Vertex-Attributs zurück.
WebGLRenderingContext.uniform[1234][fi][v](): Gibt einen Wert für eine Uniform-Variable an.
WebGLRenderingContext.uniformMatrix[234]fv(): Gibt einen Matrixwert für eine Uniform-Variable 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.

Zeichenpuffer

WebGLRenderingContext.clear(): Löscht spezifizierte Puffer zu voreingestellten Werten.
WebGLRenderingContext.drawArrays(): Rendert Primitive aus Array-Daten.
WebGLRenderingContext.drawElements(): Rendert Primitive aus Element-Array-Daten.
WebGLRenderingContext.finish(): Blockiert die Ausführung, bis alle vorher aufgerufenen Befehle beendet sind.
WebGLRenderingContext.flush(): Leert verschiedene Pufferbefehle, wodurch 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, zu dem beim Importieren von Texturen konvertiert werden soll.

Umgang mit Erweiterungen

Diese Methoden verwalten WebGL-Erweiterungen:

WebGLRenderingContext.getSupportedExtensions(): Gibt ein Array von Zeichenfolgen zurück, die alle unterstützten WebGL-Erweiterungen enthalten.
WebGLRenderingContext.getExtension(): Gibt ein Erweiterungsobjekt zurück.

Spezifikationen

Spezifikation
WebGL Specification # 5.14

Browser-Kompatibilität

Siehe auch

HTMLCanvasElement

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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