OpenGL ES2.0 Iphone开发引导：part2 纹理贴图

OpenGL ES2.0 Iphone开发指引：part2 纹理贴图

?

　　在这个系列教程中，我们的目标是帮助大家揭开OpenGL ES 2.0的神秘面纱，同时给大家提供一个手把手的例子，能带领大家步入OpenGL ES 2.0的开发世界。
??? 在第一部分教程中，我们介绍了基本的初始化OpenGL，创建简单的顶点和片断shaders，并且在屏幕上面画了一个简单的旋转立方体。
　　在这部分教程中，我们将步入更高的级别，给立方体进行纹理贴图！
??? 声明：我并不是一个Open GL的专家，所有这些知识都是我自学来的，这篇教程是我在学习的过程中写的。如果我不小心犯了一些很煞笔的错误，欢迎大家可以给我指正！（译者：当然，其实我也是刚学了一点OpenGL的知识，如果翻译有问题，也肯请大牛帮助指正）
　　好了，让我们一起进入纹理贴图的世界吧！

Getting Started

　　如果你还没有上一篇教程的工程的话，你可以从这里先下载样例工程。
　　下载完后，编译并运行工程，你将会看到一个旋转的立方体：

　　现在，我们的立方体看起来是红绿相间的，因为我们指定顶点的颜色就是这么做的---还没有使用任何纹理贴图。
　　但是，不用担心---这正是本教程接下来要做的事！
　　首先，下载本教程所需要使用的纹理图片，下载完后解压之。然后把它们拖到Resource分组中，同时确保 “Copy items into destination group’s folder” 被选中，然后点击Finish。
　　你会看到，新添加了两张图片---一张看起来像地板砖，另一张看起来像条鱼。我们将把立方体的每一个面都贴上这个地板砖。

?

读取像素数据

　　我们的第一步就是把图片数据读取到OpenGL中来。
　　这里有个问题，就是OpenGL不能直接使用png图片数据，而是，你首先获得png图片的像素数据buffer，并且你需要为这些数据指定格式。
　　幸运的是，你可以轻松地使用Quartz2D的函数来得到图片的像素数据buffer。如果你看过Core Graphics 101系列教程的话，你肯定对下面的调用很熟悉了。
　　要完全读取像素buffer的工作，你需要以下4步：

1. 获得Core Graphics 图片引用. 因为我们将使用Core Graphics来读取原始的像素数据，所以我们首先要取得图片的引用（reference）。这其实很简单，UIImage有一个CGImageRef属性。
2. 创建Core Graphics位图context. 接下来就是创建Core Graphics位图context，context是内存中的缓冲区，是一种非常方便的方式来保存原始像素。
3. 在context中绘制Image.? 我们可以使用Core Graphics的一个简单的函数调用来搞定这个事----然后context里面会包含原始图片数据。
4. 把原始像素数据发送给OpenGL.? 为了实现这个，我们首先要创建一个OpenGL 纹理对象，然后获得它的唯一的ID（叫做“name”），然后使用一个函数调用把像素数据发送给OpenGL。

好了，让我们看看具体代码是怎么写的吧。打开OpenGLView.m，然后在initWithFrame方法上面添加下面的方法：

?? 恩。。。这个立方体的正面看起来还算ok，但是其它面看起来有点被拉伸了---这是怎么回事呢？
?
修复拉伸效果
??? 这个问题的原因是，因为我们当前只是为每一个顶点设置一个纹理坐标，然后重复使用这些顶点。
??? 举个例子，我们把第一面的左下角映射到（0，0）。但是，在左边那一面，同样的顶点数据却变成了右上角，所以这时候如果使用（0，0）纹理坐标去贴图的话就没有意义了，这时候应该要使用（1，0）。（为什么不是（1，1），因为图片垂直翻转了！！！）
??? 在OpenGL里面，你不能简单的把一个顶点当成是一个顶点坐标---而应该是把坐标、颜色和纹理坐标绑定到一起，统一属于某一个顶点。
??? 继续并把你的顶点和索引数组替换成下面的内容，它为每一面都定义了顶点坐标、颜色和纹理坐标数据。

重复纹理

??? 在OpenGL里面，如果你喜欢的话，你可以把一张图片重复地贴在某一个表面上。但是，保证重复纹理时能够拼接得很好，我们需要一些无缝纹理。
??? 有了纹理之后，我们在OpenGLView.m里面定义下面的宏：
注意: 这个能够工作的原因是因为GL_TEXTURE_WRAP_S 和GL_TEXTURE_WRAP_T 默认值是GL_REPEAT 。如果你不想让纹理这样子重复的知，你可以调用函数glTexParameteri来覆盖默认的行为。
?
??? 这里绘制了鱼的图片，但是，渲染的效果并不是很好。为了使之效果更好看，我们需要激活blend，在渲染函数里面添加下面2行：

何去何从?
??? 这里有本教程的完整源代码。
?? 到目前为止，通过这2篇教程，相信大家对于OpenGL ES 2.0已经有一个基本的了解了，你应该学会如何添加顶点，如何创建顶点缓冲对象，如何建仓shaders，如何创建纹理对象等等。
?? 其实，在OpenGL领域，你需要学习的还很多很多，但是，我希望这里是你非常好的一个开端。
?? 如果你想学习更多有关Ipengles的内容的话，推荐你看iPhone 3D Programming。我也是从阅读这本书来学习的。 

 

查看更多 下一篇