材质渲染

1年前 阅读 239 评论 0 赞 0

材质渲染

前面讨论了如何给 3D 图形染色,更一般的情況是使用点阵图來给 Mesh 上色(渲染材质)。主要步骤如下:

创建 Bitmap 对象

使用材质渲染,首先需要构造用来渲染的 Bitmap 对象,Bitmap 对象可以从资源文件中读取或是从网路下载或是使用代码构造。为简单起见,本例从资源中读取:

  1. Bitmap bitmap = BitmapFactory.decodeResource(contect.getResources(),
  2. R.drawable.icon);

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

创建材质(Generating a texture)

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

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

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

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

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

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

设置 Texture 参数 glTexParameter

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

  1. // Scale up if the texture if smaller.
  2. gl.glTexParameterf(GL10.GL_TEXTURE_2D,
  3. GL10.GL_TEXTURE_MAG_FILTER,
  4. GL10.GL_LINEAR);
  5. // scale linearly when image smalled than texture
  6. gl.glTexParameterf(GL10.GL_TEXTURE_2D,
  7. GL10.GL_TEXTURE_MIN_FILTER,
  8. GL10.GL_LINEAR);

常用的两种模式为 GL10.GL_LINEAR 和 GL10.GL_NEAREST。

需要比较清晰的图像使用 GL10.GL_NEAREST:

而使用 GL10.GL_LINEAR 则会得到一个较模糊的图像:

UV Mapping

下一步要告知 OpenGL 库如何将 Bitmap 的像素映射到 Mesh 上。这可以分为两步来完成:

定义 UV 坐标

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

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

  1. float textureCoordinates[] = {0.0f, 1.0f,
  2. 1.0f, 1.0f,
  3. 0.0f, 0.0f,
  4. 1.0f, 0.0f };

如果使用如下坐标定义:

  1. float textureCoordinates[] = {0.0f, 0.5f,
  2. 0.5f, 0.5f,
  3. 0.0f, 0.0f,
  4. 0.5f, 0.0f };

Texture 匹配到 Plane 的左上角部分。

  1. float textureCoordinates[] = {0.0f, 2.0f,
  2. 2.0f, 2.0f,
  3. 0.0f, 0.0f,
  4. 2.0f, 0.0f };

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

有两种設置

  • GL_REPEAT 重复 Texture。
  • GL_CLAMP_TO_EDGE 只靠边线复制一次。
  • 下面有四种不同組合:

本例使用如下配置:

  1. gl.glTexParameterf(GL10.GL_TEXTURE_2D,
  2. GL10.GL_TEXTURE_WRAP_S,
  3. GL10.GL_REPEAT);
  4. gl.glTexParameterf(GL10.GL_TEXTURE_2D,
  5. GL10.GL_TEXTURE_WRAP_T,
  6. GL10.GL_REPEAT);

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

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

使用 Texture

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

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

渲染

  1. // Telling OpenGL to enable textures.
  2. gl.glEnable(GL10.GL_TEXTURE_2D);
  3. // Tell OpenGL where our texture is located.
  4. gl.glBindTexture(GL10.GL_TEXTURE_2D, textures[0]);
  5. // Tell OpenGL to enable the use of UV coordinates.
  6. gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
  7. // Telling OpenGL where our UV coordinates are.
  8. gl.glTexCoordPointer(2, GL10.GL_FLOAT, 0, textureBuffer);
  9. // ... here goes the rendering of the mesh ...
  10. // Disable the use of UV coordinates.
  11. gl.glDisableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
  12. // Disable the use of textures.
  13. gl.glDisable(GL10.GL_TEXTURE_2D);

本例代码是在一个平面上(SimplePlane)下使用 Texture 来渲染,首先是修改 Mesh 基类,使它能够支持定义 UV 坐标:

  1. // Our UV texture buffer.
  2. private FloatBuffer mTextureBuffer;
  3. /**
  4. * Set the texture coordinates.
  5. *
  6. * @param textureCoords
  7. */
  8. protected void setTextureCoordinates(float[] textureCoords) {
  9. // float is 4 bytes, therefore we multiply the number if
  10. // vertices with 4.
  11. ByteBuffer byteBuf = ByteBuffer.allocateDirect(
  12. textureCoords.length * 4);
  13. byteBuf.order(ByteOrder.nativeOrder());
  14. mTextureBuffer = byteBuf.asFloatBuffer();
  15. mTextureBuffer.put(textureCoords);
  16. mTextureBuffer.position(0);
  17. }

