opengles3.0开发|android-opengles3.0开发-2-绘制图形 opengles|android

项目地址
简介
【opengles3.0开发|android-opengles3.0开发-2-绘制图形】android 下 opengles 的绘制图形简单来说步骤如下：

定义图形顶点数据
编写/编译顶点着色器和片段着色器。
创建程序，将着色器绑定到程序上，然后连接程序。如果着色器中没有定义属性的位置，则在绑定着色器之后、连接程序之前，将属性名称和位置进行绑定。
使用程序，将图形顶点数据放到相应的属性位置上，然后进行绘制。

定义图形顶点数据
浮点型数组，顶点的顺序按逆时针排列。
android 平台上，app 运行在 jvm 中，内存由 jvm 管理，而 opengles 运行在 native 环境，所以为了式 opengles 能够访问图形顶点数据，需要把顶点拷贝到 native 内存中。
另外，为了方便操作 native 中的顶点字节，将其映射到 FloatBuffer 中，然后就可以像使用数组一样使用了。

//顶点，按逆时针顺序排列 private static final float[] vertices = { 0.0f, 0.5f, 0.0f, -0.5f, -0.5f, 0.0f, 0.5f, -0.5f, 0.0f}; public TriangleRender() { //将顶点数据拷贝映射到 native 内存中，以便opengl能够访问 verticesBuffer = ByteBuffer .allocateDirect(vertices.length * BYTES_PER_FLOAT)//直接分配 native 内存，不会被gc .order(ByteOrder.nativeOrder())//和本地平台保持一致的字节序（大/小头） .asFloatBuffer(); //将底层字节映射到FloatBuffer实例，方便使用 verticesBuffer .put(vertices)//将顶点拷贝到 native 内存中 .position(0); //每次 put position 都会 + 1，需要在绘制前重置为0 }

编写/编译着色器
着色器的源代码可以写到单独的文件中，也可以用字符串拼接（本文使用的方式，为了方便）
顶点着色器

第一行指定opengles版本，不指定默认为 opengles2.0
第二行声明一个输入变量 vPosition，表示顶点的坐标，4分量向量。layout (location = 0) 用来指定该 vPosition 的属性位置，后面需要使用该位置将顶点数据匹配到 vPosition 上。
后面几行定义了一个 main() 方法，是着色器的入口，方法中将 vPosition 值赋值给 gl_position 内建变量中，表示的是顶点的最终位置。

简单来说，该着色器的内容就是：使用 opengles3.0 版本，将图形顶点数据采用4分量向量的数据结构绑定到着色器的第 0 个属性上，属性的名字叫 vPosition，着色器执行时，将 vPosition 的值传给用来表示顶点最终位置的内建变量 gl_Position。
需要注意的是 layout (location = 0) 不是必须要写，如果不写的话，需要在后面着色器绑定到程序之后，程序连接之前使用 glBindAttribLocation 方法绑定。

//顶点着色器 private static final String vertextShaderSource = "#version 300 es\n" + "layout (location = 0) in vec4 vPosition; \n" + "void main()\n" + "{\n" + "gl_Position = vPosition; \n" + "}\n";

片段着色器

第一行指定opengles版本，不指定默认为 opengles2.0
第二行指明浮点变量的精度
第三行声明一个输出变量 fragColor ，4分量向量
给输出变量赋值

//片段着色器 private static final String fragmentShaderSource = "#version 300 es\n" + "precision mediump float; \n" + "out vec4 fragColor; \n" + "void main()\n" + "{\n" + "fragColor = vec4 ( 1.0, 0.0, 0.0, 1.0 ); \n" + "}\n";

着色器内容编辑完之后，想要使用还要经过编译。

/** * 加载着色器源，并编译 * * @param type顶点着色器（GL_VERTEX_SHADER）/片段着色器（GL_FRAGMENT_SHADER） * @param shaderSource 着色器源(上面编辑的内容) * @return 着色器 */ private int loadShader(int type, String shaderSource) { //创建着色器对象 int shader = GLES30.glCreateShader(type); if (shader == 0) return 0; //创建失败 //加载着色器源 GLES30.glShaderSource(shader, shaderSource); //编译着色器 GLES30.glCompileShader(shader); //检查编译状态 int[] compiled = new int[1]; GLES30.glGetShaderiv(shader, GLES30.GL_COMPILE_STATUS, compiled, 0); if (compiled[0] == 0) { Log.e(TAG, GLES30.glGetShaderInfoLog(shader)); GLES30.glDeleteShader(shader); return 0; //编译失败 }return shader; }

初始化程序
具体的流程下面代码很清楚，需要注意的就是如果着色器中没有指定属性的位置，则需要调用 glBindAttribLocation 进行指定。

@Override public void onSurfaceCreated(GL10 gl, EGLConfig config) { //获取顶点着色器 int vertextShader = loadShader(GLES30.GL_VERTEX_SHADER, vertextShaderSource); //获取片段着色器 int fragmentShader =loadShader(GLES30.GL_FRAGMENT_SHADER, fragmentShaderSource); //创建程序 int tmpProgram = GLES30.glCreateProgram(); if (tmpProgram == 0) return; //创建失败 //绑定着色器到程序 GLES30.glAttachShader(tmpProgram, vertextShader); GLES30.glAttachShader(tmpProgram, fragmentShader); //绑定属性位置 vPosition ：0 着色器中没有设定属性位置时使用 //GLES30.glBindAttribLocation(tmpProgram, 0, "vPosition"); //连接程序 GLES30.glLinkProgram(tmpProgram); //检查连接状态 int[] linked = new int[1]; GLES30.glGetProgramiv(tmpProgram,GLES30.GL_LINK_STATUS, linked, 0); if (linked[0] == 0){ Log.e(TAG, "tmpProgram linked error"); Log.e(TAG, GLES30.glGetProgramInfoLog(tmpProgram)); GLES30.glDeleteProgram(tmpProgram); return; //连接失败 } //保存程序，后面使用 program = tmpProgram; //设置清除渲染时的颜色 GLES30.glClearColor(1.0f, 1.0f, 1.0f, 0.0f); }

使用程序绘制

@Override public void onDrawFrame(GL10 gl) { //擦除屏幕 GLES30.glClear(GLES30.GL_COLOR_BUFFER_BIT); //使用程序 GLES30.glUseProgram(program); //获取 vPosition 属性的位置 int vposition = GLES30.glGetAttribLocation(program, "vPosition"); //加载顶点数据到 vPosition 属性位置 GLES30.glVertexAttribPointer(vposition,3,GLES30.GL_FLOAT,false,0,verticesBuffer); GLES30.glEnableVertexAttribArray(vposition); //绘制 GLES30.glDrawArrays(GLES30.GL_TRIANGLES,0,3); }

总结
本文通过绘制一个三角形，梳理了 opengles 绘制图形的流程，着色器、程序的使用方法。