Android OpenGL ES 绘图 -- 材质渲染

OpenGL 绘图 – 材质渲染

注：参考：http://wiki.jikexueyuan.com/project/opengl-es-basics/texture-rendering.html

创建 Bitmap 对象

使用材质渲染，首先需要构造用来渲染的 Bitmap 对象，Bitmap 对象可以从资源文件中读取或是从网路下载或是使用代码构造。为简单起见，本例从资源中读取，在Renderer类中创建设置Bitmap方法（需在setRenderer前调用）：

public void setBitmap(Bitmap bitmap) { this.bitmap = bitmap; }

要注意的是，有些设备对使用的 Bitmap 的大小有要求，要求 Bitmap 的宽度和长度为 2 的几次幂（1，2，4，8，16，32，64.。。。)，如果使用不和要求的 Bitmap 来渲染，可能只会显示白色。

创建材质(Generating a texture)

下一步使用 OpenGL 库创建一个材质(Texture)，首先是获取一個 Texture Id。

// Create an int array with the number of textures we want, // in this case 1. int[] textures = new int[1]; // Tell OpenGL to generate textures. gl.glGenTextures(1, textures, 0);

textures 中存放了创建的 Texture ID，使用同样的 Texture Id ，也可以来刪除一个 Texture：

// Delete a texture. gl.glDeleteTextures(1, textures, 0)

有了 Texture Id 之后，就可以通知 OpenGL 库使用这个 Texture：

gl.glBindTexture(GL10.GL_TEXTURE_2D, textures[0]);

设置 Texture 参数 glTexParameter

下一步需要給 Texture 填充设置参数，用来渲染的 Texture 可能比要渲染的区域大或者小，这是需要设置 Texture 需要放大或是缩小时 OpenGL 的模式：

// Scale up if the texture if smaller. gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MAG_FILTER, GL10.GL_LINEAR); // scale linearly when image smalled than texture gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MIN_FILTER, GL10.GL_LINEAR);

常用的两种模式为 GL10.GL_LINEAR 和 GL10.GL_NEAREST。 需要比较清晰的图像使用 GL10.GL_NEAREST; 而使用 GL10.GL_LINEAR 则会得到一个较模糊的图像;

定义 UV 坐标

UV Mapping 指将 Bitmap 的像素映射到 Mesh 上的顶点。UV 坐标定义为左上角（0，0），右下角（1，1）（因为使用的 2D Texture)，下图坐标显示了 UV 坐标，右边為我们需要染色的平面的顶点順序：

为了能正确的匹配，需要把 UV 坐标中的（0，0）映射到顶点 0，（0，1）映射到顶点 2 等等。

float textureCoordinates[] = {0.0f, 0.0f, 0.0f, 1.0f, 1.0f, 1.0f, 1.0f, 0.0f};

將使用一些不存在的 Texture 去渲染平面(UV 坐标为 0，0-1，1 而 (0,0)-(2,2)定义超过 UV 定义的大小），这时需要告诉 OpenGL 库如何去渲染这些不存在的 Texture 部分。 有两种設置

GL_REPEAT 重复 Texture。GL_CLAMP_TO_EDGE 只靠边线复制一次。

本例使用如下配置：

gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_S, GL10.GL_REPEAT); gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_T, GL10.GL_REPEAT);

然后是将 Bitmap 资源和 Texture 绑定起來：

GLUtils.texImage2D(GL10.GL_TEXTURE_2D, 0, bitmap, 0);

为了能够使用上面定义的 Texture，需要创建一 Buffer 來存储 UV 坐标：

ByteBuffer byteBuf = ByteBuffer.allocateDirect(textureCoordinates.length * 4); byteBuf.order(ByteOrder.nativeOrder()); FloatBuffer textureBuffer = byteBuf.asFloatBuffer(); textureBuffer.put(textureCoordinates); textureBuffer.position(0);

渲染

