WebGL - Modell zeichnen

Nachdem die Puffer den Shadern zugeordnet wurden, besteht der letzte Schritt darin, die erforderlichen Grundelemente zu zeichnen. WebGL bietet zwei Methoden, nämlichdrawArrays() und drawElements() Modelle zeichnen.

drawArrays ()

drawArrays()ist die Methode, mit der Modelle mithilfe von Scheitelpunkten gezeichnet werden. Hier ist seine Syntax -

void drawArrays(enum mode, int first, long count)

Diese Methode verwendet die folgenden drei Parameter:

mode- In WebGL werden Modelle mit primitiven Typen gezeichnet. Im Modus müssen Programmierer einen der von WebGL bereitgestellten primitiven Typen auswählen. Die möglichen Werte für diese Option sind - gl.POINTS, gl.LINE_STRIP, gl.LINE_LOOP, gl.LINES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN und gl.TRIANGLES.
first- Diese Option gibt das Startelement in den aktivierten Arrays an. Es kann kein negativer Wert sein.
count - Diese Option gibt die Anzahl der zu rendernden Elemente an.

Wenn Sie ein Modell mit zeichnen drawArrays() Methode, dann erstellt WebGL beim Rendern der Formen die Geometrie in der Reihenfolge, in der die Scheitelpunktkoordinaten definiert sind.

Beispiel

Wenn Sie ein einzelnes Dreieck mit zeichnen möchten drawArray() Methode, dann müssen Sie drei Eckpunkte übergeben und die aufrufen drawArrays() Methode, wie unten gezeigt.

var vertices = [-0.5,-0.5, -0.25,0.5, 0.0,-0.5,];
gl.drawArrays(gl.TRIANGLES, 0, 3);

Es wird ein Dreieck wie unten gezeigt erzeugt.

Angenommen, Sie möchten zusammenhängende Dreiecke zeichnen, dann müssen Sie die nächsten drei Scheitelpunkte der Reihe nach im Scheitelpunktpuffer übergeben und die Anzahl der zu rendernden Elemente als 6 angeben.

var vertices = [-0.5,-0.5, -0.25,0.5, 0.0,-0.5, 0.0,-0.5, 0.25,0.5, 0.5,-0.5,];
gl.drawArrays(gl.TRIANGLES, 0, 6);

Es wird ein zusammenhängendes Dreieck erzeugt, wie unten gezeigt.

drawElements ()

drawElements()ist die Methode, mit der Modelle mithilfe von Scheitelpunkten und Indizes gezeichnet werden. Die Syntax lautet wie folgt:

void drawElements(enum mode, long count, enum type, long offset)

Diese Methode verwendet die folgenden vier Parameter:

mode- WebGL-Modelle werden mit primitiven Typen gezeichnet. Im Modus müssen Programmierer einen der von WebGL bereitgestellten primitiven Typen auswählen. Die Liste der möglichen Werte für diese Option lautet: gl.POINTS, gl.LINE_STRIP, gl.LINE_LOOP, gl.LINES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN und gl.TRIANGLES.
count - Diese Option gibt die Anzahl der zu rendernden Elemente an.
type - Diese Option gibt den Datentyp der Indizes an, die UNSIGNED_BYTE oder UNSIGNED_SHORT sein müssen.
offset- Diese Option gibt den Startpunkt für das Rendern an. Es ist normalerweise das erste Element (0).

Wenn Sie ein Modell mit zeichnen drawElements()Methode, dann sollte das Indexpufferobjekt zusammen mit dem Scheitelpunktpufferobjekt erstellt werden. Wenn Sie diese Methode verwenden, werden die Scheitelpunktdaten einmal verarbeitet und so oft verwendet, wie in den Indizes angegeben.

Beispiel

Wenn Sie ein einzelnes Dreieck mit Indizes zeichnen möchten, müssen Sie die Indizes zusammen mit den Scheitelpunkten übergeben und die aufrufen drawElements() Methode wie unten gezeigt.

var vertices = [ -0.5,-0.5,0.0, -0.25,0.5,0.0, 0.0,-0.5,0.0 ];
var indices = [0,1,2];

gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0);

Es wird die folgende Ausgabe erzeugt -

Wenn Sie ansteckende Dreiecke mit zeichnen möchten drawElements() Methode, fügen Sie einfach die anderen Scheitelpunkte hinzu und erwähnen Sie die Indizes für die verbleibenden Scheitelpunkte.

var vertices = [
   -0.5,-0.5,0.0,
   -0.25,0.5,0.0,
   0.0,-0.5,0.0,
   0.25,0.5,0.0,
   0.5,-0.5,0.0 
];

var indices = [0,1,2,2,3,4];

gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT,0);

Es wird die folgende Ausgabe erzeugt -

Erforderliche Operationen

Bevor Sie ein Grundelement zeichnen, müssen Sie einige Operationen ausführen, die im Folgenden erläutert werden.

Löschen Sie die Leinwand

Zunächst sollten Sie die Leinwand mit löschen clearColor()Methode. Sie können die RGBA-Werte einer gewünschten Farbe als Parameter an diese Methode übergeben. Dann löscht WebGL die Leinwand und füllt sie mit der angegebenen Farbe. Daher können Sie diese Methode zum Einstellen der Hintergrundfarbe verwenden.

Schauen Sie sich das folgende Beispiel an. Hier übergeben wir den RGBA-Wert der grauen Farbe.

gl.clearColor(0.5, 0.5, .5, 1);

Tiefentest aktivieren

Aktivieren Sie den Tiefentest mit enable() Methode, wie unten gezeigt.

gl.enable(gl.DEPTH_TEST);

Löschen Sie das Farbpufferbit

Löschen Sie die Farbe sowie den Tiefenpuffer mit dem clear() Methode, wie unten gezeigt.

gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

Stellen Sie den Ansichtsport ein

Das Ansichtsfenster stellt einen rechteckigen sichtbaren Bereich dar, der die Renderergebnisse des Zeichenpuffers enthält. Sie können die Abmessungen des Ansichtsfensters mithilfe von festlegenviewport()Methode. Im folgenden Code werden die Abmessungen des Ansichtsfensters auf die Canvas-Abmessungen festgelegt.

gl.viewport(0,0,canvas.width,canvas.height);