OpenglES2.0 for Android:来画个三角形吧

OpenglES2.0 for Android:来画个三角形吧

先看看我们的整个流程：

理解坐标系：

左侧是Opengl默认的坐标系，右边是典型的android设备屏幕的坐标系。左侧的瘦瘦的三角形映射到android屏幕上就变成了胖胖的三角形（屏幕横向的时候），我们可以使用
camera和投影解决这个问题，具体怎么解决这里就先不累述了。这里我们只需要知道屏幕的左上角是（-1.0,1.0）横向向右为X轴正向，纵向向下为Y轴
负向，其范围都是从 -1到 +1。

定义三角形顶点：

我们在第一个android的小demo的工程里新建一个包shape，然后新建一个类 Triangle 。然后我们在该类中定义三角形的三个顶点的数据：
此时该类如下（Triangle.java）：

<span style="font-size:14px;">package com.cumt.shape;

import android.content.Context;

public class Triangle {

private Context context;
// 数组中每个顶点的坐标数
    static final int COORDS_PER_VERTEX = 2;
// 每个顶点的坐标数  	X ,  Y
static float triangleCoords[] = { 0.0f,  0.5f ,   // top
-0.5f, -0.5f ,   // bottom left
0.5f, -0.5f };   // bottom right

public Triangle(Context context){
this.context = context;
}
}</span>

我们在该类中定义的float类型的数据并不能直接被opengl使用，float[ ]是属于虚拟机环境的，而Opengl作为本地系统库直接运行在硬件上，所以我们需要将float[ ] 转化为
FloatBuffer以使数据可以被opengl使用，此时该类如下（Triangle.java ）：

<span style="font-size:14px;">package com.cumt.shape;

import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;

import android.content.Context;

public class Triangle {

private Context context;

private static final int BYTES_PER_FLOAT = 4;
private FloatBuffer vertexBuffer;

// 数组中每个顶点的坐标数
static final int COORDS_PER_VERTEX = 2;
// 每个顶点的坐标数  	X ,  Y
static float triangleCoords[] = { 0.0f,  0.5f ,   // top
-0.5f, -0.5f ,   // bottom left
0.5f, -0.5f };   // bottom right

public Triangle(Context context){
this.context = context;

vertexBuffer = ByteBuffer
.allocateDirect(triangleCoords.length * BYTES_PER_FLOAT)
.order(ByteOrder.nativeOrder())
.asFloatBuffer();
// 把坐标们加入FloatBuffer中
vertexBuffer.put(triangleCoords);
// 设置buffer，从第一个坐标开始读
vertexBuffer.position(0);
}
}</span>

编写着色器：

着色器语言（shading language）是opengl es2.0 比opengl es 1.X 新增的内容，使我们更加自由的实现自己想要的效果，该语言基于C/C++。该语言的具体类型等等这里不详细说明。

我们需要两个着色器——顶点着色器和片段着色器，顾名思义顶点着色器是用于处理顶点坐标的（不要与屏幕的像素点混淆），而片段着色器用于处理片段，所谓片段简单理解就是顶点着色器处理后的一堆顶点形成的片段。

现在我们来编写这两个顶点着色器：在 res 目录下新建一个文件夹 raw 在该文件夹下新建一个文件simple_vertex_shader.glsl ，其内容如下：

<span style="font-size:14px;">attribute vec4 a_Position;

void main()
{
gl_Position = a_Position;
}   </span>

gl_Position即opengl定义的顶点的坐标，我们目的就是通过这个来告诉opengl我们的顶点数据。vec4是着色器语言中的向量类型的一种，包含了四个浮点数的向量。

接下来在raw文件夹内新建文件 simple_fragment_shader.glsl ，其内容如下：

<span style="font-size:14px;">precision mediump float;

uniform vec4 u_Color;

void main()
{
gl_FragColor = u_Color;
}</span>

这里我们只传入一个颜色信息。这里注意一下 上面顶点着色器的 限定符 attribute 和 uniform 。attribute 一般用于每个顶点各不相同的量，如顶点位置等，后者一般用于
同一组顶点组成的相同的量，如光源位置，一组颜色等。

编译着色器及绘制：

接下来我们进行最后一步，编译着色器以及绘制三角形，这里我们来写一个工具类用于加载着色器程序以及编译着色器。
首先新建一个包utils ,此时目录结构如下图所示：



在utils包下新建类 LoggerConfig 用于管理我们的日志（是否输出Logcat的信息），代码如下（LoggerConfig.java）：

<span style="font-size:14px;">package com.cumt.utils;

public class LoggerConfig {
public static final boolean ON = true;
}</span>

