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>运行结果如下：
1454
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
