Quelltext der Seite 2D Engine Tutorial: 1. Primtive

== Vorwort == 
Über die Frage warum man eine eigene 2D Engine schreiben sollte kann man geteilter Meinung sein, Fakt ist allerdings das man dadurch eine Menge über das "wie" von Grafik Engines lernt. Und genau das möchte ich mit diesem Tutorial erreichen, wer mit dieser Tutorial Reihe fertig ist, sollte in der Lage sein zu verstehen wie eine Grafik Engine aufgebaut ist und wie man selbige schreibt. Allerdings sollte euch voher klar sein was dieses Tutorial nicht ist: Es ist kein Anfänger Kurs! Ich werde nicht darauf eingehen was eine Klasse oder ein Pointer ist, auch wird ein gewisses Mathematisches Grundwissen benötigt. Außerdem werde ich nicht jeden Befehl einzeln erklären, ein Grundverständnis der Sprache C++ sollte also vorhanden sein! Auch wird am Ende keine perfekte Spiele Engine rauskommen, sondern eine reine Grafik Engine.<br/>
Der in diesem Tutorial gezeigte Code ist, solange nicht anders gekennzeichnet, immer(!) Crossplattform fähig. Läuft also auf jedem OS das GLUT sowie OpenGL unterstützt.

__TOC__

== Prerequirements ==
Ich werde dieses Tutorial nicht für eine bestimmte IDE schreiben, nutzt das was euch am besten liegt. Das einzige was ihr wirklich braucht ist GLUT und damit auch OpenGL. Da OpenGL nur die Kommunikation mit der Grafikkarte übernimmt, brauchen wir noch etwas was mit dem Fenstermanager unseres Betriebssystems redet um das, was OpenGL rendert auch anzeigen zu können. Genau das macht GLUT (neben ein paar anderen netten Dingen) für uns. Ich gehe in den Beispielen jetzt mal davon aus das der GLUT Header (glut.h) im Verzeichnis <GL/glut.h> liegt.

== Hallo OpenGL ==
Der erste Code ist relativ einfach und auch nur wenige Zeilen lang, er kümmert sich um die initalisierung von GLUT und reinigt den Forebuffer einmal pro Frame:
<source lang="cpp">
#include <GL/glut.h>

#include <stdlib.h>

void draw()
{
    glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
    glClear(GL_COLOR_BUFFER_BIT);

    glutSwapBuffers();
}

int main(int argc, char *argv[])
{
    glutInit(&argc, argv);
    glutInitWindowSize(640,480);
    glutInitDisplayMode(GLUT_RGB);

    glutCreateWindow("Hallo OpenGL");

    glutDisplayFunc(draw);

    glutMainLoop();
}
</source>

Fangen wir mit der main Funktion an, dort steht in der ersten Zeile:
<source lang="cpp">
glutInit(&argc, argv);
</source>
Diese Funktion initialisiert GLUT und OpenGL, die Parameter stimmen mit der, der main Funktion überein, wir übergeben also eine Liste mit Startparametern. Diese Funktion _muss_ vor jeder anderen GLUT/OpenGL Funktion stehen!


<source lang="cpp">
glutInitWindowSize(640,480);
</source>
Diese Funktion setzt die Größe des GLUT Fensters, viel mehr ist eigentlich nicht dazu zu sagen, der erste Parameter gibt die Ausdehnung in X Richtung an, der zweite in Y Richtung.


<source lang="cpp">
glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE);
</source>
Diese Funktion ist interessant, denn hier entscheiden wir uns für die "art" unseres Programms. Die Parameter werden also logische ODER Verknüpfung von GLUT enums übergeben, zur auswahl stehen:
<div align="center">
{| {{Table1}} width="100%"
!width="30%"|Enum
!Beschreibung
|-
|GLUT_RGBA
|Initialisiert das Fenster im RGBA space (das wird standardmäßig getan, auch wenn GLUT_RGB angegeben wird!)
|-
|GLUT_SINGLE
|OpenGL benutzt einen Renderbuffer (standard wenn nicht eine andere Methode gewählt wird!)
|-
|GLUT_DOUBLE
|OpenGL benutzt einen Renderbuffer und einen Backbuffer (empfehlenswert, aber dazu später mehr)
|-
|GLUT_DEPTH
|OpenGL erstellt und nutzt einen Depthbuffer (für eine 2D Engine wird das nicht benötigt, da wir hier keine Tiefe haben und uns das Depthculling sparen können)
|-
|GLUT_STENCIL
|OpenGL erstellt und nutzt einen Stencil Buffer (auch den brauchen wir nicht, in 3D Applikationen kann dieser aber zum Culling oder zum erstellen von einfachen Schatten benutzt werden)
|}
</div>