再在该包下新建类ShaderHelper 用于加载着色器程序以及编译着色器：

<span style="font-size:14px;">package com.cumt.utils;

import static android.opengl.GLES20.GL_COMPILE_STATUS;
import static android.opengl.GLES20.GL_FRAGMENT_SHADER;
import static android.opengl.GLES20.GL_LINK_STATUS;
import static android.opengl.GLES20.GL_VALIDATE_STATUS;
import static android.opengl.GLES20.GL_VERTEX_SHADER;
import static android.opengl.GLES20.glAttachShader;
import static android.opengl.GLES20.glCompileShader;
import static android.opengl.GLES20.glCreateProgram;
import static android.opengl.GLES20.glCreateShader;
import static android.opengl.GLES20.glDeleteProgram;
import static android.opengl.GLES20.glDeleteShader;
import static android.opengl.GLES20.glGetProgramInfoLog;
import static android.opengl.GLES20.glGetProgramiv;
import static android.opengl.GLES20.glGetShaderInfoLog;
import static android.opengl.GLES20.glGetShaderiv;
import static android.opengl.GLES20.glLinkProgram;
import static android.opengl.GLES20.glShaderSource;
import static android.opengl.GLES20.glValidateProgram;
import android.util.Log;

public class ShaderHelper {

private static final String TAG = "ShaderHelper";

/**
* 加载并编译顶点着色器，返回得到的opengl id
* @param shaderCode
* @return
*/
public static int compileVertexShader(String shaderCode) {
return compileShader(GL_VERTEX_SHADER, shaderCode);
}

/**
* 加载并编译片段着色器，返回opengl id
* @param shaderCode
* @return
*/
public static int compileFragmentShader(String shaderCode) {
return compileShader(GL_FRAGMENT_SHADER, shaderCode);
}

/**
* 加载并编译着色器，返回opengl id
* @param type
* @param shaderCode
* @return
*/
private static int compileShader(int type, String shaderCode) {
// 建立新的着色器对象
final int shaderObjectId = glCreateShader(type);

if (shaderObjectId == 0) {
if (LoggerConfig.ON) {
Log.w(TAG, "不能创建新的着色器.");
}

return 0;
}

// 传递着色器资源代码.
glShaderSource(shaderObjectId, shaderCode);

//编译着色器
glCompileShader(shaderObjectId);

// 获取编译的状态
final int[] compileStatus = new int[1];
glGetShaderiv(shaderObjectId, GL_COMPILE_STATUS,
compileStatus, 0);

if (LoggerConfig.ON) {
//打印log
Log.v(TAG, "代码编译结果:" + "\n" + shaderCode
+ "\n:" + glGetShaderInfoLog(shaderObjectId));
}

// 确认编译的状态
if (compileStatus[0] == 0) {
// 如果编译失败，则删除该对象
glDeleteShader(shaderObjectId);

if (LoggerConfig.ON) {
Log.w(TAG, "编译失败!.");
}

return 0;
}

// 返回着色器的opengl id
return shaderObjectId;
}

/**
* 链接顶点着色器和片段着色器成一个program
* 并返回这个pragram的opengl id
* @param vertexShaderId
* @param fragmentShaderId
* @return
*/
public static int linkProgram(int vertexShaderId, int fragmentShaderId) {

// 新建一个program对象
final int programObjectId = glCreateProgram();

if (programObjectId == 0) {
if (LoggerConfig.ON) {
Log.w(TAG, "不能新建一个 program");
}

return 0;
}

// Attach the vertex shader to the program.
glAttachShader(programObjectId, vertexShaderId);

// Attach the fragment shader to the program.
glAttachShader(programObjectId, fragmentShaderId);

// 将两个着色器连接成一个program
glLinkProgram(programObjectId);

// 获取连接状态
final int[] linkStatus = new int[1];
glGetProgramiv(programObjectId, GL_LINK_STATUS,
linkStatus, 0);

if (LoggerConfig.ON) {
// Print the program info log to the Android log output.
Log.v(
TAG,
"Results of linking program:\n"
+ glGetProgramInfoLog(programObjectId));
}

// 验证连接状态
if (linkStatus[0] == 0) {
// If it failed, delete the program object.
glDeleteProgram(programObjectId);

if (LoggerConfig.ON) {
Log.w(TAG, "连接 program 失败!.");
}

return 0;
}

// Return the program object ID.
return programObjectId;
}

/**
* Validates an OpenGL program. Should only be called when developing the
* application.
*/
public static boolean validateProgram(int programObjectId) {
glValidateProgram(programObjectId);
final int[] validateStatus = new int[1];
glGetProgramiv(programObjectId, GL_VALIDATE_STATUS,
validateStatus, 0);
Log.v(TAG, "Results of validating program: " + validateStatus[0]
+ "\nLog:" + glGetProgramInfoLog(programObjectId));

return validateStatus[0] != 0;
}

/**
* /**
* 编译，连接 ，返回 program 的 ID
* @param vertexShaderSource
* @param fragmentShaderSource
* @return
*/
public static int buildProgram(String vertexShaderSource,
String fragmentShaderSource) {
int program;

// Compile the shaders.
int vertexShader = compileVertexShader(vertexShaderSource);
int fragmentShader = compileFragmentShader(fragmentShaderSource);

// Link them into a shader program.
program = linkProgram(vertexShader, fragmentShader);

if (LoggerConfig.ON) {
validateProgram(program);
}
return program;
}
}</span>

