Как задать фигуры

Умение определять фигуры, которые будут отрисовываться в контексте представления OpenGL ES, – это первый шаг к созданию высококачественной графики для приложения. Отрисовка с помощью OpenGL ES может быть немного сложной, если не знать несколько основных вещей о том, как OpenGL ES ожидает от вас определения графических объектов.

В этом уроке рассказывается о системе координат OpenGL ES относительно экрана устройства Android, основах определения фигуры, граней фигуры, а также треугольника и квадрата.

Давать определение треугольника

OpenGL ES позволяет определять объекты, используя координаты в трехмерном пространстве. Поэтому, прежде чем нарисовать треугольник, вы должны определить его координаты. В OpenGL для этого обычно создается массив вершин с координатами в виде чисел с плавающей запятой. Для максимальной эффективности вы записываете эти координаты в ByteBuffer, который передается в графический конвейер OpenGL ES для обработки.

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

По умолчанию в OpenGL ES используется система координат, в которой [0,0,0] (X,Y,Z) – это центр кадра GLSurfaceView, [1,1,0] – правый верхний угол кадра, а [-1,-1,0] – левый нижний угол кадра. Иллюстрацию этой системы координат можно найти в руководстве для разработчиков OpenGL ES.

Обратите внимание, что координаты этой фигуры заданы против часовой стрелки. Порядок рисования важен, поскольку он определяет, какая сторона является передней гранью фигуры, которую вы обычно хотите нарисовать, и задней гранью, которую вы можете не рисовать, используя функцию отсечения граней OpenGL ES. Дополнительную информацию о гранях и отсечении можно найти в руководстве для разработчиков OpenGL ES.

Определить квадрат

Определять треугольники в OpenGL довольно просто, но что если вы хотите получить немного больше сложный? Например, квадрат? Это можно сделать разными способами, но типичный путь к рисованию такой фигуры в OpenGL ES – использовать два треугольника, нарисованных вместе:

Рисунок 1. Рисунок квадрата, составленного из двух треугольников.

Как и в предыдущем случае, вершины обоих треугольников, составляющих фигуру, нужно определить в порядке против часовой стрелки и поместить значения в ByteBuffer. Чтобы не определять дважды две координаты, общие для каждого треугольника, используйте список рисования, чтобы указать графическому конвейеру OpenGL ES, как рисовать эти вершины. Вот код для этой фигуры:

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

Этот пример показывает, как создавать более сложные фигуры с помощью OpenGL. В общем случае для рисования объектов используются наборы треугольников. На следующем уроке вы узнаете, как рисовать эти фигуры на экране.