定义形状

能够在 OpenGL ES 视图的上下文中定义要绘制的形状是为您的应用创建高端图形的第一步。如果不了解 OpenGL ES 如何期望您定义图形对象的一些基本知识，那么使用 OpenGL ES 绘制可能会有点棘手。

本课程解释了相对于 Android 设备屏幕的 OpenGL ES 坐标系，定义形状、形状面以及定义三角形和平方形的基礎知识。

定义三角形

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 创建更复杂形状需要哪些步骤。通常，您使用三角形集合来绘制对象。在下一课中，您将学习如何在屏幕上绘制这些形状。