Das sind soweit erstmal die wichtigsten enums, es gibt zwar noch einige mehr, aber diese sind für uns aktuell eher uninteressant. Kommen wir nochmal kurz zum rendering an sich: Beim rendern der aktuellen Szene zeichnet OpenGL die Szene in einen Buffer. Dieser Buffer soll nun irgendwann auf dem Monitor erscheinen und genau da entsteht ein Problem. Der Monitor benutzt eine eigene Wiederholrate für das anzeigen des aktuellen Bildes, dies hat historische Gründe: Früher, also zu einer Zeit als wir noch Röhrenmonitore benutzt haben, wurde ein Bild aufgebaut indem die Röhre von oben links nach unten rechts das Bild auf den Bildschirm "geschossen" hat. Der Monitor hat also Stück für Stück das Bild aufgebaut, und das so oft gemacht wie die Frequenz eingestellt war (typischerweise 60 Hz). Wenn wir jetzt also nur einen Buffer haben in den die Szene gezeichnet wird, kann es sein das wir hinterher das Ergebnis von mehreren Frames auf dem Bildschirm haben. OpenGL rendert also, der Bildschirm zeichnet einen Teil des Bildes und in der Zwischenzeit hat OpenGL bereits zwei weitere Frames gerendert. Der Monitor zeichnet nun den Rest des Bildes. Wir haben also nun den Inhalt von mehreren Frames auf dem Bildschirm. Diese Artefakte nennt man Tearing Artefakte und sie sind besonders unschön bei schnellen Spielern wie zum Beispiel Shootern.
Um dieses Problem zu lösen wurde das sogenannte Doublebuffering erfunden, dabei werden, auf kosten des VRAMs, zwei Renderbuffer erstellt, ein Forebuffer und ein Backbuffer. Wenn OpenGL nun die aktuelle Szene zeichnet, schreibt OpenGL in den Forebuffer. Der Bildschirm zeichnet aus dem Backbuffer. Wenn nun OpenGL und der Bildschirm fertig sind, werden beide Buffer getauscht. Dh, der Forebuffer wird zum Backbuffer und der Backbuffer zum Forebuffer. Neben einigen Vorteilen bringt diese Methode aber auch zwei Nachteile: 1. Der Speicher Verbrauch steigt um 50% da nun zwei Buffer im VRAM lagern (dieser Nachteil machen aber die großen Grafikspeicher mit über 128 MB locker wett). 2. Die Framerate wird an die Wiederholrate des Monitor gekoppelt. Dieser Nachteil entsteht dadurch dass OpenGL nach dem zeichnen der Szene auf den Monitor wartet bis auch dieser fertig ist um dann die Buffer zu swappen. Dh, die Framerate kann nur weniger oder ein vielfaches der Monitor Wiederholrate sein (nochmal, das ist typischerweise 60 Hz).
Dies alles gilt allerdings nur für den Vollbildmodus, im Fenstermodus wird die Framerate mit der Wiederholrate des Fenstermanagers des Betriebssystems gekoppelt und der "zeichnet" öfter als 60 mal pro Sekunde. Dieser einfache Zusammenhang kann gerade bei Anfängern zu Verwunderung führen, da sie im Vollbildmodus weniger FPS als im Fenstermodus haben.


Zurück zum Quellcode:
<source lang="cpp">
glutCreateWindow("Hallo OpenGL");
</source>
Diese Funktion erstellt das eigentliche Fenster, der Parameter ist ein CString der als Fenstertitel genutzt wird.

<source lang="cpp">
glutDisplayFunc(draw);
</source>
Dieser Aufruf registriert unsere Funktion draw in GLUT. Diese Funktion wird nun immer aufgerufen sobald es Zeit ist die Szene neu zu zeichnen (dazu später mehr). Die Funktion erwartet einen Pointer auf eine Funktion (wie unerwartet ;))

<source lang="cpp">
glutMainLoop();
</source>
Dieser letzte Aufruf startet die GLUT Schleife. Ab dem Punkt kümmert sich GLUT darum das unsere Applikation auf alle OS Events reagiert und kümmert sich auch um die Anbindung zu OpenGL. Die initialisierung ist also damit abgeschloßen, GLUT rennt und wir haben ein Fenster.


