Darstellung runder Objekte in OpenGL ES. 1 Darstellung eines Zylinders oder Kegels. Inhaltsverzeichnis. Berechnen der Punkte.

Transkript

1 Seite 1 von 9 Darstellung runder Objekte in OpenGL ES Inhaltsverzeichnis Darstellung runder Objekte in OpenGL ES...1 1Darstellung eines Zylinders oder Kegels...1 Berechnen der Punkte...1 Darstellung als Gittermodell...3 Darstellung als Fläche...4 Textur...6 2Darstellung eines Torus...7 Berechnung der Punkte...7 Darstellung als Gittermodell...8 Darstellung als Fläche...8 Textur Darstellung eines Zylinders oder Kegels Berechnen der Punkte Von vorne betrachtet ist der Zylinder ein Kreis. Beim erstellen eines Zylinders muss bekannt sein, aus wie vielen Stücke der Zylinder besehen soll. Über diese Anzahl kann der Kreis interpoliert werden. Es kann errechnet werden wie groß ein Teilabschnitt ist. float steps = (float) ((Math.PI * 2) / parts);

2 Seite 2 von 9 Parts bezeichnet die Anzahl der Stücke. Steps ist die Größe eines Teilabschnittes als Radian. In OpenGL ES wird ein Buffer zum Zeichnen übergeben. Um diesen Buffer zu erstellen wird ein Array angelegt in dem die Punkte als Float für X, Y und Z gespeichert werden. vertex = new float[parts * ]; Als nächstes kann der Kreis interpoliert und das Array gefüllt werden: float sin = (float) Math.sin(i * steps); float cos = (float) Math.cos(i * steps); // Hintere Seite des Zylinders vertex[i * 3] = cos; vertex[i * 3 + 1] = sin; vertex[i * 3 + 2] = -0.5f; // Vordere Seite des Zylinders vertex[i * 3 + parts * 3 + 3] = cos; vertex[i * 3 + parts * 3 + 4] = sin; vertex[i * 3 + parts * 3 + 5] = 0.5f; // Mitte der beiden Kreise vertex[parts * 6 + 6] = 0; vertex[parts * 6 + 7] = 0; vertex[parts * 6 + 8] = -0.5f; vertex[parts * 6 + 9] = 0; vertex[parts * ] = 0; vertex[parts * ] = 0.5f; Die 'for' Schleife geht bis einschließlich i=parts, das führt dazu, dass der Anfang und das Ende die gleichen Werte bekommt. Das scheint überflüssig, allerdings erleichtert es uns die Indexe zu setzten und für die Textur ist das notwendig. Da dem Endpunkt und Startpunkt eine unterschiedliche Textur zugewiesen werden muss. Folgender Shreenshot ist ein solcher Zylinder mit 10 Seitenteilen Die Werte der hinteren und vorderen Seite können noch mit unterschiedlichen Werten multipliziert werden um einen Kegel stumpf zu erstellen. Wenn der Sinus und Kosinus mit unterschiedlichen Werten multipliziert wird hat der Zylinder eliptische Enden. Folgende Tabelle zeigt die beiden Variationen

3 Seite 3 von 9 Kegelstumpf // Hintere Seite des Zylinders vertex[i * 3] = sin * 0.5f; vertex[i * 3 + 1] = cos * 0.5f; vertex[i * 3 + 2] = -0.5f; // Fordere Seite des Zylinders vertex[i * 3 + parts * 3 + 3] = sin * 1f; vertex[i * 3 + parts * 3 + 4] = cos * 1f; vertex[i * 3 + parts * 3 + 5] = 0.5f; Eliptischer Zylinder // Hintere Seite des Zylinders vertex[i * 3] = sin * 1; vertex[i * 3 + 1] = cos * 0.5f; vertex[i * 3 + 2] = -0.5f; // Fordere Seite des Zylinders vertex[i * 3 + parts * 3 + 3] = sin * 0.5f; vertex[i * 3 + parts * 3 + 4] = cos * 1f; vertex[i * 3 + parts * 3 + 5] = 0.5f; Wenn alle Punkte erstellt sind kann das Array in ein ByteBuffer geladen werden. Beim jedem Zeichnenvorgang wird dieses Array mit übergeben. // Buffer für die Punkte ByteBuffer vbb = ByteBuffer.allocateDirect(vertex.length * 4); vbb.order(byteorder.nativeorder()); vertexbuffer = vbb.asfloatbuffer(); vertexbuffer.put(vertex); vertexbuffer.position(0); gl.glvertexpointer(3, GL10.GL_FLOAT, 0, vertexbuffer); Darstellung als Gittermodell Um den Zylinder als Gitter darzustellen bietet es sich an die Punkte in einem Zickzack Muster mit einer Linie zu verbinden.