上面整个过程如图所示：



以后我们就可以很方便的一直使用该工具类来加载编译着色器了。只需要调用buildProgram，传入两个着色器的String文本就可以获得program的id是不是很方便。
我们似乎遗忘了什么，对的我们的两个着色器的文本内容该怎么活的呢，我们再在该目录下定义一个工具类TextResourceReader类来获得文本的内容，返回String类型
代码如下（TextResourceReader.java）：

<span style="font-size:14px;">package com.cumt.utils;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import android.content.Context;
import android.content.res.Resources;

public class TextResourceReader {
/**
* Reads in text from a resource file and returns a String containing the
* text.
*/
public static String readTextFileFromResource(Context context,
int resourceId) {
StringBuilder body = new StringBuilder();

try {
InputStream inputStream =
context.getResources().openRawResource(resourceId);
InputStreamReader inputStreamReader =
new InputStreamReader(inputStream);
BufferedReader bufferedReader = new BufferedReader(inputStreamReader);

String nextLine;

while ((nextLine = bufferedReader.readLine()) != null) {
body.append(nextLine);
body.append('\n');
}
} catch (IOException e) {
throw new RuntimeException(
"Could not open resource: " + resourceId, e);
} catch (Resources.NotFoundException nfe) {
throw new RuntimeException("Resource not found: " + resourceId, nfe);
}

return body.toString();
}
}</span>

OK ,接下来就让我们来使用者两个工具类获得program的id吧，先回到 前面定义的 Triangle 类：
我们来定义一个私有方法getProgram 并在构造函数中调用 ，此时代码如下 （Triangle.java）：

<span style="font-size:14px;">package com.cumt.shape;

import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;
import com.cumt.openglestwo_test_one.R;
import com.cumt.utils.ShaderHelper;
import com.cumt.utils.TextResourceReader;
import android.content.Context;
import android.opengl.GLES20;

public class Triangle {

private Context context;

private static final int BYTES_PER_FLOAT = 4;
private FloatBuffer vertexBuffer;

// 数组中每个顶点的坐标数
static final int COORDS_PER_VERTEX = 2;
// 每个顶点的坐标数  						X ,  Y
static float triangleCoords[] = { 0.0f,  0.5f ,   // top
-0.5f, -0.5f ,   // bottom left
0.5f, -0.5f };   // bottom right

private int program;

public Triangle(Context context){
this.context = context;

vertexBuffer = ByteBuffer
.allocateDirect(triangleCoords.length * BYTES_PER_FLOAT)
.order(ByteOrder.nativeOrder())
.asFloatBuffer();
// 把坐标们加入FloatBuffer中
vertexBuffer.put(triangleCoords);
// 设置buffer，从第一个坐标开始读
vertexBuffer.position(0);

getProgram();

}

//获取program的id
private void getProgram(){
//获取顶点着色器文本
String vertexShaderSource = TextResourceReader
.readTextFileFromResource(context, R.raw.simple_vertex_shader);
//获取片段着色器文本
String fragmentShaderSource = TextResourceReader
.readTextFileFromResource(context, R.raw.simple_fragment_shader);
//获取program的id
program = ShaderHelper.buildProgram(vertexShaderSource, fragmentShaderSource);
GLES20.glUseProgram(program);
}
}</span>

至此我们已经胜利在望了，接下来思考一下，我们应该做哪些工作？显然我们需要将定义的数据传入着色器中来使用。详细的步骤见下面的代码（Triangle.java）：

<span style="font-size:14px;">package com.cumt.shape;

import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;
import com.cumt.openglestwo_test_one.R;
import com.cumt.utils.ShaderHelper;
import com.cumt.utils.TextResourceReader;
import android.content.Context;
import android.opengl.GLES20;

