Android OpenGL添加纹理

Igor
Android评论9,790字数 7250阅读24分10秒阅读模式

上一篇文章【Android OpenGL添加光照和材料属性 】我们已经学了如何为3D模型添加光照和材料属性，使得模型看起来更有立体感。今天我们学习如何为3D模型贴上纹理，使得模型看起来更真实！目前我在网上没有找到带有纹理图片的STL模型文件，如果随便贴一张图片上去的话并不好看，看起来不会很真实。好在手头上现在有2个带有纹理的STL格式文件，虽然这两个模型看起来有点残缺，但是不影响我们学习如何贴纹理。先看看效果~.

图片1如下：

Android OpenGL添加纹理-图片1
原图1

对应的模型：

绑定纹理

图片2如下：

Android OpenGL添加纹理-图片2
原图2

对应的模型：

绑定纹理

注意，本文的讲解是建立在《Android OpenGL显示任意3D模型文件 》之上，请务必先看这篇文章再往下读（当然了，如果你已经有一定的Android OpenGL基础，可以不用看）。好啦，看完效果后，我们开始学习吧！

1 相关基础

1.1 贴纹理原理简单概述

其实贴纹理的原理非常简单，就是给每个三角形贴上图片即可。那么如何给三角形贴图片呢？我们知道，既然是给三角形贴图片，那肯定就需要一张图，然后在这张图片上指定三角形的三个顶点对应这张图的位置。这样就可以准确的为这个三角形贴好图片了。

值得注意的是，三角形的三个顶点在图片上的位置取值范围为[0,1]。即以相对图片的宽高比例来计算的。

在加载纹理图片时，OpenGL为每张图片分配好ID，将图片缓存起来。在贴图时，通过ID来查找图片。

1.2 相关API

跟绘制三角形类似，如果需要开启贴纹理功能需要如下代码：

  1. gl.glEnable(GL10.GL_TEXTURE_2D);

对应的关闭为：

  1. gl.glDisable(GL10.GL_TEXTURE_2D);

前面1.1节中，我们提到：在加载纹理图片时，OpenGL为每张图片分配好ID，将图片缓存起来。在贴图时，通过ID来查找图片。因此，在我们开始贴图之前，需要为当前模型绑定好纹理图片的ID：

  1. //根据ID绑定对应的纹理
  2. gl.glBindTexture(GL10.GL_TEXTURE_2D, model.getTextureIds()[0]);

上面代码中，我们看到，在Model实体类中，通过getTextureIds函数来获取ID数组，并取出数组的第一个数据。而Model类是我们自己自定义的实体类，显然不可能在我们的自定义的实体类中“无中生有”出一个ID数组。那么这个ID数组从哪里来？

注意，纹理的ID是保存在一个int[]数组中，数组的第一个元素即为ID。至于为什么用数组来保存，我暂时还没弄清。可能是扩展性更好吧~

关于纹理对应的ID，后面详细说。我们继续往下走，在拿到纹理ID的情况下，如何绘制。首先你需要启用纹理坐标数组：

  1. gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY);

然后在绘制三角形之前，将纹理坐标数据设定好：

  1. gl.glTexCoordPointer(2, GL10.GL_FLOAT, 0, model.getTextureBuffer());

此时即可绘制纹理。当然了，我们现在只是大致讲讲，更完整更详细的内容第二节谈~。

1.3 pxy文件格式

由于我采用的模型的纹理坐标数据是pxy格式。pxy格式里面保存的是浮点数的集合，即每4个字节为一个数据。每2个浮点数表示一个坐标点，每三个坐标点对应一个三角形在图片中的纹理区域。

1.4 多个模型数据

为什么要提多个模型数据呢？我们知道，三维模型中，自然是包含各个角度的映像图片。一张图片往往很难包含整个模型的纹理信息。因此，我们将一个3D模型分割成多个3D模型，每个模型对应一张纹理图片。理论上说，3张图片即可包含整个模型纹理信息了，即，将一个模型分割成3个3D模型。当然了，分割的越多，纹理图片的构造就越简单（你也可以以一张360°全景纹理图片，但是构造这样的图片成本比较高）。

可能你会说，我们该如何分割模型？每个模型的坐标位置信息我们无法给它分割，因为坐标位置数据是一个数组，是按照三角形顶点的顺序指定的。