4 Seite 4 von 9 int offset = i % 2; // erstes ZickZack Muster indices[i * 2 + offset] = (short) (i); indices[i * offset] = (short) (i + parts + 1); Bei einem Schleifendurchlauf zeigt 'i' auf einen Punkt des hinteren Kreises und 'i + parts + 1' auf den gleichen Punkt des vorderen Kreises. Offset hat abwechselnd den Wert 0 und 1, so kann abwechselnd der vordere und hintere Punkt gezeichnet werden. Mit einem zweiten Durchlauf mit einem Versatz von 1 werden alle Linien des Zylinders gezeichnet. Mit dieser Methode kann der gesamte Zylinder auf einmal gezeichnet werden allerdings werden alle Linien der beiden Kreise zwei mal gezeichnet. int offset = i % 2; // erstes ZickZack Muster indices[i * 2 + offset] = (short) (i); indices[i * offset] = (short) (i + parts + 1); // zweites ZickZack Muster indices[parts * 2 + i * offset] = (short) (i); indices[parts * 2 + i * offset] = (short) (i + parts + 1); Das Index Array wird auch in ein ByteBuffer gespeichert. Der Buffer kann als 'GL_LINE_STRIP' gezeichnet werden wobei jeder Punkt mit dem folgendem Punkt verbunden wird. gl.gldrawelements(gl10.gl_line_strip, indices.length, GL10.GL_UNSIGNED_SHORT, indexbuffer); Darstellung als Fläche Da OpenGL ES im Gegensatz zu OpenGL keine QUADS unterstützt muss jede Fläche als Dreieck 'TRIANGLE' gezeichnet werden. Da eine Mantelfläche viereckig ist wird sie mit zwei Dreiecken gezeichnet. // Alle Quadrate als zwei Dreiecke zeichnen

