一、前言
上一节，我们说到了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;" +
"}";
正方形结果
