Quelltext der Seite 2D Engine Tutorial: 2. Vierecke

== Vorwort ==
In diesem Tutorial geht es um das Rendern von Vierecken, dass mag auf den ersten Blick relativ unspannend klingen, aber es hilft den eigentlichen Renderprozess von OpenGL zu verstehen.
Als Grundlage dient der Code aus dem ersten Tutorial den ich hier nicht noch einmal durchkauen werde. Der erste Teil dieser Reihe sollte also gelesen und verstanden worden sein bevor es nun hier weitergeht: [[2D Engine Tutorial: 1. Primtive]]<br/>
Aktuell sieht das ganze so aus: Wir haben drei Vertices mit jeweils zwei Koordinaten, diese werden als ein Polygon von glDrawArrays(); in den Forebuffer gezeichnet. Als Modus für glDrawArrays(); benutzen wir aktuell GL_TRIANGLES. Es gibt aber noch mehr Modi in denen man das Rendern beeinflussen kann, alle haben ihre vor und Nachteile und genau die werden wir nun anhand eines praktischen Beispiels durchgehen. Das Ziel ist immer mit dem gewählten Modus aus unserem Dreieck ein Viereck zu machen.

__TOC__

== Das Rendering mit Dreiecken ==
Das Rendering mit Dreiecken ist die wohl üblichste Form des Renderings. Ein Polygon setzt sich dabei immer aus drei Vertices zusammen, der Vorteil ist das praktisch alle Grafikkarten auf das Rendering mit Dreiecken ausgelegt sind. Dementsprechend sind die folgenden Modi die schnellsten, allerdings kann das Rendern von konvexen Objekten auf Basis von Dreiecken deutlich komplizierter werdern als das Rendern mit anderen Formen.<br/>
Trotz dieses Nachteils lege ich wirklich jedem ans Herz auf Basis von Dreiecken zur rendern!

=== GL_TRIANGLES ===
Das ist der Modus in dem wir aktuell rendern, er ist der simpelste von allen, da er immer drei Vertices nimmt und daraus ein Polygon macht. Die Anzahl der benötigten Vertices für diesen Modus ist also immer ein vielfaches von drei. Sollten zum Beispiel nur fünf Vertices zum zeichnen vorhanden sein, rendert GL_TRIANGLES nur die ersten drei Vertices und lässt die übrigen zwei weg.<br/>
[[Datei:GLTRIANGLES.png]]<br/>
(Beispiel mit 6 Vertices, die Zahlen geben dabei jeweils die Vertexnummer an)


Um also ein Viereck zu rendern, brauchen wir mit GL_TRIANGLES 6 Vertices. Im code sieht das dann so aus:
<source lang="cpp">

const GLfloat vertices[12] = {0.0f, 200.0f, // Oben links - Erstes Polygon
                            0.0f, 0.0f, // Unten links
                            200.0f, 200.0f, // Oben rechts
                            200.0f, 0.0f, // Unten rechts - Zweites Polygon
                            200.0f, 200.0f, // Oben rechts
                            0.0f, 0.0f}; // Unten links

const GLfloat colorArray[18] = {0.0f, 1.0f, 0.0f, // Genau wie bei den Vertices
                                1.0f, 0.0f, 0.0f,
                                0.0f, 0.0f, 1.0f,
                                0.5f, 0.5f, 0.5f,
                                0.0f, 0.0f, 1.0f,
                                1.0f, 0.0f, 0.0f};

[...]
// Draw Funktion
glDrawArrays(GL_TRIANGLES, 0, 6);
</source>
Ziemlich umständlich um ein Viereck zu rendern, vor allem da sich vier Vertices wiederholen. Deswegen ist dieser Modus nicht wirklich geeignet um viele zusammenhängende Polygone am Stück zu zeichnen. Das Ergebnis mit GL_TRIANGLES sieht so aus:<br/>
[[Datei:GLTRIANGLESResult.png]]<br/>
(Die Verbindung der Vertices ist als schwarze Linie eingezeichnet)

