android-opengles3.0开发-5-绘制纹理 opengles3.0开发

项目地址
简介
本文在上一篇文章的基础上完成纹理的绘制。
绘制纹理流程也不复杂：

一张作为纹理的图片
编写相应的着色器
准备图形和纹理的坐标
将图片转换成纹理
将纹理绑定到着色器指定属性的位置
绘制图形和纹理

编写着色器
顶点着色器

a_Position：图形定点坐标
a_texCoord：对应的纹理坐标，其他位置的坐标 opengles 通过插值进行计算
v_texCoord：输出到到片段着色器的纹理坐标

在 main() 方法中进行赋值。

#version 300 eslayout (location = 0) in vec4 a_Position; layout (location = 1) in vec2 a_texCoord; out vec2 v_texCoord; void main() { gl_Position = a_Position; v_texCoord = a_texCoord; }

片段着色器
s_texture：纹理的采样
通过 texture() 方法将传进来的纹理和坐标进行差值采样，输出到颜色缓冲区。

#version 300 es precision mediump float; in vec2 v_texCoord; layout (location = 0) out vec4 outColor; uniform sampler2D s_texture; void main(){ outColor = texture(s_texture, v_texCoord); }

准备顶点、纹理坐标
opengl 的坐标系是归一化坐标系，原点在屏幕中心，横向是横坐标，纵向是纵坐标，范围都是[-1,1]
一般设备的屏幕坐标系远点在屏幕左上角，横向是横坐标，纵向是纵坐标，但是纵坐标的正方向向下
纹理的坐标系是左下角是原点，右上方是正方向，也是归一化坐标系，范围是[0,1]
所以纹理显示到屏幕上是，纹理坐标与定点坐标的 y 坐标方向是反着的。

//顶点，按逆时针顺序排列 public static final float[] VERTEX = { 0.0f, 0.5f, 0.0f, -0.5f, -0.5f, 0.0f, 0.5f, -0.5f, 0.0f}; //纹理坐标，（s,t），t坐标方向和顶点y坐标反着 public static final float[] TEXTURE_COORD = { 0.5f,0.0f, 0.0f,1.0f, 1.0f,1.0f };

图片转换成纹理
主要就是通过 glGenTextures 方法创建纹理对象
然后将图片加载进来生成位图，绑定到纹理对象上，别忘了设置放大和缩小的过滤模式
再使用 glBindTexture 方法绑定纹理到 opengl
【android-opengles3.0开发-5-绘制纹理】通过 texImage2D 将位图绑定到纹理上，glGenerateMipmap 创建 mip 贴图
最后位图的资源已经绑定并复制到纹理对象上了，所以 bitmap 对象就可以释放了，并且纹理也可以从 opengl 解绑。

public static int loadTexture(int resId){ //创建纹理对象 int[] textureObjIds = new int[1]; //生成纹理：纹理数量、保存纹理的数组，数组偏移量 glGenTextures(1, textureObjIds,0); if(textureObjIds[0] == 0){ throw new RuntimeException("创建纹理对象失败"); } //原尺寸加载位图资源（禁止缩放） BitmapFactory.Options options = new BitmapFactory.Options(); options.inScaled = false; Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(), resId, options); if (bitmap == null){ //删除纹理对象 glDeleteTextures(1, textureObjIds, 0); throw new RuntimeException("加载位图失败"); } //绑定纹理到opengl glBindTexture(GL_TEXTURE_2D, textureObjIds[0]); //设置放大、缩小时的纹理过滤方式，必须设定，否则纹理全黑 glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR); //将位图加载到opengl中，并复制到当前绑定的纹理对象上 texImage2D(GL_TEXTURE_2D, 0, bitmap, 0); //创建 mip 贴图 glGenerateMipmap(GL_TEXTURE_2D); //释放bitmap资源（上面已经把bitmap的数据复制到纹理上了） bitmap.recycle(); //解绑当前纹理，防止其他地方以外改变该纹理 glBindTexture(GL_TEXTURE_2D, 0); //返回纹理对象 return textureObjIds[0]; }

渲染器绘制
流程基本和之前文章的绘制流程相同，具体的细节下面代码中都有很详细的注释。

public void render(Surface surface, int width, int height){ //创建屏幕上渲染区域：EGL窗口 int[] surfaceAttribList = {EGL_NONE}; EGLSurface eglSurface = eglCreateWindowSurface(eglDisplay, eglConfig, surface, surfaceAttribList, 0); //指定当前上下文 eglMakeCurrent(eglDisplay, eglSurface, eglSurface, eglContext); //获取着色器 int texVertexShader = loadShader(GL_VERTEX_SHADER, loadShaderSource(R.raw.texture_vertex_shader)); int texFragmentShader = loadShader(GL_FRAGMENT_SHADER, loadShaderSource(R.raw.texture_fragtment_shader)); //创建并连接程序 int program = createAndLinkProgram(texVertexShader, texFragmentShader); //设置清除渲染时的颜色 glClearColor(1.0f, 1.0f, 1.0f, 0.0f); //设置视口 glViewport(0, 0, width, height); //获取顶点、纹理坐标数据 FloatBuffer vertexBuffer = getVertextBuffer(); FloatBuffer texCoordBuffer = getTextureCoordBuffer(); //擦除屏幕 glClear(GL_COLOR_BUFFER_BIT); //使用程序 glUseProgram(program); //绑定顶点、纹理坐标到指定属性位置 int aPosition = glGetAttribLocation(program, "a_Position"); int aTexCoord = glGetAttribLocation(program, "a_texCoord"); glVertexAttribPointer(aPosition,3,GL_FLOAT,false,0,vertexBuffer); glVertexAttribPointer(aTexCoord, 2, GL_FLOAT, false, 0, texCoordBuffer); glEnableVertexAttribArray(aPosition); glEnableVertexAttribArray(aTexCoord); //绑定纹理 glActiveTexture(GL_TEXTURE0); glBindTexture(GL_TEXTURE_2D, loadTexture(R.drawable.texture)); //Set the sampler texture unit to 0 glUniform1i(glGetUniformLocation(program, "s_texture"),0); //绘制 glDrawArrays(GL_TRIANGLES,0,3); //交换 surface 和显示器缓存 eglSwapBuffers(eglDisplay, eglSurface); //释放 eglDestroySurface(eglDisplay, eglSurface); }

总结
本文在前文的基础上，梳理了具体的纹理操作方法，给绘制的图形贴上一张图片纹理，整个的流程和前文差不多。
需要注意就是纹理到顶点的坐标匹配时的 y 方向，以正常显示纹理。