//开启2D材质渲染 gl.glEnable(GL10.GL_TEXTURE_2D); //开启材质渲染UV坐标管道 gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY); //开启点坐标管道 gl.glEnableClientState(GL10.GL_VERTEX_ARRAY); //开启点颜色管道 gl.glEnableClientState(GL10.GL_COLOR_ARRAY); //传入点坐标 gl.glVertexPointer(3, GL10.GL_FLOAT, 0, vertexBuffer); //传入点颜色数组 gl.glColorPointer(4, GL10.GL_FLOAT, 0, colorBuffer); //传入UV坐标 gl.glTexCoordPointer(2, GL10.GL_FLOAT, 0, textureBuffer); //根据点与绘线顺序绘面 gl.glDrawElements(GL10.GL_TRIANGLES, indices.length, GL10.GL_UNSIGNED_SHORT, indexBuffer); //关闭点颜色管道 gl.glDisableClientState(GL10.GL_COLOR_ARRAY); //关闭点坐标管道 gl.glDisableClientState(GL10.GL_VERTEX_ARRAY); //关闭材质渲染UV坐标管道 gl.glDisableClientState(GL10.GL_TEXTURE_COORD_ARRAY); //关闭2D材质渲染 gl.glDisable(GL10.GL_TEXTURE_2D); // Delete a texture.（如果不删除，如果不断绘画，应用所占运存会不断增加） gl.glDeleteTextures(1, textures, 0); }

Demo

本例代码同样在上次中更改 在drawREC中

添加UV坐标

float textureCoordinates[] = {0.0f, 0.0f, 0.0f, 1.0f, 1.0f, 1.0f, 1.0f, 0.0f}; ByteBuffer byteBuf = ByteBuffer.allocateDirect(textureCoordinates.length * 4); byteBuf.order(ByteOrder.nativeOrder()); FloatBuffer textureBuffer = byteBuf.asFloatBuffer(); textureBuffer.put(textureCoordinates); textureBuffer.position(0);

生成材质并绑定

int[] textures = new int[1]; // Tell OpenGL to generate textures. gl.glGenTextures(1, textures, 0); gl.glBindTexture(GL10.GL_TEXTURE_2D, textures[0]);

配置材质属性

// Scale up if the texture if smaller. gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MAG_FILTER, GL10.GL_LINEAR); // scale linearly when image smalled than texture gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MIN_FILTER, GL10.GL_LINEAR); //重复Texture去渲染不存在的Texture部分 gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_S, GL10.GL_REPEAT); gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_T, GL10.GL_REPEAT);

把Bitmap与Texture绑定起来

//将 Bitmap 资源和 Texture 绑定起來： GLUtils.texImage2D(GL10.GL_TEXTURE_2D, 0, bitmap, 0);

绘图

//开启2D材质渲染 gl.glEnable(GL10.GL_TEXTURE_2D); //开启材质渲染UV坐标管道 gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY); //开启点坐标管道 gl.glEnableClientState(GL10.GL_VERTEX_ARRAY); //开启点颜色管道 gl.glEnableClientState(GL10.GL_COLOR_ARRAY); //传入点坐标 gl.glVertexPointer(3, GL10.GL_FLOAT, 0, vertexBuffer); //传入点颜色数组 gl.glColorPointer(4, GL10.GL_FLOAT, 0, colorBuffer); //传入UV坐标 gl.glTexCoordPointer(2, GL10.GL_FLOAT, 0, textureBuffer); //根据点与绘线顺序绘面 gl.glDrawElements(GL10.GL_TRIANGLES, indices.length, GL10.GL_UNSIGNED_SHORT, indexBuffer); //关闭点颜色管道 gl.glDisableClientState(GL10.GL_COLOR_ARRAY); //关闭点坐标管道 gl.glDisableClientState(GL10.GL_VERTEX_ARRAY); //关闭材质渲染UV坐标管道 gl.glDisableClientState(GL10.GL_TEXTURE_COORD_ARRAY); //关闭2D材质渲染 gl.glDisable(GL10.GL_TEXTURE_2D); // Delete a texture.（如果不删除，如果不断绘画，应用所占运存会不断增加） gl.glDeleteTextures(1, textures, 0);

效果图： 代码：http://download.csdn.net/download/z896435317/9960486