Cómo definir formas

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

Ser capaz de definir formas que se dibujarán en el contexto de una vista de OpenGL ES es el primer paso para crear tu obra maestra de gráficos refinados. Dibujar con OpenGL ES puede ser un poco complicado si no conoces algunas cuestiones básicas sobre cómo OpenGL ES espera que definas objetos gráficos.

En esta lección, se explica el sistema de coordenadas de OpenGL ES en relación con la pantalla de un dispositivo Android, los conceptos básicos para definir formas y sus caras, además de cómo definir un triángulo y un cuadrado.

Define un triángulo

OpenGL ES te permite definir objetos dibujados mediante coordenadas en un espacio tridimensional. Por eso, antes de que puedas dibujar un triángulo, debes definir sus coordenadas. En OpenGL, la forma típica de hacer eso es definir una matriz de vértices con números de punto flotante para las coordenadas. Para obtener la máxima eficacia, escribe esas coordenadas en un ByteBuffer, que se pasa a la canalización de gráficos de OpenGL ES para su procesamiento.

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

De forma predeterminada, OpenGL ES supone un sistema de coordenadas en el que [0, 0, 0] (X, Y, Z) especifica el centro del marco GLSurfaceView, [1, 1, 0] es la esquina superior derecha del marco. y [-1, -1, 0] es la esquina inferior izquierda del marco. Para ver una ilustración de este sistema de coordenadas, consulta la guía para desarrolladores de OpenGL ES.

Ten en cuenta que las coordenadas de esta forma se definen en el sentido antihorario. El orden del dibujo es importante porque define qué lado es la cara frontal de la forma, que es lo que se suele querer dibujar, y la cara posterior, que puedes elegir no dibujar con la función de cara vacía de OpenGL ES. Para obtener más información sobre caras y la selección, consulta la guía para desarrolladores de OpenGL ES.

Define un cuadrado

Definir triángulos es bastante fácil en OpenGL, pero ¿qué pasaría si quisieras dibujar algo un poco más complejo? Por ejemplo, un cuadrado. Hay varias maneras de hacerlo, pero, en general, para dibujar ese tipo de formas en OpenGL ES, se suelen dibujar dos triángulos juntos:

Figura 1: Cómo dibujar un cuadrado usando dos triángulos

Nuevamente, debes definir los vértices en sentido contrario a las agujas del reloj para ambos triángulos que representan esta forma y colocar los valores en un ByteBuffer. Para evitar definir las dos coordenadas compartidas por cada triángulo dos veces, usa una lista de dibujo a fin de indicarle a la canalización de gráficos de OpenGL ES cómo dibujar esos vértices. A continuación, se detalla el código para esa forma:

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

En este ejemplo, se muestra lo que se necesita para crear formas más complejas con OpenGL. En general, se usan colecciones de triángulos para dibujar objetos. En la siguiente lección, aprenderás a dibujar esas formas en la pantalla.