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 Schnittstelle WebGLRenderingContext stellt einen Zugang zum OpenGL-ES-2.0-Grafik-Rendering-Kontext für die Zeichenfläche eines HTML-Elements <canvas> bereit.

Um einen WebGL-Kontext für das Rendern von 2D- und/oder 3D-Grafiken zu erhalten, rufen Sie getContext() für ein <canvas>-Element auf und übergeben Sie "webgl" als Argument:

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

Sobald Sie den WebGL-Rendering-Kontext für eine Canvas-Zeichenfläche haben, können Sie darin rendern. Das WebGL-Tutorial enthält weitere Informationen, Beispiele und Ressourcen für den Einstieg in WebGL.

Wenn Sie einen WebGL-2.0-Kontext benötigen, lesen Sie die Dokumentation zu WebGL2RenderingContext. Diese Schnittstelle bietet Zugang zu einer Implementierung von OpenGL ES 3.0.

Konstanten

Siehe die Seite zu WebGL-Konstanten.

Der WebGL-Kontext

Die folgenden Eigenschaften und Methoden stellen allgemeine Informationen und Funktionen für die Arbeit mit dem WebGL-Kontext bereit:

WebGLRenderingContext.canvas Schreibgeschützt: Ein Rückverweis auf das HTMLCanvasElement. Kann null sein, wenn der Kontext keinem <canvas>-Element zugeordnet ist.
WebGLRenderingContext.drawingBufferWidth Schreibgeschützt: Die Breite des aktuellen Zeichenpuffers. Sie sollte der Breite des Canvas-Elements entsprechen, das diesem Kontext zugeordnet ist.
WebGLRenderingContext.drawingBufferHeight Schreibgeschützt: Die Höhe des aktuellen Zeichenpuffers. Sie sollte der Höhe des Canvas-Elements entsprechen, das diesem Kontext zugeordnet ist.
WebGLRenderingContext.getContextAttributes(): Gibt ein WebGLContextAttributes-Objekt mit den tatsächlichen Kontextparametern zurück. Kann null zurückgeben, wenn der Kontext verloren gegangen ist.
WebGLRenderingContext.isContextLost(): Gibt true zurück, wenn der Kontext verloren gegangen ist, andernfalls false.
WebGLRenderingContext.makeXRCompatible(): Stellt sicher, dass der Kontext mit der XR-Hardware der nutzenden Person kompatibel ist. Falls nötig, wird der Kontext dazu mit einer neuen Konfiguration neu erstellt. So kann eine Anwendung zunächst mit einer herkömmlichen 2D-Darstellung starten und später in einen VR- oder AR-Modus wechseln.

Ansichtsbereich und Clipping

WebGLRenderingContext.scissor(): Definiert die Scissor-Box.
WebGLRenderingContext.viewport(): Legt den Ansichtsbereich fest.

Zustandsinformationen

WebGLRenderingContext.activeTexture(): Wählt die aktive Textureinheit aus.
WebGLRenderingContext.blendColor(): Legt die Quell- und Zielmischfaktoren fest.
WebGLRenderingContext.blendEquation(): Legt sowohl für die RGB-Mischgleichung als auch für die Alpha-Mischgleichung dieselbe Gleichung fest.
WebGLRenderingContext.blendEquationSeparate(): Legt die RGB-Mischgleichung und die Alpha-Mischgleichung getrennt fest.
WebGLRenderingContext.blendFunc(): Definiert, welche Funktion für die arithmetische Mischung von Pixeln verwendet wird.
WebGLRenderingContext.blendFuncSeparate(): Definiert getrennt für RGB- und Alpha-Komponenten, welche Funktion für die arithmetische Mischung von Pixeln 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 beim Zeichnen oder Rendern in einen WebGLFramebuffer aktiviert oder deaktiviert werden.
WebGLRenderingContext.cullFace(): Gibt an, ob Polygone mit Vorder- und/oder Rückseite verworfen werden können.
WebGLRenderingContext.depthFunc(): Gibt eine Funktion an, die die Tiefe eingehender Pixel mit dem aktuellen Wert im Tiefenpuffer vergleicht.
WebGLRenderingContext.depthMask(): Legt fest, ob das Schreiben in den Tiefenpuffer aktiviert oder deaktiviert ist.
WebGLRenderingContext.depthRange(): Gibt die Abbildung des Tiefenbereichs von normalisierten Gerätekoordinaten auf Fenster- oder Ansichtsbereichskoordinaten an.
WebGLRenderingContext.disable(): Deaktiviert bestimmte WebGL-Funktionen für diesen Kontext.
WebGLRenderingContext.enable(): Aktiviert bestimmte WebGL-Funktionen für diesen Kontext.
WebGLRenderingContext.frontFace(): Legt anhand einer Umlaufrichtung fest, ob Polygone mit ihrer Vorder- oder Rückseite zugewandt 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. Wie diese Hinweise interpretiert werden, hängt von der Implementierung ab.
WebGLRenderingContext.isEnabled(): Prüft, ob eine bestimmte WebGL-Funktion für diesen Kontext aktiviert ist.
WebGLRenderingContext.lineWidth(): Legt die Linienbreite gerasterter Linien fest.
WebGLRenderingContext.pixelStorei(): Gibt die Modi für die Pixelspeicherung an.
WebGLRenderingContext.polygonOffset(): Gibt die Skalierungsfaktoren und Einheiten zur Berechnung von Tiefenwerten an.
WebGLRenderingContext.sampleCoverage(): Gibt Multisample-Coverage-Parameter für Anti-Aliasing-Effekte an.
WebGLRenderingContext.stencilFunc(): Legt sowohl für Vorder- als auch für Rückseiten die Funktion und den Referenzwert für den Stencil-Test fest.
WebGLRenderingContext.stencilFuncSeparate(): Legt für Vorder- und/oder Rückseiten die Funktion und den Referenzwert für den Stencil-Test fest.
WebGLRenderingContext.stencilMask(): Steuert für Vorder- und Rückseiten, ob einzelne Bits in den Stencil-Ebenen geschrieben werden können.
WebGLRenderingContext.stencilMaskSeparate(): Steuert für Vorder- und/oder Rückseiten, ob einzelne Bits in den Stencil-Ebenen geschrieben werden können.
WebGLRenderingContext.stencilOp(): Legt die Aktionen des Stencil-Tests sowohl für Vorder- als auch für Rückseiten fest.
WebGLRenderingContext.stencilOpSeparate(): Legt die Aktionen des Stencil-Tests für Vorder- und/oder Rückseiten fest.