Kommen wir nun zur, aktuell, eher langweiligen draw Funktion. Dort haben wir als ersten Aufruf
<source lang="cpp">
glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
</source>
Dieser Aufruf zu OpenGL (zu erkennen an dem gl Prefix) setzt die Farbe mit der der Renderbuffer bereinigt werden soll. OpenGL gibt uns nämlich immer einen unbereinigten Buffer in dem noch die alte Szene lagert. Die Funktion erwartet Farben für alle 4 Kanäle im RGBA Format und als float order anstelle in Byte order. Dh ein Kanal geht nicht von 0-255 sondern von 0.0-1.0!
wir setzen hier die clearColor auf Weiß. (Der Aufruf muss nicht jeden Frame stattfinden, der Übersichtlichkeitshalber hab ich es aber in diesem Fall in die Draw Funktion geschrieben)

<source lang="cpp">
glClear(GL_COLOR_BUFFER_BIT);
</source>
Dieser Aufruf bereinigt die angegeben Buffer. Die Buffer werden hier als logische ODER Verknüpfung von GL_ENUM's übergeben. GL_COLOR_BUFFER_BIT reinigt dabei den Colorbuffer. Da wir keinen weiteren Buffer haben den wir reinigen müssten, ist das in dem Fall auch das einzige enum was wir übergeben.
Der Aufruf geschieht typischerweise _vor_ dem zeichnen der neuen Szene!


<source lang="cpp">
glutSwapBuffers();
</source>
Der Aufruf zu GLUT wechselt unsere beiden Buffer (Forebuffer und Backbuffer) miteinander. Dies geschieht typischerweise erst nach dem zeichnen und ist nur nötig wenn wir GLUT_DOUBLE nutzen.


Wenn wir das ganze nun kompilieren und ausführen, ist das Ergebnis erstmal ernüchternd. Ein einfaches 640x480 Pixel großes, leeres, Fenster. Aber hey, wir nutzen OpenGL zum rendern :)

== Primitive ==
Kommen wir nun zum zeichnen, für den Anfang nichts großartiges, wir zeichnen ein ganz einfaches Dreieck auf den Screen. Ein Objekt auf dem Bildschirm besteht immer aus mindestens einem Polygon, also drei zusammenhängenden Vertices. Für das rendern eines Dreiecks wird also nur ein Polygon bzw. drei Vertices benötigt. Wichtig! OpenGL benutzt ein Linkshändiges Koordinaten System, also 0|0 ist nicht oben links, sondern unten links!
Kommen wir nun zum neuen Code, zuerst einmal gibt es eine neue Funktion:
<source lang="cpp">
void resize(int width, int height)
{
    glLoadIdentity();
    glViewport(0, 0, width, height);

    glMatrixMode(GL_PROJECTION);
    glLoadIdentity();
    glOrtho(0, width, 0, height, -1, 1);

    glMatrixMode(GL_MODELVIEW);
}
</source>
Diese Funktion setzt unsere Projektionsmatrix auf. Die Projektionsmatrix ist wichtig, da sie die Grundlage zum Zeichnen bildet. Die Fixed Function Pipeline (die ich in einem späteren Tutorial noch einmal genau erklären werde) wird auf jedes Polygon diese Projektionsmatrix "draufrechnen" (auch dazu später mehr, ihr müsst erstmal mit diesem Halbwissen leben bis wir uns mit Shadern befassen. Tut mir leid, aber das würde den Rahmen dieses eher simplen Tutorials sprengen).

Zuerst wird folgende OpenGL Funktion aufgerufen:
<source lang="cpp">
glLoadIdentity();
</source>
Diese Funktion erstellt eine neue Identitätsmatrix die als Grundlage für jedes Objekt dient. Die Identitätsmatrix in OpenGL sieht genauso aus wie die aus dem Mathematik Unterricht <br/ >[[Datei:identMatrix.png]]<br />

<source lang="cpp">
glViewport(0, 0, width, height);
</source>
Dieser Aufruf beschreibt das aktuelle Fenster, wir übergeben ihr einfach nur die aktuelle Dimension des Fensters. width und height bekommen wir beim Aufruf der resize Funktion übermittelt, das 0 | 0 sollte eigentlich klar sein.