=== GL_TRIANGLE_STRIP ===
GL_TRIANGLE_STRIP ist der schnellste Rendermodus in OpenGL, dabei werden die übergebenen Vertices als zusammenhängende Polygone gezeichnet. Die ersten drei Vertices werden dabei noch als normales Dreieck gerendert, für jeden weiteren Vertex der dazu kommt, wird ein neues Polygon aus den letzten beiden Vertices und dem neuen Vertex gebildet.<br/>
[[Datei:GLTRIANGLESTRIP.png]]<br>
(Beispiel mit 8 Vertices die zu drei Vierecken verbunden werden).

Um ein Viereck zu rendern benötigt man mit GL_TRIANGLE_STRIP vier Vertices:
<source lang="cpp">
const GLfloat vertices[8] = {0.0f, 200.0f, // Oben links
                            0.0f, 0.0f,  // Unten links
                            200.0f, 200.0f, // Oben rechts
                            200.0f, 0.0f}; // Unten rechts

const GLfloat colorArray[12] = {0.0f, 1.0f, 0.0f,
                                1.0f, 0.0f, 0.0f,
                                0.0f, 0.0f, 1.0f,
                                0.5f, 0.5f, 0.5f};

[...]
// Draw Funktion
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
</source>


=== GL_TRIANGLE_FAN ===
GL_TRIANGLE_FAN zeichnet wie GL_TRIANGLE_STRIP alle Vertices als zusammenhängende Polygone, allerdings benutzt es dabei nicht die letzen beiden Vertices um mit dem neuen Vertex ein Polygon zu zeichnen, sondern nutzt jeweils den neuen Vertex mit dem voherigen zum ersten Vertex. Die ersten drei Vertices werden aber auch bei GL_TRIANGLE_FAN als ein Dreieck gerendert.<br/>
[[Datei:GLTRIANGLEFAN.png]]<br/>
(Sechs Vertices bilden ein konvexes Objekt)

Um ein Viereck zu rendern benötigt man auch mit GL_TRIANGLE_FAN nur vier Vertices:
<source lang="cpp">
const GLfloat vertices[8] = {0.0f, 200.0f, // Oben links
                            0.0f, 0.0f,  // Unten links
                            200.0f, 0.0f,// Unten rechts
                            200.0f, 200.0f}; // Oben rechts

const GLfloat colorArray[12] = {0.0f, 1.0f, 0.0f,
                                1.0f, 0.0f, 0.0f,
                                0.5f, 0.5f, 0.5f,
                                0.0f, 0.0f, 1.0f};

[...]
// Draw Funktion
glDrawArrays(GL_TRIANGLE_FAN, 0, 4);
</source>

Das so gezeichnet Viereck sieht dabei so aus:<br/>
[[Datei:GLTRIANGLEFANResult.png]]<br/>
Wie man sieht verläuft die Schnittkante der Polygone dieses mal nicht von unten links nach oben rechts, sondern von oben links nach unten rechts. Dadurch verändert sich auch der Farbverlauf zwischen den Vertices. Das liegt daran das OpenGL nur zwischen den Vertices eines Polygons interpoliert und nicht auf dem kompletten Objekt.

== Das Rendering mit Vierecken ==
OpenGL kann auch nativ Vierecke rendern, dabei benötigt man immer mindestens vier Vertices. Das Problem an Vierecken ist das sie sich teilweise nicht wirklich gut zum Modellieren eignen.

=== GL_QUADS ===
GL_QUADS zeichnet ein Polygon zwischen mindestens vier Vertices. Es kann immer nur ganze Vierecke zeichnen, benötigt also immer ein Vielfaces von vier Vertices. <br/>
[[Datei:GLQUADS.png]]<br/>
(Vier Vertices werden zu einem Viereck)

Der Code zum zeichnen ist:
<source lang="cpp">
const GLfloat vertices[8] = {0.0f, 200.0f, // Oben links
                            0.0f, 0.0f,  // Unten links
                            200.0f, 0.0f,// Unten rechts
                            200.0f, 200.0f}; // Oben rechts