Puffer

WebGLRenderingContext.bindBuffer(): Bindet ein WebGLBuffer-Objekt an ein angegebenes Ziel.
WebGLRenderingContext.bufferData(): Aktualisiert Pufferdaten.
WebGLRenderingContext.bufferSubData(): Aktualisiert 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 booleschen Wert zurück, der angibt, ob der übergebene Puffer gültig ist.

Framebuffer

WebGLRenderingContext.bindFramebuffer(): Bindet ein WebGLFrameBuffer-Objekt an ein angegebenes 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 booleschen Wert zurück, der angibt, ob das übergebene WebGLFrameBuffer-Objekt gültig ist.
WebGLRenderingContext.readPixels(): Liest einen Pixelblock aus dem WebGLFrameBuffer.

Renderbuffer

WebGLRenderingContext.bindRenderbuffer(): Bindet ein WebGLRenderBuffer-Objekt an ein angegebenes 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 booleschen Wert zurück, der angibt, ob der übergebene WebGLRenderingBuffer gültig ist.
WebGLRenderingContext.renderbufferStorage(): Erstellt einen Datenspeicher für einen Renderbuffer.

Texturen

WebGLRenderingContext.bindTexture(): Bindet ein WebGLTexture-Objekt an ein angegebenes Ziel.
WebGLRenderingContext.compressedTexImage2D(): Gibt ein 2D-Texturbild in einem komprimierten Format an.
WebGLRenderingContext.compressedTexSubImage2D(): Gibt ein 2D-Texturteilbild in einem komprimierten Format an.
WebGLRenderingContext.copyTexImage2D(): Kopiert ein 2D-Texturbild.
WebGLRenderingContext.copyTexSubImage2D(): Kopiert ein 2D-Texturteilbild.
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 booleschen Wert zurück, der angibt, ob die übergebene WebGLTexture gültig ist.
WebGLRenderingContext.texImage2D(): Gibt ein 2D-Texturbild an.
WebGLRenderingContext.texSubImage2D(): Aktualisiert einen rechteckigen Teilbereich der aktuellen WebGLTexture.
WebGLRenderingContext.texParameterf(): Legt Texturparameter fest.
WebGLRenderingContext.texParameteri(): Legt Texturparameter fest.

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 ab.
WebGLRenderingContext.getAttachedShaders(): Gibt eine Liste der WebGLShader-Objekte 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 Zeichenfolge zurück.
WebGLRenderingContext.isProgram(): Gibt einen booleschen Wert zurück, der angibt, ob das übergebene WebGLProgram gültig ist.
WebGLRenderingContext.isShader(): Gibt einen booleschen Wert zurück, der angibt, ob der übergebene WebGLShader gültig ist.
WebGLRenderingContext.linkProgram(): Linkt das übergebene WebGLProgram-Objekt.
WebGLRenderingContext.shaderSource(): Legt den Quellcode eines WebGLShader fest.
WebGLRenderingContext.useProgram(): Verwendet 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 angegebenen Position.
WebGLRenderingContext.enableVertexAttribArray(): Aktiviert ein Vertex-Attribut-Array an einer angegebenen Position.
WebGLRenderingContext.getActiveAttrib(): Gibt Informationen über eine aktive Attributvariable zurück.
WebGLRenderingContext.getActiveUniform(): Gibt Informationen über eine aktive Uniform-Variable zurück.
WebGLRenderingContext.getAttribLocation(): Gibt die Position einer Attributvariablen zurück.
WebGLRenderingContext.getUniform(): Gibt den Wert einer Uniform-Variablen an einer angegebenen Position zurück.
WebGLRenderingContext.getUniformLocation(): Gibt die Position einer Uniform-Variablen zurück.
WebGLRenderingContext.getVertexAttrib(): Gibt Informationen über ein Vertex-Attribut an einer angegebenen Position zurück.
WebGLRenderingContext.getVertexAttribOffset(): Gibt die Adresse eines angegebenen 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(): Setzt angegebene Puffer auf voreingestellte Werte zurück.
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 die Befehlswarteschlange des Puffers, 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 beim Importieren von Texturen konvertiert wird.

Mit Erweiterungen arbeiten

Diese Methoden verwalten WebGL-Erweiterungen:

WebGLRenderingContext.getSupportedExtensions(): Gibt ein Array aus Zeichenfolgen zurück, das alle unterstützten WebGL-Erweiterungen enthält.
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