并添加设置 Bitmap 和创建 Texture 的方法:

  1. // Our texture id.
  2. private int mTextureId = -1;
  3. // The bitmap we want to load as a texture.
  4. private Bitmap mBitmap;
  5. /**
  6. * Set the bitmap to load into a texture.
  7. *
  8. * @param bitmap
  9. */
  10. public void loadBitmap(Bitmap bitmap) {
  11. this.mBitmap = bitmap;
  12. mShouldLoadTexture = true;
  13. }
  14. /**
  15. * Loads the texture.
  16. *
  17. * @param gl
  18. */
  19. private void loadGLTexture(GL10 gl) {
  20. // Generate one texture pointer...
  21. int[] textures = new int[1];
  22. gl.glGenTextures(1, textures, 0);
  23. mTextureId = textures[0];
  24. // ...and bind it to our array
  25. gl.glBindTexture(GL10.GL_TEXTURE_2D, mTextureId);
  26. // Create Nearest Filtered Texture
  27. gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MIN_FILTER,
  28. GL10.GL_LINEAR);
  29. gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MAG_FILTER,
  30. GL10.GL_LINEAR);
  31. // Different possible texture parameters, e.g. GL10.GL_CLAMP_TO_EDGE
  32. gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_S,
  33. GL10.GL_CLAMP_TO_EDGE);
  34. gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_WRAP_T,
  35. GL10.GL_REPEAT);
  36. // Use the Android GLUtils to specify a two-dimensional texture image
  37. // from our bitmap
  38. GLUtils.texImage2D(GL10.GL_TEXTURE_2D, 0, mBitmap, 0);
  39. }

最后修改 draw 方法來渲染材质:

  1. // Indicates if we need to load the texture.
  2. private boolean mShouldLoadTexture = false;
  3. /**
  4. * Render the mesh.
  5. *
  6. * @param gl
  7. * the OpenGL context to render to.
  8. */
  9. public void draw(GL10 gl) {
  10. ...
  11. // Smooth color
  12. if (mColorBuffer != null) {
  13. // Enable the color array buffer to be used during rendering.
  14. gl.glEnableClientState(GL10.GL_COLOR_ARRAY);
  15. gl.glColorPointer(4, GL10.GL_FLOAT, 0, mColorBuffer);
  16. }
  17. if (mShouldLoadTexture) {
  18. loadGLTexture(gl);
  19. mShouldLoadTexture = false;
  20. }
  21. if (mTextureId != -1 && mTextureBuffer != null) {
  22. gl.glEnable(GL10.GL_TEXTURE_2D);
  23. // Enable the texture state
  24. gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
  25. // Point to our buffers
  26. gl.glTexCoordPointer(2, GL10.GL_FLOAT, 0, mTextureBuffer);
  27. gl.glBindTexture(GL10.GL_TEXTURE_2D, mTextureId);
  28. }
  29. gl.glTranslatef(x, y, z);
  30. ...
  31. // Point out the where the color buffer is.
  32. gl.glDrawElements(GL10.GL_TRIANGLES, mNumOfIndices,
  33. GL10.GL_UNSIGNED_SHORT, mIndicesBuffer);
  34. ...
  35. if (mTextureId != -1 && mTextureBuffer != null) {
  36. gl.glDisableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
  37. }
  38. ...
  39. }

本例使用的 SimplePlane 定义如下:

  1. package se.jayway.opengl.tutorial.mesh;
  2. /**
  3. * SimplePlane is a setup class for Mesh that creates a plane mesh.
  4. *
  5. * @author Per-Erik Bergman (per-erik.bergman@jayway.com)
  6. *
  7. */
  8. public class SimplePlane extends Mesh {
  9. /**
  10. * Create a plane with a default with and height of 1 unit.
  11. */
  12. public SimplePlane() {
  13. this(1, 1);
  14. }
  15. /**
  16. * Create a plane.
  17. *
  18. * @param width
  19. * the width of the plane.
  20. * @param height
  21. * the height of the plane.
  22. */
  23. public SimplePlane(float width, float height) {
  24. // Mapping coordinates for the vertices
  25. float textureCoordinates[] = { 0.0f, 2.0f, //
  26. 2.0f, 2.0f, //
  27. 0.0f, 0.0f, //
  28. 2.0f, 0.0f, //
  29. };
  30. short[] indices = new short[] { 0, 1, 2, 1, 3, 2 };
  31. float[] vertices = new float[] { -0.5f, -0.5f, 0.0f,
  32. 0.5f, -0.5f, 0.0f,
  33. -0.5f, 0.5f, 0.0f,
  34. 0.5f, 0.5f, 0.0f };
  35. setIndices(indices);
  36. setVertices(vertices);
  37. setTextureCoordinates(textureCoordinates);
  38. }
  39. }

本例示例代码下載 ,到本篇为止介紹了 OpenGL ES 开发的基本方法,更详细的教程将在以后发布,后面先回到 Android ApiDemos 中 OpenGL ES 的示例。

你的支持将鼓励作者继续创作

评论(0)

(无)