Definisci le forme

La possibilità di definire le forme da tracciare nel contesto di una visualizzazione OpenGL ES è il primo passo per creare grafica di fascia alta per la tua app. Disegnare con OpenGL ES può essere un po' complicato senza conoscere alcune nozioni di base sul modo in cui OpenGL ES si aspetta di definire oggetti grafici.

Questa lezione spiega il sistema di coordinate OpenGL ES rispetto allo schermo di un dispositivo Android, le nozioni di base per definire una forma, modellare le facce e definire un triangolo e un quadrato.

Definire un triangolo

OpenGL ES consente di definire oggetti disegnati utilizzando le coordinate nello spazio tridimensionale. Pertanto, prima di disegnare un triangolo, devi definirne le coordinate. In OpenGL, il modo tipico è definire un array di vertice di numeri in virgola mobile per le coordinate. Per ottenere la massima efficienza, scrivi queste coordinate in un ByteBuffer, che viene trasmesso alla pipeline grafica di OpenGL ES per l'elaborazione.

// 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)
                }
            }
}

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);
    }
}

Per impostazione predefinita, OpenGL ES presuppone un sistema di coordinate in cui [0,0,0] (X,Y,Z) specifichi il centro del frame GLSurfaceView, [1,1,0] è l'angolo in alto a destra del frame e [-1,-1,0] è l'angolo in basso a sinistra del frame. Per un'illustrazione di questo sistema di coordinate, consulta la guida per gli sviluppatori di OpenGL ES.

Tieni presente che le coordinate di questa forma sono definite in ordine antiorario. L'ordine di disegno è importante perché definisce quale lato è la parte anteriore della forma, che in genere si vuole disegnare, e la parte posteriore, che puoi scegliere di non disegnare con la funzionalità delle facce di disegno di OpenGL ES. Per ulteriori informazioni su facce ed eliminazione, consulta la guida per gli sviluppatori OpenGL ES.

Definisci un quadrato

Definire i triangoli è piuttosto facile in OpenGL, ma cosa succede se vuoi diventare un po' più complesso? Diciamo, un quadrato? Esistono vari modi per farlo, ma un percorso tipico per disegnare questa forma in OpenGL ES consiste nell'utilizzare due triangoli tracciati insieme:

Figura 1. Disegno di un quadrato con due triangoli.

Anche in questo caso, devi definire i vertici in senso antiorario per entrambi i triangoli che rappresentano questa forma e inserire i valori in ByteBuffer. Per evitare di definire due volte le coordinate condivise da ogni triangolo, utilizza un elenco di disegni per indicare alla pipeline grafica di OpenGL ES come tracciare questi vertici. Ecco il codice per questa forma:

// 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)
                }
            }
}

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);
    }
}

Questo esempio ti dà un'occhiata a ciò che serve per creare forme più complesse con OpenGL. In generale, si utilizzano raccolte di triangoli per disegnare oggetti. Nella prossima lezione imparerai a disegnare queste forme sullo schermo.