Kommen wir nun zur eigentlichen Projektionsmatrix, dafür wechseln wir den aktuellen Matrixmodus zur Projektionsmatrix. Das tun wir mittels
<source lang="cpp">
glMatrixMode(GL_PROJECTION);
</source>
Diese Funktion nimmt ein GL_ENUM entgegen und wechselt in den entsprechend angegebenen Matrixmodus. OpenGL ist eine Statemachine, dh, OpenGL bleibt solange in einem Zustand bis man es zu einem anderen zwingt. Das hat einen ganz einfachen Grund, das wechseln eines Zustand kann massive Umrechnungen erforden, die sehr Ressourcen fressend sind, gerade auf Prozessoren die nicht auf Floating point Arithmetik ausgelegt sind! (Die GPU ist das zwar, aber ein Großteil der Zustands berechnung erfolgt auf der CPU) Deswegen sollte man nie Grundlos den Zustand von OpenGL wechseln!

Das wechseln in die Projektionsmatrix ist für uns wichtig weil wir eine Orthogonale Projektion wollen. Eine 3D Projektion hat den Nachteil das sie wirklich versucht den 3D Raum nachzubilden, Objekte in der Mitte sehen zwar flach aus, aber wenn man sie zur Seite schiebt sieht man das sie tiefe haben. Zur verdeutlichung hier ein Bild:
<br/>[[Datei:cubesDepth.png]]<br/>
Würfel mit einer nicht Orthogonalen Projektionsmatrix

<br/>[[Datei:cubesOrtho.png]]<br/>
Würfel mit einer Orthogonalen Projektionsmatrix

Deswegen holen wir uns jetzt erstmal eine neue, leere Matrix, und machen danach folgenden aufruf:
<source lang="cpp">
glOrtho(0, width, 0, height, -1, 1);
</source>
Jetzt wirds leicht kompliziert, wer das nicht mag kann auch gerne diesen Teil überspringen. Prakitsch ist er aber allemal!
glOrtho erstellt eine neue Matrix mit Paralleler-Projektion (Das ist Orthogonale Projektion) und mutlipliziert diese neue Matrix mit der aktuellen (in unserem Fall ist diese leeren, wegen glLoadIdentity ;)) 
Die neue Matrix sieht so aus:<br/>
[[Datei:glOrthoMatrix.png]] <br/>
die Parameter von glOrtho sehen so aus (entsprechend zu der Matrix oben benannt):
<source lang="cpp">
glOrtho(l, r, b, t, n, f);
</source>
n und f geben dabei das Clippingplane an (n = znear, f = zfar), also der Bereich ab dem Geclipped werden soll. Da wir eine flache Projektion haben, können wir alles was einen Z Wert != 0 hat wegclippen.

Als letztes setzen wir den Matrix Modus wieder zurück zur Modellmatrix, wir wollen ja später beim rendern nicht in der Projektionsmatrix rumpfuschen wo die gerade so schön steht.


<br/>
Das nächst was sich verändert ist die main Funktion. Nach glutDisplayFunc(draw); fügen wir nun folgenden Aufruf ein:
<source lang="cpp">
glutReshapeFunc(resize);
</source>
Damit registrieren wir bei GLUT unsere resize Funktion. Diese Funktion wird jetzt immer aufgerufen wenn das Fenster verändert wird. Das ist wichtig damit unsere Projektionsmatrix und der Viewport immer an die aktuelle Fenstergröße angepasst sind. Außerdem wird die Funktion einmal vor dem erstellen des eigentlichen Fensters aufgerufen (was praktisch ist, da wir ansonsten beim Start keine Orthogonale Projektionsmatrix hätten).

<br/>
Das war es auch schon in der main Funktion. Projektionsmatrix stimmt, alles ist vorbereitet, dann können wir ja jetzt endlich was auf den Bildschirm zeichnen. Voher brauchen wir aber noch vertices und ein color Array, damit ihr euch nichts ausdenken müsst, hier ist meins zum kopieren:
<source lang="cpp">
const GLfloat vertices[6] = {0.0f, 0.0f,
                            100.f, 100.0f,
                            200.0f, 0.0f};

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

