Billboard Techniken: Einführung

Was wäre ein Spiel ohne Rauch- und Partikeleffekte, ohne Feuer und Explosionen, ohne Wolken, Sonnenstrahlen und Lens Flares (Linsenreflektionen)? Die Liste lässt sich nahezu beliebig weiter fortführen, eines aber haben alle Effekte gemeinsam, es handelt sich um texturierte Vierecke, so genannte Billboards, die entsprechend der Blickrichtung des Spielers in der dreidimensionalen Welt ausgerichtet werden.

Betrachten wir einmal solch ein texturiertes Viereck – ein so genanntes Vertex-Quad – etwas genauer. Damit die Darstellung der Billboard-Effekte später fehlerfrei erfolgen kann, müssen wir uns bei der Definition des Vertex-Quads an die folgende Vereinbarung halten – alle vier Eckpunkte (Vertices) liegen in der xy-Ebene.
Jeweils drei der vier Vertices werden zu einem Dreieck zusammengefasst, so dass sich das Viereck letztlich aus zwei Dreiecken zusammensetzt:

Die Definition des Vertex-Quads samt Erzeugung der zum Rendern benötigten Vertex- und Indexbuffer könnte in OpenGL wie folgt ausschauen:

struct CSimpleTexturedVertex
{
    float tu, tv;
    float x, y, z;
};

. . .

CSimpleTexturedVertex QuadSimpleTexturedVertices[4];
GLushort QuadIndices[6];

// Definition der Vertex- und Texturkoordinaten:
QuadSimpleTexturedVertices[0].x  = -1.0f;
QuadSimpleTexturedVertices[0].y  =  1.0f;
QuadSimpleTexturedVertices[0].z  =  0.0f;

QuadSimpleTexturedVertices[0].tu = 0.0f;
QuadSimpleTexturedVertices[0].tv = 0.0f;

QuadSimpleTexturedVertices[1].x  = -1.0f;
QuadSimpleTexturedVertices[1].y  = -1.0f;
QuadSimpleTexturedVertices[1].z  =  0.0f;

QuadSimpleTexturedVertices[1].tu = 0.0f;
QuadSimpleTexturedVertices[1].tv = 1.0f;

QuadSimpleTexturedVertices[2].x  = 1.0f;
QuadSimpleTexturedVertices[2].y  = 1.0f;
QuadSimpleTexturedVertices[2].z  = 0.0f;

QuadSimpleTexturedVertices[2].tu = 1.0f;
QuadSimpleTexturedVertices[2].tv = 0.0f;

QuadSimpleTexturedVertices[3].x  =  1.0f;
QuadSimpleTexturedVertices[3].y  = -1.0f;
QuadSimpleTexturedVertices[3].z  =  0.0f;

QuadSimpleTexturedVertices[3].tu = 1.0f;
QuadSimpleTexturedVertices[3].tv = 1.0f;


// Definition der Dreiecksdaten:

QuadIndices[0] = 1;
QuadIndices[1] = 0;
QuadIndices[2] = 2;

QuadIndices[3] = 1;
QuadIndices[4] = 2;
QuadIndices[5] = 3;

// Vertexbuffer anlegen:
glGenBuffers(1, &VertexBufferId);
glBindBuffer(GL_ARRAY_BUFFER, VertexBufferId);

glBufferData(GL_ARRAY_BUFFER, 4*sizeof(CSimpleTexturedVertex),
             QuadSimpleTexturedVertices, GL_STATIC_DRAW);

// Indexbuffer anlegen:
glGenBuffers(1, &IndexBufferId);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, IndexBufferId);

glBufferData(GL_ELEMENT_ARRAY_BUFFER, 6*sizeof(GLushort), QuadIndices,
             GL_STATIC_DRAW);

Die eigentlichen Tricks, die sich hinter der Darstellung der verschiedenen Billboard-Effekte verbergen, werden wir im weiteren Verlauf dieser Artikelserie besprechen.