WebGL - Kontext

Um eine WebGL-Anwendung zu schreiben, müssen Sie zunächst das WebGL-Rendering-Kontextobjekt abrufen. Dieses Objekt interagiert mit dem WebGL-Zeichenpuffer und kann alle WebGL-Methoden aufrufen. Die folgenden Vorgänge werden ausgeführt, um den WebGL-Kontext abzurufen:

Erstellen Sie eine HTML-5-Zeichenfläche
Holen Sie sich die Canvas-ID
Erhalten Sie WebGL

Erstellen eines HTML-5-Canvas-Elements

In Kapitel 5 haben wir erläutert, wie ein HTML-5-Canvas-Element erstellt wird. Schreiben Sie im Hauptteil des HTML-5-Dokuments eine Zeichenfläche, geben Sie ihr einen Namen und übergeben Sie sie als Parameter an die Attribut-ID. Sie können die Abmessungen der Leinwand mithilfe der Attribute width und height definieren (optional).

Beispiel

Das folgende Beispiel zeigt, wie Sie ein Canvas-Element mit den Abmessungen 500 × 500 erstellen. Wir haben mit CSS einen Rahmen für die Canvas erstellt, um die Sichtbarkeit zu gewährleisten. Kopieren Sie den folgenden Code und fügen Sie ihn in eine Datei mit dem Namen einmy_canvas.html.

<!DOCTYPE HTML>
<html>
   <head>
      <style>
         #mycanvas{border:1px solid blue;}
      </style>
   </head>
   <body>
      <canvas id = "mycanvas" width = "300" height = "300"></canvas>
   </body>
</html>

Es wird das folgende Ergebnis erzeugt -

Holen Sie sich die Canvas ID

Nach dem Erstellen der Zeichenfläche müssen Sie den WebGL-Kontext abrufen. Das erste, was Sie tun müssen, um einen WebGL-Zeichnungskontext zu erhalten, ist, die ID des aktuellen Canvas-Elements abzurufen.

Die Canvas-ID wird durch Aufrufen der DOM-Methode (Document Object Model) ermittelt getElementById(). Diese Methode akzeptiert einen Zeichenfolgenwert als Parameter, daher übergeben wir den Namen der aktuellen Zeichenfläche.

Zum Beispiel, wenn der Canvas-Name lautet my_canvasDann wird die Canvas-ID wie unten gezeigt erhalten

var canvas = document.getElementById('my_Canvas');

Rufen Sie den WebGL-Zeichnungskontext ab

Um das WebGLRenderingContext-Objekt (oder das WebGL Drawing-Kontextobjekt oder einfach den WebGL-Kontext) abzurufen, rufen Sie das auf getContext() Methode des Stroms HTMLCanvasElement. Die Syntax von getContext () lautet wie folgt:

canvas.getContext(contextType, contextAttributes);

Übergeben Sie die Saiten webgl oder experimental-webgl als die contentType. DascontextAttributesParameter ist optional. (Stellen Sie in diesem Schritt sicher, dass Ihr Browser WebGL Version 1 (OpenGL ES 2.0) implementiert .)

Das folgende Codefragment zeigt, wie Sie den WebGL-Rendering-Kontext erhalten. Hiergl ist die Referenzvariable für das erhaltene Kontextobjekt.

var canvas = document.getElementById('my_Canvas');
var gl = canvas.getContext('experimental-webgl');

WebGLContextAttributes

Der Parameter WebGLContextAttributesist nicht obligatorisch. Dieser Parameter bietet verschiedene Optionen, die Boolesche Werte akzeptieren, wie unten aufgeführt -

Sr.Nr.	Attribute & Beschreibung
1	Alpha Wenn der Wert true ist, wird der Zeichenfläche ein Alpha-Puffer bereitgestellt. Standardmäßig ist der Wert true.
2	depth Wenn der Wert true ist, erhalten Sie einen Zeichenpuffer, der einen Tiefenpuffer von mindestens 16 Bit enthält. Standardmäßig ist der Wert true.
3	stencil Wenn der Wert true ist, erhalten Sie einen Zeichenpuffer, der einen Schablonenpuffer von mindestens 8 Bit enthält. Standardmäßig ist der Wert false.
4	antialias Wenn der Wert true ist, erhalten Sie einen Zeichenpuffer, der ein Anti-Aliasing ausführt. Standardmäßig ist der Wert true.
5	premultipliedAlpha Wenn der Wert true ist, erhalten Sie einen Zeichenpuffer, der Farben mit vormultipliziertem Alpha enthält. Standardmäßig ist der Wert true.
6	preserveDrawingBuffer Wenn der Wert true ist, werden die Puffer nicht gelöscht und behalten ihre Werte bei, bis sie vom Autor gelöscht oder überschrieben werden. Standardmäßig ist der Wert false.

Das folgende Codefragment zeigt, wie Sie einen WebGL-Kontext mit einem Schablonenpuffer erstellen, der nicht funktioniert anti-aliasing.

var canvas = document.getElementById('canvas1');
var context = canvas.getContext('webgl', { antialias: false, stencil: true });

Zum Zeitpunkt der Erstellung des WebGLRenderingContext wird ein Zeichenpuffer erstellt. Das Context-Objekt verwaltet den OpenGL-Status und rendert in den Zeichenpuffer.

WebGLRenderingContext

Es ist die Hauptschnittstelle in WebGL. Es repräsentiert den WebGL-Zeichnungskontext. Diese Schnittstelle enthält alle Methoden, mit denen verschiedene Aufgaben im Zeichenpuffer ausgeführt werden. Die Attribute dieser Schnittstelle sind in der folgenden Tabelle angegeben.

Sr.Nr.	Attribute & Beschreibung
1	Canvas Dies ist ein Verweis auf das Canvas-Element, das diesen Kontext erstellt hat.
2	drawingBufferWidth Dieses Attribut repräsentiert die tatsächliche Breite des Zeichenpuffers. Es kann vom width-Attribut des HTMLCanvasElement abweichen.
3	drawingBufferHeight Dieses Attribut repräsentiert die tatsächliche Höhe des Zeichenpuffers. Es kann vom Höhenattribut des HTMLCanvasElement abweichen.