Der erste Schritt bei der Erstellung von High-End-Grafiken für Ihre App besteht darin, zu zeichnende Formen in der OpenGL ES-Ansicht zu definieren. Das Zeichnen mit OpenGL ES kann ein wenig schwierig sein, wenn Sie nicht wissen, wie OpenGL ES Grafikobjekte definieren.
In dieser Lektion werden das OpenGL ES-Koordinatensystem relativ zum Bildschirm eines Android-Geräts erläutert. Außerdem werden die Grundlagen für das Definieren von Formen, Form von Flächen sowie das Definieren eines Dreiecks und eines Quadrats erläutert.
Dreieck definieren
Mit OpenGL ES können Sie gezeichnete Objekte mithilfe von Koordinaten in einem dreidimensionalen Raum definieren. Bevor Sie ein Dreieck zeichnen können, müssen Sie also seine Koordinaten definieren. Bei OpenGL wird hierfür normalerweise ein Scheitelpunkt-Array von Gleitkommazahlen für die Koordinaten definiert. Für maximale Effizienz schreiben Sie diese Koordinaten in einen ByteBuffer, der zur Verarbeitung an die OpenGL ES-Grafikpipeline übergeben wird.
Kotlin
// number of coordinates per vertex in this array
const val COORDS_PER_VERTEX = 3
var triangleCoords = floatArrayOf( // in counterclockwise order:
0.0f, 0.622008459f, 0.0f, // top
-0.5f, -0.311004243f, 0.0f, // bottom left
0.5f, -0.311004243f, 0.0f // bottom right
)
class Triangle {
// Set color with red, green, blue and alpha (opacity) values
val color = floatArrayOf(0.63671875f, 0.76953125f, 0.22265625f, 1.0f)
private var vertexBuffer: FloatBuffer =
// (number of coordinate values * 4 bytes per float)
ByteBuffer.allocateDirect(triangleCoords.size * 4).run {
// use the device hardware's native byte order
order(ByteOrder.nativeOrder())
// create a floating point buffer from the ByteBuffer
asFloatBuffer().apply {
// add the coordinates to the FloatBuffer
put(triangleCoords)
// set the buffer to read the first coordinate
position(0)
}
}
}
Java
public class Triangle {
private FloatBuffer vertexBuffer;
// number of coordinates per vertex in this array
static final int COORDS_PER_VERTEX = 3;
static float triangleCoords[] = { // in counterclockwise order:
0.0f, 0.622008459f, 0.0f, // top
-0.5f, -0.311004243f, 0.0f, // bottom left
0.5f, -0.311004243f, 0.0f // bottom right
};
// Set color with red, green, blue and alpha (opacity) values
float color[] = { 0.63671875f, 0.76953125f, 0.22265625f, 1.0f };
public Triangle() {
// initialize vertex byte buffer for shape coordinates
ByteBuffer bb = ByteBuffer.allocateDirect(
// (number of coordinate values * 4 bytes per float)
triangleCoords.length * 4);
// use the device hardware's native byte order
bb.order(ByteOrder.nativeOrder());
// create a floating point buffer from the ByteBuffer
vertexBuffer = bb.asFloatBuffer();
// add the coordinates to the FloatBuffer
vertexBuffer.put(triangleCoords);
// set the buffer to read the first coordinate
vertexBuffer.position(0);
}
}
Standardmäßig geht OpenGL ES von einem Koordinatensystem aus, wobei [0,0,0] (X,Y,Z) die Mitte des GLSurfaceView-Frames angibt, [1,1,0] die obere rechte Ecke des Frames und [-1,-1,0] die untere linke Ecke des Frames. Eine Darstellung dieses Koordinatensystems finden Sie im OpenGL ES-Entwicklerhandbuch.
Beachten Sie, dass die Koordinaten dieser Form gegen den Uhrzeigersinn definiert werden. Die Reihenfolge der Zeichnung ist wichtig, da sie definiert, welche Seite die Vorderseite der Form ist, die normalerweise gezeichnet werden soll, und die Rückseite, die nicht mit der OpenGL ES-Kartenansicht gezeichnet werden soll. Weitere Informationen zu Gesichtern und zum Filtern finden Sie im OpenGL ES-Entwicklerhandbuch.
Quadrat definieren
Das Definieren von Dreiecken ist in OpenGL ziemlich einfach, aber was ist, wenn Sie es etwas komplexer gestalten möchten? Sag mal ein Quadrat? Es gibt verschiedene Möglichkeiten, dies zu tun. Ein typischer Weg zum Zeichnen einer solchen Form in OpenGL ES besteht jedoch in der Verwendung von zwei zusammen gezeichneten Dreiecken:
Abbildung 1: Ein Quadrat mit zwei Dreiecken zeichnen.
Definieren Sie wieder die Eckpunkte für beide Dreiecke, die diese Form darstellen, gegen den Uhrzeigersinn und setzen Sie die Werte in eine ByteBuffer. Um zu vermeiden, dass die beiden von jedem Dreieck geteilten Koordinaten zweimal definiert werden, verwenden Sie eine Zeichenliste, um der OpenGL ES-Grafikpipeline mitzuteilen, wie diese Scheitelpunkte gezeichnet werden sollen. Hier ist der Code für diese Form:
Kotlin
// number of coordinates per vertex in this array
const val COORDS_PER_VERTEX = 3
var squareCoords = floatArrayOf(
-0.5f, 0.5f, 0.0f, // top left
-0.5f, -0.5f, 0.0f, // bottom left
0.5f, -0.5f, 0.0f, // bottom right
0.5f, 0.5f, 0.0f // top right
)
class Square2 {
private val drawOrder = shortArrayOf(0, 1, 2, 0, 2, 3) // order to draw vertices
// initialize vertex byte buffer for shape coordinates
private val vertexBuffer: FloatBuffer =
// (# of coordinate values * 4 bytes per float)
ByteBuffer.allocateDirect(squareCoords.size * 4).run {
order(ByteOrder.nativeOrder())
asFloatBuffer().apply {
put(squareCoords)
position(0)
}
}
// initialize byte buffer for the draw list
private val drawListBuffer: ShortBuffer =
// (# of coordinate values * 2 bytes per short)
ByteBuffer.allocateDirect(drawOrder.size * 2).run {
order(ByteOrder.nativeOrder())
asShortBuffer().apply {
put(drawOrder)
position(0)
}
}
}
Java
public class Square {
private FloatBuffer vertexBuffer;
private ShortBuffer drawListBuffer;
// number of coordinates per vertex in this array
static final int COORDS_PER_VERTEX = 3;
static float squareCoords[] = {
-0.5f, 0.5f, 0.0f, // top left
-0.5f, -0.5f, 0.0f, // bottom left
0.5f, -0.5f, 0.0f, // bottom right
0.5f, 0.5f, 0.0f }; // top right
private short drawOrder[] = { 0, 1, 2, 0, 2, 3 }; // order to draw vertices
public Square() {
// initialize vertex byte buffer for shape coordinates
ByteBuffer bb = ByteBuffer.allocateDirect(
// (# of coordinate values * 4 bytes per float)
squareCoords.length * 4);
bb.order(ByteOrder.nativeOrder());
vertexBuffer = bb.asFloatBuffer();
vertexBuffer.put(squareCoords);
vertexBuffer.position(0);
// initialize byte buffer for the draw list
ByteBuffer dlb = ByteBuffer.allocateDirect(
// (# of coordinate values * 2 bytes per short)
drawOrder.length * 2);
dlb.order(ByteOrder.nativeOrder());
drawListBuffer = dlb.asShortBuffer();
drawListBuffer.put(drawOrder);
drawListBuffer.position(0);
}
}
In diesem Beispiel erfahren Sie, wie mit OpenGL komplexere Formen erstellt werden. Im Allgemeinen werden zum Zeichnen von Objekten Objekte aus Dreiecken gezeichnet. In der nächsten Lektion lernen Sie, wie Sie diese Formen auf dem Bildschirm zeichnen.