</source>
Nochmal zur Erinnerung, unser Ziel ist es ein Dreieck zu zeichnen. Dafür brauchen wir exakt ein Polygon, bestehend aus drei Vertices mit jeweils zwei Koordinaten (X | Y). Außerdem soll unser Dreieck ja noch eine Farbe haben (Texturen kommen in einem späteren Teil), wir nutzen für unser Dreieck den RGB Farbraum, also brauchen wir pro Vertex drei Farben (RGB) in Float order. Beides haben wir nun als GLfloat Arrays (GLfloat ist nichts anderes als ein normaler float). Kommen wir nun zur draw Funktion, zwischen dem reinigen des Buffers und dem swappen des Fore- und Backbuffers kommt nun folgender Code:
<source lang="cpp">
    glLoadIdentity();
    glVertexPointer(2, GL_FLOAT, 0, vertices);
    glEnableClientState(GL_VERTEX_ARRAY);

    glColorPointer(3, GL_FLOAT, 0, colorArray);
    glEnableClientState(GL_COLOR_ARRAY);

    glDrawArrays(GL_TRIANGLES, 0, 3);
</source>

Wieder einmal laden wir eine leere Identitätsmatrix (das warum sollte klar sein, falls nicht: Jedes Objekt nutzt eine Identitätsmatrix als Grundlage damit es nicht von voherigen Matrix Berechnungen beeinflußt wird). 
<source lang="cpp">
glVertexPointer(2, GL_FLOAT, 0, vertices);
</source>
Damit geben wir OpenGL einen Pointer zu den Vertices die wir gerne gezeichnet hätten. <br/>
Der erste Parameter gibt an wieviele Koordinaten ein Vertex hat, erlaubte Werte sind 2, 3 oder 4. <br/>
Der zweite Parameter sagt OpenGL den Datentypen in dem die Vertices vorliegen, erwartet wird ein GL_ENUM. Erlaubt ist GL_SHORT, GL_INT, GL_FLOAT und GL_DOUBLE <br/>
Der dritte Parameter gibt den Byteoffset der Vertices an. <br/>
der vierte Parameter ist der Pointer zu den eigentlichen Vertices.

<source lang="cpp">
glEnableClientState(GL_VERTEX_ARRAY);
</source>
Hier aktivieren wir einen neuen Zustand in OpenGL, GL_VERTEX_ARRAY muss immer aktiviert werden wenn man mit Vertices arbeiten will. Das Gegenteil zu glEnableClientState ist übrigens glDisableClientState. Sollten also irgendwann keine Vertices mehr gewünscht sein, kann man den Zustand wieder deaktivieren: glDisableClientState(GL_VERTEX_ARRAY);
<br/>
<source lang="cpp">
glColorPointer(3, GL_FLOAT, 0, colorArray);
</source>
Hier sagen wir OpenGL das zu unsere Vertices noch folgende Farben kommen. <br/>
Der erste Parameter gibt an wieviele Kanäle eine Farbe hat, erlaubt sind 3 (RGB) und 4 (RGBA). <br/>
Der zweite Parameter sagt OpenGL den Datentypen in dem die Farben vorliegen, erwartet wird ein GL_ENUM. Erlaubt ist GL_SHORT, GL_INT, GL_FLOAT und GL_DOUBLE <br/>
Der dritte Parameter gibt den Byteoffset der Farben an. <br/>
der vierte Parameter ist der Pointer zu dem eigentlichen Farbarray.

<br/>
<source lang="cpp">
glDrawArrays(GL_TRIANGLES, 0, 3);
</source>
Das zeichnet schlußendlich unsere Vertices in den Forebuffer. <br/>
Der erste Parameter gibt den Modus an indem gezeichnet werden soll, dazu später mehr <br/>
Der zweite Parameter gibt an wo in dem Vertice Array angefangen werden soll (falls man zum Beispiel die ersten drei Vertices überspringen will, kann man hier 3 eintragen)<br/>
Der dritte Parameter gibt an wieviele Vertices gezeichnet werden sollen, das müssen mindestens drei sein.<br/>
glDrawArrays(); Zeichnet dabei den aktuell aktivierten Vertex Array in den Forebuffer.

== Schlusswort ==
Soweit so gut, unsere erste OpenGL Anwendung läuft. Nicht spektakuläres, aber ein Anfang. Kompiliert und ausgeführt sollte das ungefähr so aussehen:
<br/>[[Datei:OpenGLTut1.png]]<br/><br/>
Vieles hab ich hier verkürzt dargestellt oder euch auf später vertröstet, tut mir Leid, aber alles bis ins kleinste Detail zu erklären würde sehr langatmig werden und ihr würdet erstmal überhaupt nichts zu Gesicht bekommen. Aber es werden noch weitere Teile folgen die alles erklären werden.