图片和图形之绘制形状（12）

概要

在用OpenGL定义要绘制的形状之后，您可能需要绘制它们。使用OpenGL ES 2.0绘制图形需要的代码比您想象的要多一点，因为API提供了对图形渲染管道的大量控制。

本课介绍如何使用OpenGL ES 2.0 API绘制您在前一课中定义的形状。

初始化形状

在进行任何绘图之前，您必须初始化并加载您计划绘制的形状。除非程序中使用的形状的结构（原始坐标）在执行过程中发生更改，否则应使用onSurfaceCreated()渲染器的方法初始化它们以提高内存和处理效率。

public class MyGLRenderer implements GLSurfaceView.Renderer {

    ...
    private Triangle mTriangle;
    private Square   mSquare;

    public void onSurfaceCreated(GL10 unused, EGLConfig config) {
        ...

        // initialize a triangle
        mTriangle = new Triangle();
        // initialize a square
        mSquare = new Square();
    }
    ...
}

画一个形状

使用OpenGL ES 2.0绘制一个定义的形状需要大量的代码，因为您必须为图形渲染管道提供大量细节。具体而言，您必须定义以下内容：

顶点着色器 - 用于渲染形状顶点的OpenGL ES图形代码。
片段着色器 - 用于渲染具有颜色或纹理的形状的面的OpenGL ES代码。
程序 - 包含要用于绘制一个或多个形状的着色器的OpenGL ES对象。

您至少需要一个顶点着色器来绘制形状和一个片段着色器来为该形状着色。这些着色器必须被编译，然后添加到OpenGL ES程序中，然后用它来绘制形状。以下是如何定义可用于在Triangle类中绘制形状的基本着色器的示例：

public class Triangle {

    private final String vertexShaderCode =
        "attribute vec4 vPosition;" +
        "void main() {" +
        "  gl_Position = vPosition;" +
        "}";

    private final String fragmentShaderCode =
        "precision mediump float;" +
        "uniform vec4 vColor;" +
        "void main() {" +
        "  gl_FragColor = vColor;" +
        "}";

    ...
}

着色器包含OpenGL着色语言（GLSL）代码，必须在OpenGL ES环境中使用它之前进行编译。要编译此代码，请在您的渲染器类中创建实用程序方法：

public static int loadShader(int type, String shaderCode){

    // create a vertex shader type (GLES20.GL_VERTEX_SHADER)
    // or a fragment shader type (GLES20.GL_FRAGMENT_SHADER)
    int shader = GLES20.glCreateShader(type);

    // add the source code to the shader and compile it
    GLES20.glShaderSource(shader, shaderCode);
    GLES20.glCompileShader(shader);

    return shader;
}

为了绘制您的形状，您必须编译着色器代码，将它们添加到OpenGL ES程序对象中，然后链接程序。在绘制的对象的构造函数中执行此操作，因此只能执行一次。

注意：编译OpenGL ES着色器和链接程序在CPU周期和处理时间方面是昂贵的，所以您应该避免这样做多次。如果您在运行时不知道着色器的内容，则应该构建代码，使其仅被创建一次，然后进行缓存以备后用。

public class Triangle() {
    ...

    private final int mProgram;

    public Triangle() {
        ...

        int vertexShader = MyGLRenderer.loadShader(GLES20.GL_VERTEX_SHADER,
                                        vertexShaderCode);
        int fragmentShader = MyGLRenderer.loadShader(GLES20.GL_FRAGMENT_SHADER,
                                        fragmentShaderCode);

        // create empty OpenGL ES Program
        mProgram = GLES20.glCreateProgram();

        // add the vertex shader to program
        GLES20.glAttachShader(mProgram, vertexShader);

        // add the fragment shader to program
        GLES20.glAttachShader(mProgram, fragmentShader);

        // creates OpenGL ES program executables
        GLES20.glLinkProgram(mProgram);
    }
}

此时，您已准备好添加绘制形状的实际呼叫。使用OpenGL ES绘制形状要求您指定几个参数来告诉渲染管道您要绘制什么以及如何绘制它。由于绘图选项可能因形状而异，因此最好让您的形状类包含自己的绘图逻辑。

创建一个draw()绘制形状的方法。此代码将位置和颜色值设置为形状的顶点着色器和片段着色器，然后执行绘图功能。

private int mPositionHandle;
private int mColorHandle;

private final int vertexCount = triangleCoords.length / COORDS_PER_VERTEX;
private final int vertexStride = COORDS_PER_VERTEX * 4; // 4 bytes per vertex

public void draw() {
    // Add program to OpenGL ES environment
    GLES20.glUseProgram(mProgram);

    // get handle to vertex shader's vPosition member
    mPositionHandle = GLES20.glGetAttribLocation(mProgram, "vPosition");

    // Enable a handle to the triangle vertices
    GLES20.glEnableVertexAttribArray(mPositionHandle);

    // Prepare the triangle coordinate data
    GLES20.glVertexAttribPointer(mPositionHandle, COORDS_PER_VERTEX,
                                 GLES20.GL_FLOAT, false,
                                 vertexStride, vertexBuffer);

    // get handle to fragment shader's vColor member
    mColorHandle = GLES20.glGetUniformLocation(mProgram, "vColor");

    // Set color for drawing the triangle
    GLES20.glUniform4fv(mColorHandle, 1, color, 0);

    // Draw the triangle
    GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vertexCount);

    // Disable vertex array
    GLES20.glDisableVertexAttribArray(mPositionHandle);
}

一旦完成了所有这些代码，绘制该对象只需draw()要从您的渲染器onDrawFrame()方法中调用该方法即可：

public void onDrawFrame(GL10 unused) {
    ...

    mTriangle.draw();
}

当你运行应用程序时，它应该看起来像这样：
图片和图形之绘制形状（12）
图1.没有投影或摄像机视图的三角形。
这个代码示例有几个问题。首先，它不会打动你的朋友。其次，当你改变设备的屏幕方向时，三角形被压扁并改变形状。形状偏斜的原因是由于对象的顶点尚未根据GLSurfaceView所显示的屏幕区域的比例进行校正。您可以在下一课中使用投影和相机视图解决该问题。

最后，三角形是静止的，这有点无聊。在“ 添加动画”课程中，您可以旋转此形状并更有趣地使用OpenGL ES图形管线。

    Lastest Update：2018.04.25

联系我

QQ:94297366
微信打赏：https://pan.baidu.com/s/1dSBXk3eFZu3mAMkw3xu9KQ

公众号推荐：

图片和图形之绘制形状（12）