5 Seite 5 von 9 indices = new short[parts * 6 + 6]; for (int i = 0; i < parts; i++) { // Erstes Dreieck indices[i * 6] = (short) i; indices[i * 6 + 1] = (short) (parts + i + 1); indices[i * 6 + 2] = (short) (i + 1); // Zweites Dreicek indices[i * 6 + 3] = (short) (i + 1); indices[i * 6 + 4] = (short) (parts + i + 1); indices[i * 6 + 5] = (short) (parts + i + 2); Dieser ByteBuffer wird als TRIANGLES gezeichnet gl.gldrawelements(gl10.gl_triangles, indices.length, GL10.GL_UNSIGNED_SHORT, indexbuffer); Bei den beiden Kreisen eignet sich ein 'TRIANGLE_FAN' sehr gut, da sich alle Dreiecke den ersten Punkt teilen. Dieser erste Punkt ist der Mittelpunkt der beiden Kreise. indicesplatte1[0] = (short) (2 * parts + 2); indicesplatte2[0] = (short) (2 * parts + 3); indicesplatte1[i + 1] = (short) i; indicesplatte2[i + 1] = (short) (2 * parts - i + 1);

6 Seite 6 von 9 Textur Die Textur wird OpenGL auch als Buffer übergeben. Dieser Buffer sollte 2/3 mal so groß sein wie der Buffer der Punkte da jeder dreidimensionale Raum - Punkt mit einem zweidimensionalen Textur - Punkt verbunden wird. Um dem Mantel und die beiden Kreise zu bemalen verwende ich zwei Textur Buffer. texturecoordinates = new float[parts * 4 + 4]; texturecoordinatesplate = new float[parts * 4 + 8]; float steps = (float) ((Math.PI * 2) / parts); // Textur für den Mantel texturecoordinates[i * 2] = ((float) parts - i) / parts; texturecoordinates[i * 2 + 1] = 0; texturecoordinates[i * 2 + parts * 2 + 2] = ((float) parts i) / parts; texturecoordinates[i * 2 + parts * 2 + 3] = 1; // Textur für die Kreise texturecoordinatesplate[i * 2] = (float) (1 - (Math.sin(steps * i) + 1) / 2); texturecoordinatesplate[i * 2 + 1] = (float) ((Math.cos(steps * i) + 1) / 2); texturecoordinatesplate[i * 2 + parts * 2 + 2] = (float) ((Math.sin(steps * i) + 1) / 2); texturecoordinatesplate[i * 2 + parts * 2 + 3] = (float) ((Math.cos(steps * i) + 1) / 2); texturecoordinatesplate[parts * 4 + 4] = 0.5f; texturecoordinatesplate[parts * 4 + 5] = 0.5f; texturecoordinatesplate[parts * 4 + 6] = 0.5f; texturecoordinatesplate[parts * 4 + 7] = 0.5f; Die Textur Punkte für den Mantel haben die Y Werte 0 oder 1 denn am Rand soll das Ende der Textur gemalt werden. Die X Werte zeigen auf den jeweiligen Abschnitt des zu zeichnenden Vierecks. Da der Anfang zweimal in dem Punkte Array enthalten ist, kann dort die Textur für den Anfang und für das Ende gezeichnet werden. Die Textur Punkte für die Kreise sind ähnlich berechnet wie die kreisförmigen Koordinaten des Zylinders, da aus der Viereckigen Textur ein runder Ausschnitt angezeigt werden soll.

7 Seite 7 von 9 2 Darstellung eines Torus Berechnung der Punkte Ein Torus hat eine Radius der den großen Ring beschreibt und einen i.d.r kleineren Radius der den 'Schlauch' beschreibt. Für die Darstellung in OpenGL muss auch entschieden werden in wie viele Teilabschnitte der große und kleine Kreis aufgeteilt werden soll. Die X und Y Koordinaten des großen Kreises sind ähnlich der oben gezeigten Berechnung nur muss für jeden großen Teilabschnitt der gesamte kleine Kreis errechnet werden. Das führt zu folgenden verschachtelten Schleifen. Die Verschiebung um einen halben Kreis (+ Pi bei sin und cos von Minor) legt den Anfang der kleinen Kreise von Außen nach Innen. Das ist später für die Textur von Vorteil. vertex = new float[(slice_major + 1) * (SLICE_MINOR + 1) * 3]; float stepmajor = (float) ((Math.PI * 2) / SLICE_MAJOR); float stepminor = (float) ((Math.PI * 2) / SLICE_MINOR); // alle Punke für den Ring for (int i = 0; i <= SLICE_MAJOR; i++) { float sinmajor = (float) Math.sin(i * stepmajor); float cosmajor = (float) Math.cos(i * stepmajor); for (int j = 0; j <= SLICE_MINOR; j++) { float sinminor = (float) Math.sin(j * stepminor + Math.PI); float cosminor = (float) Math.cos(j * stepminor + Math.PI); vertex[(i * (SLICE_MINOR + 1) + j) * 3] = sinmajor * rmajor + cosminor * rminor * sinmajor; vertex[(i * (SLICE_MINOR + 1) + j) * 3 + 1] = cosmajor * rmajor + cosminor * rminor * cosmajor; vertex[(i * (SLICE_MINOR + 1) + j) * 3 + 2] = sinminor * rminor; Major bezeichnet den großen Kreis und Minor den kleinen. Die Berechnung ist wie in Wikipedia beschrieben. Wie auch bei dem Zylinder werden in dem Array die Endpunkte der kleinen Kreise und des großen Kreises zwei mal gespeichert. Folgender Screenshot zeigt einen Torus für SLICE_MAJOR = 25 und SLICE_MINOR = 15

8 Seite 8 von 9 Darstellung als Gittermodell Da der Anfang und das Ende aller Kreise zwei mal enthalten ist, gestaltet sich das erstellen der Indexe relativ einfach. Folgender Index kann als GL_LINE_STRIP gezeichnet werden. // alle kleinen Ringe werden gezeichnet plus einem Großem for (int i = 0; i < (SLICE_MAJOR + 1) * (SLICE_MINOR + 1); i++) indices[j++] = (short) i; // alle restlichen großen Ringe for (int i = 1; i < SLICE_MINOR; i++) for (int k = 0; k <= SLICE_MAJOR; k++) indices[j++] = (short) (k * (SLICE_MINOR + 1) + i); Darstellung als Fläche Um den Torus als Fläche darzustellen muss jedes Viereck als zwei Dreiecke gezeichnet werden. So kann OpenGL den Torus als GL_TRIANGLES zeichnen. for (i = 0; i < SLICE_MAJOR; i++) { for (j = 0; j < SLICE_MINOR; j++) { // erstes Dreieck indices[counter++] = (short) (i * (SLICE_MINOR + 1) + j); indices[counter++] = (short) (i * (SLICE_MINOR + 1) + j + 1); indices[counter++] = (short) ((i + 1) * (SLICE_MINOR + 1) + j); // zweites Dreieck indices[counter++] = (short) (i * (SLICE_MINOR + 1) + j + 1); indices[counter++] = (short) ((i + 1) * (SLICE_MINOR + 1) + j + 1); indices[counter++] = (short) ((i + 1) * (SLICE_MINOR + 1) + j);

9 Seite 9 von 9 Textur Die rechteckige Textur wird gleichmäßig auf dem Torus verteilt. for (i = 0; i <= SLICE_MAJOR; i++) for (j = 0; j <= SLICE_MINOR; j++) { texturecoordinates[(i * (SLICE_MINOR + 1) + j) * 2] = ((float) i) / SLICE_MAJOR; texturecoordinates[(i * (SLICE_MINOR + 1) + j) * 2 + 1] = ((float) j) / SLICE_MINOR; So kann beispielsweise eine Reifen Textur auf den Torus gelegt werden