一、前期基础知识储备
笔者计划写三篇文章来详细分析OpenGL ES基础的同时也是入门关键的三个点:
①OpenGL ES是什么?与OpenGL的关系是什么?——概念部分
②使用OpenGLES绘制2D/3D图形的第一步:定义图形;——运用部分
③使用OpenGLES绘制出②步骤中定义好的图形:——运用部分,难点所在
通过这三篇文章的分析,就像给万丈高楼垫定了基石,万丈高楼平地起,后面利用OpenGLES做各种效果,各种变换都是建立在这三步的图形编程理解之上的。
今天开始第三节——绘制图形部分的分析,重难点所在!
在前面的两篇文章《在Android中使用OpenGL ES进行开发第(一)课:概念先行》《在Android中使用OpenGL ES进行开发第(二)课:定义图形》中,笔者详细分析了OpenGL ES2.0相关的重要概念和实现了一个三角形的顶点坐标的定义,那么接下来,本节文章就来讲第二篇文章中定义好的图形具体绘制出来,这也是笔者这三篇文章的重难点所在。
正如第一篇文章中提及的,使用OpenGL ES2.0的时候,尽管写最简单的程式(如基本作图、三角形、矩形或动作translate、rotate、scale等),一定要写shader(着色器/渲染器)才能运作,原本这些在OpenGL ES1.x时是系统做的事,现在要人力进行实现,因而提高了开发的难度。
二、上代码,具体实现
第一步:渲染器类中初始化图形—简单;
public class MyGLRenderer2 implements GLSurfaceView.Renderer {
...
private Triangle mTriangle;
@Override
public void onSurfaceCreated(GL10 gl, EGLConfig config) {
// initialize a triangle
mTriangle = new Triangle();
}
...
}
第二步:为draw()方法做准备—创建着色器对象(shader),放入程式(Program)中,将程式链接至GLES;
着色器相关概念(重点):我们在第一篇文章中花了大量笔墨来介绍着色器(shader),那么着色器到底是什么?
①顶点着色器(Vertex Shader):用来渲染图形顶点的 OpenGL ES 代码(glsl语言编写);生成每个顶点最终位置,针对每个顶点都会执行一次;一旦最终位置确定了,OpenGL就可以把这些可见顶点的集合组装成点、直线和三角形;
②片元着色器(Fragment Shader):使用颜色或纹理(texture)渲染图形表面的 OpenGL ES 代码(glsl语言编写);为组成点、直线和三角形的每个片元生成最终颜色/纹理,针对每个片元都会执行一次;一个片元是一个小的、单一颜色的长方形区域,类似于计算机屏幕上的一个像素;
(一旦最终颜色生成,OpenGL就会把它们写到一块称为帧缓冲区的内存块中,然后Android就会把这个帧缓冲区显示在屏幕上)
③程式(Program):一个OpenGL ES 对象,包含了你希望用来绘制图形所要用到的着色器,最后顶点着色器和片元着色器都要放入到程式中,然后才能使用;简单来说就是将两个着色器变为一个对象。
以上三个,你需要至少一个顶点着色器(Vertex Shader)来定义一个图形顶点,以及一个片元着色器(Fragment Shader)为该图形上色。这些着色器必须被编译然后再添加到一个OpenGLES Program当中,并利用这个 progrem 来绘制形状。
这段代码在原本的OpenGL ES1.X中是由系统实现的,所以写起来1.x的代码比较简单,但是在2.x中我们采用人力的方式实现,虽然有些复杂,但是,通过编写顶点及片元着色器程序,来完成一些顶点变换和纹理颜色计算工作,可以实现更加灵活、精细化的计算与渲染。
熟悉着色器概念之后,那么我们代码具体实现分三步走:
①图形类中,创建两个GLSL代码段——顶点着色器代码段+片元着色器代码;
OpenGL ES实现3D绘图和普通的2D绘图即view利用canvas来绘制不一样,OpenGL需要加载GLSL程式,让GPU进行绘制。所以需要定义shader代码,并在初始化的时候加载。
public class Triangle {
/**
* 顶点着色器代码
* attribute变量(属性变量)只能用于顶点着色器中
* uniforms变量(一致变量)用来将数据值从应用程其序传递到顶点着色器或者片元着色器。 。
* varying变量(易变变量)是从顶点着色器传递到片元着色器的数据变量。
* gl_Position (必须)为内建变量,表示变换后点的空间位置。
*/
private final String vertexShaderCode =
"attribute vec4 vPosition;" + // 应用程序传入顶点着色器的顶点位置
"void main() {" +
" gl_Position = vPosition;" + // 设置此次绘制此顶点位置
"}";
/**
* 片元着色器代码
*/
private final String fragmentShaderCode =
"precision mediump float;" + // 设置工作精度
"uniform vec4 vColor;" + // 应用程序传入着色器的颜色变量
"void main() {" +
" gl_FragColor = vColor;" + // 颜色值传给 gl_FragColor内建变量,完成片元的着色
"}";
...
}
OpenGL最本质的概念之一就是着色器,它是图形硬件设备所执行的一类特殊函数。理解着色器最好的办法就是把它看做是专为图形处理单元(即GPU)编译的一种小型程序。OpenGL在其内部包含了所有的编译器工具,可以直接从着色器源码创建GPU所需要的编译代码并执行。
注:任何一种OpenGL程序本质上都可以被分为两部分:CPU端运行的部分,采用C++、Java之类的语言编写;以及GPU端运行的部分,使用GLSL语言编写。
更多着色器代码解析内容,感兴趣的读者可以参考1文章、2文章、3文章
②渲染器类中,创建辅助方法,用于编译①中创建的两个代码段。
该辅助方法中,我们传入两个参数,第一个参数是着色器的类型,包含两个顶点着色器(GLES20.GL_VERTEX_SHADER)和片元着色器(GLES20.GL_FRAGMENT_SHADER),第二个参数就是①中定义好的两个着色器代码段。
public class MyGLRenderer2 implements GLSurfaceView.Renderer
...
/**
* 加载并编译着色器代码
* 渲染器类型type={GLES20.GL_VERTEX_SHADER, GLES20.GL_FRAGMENT_SHADER}
* 渲染器代码 GLSL
*/
public static int loadShader(int type, String shaderCode){
int shader = GLES20.glCreateShader(type);
//加载shader代码 glShaderSource 和 glCompileShader
GLES20.glShaderSource(shader, shaderCode);
GLES20.glCompileShader(shader);
return shader;
}
}
调用glCreateShader()方法-传入渲染器类型参数type,创建对应的着色器对象;
调用glShaderSource()方法-传入着色器对象和字符串shaderCode定义的源代码,将二者关联起来;
调用glCompileShader()方法-传入着色器对象,对其进行编译。
③图形类中,我们传入具体的参数到②中定义的方法里面,得到两个着色器的对象,然后将两个着色器对象放入到程式(Program)中。最后将程式与GLES链接好。
public class Triangle() {
...
private final int mProgram;
public Triangle() {
...
// 加载编译顶点渲染器
int vertexShader = MyGLRenderer2.loadShader(GLES20.GL_VERTEX_SHADER,
vertexShaderCode);
// 加载编译片元渲染器
int fragmentShader = MyGLRenderer2.loadShader(GLES20.GL_FRAGMENT_SHADER,
fragmentShaderCode);
// 创建空的程式 - create empty OpenGL ES Program
mProgram = GLES20.glCreateProgram();
// attach shader 代码 - add the vertex shader to program
GLES20.glAttachShader(mProgram, vertexShader);
// attach shader 代码 - add the fragment shader to program
GLES20.glAttachShader(mProgram, fragmentShader);
// 链接GLSL程式 - creates OpenGL ES program executables
GLES20.glLinkProgram(mProgram);
}
}
做完以上两个步骤,就为图形类中定义draw()方法做好了准备—draw()方法真是千呼万唤始出来啊!下一步中,我们将开始做最后的拼接,并把数据链接到OpenGL中。
第三步:图形类中创建draw()方法,拿到链接至GLES的程式(Program),设置形状的顶点位置和表面的颜色值;
下面的代码为形状的顶点着色器和形状着色器设置了位置和颜色值,然后执行绘制函数:
public class Triangle {
// 绘制形状的顶点数量
private static final int COORDS_PER_VERTEX = 3;
...
private int mPositionHandle; //变量 用于存取attribute修饰的变量的位置编号
private int mColorHandle; //变量 用于存取uniform修饰的变量的位置编号
private final int vertexCount = triangleCoords.length / COORDS_PER_VERTEX;
private final int vertexStride = COORDS_PER_VERTEX * 4; // 4 bytes per vertex
public void draw() {
// 使用GLSL程式 - Add program to OpenGL ES environment
GLES20.glUseProgram(mProgram);
// 获取shader代码中的变量索引 get handle to vertex shader's vPosition member
// Java代码中需要获取shader代码中定义的变量索引,用于在后面的绘制代码中进行赋值
// 变量索引在GLSL程式生命周期内(链接之后和销毁之前)都是固定的,只需获取一次
mPositionHandle = GLES20.glGetAttribLocation(mProgram, "vPosition");
// 绑定vertex坐标值 调用glVertexAttribPointer()告诉OpenGL,它可以在
// 缓冲区vertexBuffer中获取vPosition的数据
GLES20.glVertexAttribPointer(mPositionHandle, COORDS_PER_VERTEX,
GLES20.GL_FLOAT, false,
vertexStride, vertexBuffer);
// 启用vertex Enable a handle to the triangle vertices
GLES20.glEnableVertexAttribArray(mPositionHandle);
// get handle to fragment shader's vColor member
mColorHandle = GLES20.glGetUniformLocation(mProgram, "vColor");
// Set color for drawing the triangle
GLES20.glUniform4fv(mColorHandle, 1, color, 0);
// 通过 GLES20.glDrawArrays 或者 GLES20.glDrawElements 开始绘制
GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vertexCount);
// Disable vertex array
GLES20.glDisableVertexAttribArray(mPositionHandle);
}
}
draw()方法里面的代码是不是也非常复杂,没关系,我们捋一捋就可以看清楚,整段代码实际上可以分为三部分:
①1行代码-在draw()方法中拿到链接至GLES中的程式(Program);
②3行代码-从程式中取出顶点着色器,开始对顶点的位置进行设置;
③3行代码-从程式中取出片元着色器,开始对图形表面颜色进行设置。
第四步:渲染器类中调用图形类中定义好的draw()方法,进行具体绘制
public class MyGLRenderer2 implements GLSurfaceView.Renderer {
@Override
public void onDrawFrame(GL10 gl) {
...
mTriangle.draw();
}
}
总结:到此为止,笔者的OpenGL ES2.0的入门三课就已经结束了,覆盖面是有的,但是并没有仔细深入,其实原本打算也是通过这三篇文章来普及一下基础的OpenGL ES2.0用法,后续还会继续写提高篇的文章。(写着写着,发现想写的还有很多,之后会再加上)