请注意一点，我们只负责显示模型，我们不管如何分割，分割这块丢个模型的设计者！因为设计者可以通过相关的3D设计软件轻松的分割。我们只需关注，如何同时显示多个3D模型，并为每个3D模型贴好对应的纹理即可。

2 代码编写

2.1 解析pxy文件

前面我们大致介绍了pxy文件格式，我们知道，pxy保存的就是当前stl文件中三角形顶点在纹理图片上对应的坐标。每个顶点占2个浮点数（对应x、y）。那么我们的解析就非常简单了，在STLReader类中，添加如下函数：

  1. private void parseTexture(Model model, byte[] textureBytes) {
  2.     int facetCount = model.getFacetCount();
  3.     // 三角面个数有三个顶点，一个顶点对应纹理二维坐标
  4.     float[] textures = new float[facetCount * 3 * 2];
  5.     int textureOffset = 0;
  6.     for (int i = 0; i < facetCount * 3; i++) {
  7.         //第i个顶点对应的纹理坐标
  8.         //tx和ty的取值范围为[0,1],表示的坐标位置是在纹理图片上的对应比例
  9.         float tx = Util.byte4ToFloat(textureBytes, textureOffset);
  10.         float ty = Util.byte4ToFloat(textureBytes, textureOffset + 4);
  12.         textures[i * 2] = tx;
  13.         //我们的pxy文件原点是在左下角，因此需要用1减去y坐标值
  14.         textures[i * 2 + 1] = 1 - ty;
  16.         textureOffset += 8;
  17.     }
  18.     model.setTextures(textures);
  19. }

同时，我们需要在Model类中添加纹理相关数据属性，并且添加对应的setter、getter函数。代码我就不贴出来了，后面我会上传源码。

现在我们编写好了解析pxy纹理坐标数据，接下来就是把解析stl文件和pxy文件整合在一起的函数，在STLReader中添加：

  1. public Model parseStlWithTexture(InputStream stlInput, InputStream textureInput) throws IOException {
  2.     Model model = parseBinStl(stlInput);
  3.     int facetCount = model.getFacetCount();
  4.     // 三角面片有3个顶点，一个顶点有2个坐标轴数据，每个坐标轴数据是float类型（4字节）
  5.     byte[] textureBytes = new byte[facetCount * 3 * 2 * 4];
  6.     textureInput.read(textureBytes);// 将所有纹理坐标读出来
  7.     parseTexture(model, textureBytes);
  8.     return model;
  9. }

此时，我们的STLReader类就可以通过parseStlWithTexture函数完美的将stl和pxy数据封装到Model对象中了。

2.2 加载纹理图片

前面我们提到了，OpenGL为每张纹理图片生成一个ID。接下来我们看看如何将一个纹理图片加载到OpenGL通道中，并且分配一个ID。首先，我们需要读取纹理图片，生成Bitmap对象。然后调用glGenTextures函数，生成ID，并将此ID保存到Model对象中。此时，我们已经拿到了ID，但是这个ID并没有绑定Bitmap对象。在将ID和Bitmap绑定之前，需要调用glBindTexture函数，将生成的ID绑定到纹理通道，并且通过glTexParameterf设定当前绑定纹理的相关属性。 最后通过GLUtils.texImage2D函数将Bitmap对象与当前纹理通道绑定，而当前纹理通道已经绑定好了ID，从而达到了ID与纹理的间接绑定。以后使用纹理时，就可以直接通过ID来访问，无需直接访问Bitmap对象了。说了这么多，有点抽象，直接通过代码来的实在：

  1. private void loadTexture(GL10 gl, Model model, boolean isAssets) {
  2.     Log.d("GLRenderer", "绑定纹理：" + model.getPictureName());
  3.     Bitmap bitmap = null;
  4.     try {
  5.         // 打开图片资源
  6.         if (isAssets) {//如果是从assets中读取
  7.             bitmap = BitmapFactory.decodeStream(context.getAssets().open(model.getPictureName()));
  8.         } else {//否则就是从SD卡里面读取
  9.             bitmap = BitmapFactory.decodeFile(model.getPictureName());
  10.         }
  11.         // 生成一个纹理对象，并将其ID保存到成员变量 texture 中
  12.         int[] textures = new int[1];
  13.         gl.glGenTextures(1, textures, 0);
  14.         model.setTextureIds(textures);
  16.         // 将生成的空纹理绑定到当前2D纹理通道
  17.         gl.glBindTexture(GL10.GL_TEXTURE_2D, textures[0]);
  19.         // 设置2D纹理通道当前绑定的纹理的属性
  20.         gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MIN_FILTER,
  21.                 GL10.GL_NEAREST);
  22.         gl.glTexParameterf(GL10.GL_TEXTURE_2D, GL10.GL_TEXTURE_MAG_FILTER,
  23.                 GL10.GL_LINEAR);
  25.         // 将bitmap应用到2D纹理通道当前绑定的纹理中
  26.         GLUtils.texImage2D(GL10.GL_TEXTURE_2D, 0, bitmap, 0);
  27.         gl.glBindTexture(GL10.GL_TEXTURE_2D, 0);
  28.     } catch (IOException e) {
  29.         e.printStackTrace();
  30.     } finally {
  32.         if (bitmap != null)
  33.             bitmap.recycle();
  35.     }
  36. }

