网页 代码怎么做网站,网站建设与维护课程设计,那个大学业做网站,crm系统排名我们总是对陌生人太客气#xff0c;而对亲密的人太苛刻 上一篇文章中#xff0c;我们已经将OpenGL ES环境搭建完成。接下来我们就可以开始我们的绘图之旅了。该篇我们讲解最基本图形三角形的绘制#xff0c;这是一切绘制的基础。在OpenGL ES的世界里一切图形都可以由三角形拼… 我们总是对陌生人太客气而对亲密的人太苛刻 上一篇文章中我们已经将OpenGL ES环境搭建完成。接下来我们就可以开始我们的绘图之旅了。该篇我们讲解最基本图形三角形的绘制这是一切绘制的基础。在OpenGL ES的世界里一切图形都可以由三角形拼接绘制而成。
在Android官方文档中也介绍了三角形的绘制本文案例我们参照了官方文档但也做了进一步的改进希望你能通过本节对OpenGL ES绘制图形有一个初步的认识。
坐标系
在绘制图形前我们要了解OpenGL ES的坐标系我们知道Android的坐标系左上角为原点[0,0]而OpenGL ES的坐标系如下图 OpenGL ES的坐标系中原点[00]在屏幕的中心无论屏幕是正方形还是长方形四个点的坐标都如上图所示也就是边长都是为2的正方形 聪明的同学可能已经有疑问了OpenGL ES坐标系明显是按照屏幕是正方形来的那么如果屏幕为长方形我按照比例绘制图形肯定会变形的。这里给出肯定的回答是的至于怎么解决先放下。
接下来我们先画一个三角形至于遇到的问题我们一个个解决^_^
三角形绘制
设置要绘制图形的坐标和颜色数据定义顶点着色器和片段着色器创建Shader程序并链接编译好绘制图形使用Shader程序将顶点、颜色数据传递到显存
1. 顶点颜色数据定义
在OpenGL ES中绘制图形必须先定义好坐标确定图形的位置才能进行绘制。我们为坐标定义浮点数的顶点数组然后我在构造方法中将浮点数组转化为ByteBuffer后续我们会将它传递到OpenGL ES图像管道进行处理。
public class Triangle {// 顶点坐标缓冲区private FloatBuffer vertexBuffer;// 此数组中每个顶点的坐标数static final int COORDS_PER_VERTEX 3;// 三角形三个点的坐标逆时针绘制static float triangleCoords[] { // 坐标逆时针顺序0.0f, 0.616f, 0.0f, // top-0.5f, -0.25f, 0.0f, // bottom left0.5f, -0.25f, 0.0f // bottom right};// 设置颜色为红色float color[] {1.0f, 0.0f, 0.0f, 1.0f};public Triangle() {// 初始化形状坐标的顶点字节缓冲区ByteBuffer bb ByteBuffer.allocateDirect(// (number of coordinate values * 4 bytes per float)triangleCoords.length * 4);// use the device hardwares native byte orderbb.order(ByteOrder.nativeOrder());// create a floating point buffer from the ByteBuffervertexBuffer bb.asFloatBuffer();// add the coordinates to the FloatBuffervertexBuffer.put(triangleCoords);// set the buffer to read the first coordinatevertexBuffer.position(0);}
}根据代码中定义的三角形的坐标我们大概画出的三角形如下图应该是一个等边三角形
形状面和环绕
在 OpenGL 中形状的面是由三维或更多点定义的三维表面 空间。一组三个或更多个三维点在 OpenGL 中称为顶点具有一个正面以及一个背面。如何知道哪一面为正面哪一面为背面呢这个问题问得好 答案与环绕或者定义形状点的方向有关。 在此示例中三角形的点按如上顺序定义这也决定了他们是按逆时针的方向绘制绘制这些坐标的顺序定义了形状的环绕方向。默认情况下在OpenGL中逆时针绘制的面是正面而另外一面是背面。
为什么重要的是要知道形状的哪个面是正面答案与OpenGL的常用功能有关称为面部剔除。面部剔除是OpenGL环境的一个选项它允许渲染管道忽略不计算或绘制形状的背面从而节省时间内存和处理周期
// enable face culling feature
gl.glEnable(GL10.GL_CULL_FACE);
// specify which faces to not draw
gl.glCullFace(GL10.GL_BACK);请务必按照逆时针绘制顺序定义 OpenGL 形状的坐标 2. 创建着色器代码
public class Triangle {// 顶点着色器代码private final String vertexShaderCode attribute vec4 vPosition;\n void main() {\n gl_Position vPosition;\n }\n;// 片段着色器代码private final String fragmentShaderCode precision mediump float;\n uniform vec4 vColor;\n void main() {\n gl_FragColor vColor;\n }\n;...
}变量名说明备注vPosition顶点坐标数据我们第一步定义的顶点数据需要传给这个变量该变量名可随意修改gl_PositionShader的内置变量就是图形的顶点位置该变量名不可修改vColor图元像素的颜色我们第一步定义的颜色需要传给这个变量该变量名可随意修改gl_FragColorShader的内置变量图元颜色该变量名不可修改 上面先简单介绍下变量的含义后续我们会详细讲解GLSL语言。 3. 创建Shader程序并链接
我们需要对上面的着色器语言进行编译链接后才能在OpenGL ES环境中使用。编译此代码我们需要一个实用的方法
public class GLESUtils {/*** 加载着色器代码** param type* param shaderCode* return*/public static int loadShader(int type, String shaderCode) {// create a vertex shader type (GLES20.GL_VERTEX_SHADER)// or a fragment shader type (GLES20.GL_FRAGMENT_SHADER)int shader GLES20.glCreateShader(type);// add the source code to the shader and compile itGLES20.glShaderSource(shader, shaderCode);GLES20.glCompileShader(shader);return shader;}
}为了匹配Renderer生命周期方法onSurfaceCreated我们在Triangle中创建surfaceCreated方法用来编译链接Shader程序创建surfaceChanged来更新OpenGL ES画布大小
public class Triangle() {.../*** OpenGL ES程序句柄*/private int mProgram;public void surfaceCreated() {// 加载顶点着色器代码int vertexShader GLESUtils.loadShader(GLES20.GL_VERTEX_SHADER,vertexShaderCode);// 加载片段着色器代码int fragmentShader GLESUtils.loadShader(GLES20.GL_FRAGMENT_SHADER,fragmentShaderCode);// 创建空的OpenGL ES程序mProgram GLES20.glCreateProgram();// 将顶点着色器添加到程序中GLES20.glAttachShader(mProgram, vertexShader);// 将片段着色器添加到程序中GLES20.glAttachShader(mProgram, fragmentShader);// 链接OpenGL ES程序GLES20.glLinkProgram(mProgram);}public void surfaceChanged(int width, int height) {// 设置OpenGL ES画布大小GLES20.glViewport(0, 0, width, height);}
}4. 绘制图形
此时我们已经定义好了三角形的顶点坐标数据、片元颜色值、OpenGL ES着色器程序。接下来我们只需要将坐标数据、片元颜色值传递给着色器程序然后执行绘制我们就可以将三角形画出来了。我们定义一个单独的方法draw用来执行绘制三角形
4.1 将Shader程序添加到OpenGL ES环境
public class Triangle() {public void draw() {// 将程序添加到OpenGL ES环境GLES20.glUseProgram(mProgram);// 重新绘制背景色为黑色GLES20.glClearColor(0.0f, 0.0f, 0.0f, 1.0f);GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);...}
}4.2 传递顶点坐标和片元颜色数据
我们要从java内存将数据传递给OpenGL ES显存环境中需要获取Shader程序属性的句柄值 注意获取属性句柄要和Shader程序中定义的属性变量名字一样。获取属性句柄后我们操作属性句柄就可以将数据传递给对应的变量了。 public class Triangle() {.../*** Shader程序中顶点属性的句柄*/private int positionHandle;/*** Shader程序中颜色属性的句柄*/private int colorHandle;public void surfaceCreated() {// 加载Shader程序代码...// 获取顶点着色器vPosition成员的句柄positionHandle GLES20.glGetAttribLocation(mProgram, vPosition);// 获取片段着色器vColor成员的句柄colorHandle GLES20.glGetUniformLocation(mProgram, vColor);}
}在draw方法中设置顶点数据和颜色值
public class Triangle() {...private final int vertexCount triangleCoords.length / COORDS_PER_VERTEX;private final int vertexStride COORDS_PER_VERTEX * 4; // 4 bytes per vertexpublic void draw() {// 将程序添加到OpenGL ES环境...// 为三角形顶点启用控制柄GLES20.glEnableVertexAttribArray(positionHandle);// 准备三角坐标数据GLES20.glVertexAttribPointer(positionHandle, // 执行要配置的属性句柄编号COORDS_PER_VERTEX, // 指定每个顶点属性的分量数GLES20.GL_FLOAT, // 指定每个分量的数据类型false, // 指定是否将数据归一化到 [0,1] 或 [-1,1] 范围内vertexStride, // 步长指定连续两个顶点属性间的字节数。如果为 0则表示顶点属性是紧密排列的vertexBuffer // 指向数据缓冲对象);// 设置绘制三角形的颜色GLES20.glUniform4fv(colorHandle, 1, color, 0);// 画三角形GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vertexCount);// 禁用顶点阵列GLES20.glDisableVertexAttribArray(positionHandle);}
}4.3 在GLSurfaceView中绘制三角形
以上我们已经将OpenGL ES绘制三角形的流程全部讲完接下来我们只需要在GLSurfaceView中创建Triangle类并执行对应的方法
我们在上一篇中Android OpenGLES2.0开发二环境搭建已经搭建好了OpenGL ES环境现在只需在Renderer接口中添加Triangle即可
public class TriangleGLSurfaceView extends GLSurfaceView {private Context mContext;private MyRenderer mMyRenderer;public TriangleGLSurfaceView(Context context) {super(context);init(context);}public TriangleGLSurfaceView(Context context, AttributeSet attrs) {super(context, attrs);init(context);}private void init(Context context) {mContext context;mMyRenderer new MyRenderer();setEGLContextClientVersion(2);setRenderer(mMyRenderer);setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY);}static class MyRenderer implements Renderer {Triangle mTriangle;public MyRenderer() {mTriangle new Triangle();}Overridepublic void onSurfaceCreated(GL10 gl, EGLConfig config) {mTriangle.surfaceCreated();}Overridepublic void onSurfaceChanged(GL10 gl, int width, int height) {mTriangle.surfaceChanged(width, height);}Overridepublic void onDrawFrame(GL10 gl) {mTriangle.draw();}}
}将GLSurfaceView添加到布局中运行程序我们可以看到绘制的效果如下图所示 经过上面坐标系的讲解我们应该能料想到绘制的结果并不是一个正三角形至于原因我想大家也应该知道至于怎么解决我们后续再讲
最后
希望你根据上面的步骤一步一步将代码敲出来相信你肯定对OpenGL ES绘制有一个全面的了解。虽然只是绘制一个三角形但是上面的代码基本上是后续一切绘制的基础也算是一个模板代码后续别的绘制基本上就是对上面的代码微调即可实现。