public class Triangle {

private Context context;

private static final int BYTES_PER_FLOAT = 4;
private FloatBuffer vertexBuffer;

//---------第四步:定义坐标元素的个数，这里有三个顶点
private static final int POSITION_COMPONENT_COUNT = 3;

// 数组中每个顶点的坐标数
static final int COORDS_PER_VERTEX = 2;
// 每个顶点的坐标数  						X ,  Y
static float triangleCoords[] = { 0.0f,  0.5f ,   // top
-0.5f, -0.5f ,   // bottom left
0.5f, -0.5f };   // bottom right

private int program;

//------------第一步 : 定义两个标签，分别于着色器代码中的变量名相同,
//------------第一个是顶点着色器的变量名，第二个是片段着色器的变量名
private static final String A_POSITION = "a_Position";
private static final String U_COLOR = "u_Color";

//------------第二步: 定义两个ID,我们就是通ID来实现数据的传递的,这个与前面
//------------获得program的ID的含义类似的
private int uColorLocation;
private int aPositionLocation;

public Triangle(Context context){
this.context = context;

vertexBuffer = ByteBuffer
.allocateDirect(triangleCoords.length * BYTES_PER_FLOAT)
.order(ByteOrder.nativeOrder())
.asFloatBuffer();
// 把坐标们加入FloatBuffer中
vertexBuffer.put(triangleCoords);
// 设置buffer，从第一个坐标开始读
vertexBuffer.position(0);

getProgram();

//----------第三步: 获取这两个ID ，是通过前面定义的标签获得的
uColorLocation = GLES20.glGetUniformLocation(program, U_COLOR);
aPositionLocation = GLES20.glGetAttribLocation(program, A_POSITION);

//---------第五步: 传入数据
GLES20.glVertexAttribPointer(aPositionLocation, COORDS_PER_VERTEX,
GLES20.GL_FLOAT, false, 0, vertexBuffer);
GLES20.glEnableVertexAttribArray(aPositionLocation);

}

//获取program
private void getProgram(){
//获取顶点着色器文本
String vertexShaderSource = TextResourceReader
.readTextFileFromResource(context, R.raw.simple_vertex_shader);
//获取片段着色器文本
String fragmentShaderSource = TextResourceReader
.readTextFileFromResource(context, R.raw.simple_fragment_shader);
//获取program的id
program = ShaderHelper.buildProgram(vertexShaderSource, fragmentShaderSource);
GLES20.glUseProgram(program);
}

//----------第七步:绘制
public void draw(){
GLES20.glUniform4f(uColorLocation, 0.0f, 0.0f, 1.0f, 1.0f);
GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, POSITION_COMPONENT_COUNT);
}
}</span>

最后我们只需要在我们前面定义的MyRender中使用即可，此时MyRender代码（这里在构造函数中引入了Context上下文环境，因为需要我们的Triangle对象的构造函数需要Context），
如下（MyRender.java ）：

<span style="font-size:14px;">package com.cumt.render;

import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;

import com.cumt.shape.Triangle;

import android.content.Context;
import android.opengl.GLSurfaceView.Renderer;
import android.util.Log;
import static android.opengl.GLES20.glClear;
import static android.opengl.GLES20.glClearColor;
import static android.opengl.GLES20.glViewport;
import static android.opengl.GLES20.GL_COLOR_BUFFER_BIT;

public class MyRender implements Renderer {

private Context context;

public MyRender(Context context){
this.context = context;
}

//定义三角形对象
Triangle triangle;

public void onSurfaceCreated(GL10 gl, EGLConfig config) {
Log.w("MyRender","onSurfaceCreated");
// TODO Auto-generated method stub
//First:设置清空屏幕用的颜色，前三个参数对应红绿蓝，最后一个对应alpha
glClearColor(0.0f, 0.0f, 0.0f, 0.0f);
triangle = new Triangle(context);
}

public void onSurfaceChanged(GL10 gl, int width, int height) {
Log.w("MyRender","onSurfaceChanged");
// TODO Auto-generated method stub
//Second:设置视口尺寸，即告诉opengl可以用来渲染的surface大小
glViewport(0,0,width,height);
}

public void onDrawFrame(GL10 gl) {
Log.w("MyRender","onDrawFrame");
// TODO Auto-generated method stub
//Third:清空屏幕，擦除屏幕上所有的颜色，并用之前glClearColor定义的颜色填充整个屏幕
glClear(GL_COLOR_BUFFER_BIT);
//绘制三角形
triangle.draw();
}
}</span>

运行结果如下：