我的视频课程：《Android C++ OpenGL 教程》
在前一篇博客我们知道了Android中OpenGL ES是什么，然后知道了怎么搭建一个OpenGL ES的运行环境，现在我们就来开始绘制我们自己想要的图形了（绘制图片会在后面讲解，因为绘制图形是绘制图片的基础），我们最先开始绘制一个三角形，因为三角形是很多图形的基础。
一、顶点坐标系
在绘制之前，我们需要先了解Android中OpenGL ES的顶点坐标系是怎样的，如图：
其中：中心坐标（0,0）就是我们手机屏幕的中心，然后到最左边是（-1,0）、最右边是（1,0）、最上边是（0,1）、最下边是（0,-1）这样就把我们的手机屏幕分成了一个中心坐标为（0,0）上下左右长度分别为1的矩形。不管我们的手机（具体来讲是我们的GLSurfaceView）的大小是多少，都会映射到这个矩形中。这也是OpenGL中归一化的处理方式，什么都不管，反正都必须映射到这个范围内就对了。
二、设置绘制的三角形所需要的三个顶点
因为我们绘制的是三角形，所以我们需要三个顶点来确定我们的三角形的位置，比如我们要绘制如图的三角形：
由图我们知道要绘制的三角形的三个顶点坐标分别为：（-1,0）、（0,1）和（1,0）
三、本地化三角形顶点
所谓本地化就是跳出java VM（Java虚拟机）的约束（垃圾回收）范围，使我们的顶点在程序运行时一直都有自己分配的内存地址，不会因为java的GC而把顶点内存地址给回收掉，导致顶点不存在，从而引起OpenGL找不到顶点位置等错误，所以在OpenGL中我们需要把顶点坐标给本地化。
这里我们就需要分2个步骤来完成顶点的本地化：
3.1、用float数组来存储我们的顶点坐标，因为顶点坐标范围是在（-1f~1f）之间的所有小数都可以，所以我们先创建顶点数组：
float[] vertexData = {
-1.0f, 0.0f,//三角形左下角
0.0f, 1.0f,//三角形右下角
1.0f, 0.0f//三角形顶点
};3.2、然后根据顶点数组分配底层内存地址，因为需要本地化，所以就和c/c++一样需要我们手动分配内存地址，这里用到了ByteBuffer这个类：
FloatBuffer vertexBuffer = ByteBuffer.allocateDirect(vertexData.length * 4)//分配内存空间（单位字节）
.order(ByteOrder.nativeOrder())//内存bit的排序方式和本地机器一致
.asFloatBuffer()//转换成float的buffer,因为我们是放float类型的顶点
.put(vertexData);//把数据放入内存中
vertexBuffer.position(0);//把索引指针指向开头位置首先用allocateDirect分配内存大小，其大小为float数组长度乘以每一个float的大小，而float占4个字节，所以就是：vertexData.length * 4；然后设置其在内存中的对齐方式（分大端和小端对其）这里就和本地对齐方式一样：order(ByteOrder.nativeOrder())；然后设置是存储float类型数据的内存空间：asFloatBuffer()；最后再用float数组（vertexData）初始化内存中的数据：put(vertexData)。为了能从开头访问这块内存地址，还需要设置其position为0：vertexBuffer.position(0);。
这样我们的三角形的顶点内存地址就已经分配好了，并且做了本地持久化。
四、开始顶点着色器的编写（shader）
OpenGL的操作需要我们自己编写着色器（shader）程序给它，然后它会用GPU执行这个着色器程序，最终反馈执行结果给我们。我们用glsl语言来编写着色器程序，其语法方式和c语言类似，这里就不展开讲了，当学会了OpenGL编程后，可以自己学习glsl语法，然后就可以根据自己的能力编写“吊炸天”的效果了。
4.1、编写顶点着色器（vertex_shader.glsl），位置我们放在：res/raw/路径下
attribute vec4 av_Position;//用于在java代码中获取的属性
void main(){
gl_Position = av_Position;//gl_Position是内置变量，opengl绘制顶点就是根据它的值绘制的，所以我们需要把我们自己的值赋值给它。
}这段shader很短，但是足够说明OpenGL中顶点坐标的使用方法了：
首先解释一下attribute vec4 av_Position这句的意思：
attribute是表示顶点属性的，只能用在顶点坐标里面，然后在应用程序（java代码）中可以获取其变量，然后为其赋值。vec4是一个包含4个值（x,y,z,w）的向量，x和y表示2d平面，加上z就是3d的图像了，最后的w是摄像机的距离，因为我们绘制的是2d图形，所以最后z和w的值可以不用管，OpenGL会有默认值1。所以这句话的意思就是：声明了一个名字叫av_Position的包含4个向量的attribute类型的变量，用于我们在java代码中获取并把我们的顶点（FloatBuffer vertexBuffer）值赋值给它。这样OpenGL执行这段着色器代码（程序）时，就有了具体的顶点数据，就会在相应的顶点之间绘制图形（我们定义的三角形）了。
然后void main(){}是程序中函数，和c中是一样的。
最后是gl_Position = av_Position，这里的gl_Position是glsl中内置的最终顶点变量，我们要绘制的顶点就是传递给它。这段代码就是把我们设置的顶点数据传递给gl_Position，然后OpenGL就知道在哪里绘制顶点了。
五、片元着色器程序编写（shader）
上面我们只是写了我们的三角形绘制顶点的着色器程序，而三角形是 “顶点+颜色（样式）” 组成的，所以我们就需要告诉OpenGL我们绘制的三角形是什么颜色的，这就需要片元着色器程序了。
- 编写片元着色器程序（fragment_shader.glsl）
precision mediump float;//声明用中等精度的float
uniform vec4 af_Color;//用于在java层传递颜色数据
void main(){
gl_FragColor = af_Color;//gl_FragColor内置变量，opengl渲染的颜色就是获取的它的值，这里我们把我们自己的值赋值给它。
}这里的precision mediump float 表明用中等精度的float类型来保存变量，其他还可以设置高精度和低精度，一般中等精度就可以了，精度不同，执行的效率也会有差别。
然后这里是用了uniform这个类型来声明变量，uniform是用于应用程序（java代码中）向顶点和片元着色器传递数据，和attribute的区别在于，attribute是只能用在顶点着色器程序中，并且它里面包含的是具体的顶点的数据，每次执行时都需要从顶点内存里面获取新的值，而uniform始终都是用同一个变量。vec4 af_Color也是声明一个4个分量的变量af_Color，这个里面保存的是颜色的值了（rgba四个分量)。
最后gl_FragColor也是glsl中内置的变量，用于最终渲染颜色的赋值，这里我们就把我们自己的颜色赋值给gl_FragColor就行，是操作每一个像素的rgba。
通过第四步和第五步，我们已经设置好了顶点和颜色的着色器程序，接下来就可以让OpenGL加载这2个着色器程序，然后执行里面的代码，最终绘制出我们想要的图形（三角形）了。
六、加载并编译着色器语言
6.1、通过GLES20.glCreateShader(shaderType)创建（顶点或片元）类型的代码程序，如：
创建顶点类型的着色器代码程序：
int vertexShader = GLES20.glCreateShader(GLES20.GL_VERTEX_SHADER)片元传入：GLES20.GL_FRAGMENT_SHADER。
6.2、加载shader源码并编译shader
GLES20.glShaderSource(shader, source);//这里更加我们创建的类型加载相应类型的着色器（如：顶点类型）
GLES20.glCompileShader(shader);//编译我们自己写的着色器代码程序6.3、实际创建并返回一个渲染程序（program）
int program = GLES20.glCreateProgram();//创建一个program程序6.4、将着色器程序添加到渲染程序中
GLES20.glAttachShader(program, vertexShader);//把顶点着色器加入program程序中
GLES20.glAttachShader(program, fragmentShader);//把片元着色器加入program程序中6.5、链接源程序
GLES20.glLinkProgram(program);//最终链接顶点和片元着色器，后面在program中就可以访问顶点和片元着色器里面的属性了。通过上面5个步骤，我们就将用glsl写的着色器程序变成了我们可以在应用程序（java代码）中可以获取里面的变量并操作变量的具体的程序（program）了。
七、接下来就是传递顶点坐标和颜色值给着色器程序：
7.1、获取顶点变量
int aPositionHandl = GLES20.glGetAttribLocation(programId, "av_Position");//获取顶点属性，后面会给它赋值（即：把我们的顶点赋值给它）这里的av_Position就是顶点着色器中的attribute变量，后续操作就可以用返回值aPositionHandl这个句柄了。
7.2、获取颜色变量
int afColor = GLES20.glGetUniformLocation(program, "af_Color");//获取片元变量，后面可以通过它设置片元要显示的颜色。这里的af_Color就是片元着色器中的uniform变量。后面可以对它赋值来改变三角形的颜色。
7.3、开始执行着色器程序
GLES20.glUseProgram(programId);//开始绘制之前，先设置使用当前programId这个程序。7.4、首先激活顶点属性
GLES20.glEnableVertexAttribArray(aPositionHandl);//激活顶点属性数组，激活后才能对它赋值7.4、向顶点属性传递顶点数组的值
GLES20.glVertexAttribPointer(aPositionHandl, 2, GLES20.GL_FLOAT, false, 8,
vertexBuffer);//现在就是把我们的顶点vertexBuffer赋值给顶点着色器里面的变量。第一参数就是我们的顶点属性的句柄
第二个参数是我们用的几个分量表示的一个点，这里用的（x,y）2个分量，所以就填入2
第三个参数表示顶点的数据类型，因为我们用的float类型，所以就填入GL_FLOAT类型
第四个参数是是否做归一化处理，如果我们的坐标不在（-1,1）之间，就需要，由于我们的坐标是在（-1,1）之间，所以不需要，填入false
第五个参数是每个点所占空间大小，因为是（x，y）2个点，每个点是4个字节，所以一个点占8个空间大小，这个设置好后，OpenGL才知道8个字节表示一个点，就能按照这个规则，依次取出所有的点的值。
第六个参数就是OpenGL要从哪个内存中取出这些点的数据。
7.4、最后绘制这些顶点
GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, 3);//绘制三角形，从我们的顶点数组里面第0个位置开始，绘制顶点的个数为3（因为三角形只有三个顶点）这里是以顶点数组的方式来绘制图形
第一个参数表示绘制的方式：GLES20.GL_TRIANGLES，单个三角形的方式，还有其他方式，我们后面会讲解。
第二个参数表示从哪个位置开始绘制，因为顶点坐标里面只有3个坐标点，所以从0开始绘制。
第三个参数表示绘制多少个点，这里显然绘制三个点。
以上就是OpenGL的执行过程：
坐标点（顶点或纹理）->编写着色器程序->加载着色器程序并编译生成program->获取program中的变量->program变量赋值->最终绘制。
注：在加载着色器程序的时候还需要检查是否加载成功等结果，还有绘制图形时的清屏操作会在实例代码中给出完整的例子。
八、核心代码
8.1、加载着色器程序生成program（WlShaderUtil.java）
package com.ywl5320.opengldemo;
import android.content.Context;
import android.opengl.GLES20;
import android.util.Log;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
public class WlShaderUtil {
public static String readRawTxt(Context context, int rawId) {
InputStream inputStream = context.getResources().openRawResource(rawId);
BufferedReader reader = new BufferedReader(new InputStreamReader(inputStream));
StringBuffer sb = new StringBuffer();
String line;
try
{
while((line = reader.readLine()) != null)
{
sb.append(line).append("\n");
}
reader.close();
}
catch (Exception e)
{
e.printStackTrace();
}
return sb.toString();
}
public static int loadShader(int shaderType, String source)
{
int shader = GLES20.glCreateShader(shaderType);
if(shader != 0)
{
GLES20.glShaderSource(shader, source);
GLES20.glCompileShader(shader);
int[] compile = new int[1];
GLES20.glGetShaderiv(shader, GLES20.GL_COMPILE_STATUS, compile, 0);
if(compile[0] != GLES20.GL_TRUE)
{
Log.d("ywl5320", "shader compile error");
GLES20.glDeleteShader(shader);
shader = 0;
}
}
return shader;
}
public static int createProgram(String vertexSource, String fragmentSource)
{
int vertexShader = loadShader(GLES20.GL_VERTEX_SHADER, vertexSource);
if(vertexShader == 0)
{
return 0;
}
int fragmentShader = loadShader(GLES20.GL_FRAGMENT_SHADER, fragmentSource);
if(fragmentShader == 0)
{
return 0;
}
int program = GLES20.glCreateProgram();
if(program != 0)
{
GLES20.glAttachShader(program, vertexShader);
GLES20.glAttachShader(program, fragmentShader);
GLES20.glLinkProgram(program);
int[] linsStatus = new int[1];
GLES20.glGetProgramiv(program, GLES20.GL_LINK_STATUS, linsStatus, 0);
if(linsStatus[0] != GLES20.GL_TRUE)
{
Log.d("ywl5320", "link program error");
GLES20.glDeleteProgram(program);
program = 0;
}
}
return program;
}
}8.2、WlRender.java
package com.ywl5320.opengldemo;
import android.content.Context;
import android.opengl.GLES20;
import android.opengl.GLSurfaceView;
import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;
import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;
public class WlRender implements GLSurfaceView.Renderer{
private Context context;
private final float[] vertexData ={
-1f, 0f,
0f, 1f,
1f, 0f
};
private FloatBuffer vertexBuffer;
private int program;
private int avPosition;
private int afColor;
public WlRender(Context context)
{
this.context = context;
vertexBuffer = ByteBuffer.allocateDirect(vertexData.length * 4)
.order(ByteOrder.nativeOrder())
.asFloatBuffer()
.put(vertexData);
vertexBuffer.position(0);
}
@Override
public void onSurfaceCreated(GL10 gl, EGLConfig config) {
String vertexSource = WlShaderUtil.readRawTxt(context, R.raw.vertex_shader);
String fragmentSource = WlShaderUtil.readRawTxt(context, R.raw.fragment_shader);
program = WlShaderUtil.createProgram(vertexSource, fragmentSource);
if(program > 0)
{
avPosition = GLES20.glGetAttribLocation(program, "av_Position");
afColor = GLES20.glGetUniformLocation(program, "af_Color");
}
}
@Override
public void onSurfaceChanged(GL10 gl, int width, int height) {
GLES20.glViewport(0, 0, width, height);
}
@Override
public void onDrawFrame(GL10 gl) {
GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);
GLES20.glClearColor(1.0f, 1.0f, 1.0f, 1.0f);
GLES20.glUseProgram(program);
GLES20.glUniform4f(afColor, 1f, 0f, 0f, 1f);
GLES20.glEnableVertexAttribArray(avPosition);
GLES20.glVertexAttribPointer(avPosition, 2, GLES20.GL_FLOAT, false, 8, vertexBuffer);
GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, 3);
}
}这里用到了通过uniform类型变量传值的方式：
GLES20.glUniform4f(afColor, 1f, 0f, 0f, 1f);//分别设置片元变量的rgba四个值（前面的glUniform4f:表示这是uniform类型的变量的4个float类型的值）给片元着色器中的颜色变量afColor设置argb的值为：(1f, 0f, 0f,1f)——红色
然后其他的代码和上一篇博客一样。
九、最终效果如下：
十、总结
通过本篇文章，我们了解了Android中OpenGL ES的顶点坐标加载过程，在OpenGL ES中最复杂的图像就是三角形，其他任意图像都可以通过三角形来组合出来，这也为我们后续的功能打下了基础，务必好好理解里面的流程和逻辑。
GitHub：Android-OpenGL-ES
