La capacité à définir des formes à dessiner dans le contexte d'une vue OpenGL ES est la première étape pour créer des éléments graphiques haut de gamme pour votre application. Dessiner avec OpenGL ES peut s'avérer un peu délicat sans connaître certaines informations de base sur la façon dont OpenGL ES s'attend à ce que vous définissiez des objets graphiques.
Cette leçon explique le système de coordonnées OpenGL ES par rapport à l'écran d'un appareil Android, les bases pour définir une forme et des faces, et définir un triangle et un carré.
Définir un triangle
OpenGL ES vous permet de définir des objets dessinés à l'aide de coordonnées dans un espace tridimensionnel. Par conséquent, avant de pouvoir dessiner un triangle, vous devez définir ses coordonnées. Dans OpenGL, la méthode classique consiste à définir un tableau de sommets de nombres à virgule flottante pour les coordonnées. Pour une efficacité maximale, vous écrivez ces coordonnées dans un ByteBuffer, qui est transmis au pipeline graphique OpenGL ES pour traitement.
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);
}
}
Par défaut, OpenGL ES suppose un système de coordonnées où [0,0,0] (X,Y,Z) spécifie le centre du cadre GLSurfaceView, [1,1,0] est le coin supérieur droit du cadre et [-1,-1,0] est l'angle inférieur gauche du cadre. Pour obtenir une illustration de ce système de coordonnées, consultez le guide du développeur OpenGL ES.
Notez que les coordonnées de cette forme sont définies dans le sens inverse des aiguilles d'une montre. L'ordre de traçage est important, car il définit le côté correspondant à la face avant de la forme, que vous souhaitez généralement dessiner, et la face arrière, que vous pouvez choisir de ne pas dessiner à l'aide de la fonctionnalité de cadran d'OpenGL ES. Pour en savoir plus sur les visages et la sélection, consultez le guide du développeur OpenGL ES.
Définir un carré
Il est assez facile de définir des triangles dans OpenGL, mais que faire si vous voulez un peu plus complexe ? Un carré ? Il existe plusieurs façons de le faire, mais deux triangles dessinés ensemble sont généralement utilisés pour dessiner une telle forme dans OpenGL ES:
Figure 1 : Dessiner un carré à l'aide de deux triangles
Là encore, vous devez définir les sommets dans le sens inverse des aiguilles d'une montre pour les deux triangles qui représentent cette forme, puis placer les valeurs dans un ByteBuffer. Pour éviter de définir deux coordonnées partagées par chaque triangle, utilisez une liste de dessin pour indiquer au pipeline graphique OpenGL ES comment dessiner ces sommets. Voici le code de cette forme:
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);
}
}
Cet exemple vous donne un aperçu de ce qu'il faut faire pour créer des formes plus complexes avec OpenGL. En général, vous utilisez des ensembles de triangles pour dessiner des objets. Dans la leçon suivante, vous apprendrez à dessiner ces formes à l'écran.