OpenGLES 之 绘制正方形（二）

一、前言

上一节，我们说到了OpenGLES的HelloWorld程序——绘制三角形。对于三角形的绘制，我们需要知道三个顶点，以及颜色。绘制分为顶点法（glDrawArrays）和索引法（glDrawElements），从而知道了绘制的时候需要指定绘制的顺序，索引法需要用户手动输入顶点和绘制模式的指定绘制的顺序，顶点法则是通过绘制的模式来默认的指定顶点顺序。

对于正方形，大体和绘制三角形一致，只是有点区别：

• 需要四个顶点
• 需要矩阵变换（后面说），否则绘制的是一个长方形

二、绘制正方形

由于绘制正方形和三角形大体相同，难免有些冗余代码，这里就不对公共的代码二次说明了，主要描述他们之间的不同点。

1）、数据准备

这里采用的是顶点法绘制正方形，所以要准备顶点索引来决定顶点绘制的顺序。

下面准备的是顶点数据、索引数据和绘制的颜色；

    // 三维的顶点坐标，有方向的
    private static final float triangleCoords[] = {
            -0.5f, 0.5f, 0.0f,  // bottom right
            -0.5f, -0.5f, 0.0f, // bottom left
            0.5f, 0.5f, 0.0f, // top
            0.5f, -0.5f, 0.0f, // top
    };


    private static final short indices[] = {
            0,1,2,3
    };

    // 颜色
    private static final  float colors[] = {0.8f, 0.4f, 0.1f, 1f};

• 顶点：顶点坐标的范围是-1~1，所以这里只占了大小的一半
• 顶点索引：描述了四个顶点，即按照顶点的顺序
• 颜色：一个RGBA的颜色

2）、Shade代码

着色器代码比较简单，只有一个attribute的顶点4向量和uniform的颜色向量

    // 顶点着色器code
    private static final String vertexShaderCode =
            "attribute vec4 vPosition;" +
            "void main() {" +
            "  gl_Position = vPosition;" +
            "}";

    // 片元着色器code
    private static final String fragmentShaderCode =
            "precision mediump float;" +
            "uniform vec4 vColor;" +
            "void main() {" +
            "    gl_FragColor = vColor;" +
            "}";

然后经过着色器的加载、着色器程序的处理、分别向颜色和顶点着色器输入颜色和顶点数据、最后开始绘制（glDrawElements）即可，至于代码就省略了，具体的看Git代码

问题：输出的是一个长方形

长方形result

三、矩阵变换

原因:

由于顶点的宽和高的范围是一致的，但是视图变换的窗口是：

GLES20.glViewport(0, 0, width, height);

这样就会在映射的时候，导致正方形宽和高分别是width/2 height/2,这样就导致了绘制的成了长方形。

为了解决这个问题，我们将顶点的宽和高变换下，宽度是-0.5 ~ 0.5，高变成-0.5（width/height）~0.5（width/height）,之后映射的时候才能正确。

为此需要变换的地方：

• 矩阵：onSurfaceChanged回调的时候计算出合理的矩阵

    private float[] mViewMatrix = new float[16];
    private float[] mProjectMatrix = new float[16];
    private float[] mMVPMatrix = new float[16];

    @Override
    public void onSurfaceChanged(GL10 gl, int width, int height) {
        // 裁剪大小
        GLES20.glViewport(0, 0, width, height);
        //计算宽高比
        float ratio=(float)width/height;
        //设置透视投影
        Matrix.frustumM(mProjectMatrix, 0, -ratio, ratio, -1, 1, 3, 7);
        //设置相机位置
        Matrix.setLookAtM(mViewMatrix, 0, 0, 0, 7.0f, 0f, 0f, 0f, 0f, 1.0f, 0.0f);
        //计算变换矩阵
        Matrix.multiplyMM(mMVPMatrix,0,mProjectMatrix,0,mViewMatrix,0);

    }

• 着色器代码：矩阵和顶点需要求积，并输入该矩阵

    // 顶点着色器code
    private static final String vertexShaderCode =
            "uniform mat4 vMatrix;"+   // 矩阵校正
            "attribute vec4 vPosition;" +
            "void main() {" +
            "  gl_Position = vMatrix*vPosition;" +
            "}";

正方形结果

GitHub下载