2.3 读取多个模型数据

我们前面说过，将一个模型分割成多个模型，因此，我们需要读取多个模型数据，并保存起来。我们在此之前已经学会了读取一个模型数据，那么读取多个模型数据通过for循环即可。为了读取上的方便，我们为将每个模型数据按序命名。另外，我们知道，目前为止，我们的一个模型对应三种格式文件：

  • pxy：三角形对应的纹理坐标
  • stl：三角网数据
  • jpg：纹理图片

为了读取上的方便，我们将同一个模型的这三个文件设为相同的名称，如：1.pxy、1.stl、1.jpg。各个模型之间按序命名，格式如下图：

Android OpenGL添加纹理-图片3
命名格式

此时，我们就可以很轻松的读取啦~。在GLRenderer中:

  1. private List<Model> models = new ArrayList<>();
  3. public GLRenderer(Context context) {
  4.     this.context = context;
  5.     try {
  6.         STLReader reader = new STLReader();
  7.         for (int i = 1; i <= 6; i++) {
  8.             Model model = reader.parserStlWithTextureInAssets(context, "chuwang/" + i);
  10.             models.add(model);
  11.         }
  13.     } catch (IOException e) {
  14.         e.printStackTrace();
  15.     }
  16. }

此时我们就完成了将所有的模型数据保存在List<Model>类型的models对象中。

2.4 开始绘制

前面所做的铺垫已经完成，接下来就是最后的绘制了！相比上一篇的代码，我们只需修改onSurfaceCreated和onDrawFrame函数。其实大部分代码都是相同的，只是我们通过for循环的方式，将所有的模型绘制出来而已。

但是有个区别需要注意，就是我们需要获取所有模型在xyz坐标中的最大值最小值，以及所有模型加在一起后的中心点位置。前面我们只有一个模型，很快就算好了。多个模型我们也是很简单，只需根据每个模型的在xyz坐标中的最大值最小值计算即可，详情请看我的附件源码。

我们看看onSurfaceCreated函数，onSurfaceCreated函数需要负责计算所有模型的中心点、所有模型在xyz坐标中的最大值最小值，以及加载所有模型对应的纹理图片：

  1. @Override
  2. public void onSurfaceCreated(GL10 gl, EGLConfig config) {
  3.     gl.glEnable(GL10.GL_DEPTH_TEST); // 启用深度缓存
  4.     gl.glClearColor(0f, 0f, 0f, 0f);// 设置深度缓存值
  5.     gl.glDepthFunc(GL10.GL_LEQUAL); // 设置深度缓存比较函数
  6.     gl.glShadeModel(GL10.GL_SMOOTH);// 设置阴影模式GL_SMOOTH
  9.     //初始化相关数据
  10.     initConfigData(gl);
  12. }
  14. private void initConfigData(GL10 gl) {
  15.     float r = Util.getR(models);
  16.     mScalef = 0.5f / r;
  17.     mCenterPoint = Util.getCenter(models);
  19.     //为每个模型绑定纹理
  20.     for (Model model : models) {
  21.         loadTexture(gl, model, true);
  22.     }
  24. }

