OpenGL ES 支持三种基本图元：点，线和三角形。本文以绘制一个三角形为目标。
1. 定义三角形，代码如下所示:
public class Triangle {
private FloatBuffer vertexBuffer;
private static final float VERTEXS[] = {
-0.5f, 0.0f,
0.5f, 0.0f,
0.0f, 0.5f
};
public Triangle() {
ByteBuffer vertexBytes = ByteBuffer.allocateDirect(
VERTEXS.length * 4);
vertexBytes.order(ByteOrder.nativeOrder());
vertexBuffer = vertexBytes.asFloatBuffer();
vertexBuffer.put(VERTEXS);
vertexBuffer.position(0);
}
public FloatBuffer getVertexBuffer() {
return vertexBuffer;
}
}
其中VERTEXS为三角形xy轴的坐标， 顶点坐标分别为(-0.5f, 0)、（0.5f, 0.0f)、（0.0f, 0.5f)。在opengl es中，以屏幕中心为原点(0,0)， 水平方向为X轴。如下图所示：
opengl01.jpeg
为了处理最高效，通常这些坐标都写进一个ByteBuffer，它会被传到OpenGLES图形管线以进行处理。
2. 顶点着色器和片段着色器
为了绘制定义的形状必须提供很多图形渲染流程的细节。其中包括以下几项:
- 顶点着色器（Vertex Shader）：用于渲染形状顶点的 OpenGL ES 代码。
- 片段着色器（Fragment Shader）：使用颜色或纹理渲染形状表面的OpenGL ES代码。
- Program: OpenGL对象，包含了用于绘制一个或多个图形要用到的着色器。
通常利用顶点着色器来绘制一个形状，并且用片段着色器来为该形状上色，最后这些着色器被编译后添加到 OpenGL ES Program中，并利用它来绘制形状。
这里先不介绍着色器具体的语法， 为了使用方便，封装了对着色器的相关操作，如下所示:
public class OpenGlUtils {
private static final String TAG = OpenGlUtils.class.getName();
private static int loadShader(final String strSource, final int iType) {
int[] compiled = new int[1];
int iShader = GLES20.glCreateShader(iType);
GLES20.glShaderSource(iShader, strSource);
GLES20.glCompileShader(iShader);
GLES20.glGetShaderiv(iShader, GLES20.GL_COMPILE_STATUS, compiled, 0);
if (compiled[0] == 0) {
Log.e(TAG, "msg:" + GLES20.glGetShaderInfoLog(iShader));
return 0;
}
return iShader;
}
public static int loadProgram(final String strVSource, final String strFSource) {
int iVShader;
int iFShader;
int iProgId;
int[] link = new int[1];
iVShader = loadShader(strVSource, GLES20.GL_VERTEX_SHADER);
if (iVShader == 0) {
Log.e(TAG, "msg:" +"Vertex Shader Failed");
return 0;
}
iFShader = loadShader(strFSource, GLES20.GL_FRAGMENT_SHADER);
if (iFShader == 0) {
Log.e(TAG, "msg:" +"Fragment Shader Failed");
return 0;
}
iProgId = GLES20.glCreateProgram();
GLES20.glAttachShader(iProgId, iVShader);
GLES20.glAttachShader(iProgId, iFShader);
GLES20.glLinkProgram(iProgId);
GLES20.glGetProgramiv(iProgId, GLES20.GL_LINK_STATUS, link, 0);
if (link[0] <= 0) {
Log.e(TAG, "msg:" +"Linking Failed");
return 0;
}
GLES20.glDeleteShader(iVShader);
GLES20.glDeleteShader(iFShader);
return iProgId;
}
}
只需调用loadProgram函数即可，传入的参数分别为顶点着色器和片段着色器代码。而为了绘制三角形，着色器的代码如下所示:
private static final String vertexShaderCode =
"attribute vec4 vPosition;" +
"void main() {" +
"gl_Position = vPosition;" +
"gl_PointSize = 10.0;" +
"}";
private static final String fragmentShaderCode =
"precision mediump float;" +
"uniform vec4 vColor;" +
"void main() {" +
"gl_FragColor = vColor;" +
"}";
3. 最终绘制
整个Renderer代码如下:
public class TriangleRenderer implements GLSurfaceView.Renderer {
private static final String TAG = TriangleRenderer.class.getName();
private Triangle triangle;
private static final String vertexShaderCode =
"attribute vec4 vPosition;" +
"void main() {" +
"gl_Position = vPosition;" +
"gl_PointSize = 10.0;" +
"}";
private static final String fragmentShaderCode =
"precision mediump float;" +
"uniform vec4 vColor;" +
"void main() {" +
"gl_FragColor = vColor;" +
"}";
private int programId;
private int vertexPositionId;
private int colorPositionId;
@Override
public void onSurfaceCreated(GL10 gl, EGLConfig config) {
gl.glClearColor(1.0f, 0.0f, 0.0f, 0.0f);
triangle = new Triangle();
programId = OpenGlUtils.loadProgram(vertexShaderCode, fragmentShaderCode);
if(programId <= 0){
Log.e(TAG, "load program faild");
return;
}
GLES20.glUseProgram(programId);
vertexPositionId = GLES20.glGetAttribLocation(programId, "vPosition");
colorPositionId = GLES20.glGetUniformLocation(programId, "vColor");
GLES20.glVertexAttribPointer(vertexPositionId, 2,
GLES20.GL_FLOAT, false,
0, triangle.getVertexBuffer());
GLES20.glEnableVertexAttribArray(vertexPositionId);
}
@Override
public void onSurfaceChanged(GL10 gl, int width, int height) {
gl.glViewport(0, 0, width, height);
}
@Override
public void onDrawFrame(GL10 gl) {
gl.glClear(GL_COLOR_BUFFER_BIT);
GLES20.glUniform4f(colorPositionId, 0.0f, 0.0f, 0.0f, 0.0f);
GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, 3);
}
}
主要流程包括：
- 设置背景颜色；
- 生成三角形顶点缓冲区；
- 编译链接着色器程序；
- 获取着色器中变量的地址；
- 设置顶点位置；
- 最终在OnDrawFrame中绘制三角形；
运行后显示如下:
img2.jpg
重要函数说明:
- glVertexAttribPointer
函数原型如下:
public static void glVertexAttribPointer(
int indx,
int size,
int type,
boolean normalized,
int stride,
java.nio.Buffer ptr
)
glVertexAttribPointer指定了渲染时索引值为index的顶点属性数组的数据格式和位置。size指定每个属性值的组件数量,且必须为1、2、3、4之一。type指定每个组件的数据格式，stride指定了一个属性到下一个属性之间的步长（这就允许属性值被存储在单一数组或者不同的数组中）。当数组中的值被访问并被转换至浮点值时，如果normalized被设置为GL_TRUE，意味着整数型的值会被映射至区间-1,1，或者区间[0,1]（无符号整数），反之，这些值会被直接转换为浮点值而不进行归一化处理。
- glEnableVertexAttribArray
public static native void glEnableVertexAttribArray(
int index
);
启用顶点位置属性索引。默认情况下，出于性能考虑，所有顶点着色器的属性（Attribute）变量都是关闭的，意味着数据在着色器端是不可见的，哪怕数据已经上传到GPU，由glEnableVertexAttribArray启用指定属性，才可在顶点着色器中访问逐顶点的属性数据。
- glUniform4f
public static native void glUniform4f(
int location,
float x,
float y,
float z,
float w
);
为当前程序对象指定Uniform变量的值。
- glDrawArrays
public static native void glDrawArrays(
int mode,
int first,
int count
);
绘制图形。其中mode指定绘制模式，包括：
- GL_TRIANGLES，每三个顶之间绘制三角形，之间不连接。
- GL_TRIANGLE_FAN：以V0V1V2,V0V2V3,V0V3V4，……的形式绘制三角形
- GL_TRIANGLE_STRIP：顺序在每三个顶点之间均绘制三角形。
first指定从数组缓存中的哪一位开始绘制，一般都定义为0；count指定顶点的数量。
网友评论