const GLfloat colorArray[12] = {0.0f, 1.0f, 0.0f,
                                1.0f, 0.0f, 0.0f,
                                0.5f, 0.5f, 0.5f,
                                0.0f, 0.0f, 1.0f};

[...]
// Draw Funktion
glDrawArrays(GL_QUADS, 0, 4);
</source>

=== GL_QUAD_STRIP ===
GL_QUAD_STRIP rendert mehrere Vertices als zusammenhängende Polygone, dabei bilden die ersten vier Vertices ein basis Viereck. Danach bilden immer die nächsten zwei Vertices mit den voherigen zwei Vertices ein neues Viereck.<br/>
[[Datei:GLQUADSTRIP.png]]<br/>
(Sechs Vertices bilden zwei Vierecke)

<source lang="cpp">
const GLfloat vertices[8] = {0.0f, 200.0f, // Oben links
                            0.0f, 0.0f,  // Unten links
                            200.0f, 200.0f, // Oben rechts
                            200.0f, 0.0f};// Unten rechts

const GLfloat colorArray[12] = {0.0f, 1.0f, 0.0f,
                                1.0f, 0.0f, 0.0f,
                                0.0f, 0.0f, 1.0f,
                                0.5f, 0.5f, 0.5f};

[...]
// Draw Funktion
glDrawArrays(GL_QUAD_STRIP, 0, 4);
</source>

== Sonstige render Modi ==
Natürlich kennt OpenGL noch weitere Modi zum rendern, diese bilden aber (bis auf GL_POLYGON) keine Flächen und bekommen deswegen kein praktisches Code Beispiel dazu.

=== GL_POINTS ===
GL_POINTS behandelt jeden einzelnen Vertex als Punkt. Zwischen den einzelnen Vertices muss keine Verbindung bestehen.<br/>
Die größe eines Punktes kann man über glPointSize(GLfoat); angeben, wobei der default Wert 1.0f ist.

=== GL_LINES ===
Zeichnet zwischen jeweils zwei Vertices eine Linie. Die Anzahl der Vertices muss eine Vielzahl von zwei sein.<br/>
Die dicke einer Linie kann man über glLineWidth(GLfloat); angeben, der default Wert ist 1.0f.

=== GL_LINE_STRIP === 
Zeichnet zwischen zwei Vertices jeweils eine Linie. Nach den ersten zwei Vertices (eine Linie) wird jeweils der nächste Vertex genommen und zwischen dem alten und dem neuen eine Linie gezeichnet.

=== GL_LINE_LOOP ===
Genauso wie GL_LINE_STRIP, nur wird zwischen dem letzten Vertex im Array und dem ersten auch noch eine Line gezeichnet.

=== GL_POLYGON ===
GL_POLYGON ist der langsamste render Modus. Er eignet sich nicht zum zeichnen zusammenhängender Flächen, sondern zeichnet eine Fläche zwischen allen Vertices.<br/>
Da diese Funktion das neu entstandene Polygon wieder in Dreiecke zerlegt ist diese Funktion extrem langsam und sollte nicht genutzt werden wenn es eine andere Möglichkeit gibt!

== Backface Culling ==
Ganz kurz was zum Thema Backface Culling und was das eigentlich ist, Backface Culling beschreibt eine Methode beim rendern die alle Polygone gar nicht erst zeichnet die man eh nicht sieht. Um zur Sichtbarkeitsberechnung keine komplexen Algorithmen wie das Raytracing zu benutzen (da diese mehr Performance kosten als sie im besten Fall einbringen) benutzt man dazu die Art wie die Polygone gezeichnet wurden. Die Polygone die gegen den Uhrzeigersinn übergeben werden (GL_CCW), werden gezeichnet, wohingegen die Polygone die im Uhrzeigersinn übergeben werden nicht gezeichnet werden (GL_CW). <br/>
Durch glFrontFace(Glenum); kann man selber bestimmen welche Polygon Seite dem Backface Culling zum Opfer fällt, erlaubte Parameter sind GL_CCW (default; Gegen den Uhrzeigersinn) und GL_CW (Im Uhrzeigersinn), einschalten lässt sich Backface Culling über glEnable(GL_CULL_FACE);