再看看onDrawFrame函数，onDrawFrame函数需要通过for循环的方式，绘制出每个模型：

  1. @Override
  2. public void onDrawFrame(GL10 gl) {
  3.     // 清除屏幕和深度缓存
  4.     gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT);
  6.     gl.glLoadIdentity();// 重置当前的模型观察矩阵
  9.     //眼睛对着原点看
  10.     GLU.gluLookAt(gl, eye.x, eye.y, eye.z, center.x,
  11.             center.y, center.z, up.x, up.y, up.z);
  13.     //为了能有立体感觉，通过改变mDegree值，让模型不断旋转
  14.     gl.glRotatef(mDegree, 0, 1, 0);
  16.     //将模型放缩到View刚好装下
  17.     gl.glScalef(mScalef, mScalef, mScalef);
  18.     //把模型移动到原点
  19.     gl.glTranslatef(-mCenterPoint.x, -mCenterPoint.y,
  20.             -mCenterPoint.z);
  23.     //===================begin==============================//
  24.     for (Model model : models) {
  25.         //开启贴纹理功能
  26.         gl.glEnable(GL10.GL_TEXTURE_2D);
  27.         //根据ID绑定对应的纹理
  28.         gl.glBindTexture(GL10.GL_TEXTURE_2D, model.getTextureIds()[0]);
  29.         //启用相关功能
  30.         gl.glEnableClientState(GL10.GL_NORMAL_ARRAY);
  31.         gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
  32.         gl.glEnableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
  34.         //开始绘制
  35.         gl.glNormalPointer(GL10.GL_FLOAT, 0, model.getVnormBuffer());
  36.         gl.glVertexPointer(3, GL10.GL_FLOAT, 0, model.getVertBuffer());
  37.         gl.glTexCoordPointer(2, GL10.GL_FLOAT, 0, model.getTextureBuffer());
  39.         gl.glDrawArrays(GL10.GL_TRIANGLES, 0, model.getFacetCount() * 3);
  41.         //关闭当前模型贴纹理，即将纹理id设置为0
  42.         gl.glBindTexture(GL10.GL_TEXTURE_2D, 0);
  44.         //关闭对应的功能
  45.         gl.glDisableClientState(GL10.GL_TEXTURE_COORD_ARRAY);
  46.         gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);
  47.         gl.glDisableClientState(GL10.GL_NORMAL_ARRAY);
  48.         gl.glDisable(GL10.GL_TEXTURE_2D);
  49.     }
  52.     //=====================end============================//
  54. }

从代码上也可以看出，相比前几篇文章，代码的修改并不大。细心的童鞋会发现，我这里并没有开启光照、材料属性。主要是我们已经贴好纹理了，并且默认上模型会有光照效果。

最后看看效果吧，其实效果已经在最开始已经看过了，我们再看看

Android OpenGL添加纹理-图片4
绑定纹理

最后看看源码吧，由于AndroidStudio项目过大，我只上传app/src/main里面内容：http://download.csdn.net/download/huachao1001/9599565

作者：huachao1001
链接：https://www.jianshu.com/p/12d05dac66ad
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

来源： Android OpenGL添加纹理 - 简书

文章末尾固定信息

weinxin
我的微信
我的微信
一个码农、工程狮、集能量和智慧于一身的、DIY高手、小伙伴er很多的、80后奶爸。
 
Igor
  • 本文由 Igor 发表于 2018-11-0721:59:34
  • Android
  • OpenGL
Android 环境变量设置

加载中...

Vue使用JsBridge与APP交互 Web服务器

Vue使用JsBridge与APP交互

现在在做的项目是 hybrid 开发，H5 页面会嵌入到 IOS 客户端 app 中，于是就涉及到了 H5 与 IOS 交互的问题。在这里记录一下项目中用到的交互方式，重点介绍 WebViewJava...
11,156评论Android vue
OpenGL

如何选择 HTML5 游戏引擎

原生手游市场已是红海，腾讯、网易等寡头独霸天下，H5游戏市场或将成为下一个风口。据笔者所知，很多H5游戏开发团队由于选择引擎不慎导致项目甚至团队夭折。如何选择适合团队和项目的引擎，笔者通过学习和项目实...
12,7582HTML5 OpenGL
匿名

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
确定

拖动滑块以完成验证
加载中...