业精于勤,荒于嬉
全部博文(763)
分类: C/C++
2010-01-30 10:12:26
我已经决定提前介绍纹理映射,因为它可能更容易纹理映射一个对象,而不是面对一个多面(或三维物体) 。此外,似乎这是iPhone OpenGL ES的程序员最希望得到的知识,所以我会坚持到现在都说到纹理映射。
我知道我已经跳过了OpenGL支持的很多细节,使你直接在屏幕上实验绘制物体,而没有一遍又一遍的介绍OpenGL的历史,介绍OpenGL和OpenGL ES之间有什么不同等等。有时候呢,我也会跳过一些技术细节。
这次,我将介绍相当多的细节,也就是说,这是一个很长的教程。
话虽如此,大部分的代码只是加载纹理到我们的工程里,并且将它放入OpenGL的引擎中,这样一来OpenGL就可以使用它。这并不复杂,这仅需要调用iPhone SDK的一点点工作。
纹理的准备工作
在我们开始使用一个纹理前,我们需要加载它到我们的应用程序里,用OpenGL的格式格式化它,并且告诉OpenGL在哪里可以找到它。一旦我们做好之前的工作,其他的工作就如同我们之前教程里给矩形上色那么容易。
开启Xcode,并且打开EAGLView.h在编辑区。首先,我们需要提供给OpenGL需要的一个变量。增加下面这个声明:
GLuint textures[1]; // 表示一个图片的句柄
显然,这个一个GLuint的数组。你以前见过我使用过GLfloat,再次说明,GLuint就是OpenGL为无符号整型的一个重命名(typedef)。你应该一直使用GLxxxx 这样的重命名,而不是使用Objective_C的类型参数。因为这些是为了OpenGL定义的OpenGL命名参数,我们是在使用OpenGL,而不是开发环境。
下面,我们将调用OpenGL函数glGenTextures()来填充这个变量。我们现在只声明了,之后我们需要覆盖glGenTextures()函数及这个变量。
在该方法的原型下,添加下列函数:
- (void)loadTexture;
这里我们将添加代码去加载纹理。
在你的工程里添加上 CoreGraphics Framework
为了加载纹理和对它进行处理,我们将使用CoreGraphics框架,因为它提供了所有我们需要的方法,而无需写您在Windows的OpenGL教程中看到的所有低级别的代码。
在 Xcode “Groups & Files” 侧栏, 右键点击 “Frameworks” 组并选择 Add -> Existing Frameworks...
在搜索框里, 输入 “CoreGraphics.framework” ,并查阅该文件夹中的结果,这些结果符合您的应用目标( iPhone的SDK 2.2.1在我的情况下) 。单击文件夹,并将其添加到您的项目(文件夹图标的框架)。
下一步,我们需要在我们的工程里增加一个纹理图片,所以它需要包含在我们的应用程序包里。下载纹理 checkerplate.png 并且保存它在工程目录里。增加这个图片到你的工程资源目录可以这样做,右键点击资源目录并且选择 Add -> Existing Files... 选择这个图片,这样就添加进入了。
把纹理加载到我们的应用程序和OpenGL中
切换到 EAGLView.m 并且我们开始执行 loadTexture 函数.
- (void)loadTexture {
}
下列的代码将顺序的添加到这个函数中,所以你只要在每行的后面添加就行了。第一件事,我们需要将添加这个图片到我们的应用程序里,使用下列的代码:
// 加载图片 (纹理)
CGImageRef textureImage = [UIImage imageNamed:@"checkerplate.png"].CGImage;
if (textureImage == nil) {
NSLog(@"Failed to load texture image");
return;
}
这个 CGImageRef 是 CoreGraphics 的一个数据类型,为了收集图片的所有信息。要获得此信息,我们要做的就是使用UIImage类方法imageNamed :创造一个autorelease'd UIImage来找到我们应用程序主包的文件名。
To get this information all we do is use the UIImage class method imageNamed: which creates an autorelease’d UIImage finding the file by it’s name in our Application’s main bundle. UIImage自动创建的CGImageRef和访问的UIImage类中的CGImage 。
现在,我们为了下面的参考,需要获得图片的尺寸.
NSInteger texWidth = CGImageGetWidth(textureImage);
NSInteger texHeight = CGImageGetHeight(textureImage);
这个 CGImageRef 数据包含了图片的宽和高,但是我们不能直接访问它,我们需要使用上述两种提取函数。
这个CGImageRef,就象它数据类型名称所暗示的,不包含图片的数据,只说明了图片的数据。所以我们需要开辟一些内存来包含这个图片的数据。
GLubyte *textureData = (GLubyte *)malloc(texWidth * texHeight * 4);
分配出的正确数据大小,应该是宽*高*4。记得之前的教程里说过,OpenGL只支持RGBA值?每个像素占四个字节,也就是一个RGBA种一种颜色占一个字节。
现在,我们需要调用一些绝对重要的函数(张开嘴??老外真的搞笑)
CGContextRef textureContext = CGBitmapContextCreate(
textureData,
texWidth,
texHeight,
8, texWidth * 4,
CGImageGetColorSpace(textureImage),
kCGImageAlphaPremultipliedLast);
CGContextDrawImage(textureContext,
CGRectMake(0.0, 0.0, (float)texWidth, (float)texHeight),
textureImage);
CGContextRelease(textureContext);
首先,顾名思义,这个 CoreGraphics 函数返回一个 Quartz2D 图形绘制句柄. 基本上来说,我们定义了一个 CoreGraphics的指针,指向我们的纹理数据,并且告诉它我们纹理的数据和格式。
下面,我们实际上是绘制图片到我们开辟的数据中(纹理数据指针)从我们之前创建的图形绘制句柄的数据指针。这个句柄包含了OpenGL需要的所有的信息及数据都复制到malloc()中。
当我们完成了 CoreGraphics的时候,我们需要释放我们创建的 textureContext句柄。
我知道我加快了上述代码的讲解部分,但是我们对OpenGL其他方面的事情更感兴趣。你可以使用这些代码去加载任何被加入你的工程里的png格式的图片纹理。
现在,到了OpenGL编程了。
现在,还记得我们在头文件中定义的数组了吗?我们现在要使用它。看看下一行代码:
glGenTextures(1, &textures[0]);
我们需要从我们的应用程序复制这个纹理数据到OpenGL引擎,所以我们要告诉OpenGL为它开辟内存空间。(我们不能直接使用它). 记得textures[]定义为GLuint?一旦我们调用glGenTextures,OpenGL就会创建一个句柄或者一个指针,我们加载到 OpenGL里的每个纹理都是唯一的。OpenGL返回的值对我们来说并不重要,每次当我们要使用checkerplate.png的纹理的时候,我们只需要使用textures[0]就可以了。OpenGL就象我们说的那样去做的。
我们也可以一次为多个纹理分配空间。比如,如果我们需要为我们的应用程序准备10个纹理。我们可以如下做:
GLuint textures[10];
glGenTextures(10, &textures[0]);
在我们的例子里,我们只需要一张纹理,所以我们开辟一张。
下面,我们需要激活我们刚才生成的纹理:
glBindTexture(GL_TEXTURE_2D, textures[0]);
第二个参数是显而易见的,它的纹理,我们刚刚建立。第一个参数通常时GL_TEXTURE_2D 因为所有的 OpenGL ES 在这点上都接受它。 “Full” 的OpenGL允许1D和3D纹理,但我相信这仍然是需要在今后的OpenGL ES的兼容性。
千万别忘记了使用它来激活纹理。
下面,我们发送我们的纹理数据(textureData 的指针)到OpenGL。OpenGL在它的那方面(服务面)管理纹理数据,所以数据必须被转换为硬件支持的格式并保存到OpenGl的空间里。这个听上去有点拗口,不过大多数的OpenGL ES的限制都是相同的。
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, texWidth, texHeight, 0, GL_RGBA, GL_UNSIGNED_BYTE, textureData);
遍历这些参数,它们是:
0. ?target – 基本上,通常是 GL_TEXTURE_2D?
0. ?level – 规定纹理的详细程度。0表示允许图片的全部细节。高数字表示n级别mipmap图片细节。(这边不懂,请知道的朋友告诉我下。)
0. ?internal_format – 这个 internal format 和 format 必须是相同的。这两个都是 GL_RGBA .?
0. ?width - width of the image?
0. ?height - height of the image?
0. ?border – 必须始终设置为0 , OpenGL ES 不支持纹理边界.?
0. ?format – 必须和 internal_format?相同。
0. ?type – 每个像素的类型。想起来没,每个像素为四个字节。因此每个像素占用1个无符号整型(4字节)
0. ?pixels – 实际上的图片数据指针。
因此,尽管有很多参数,但大部分都是常识,要需要你输入定义变量 (textureData, texWidth, & texHeight).要记得对你的纹理数据做句柄控制,在OpenGL内。
现在,我们已经将数据传输到OpenGL里了,我们可以释放我们之前创建的texturedata.
free(textureData);
这里有三个函数调用并使用:
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glEnable(GL_TEXTURE_2D);
这三个函数的调用就是对OpenGL做最后的设置,并且设置OpenGL的纹理映射的状态。这前两个函数告诉OpenGL,在放大的(近距离 - GL_TEXTURE_MAG_FILTER) 及缩小的(远距离 - GL_TEXTURE_MIN_FILTER). 时候,如何处理。为了纹理映射的工作及GL_LINEAR的选择,你必须至少指定一个。
最后,我们调用glEnable()告诉OpenGL使用纹理,当我们告诉OpenGL执行绘制代码的时候。
最后,我们需要在initWithCoder初始化里增加这个函数。
[self setupView];
[self loadTexture];// Add this line
就是添加第二行在setupView函数的后面
drawView的调整
这是一个艰苦的工作。改变drawView函数并不比我们之前教程里给矩形上色更困难。首先,注销掉 squareColours[] 数组,我们不需要使用它了。
现在,回忆我们在为矩形上色的时候,我们为每个矩形的顶点,提供了一个颜色的值。当涉及到纹理映射的时候,我们要做同样的事,就象告诉每个顶点是什么颜色一样,我们告诉每个顶点对应的纹理坐标。
在我们这样做之前,我们需要知道什么是纹理坐标。OpenGL定义纹理坐标的原点(0,0)在左下角,每个轴就是从0—1。看下我们纹理的图的说明:
参照我们的 squareVertices[].
const GLfloat squareVertices[] = {
-1.0, 1.0, 0.0, // Top left
-1.0, -1.0, 0.0, // Bottom left
1.0, -1.0, 0.0, // Bottom right
1.0, 1.0, 0.0 // Top right
};
你可以看到第一个纹理坐标,我们是不是要指定到左上角的纹理?这里的纹理坐标是(0,1). 我们的第二点是右上方的广场,因此,纹理坐标( 1 , 1 ) 。然后,我们去的右下角,这是纹理坐标( 1 , 0 ) ,最后结束的左下角,我们结束纹理坐标( 0 , 0 )。因此,我们指定squareTextureCoords [ ]如下:
const GLshort squareTextureCoords[] = {
0, 1, // top left
0, 0, // bottom left
1, 0, // bottom right
1, 1 // top right
};
注意:我们使用GLshort不是GLfloat的。添加上述代码到您的项目。
你看看,这个是不是类似于我们的纹理数组?
好了,现在我们需要修改绘制代码。不用管三角形的绘制代码,直接从矩形的代码开始。新的矩形绘制代码如下:
glLoadIdentity();
glColor4f(1.0, 1.0, 1.0, 1.0); //NEW
glTranslatef(1.5, 0.0, -6.0);
glRotatef(rota, 0.0, 0.0, 1.0);
glVertexPointer(3, GL_FLOAT, 0, squareVertices);
glEnableClientState(GL_VERTEX_ARRAY);
glTexCoordPointer(2, GL_SHORT, 0, squareTextureCoords); // NEW
glEnableClientState(GL_TEXTURE_COORD_ARRAY); // NEW
glDrawArrays(GL_TRIANGLE_FAN, 0, 4);
glDisableClientState(GL_TEXTURE_COORD_ARRAY); // NEW
ok,这段代码有四行新的代码。我删除了之前教程里的为矩形上色的代码。第一行代码是调用glColor4f(),我会在下面的内容中说明。
下面的三行代码你现在应该非常的熟悉了。这里所指的不是物体的顶点或者颜色,我们现在只针对纹理。
glTexCoordPointer(2, GL_SHORT, 0, squareTextureCoords); // NEW
glEnableClientState(GL_TEXTURE_COORD_ARRAY); // NEW
第一个调用就是告诉OpenGL我们的纹理坐标数组是在哪里存储并且格式是什么。所不同的,我们告诉它每个坐标只有两个值(这是当然的,因为是2d纹理),数据类型我们使用的是GLushort所以这里用GL_SHORT,这里没有 stride (0),并且指向我们的坐标指针。
现在我们告诉OpenGL客户端状态,为了纹理映射我们指定的坐标数组。
调用glDrawArrays()没有改变:
glDisableClientState(GL_TEXTURE_COORD_ARRAY); // NEW
记不记得,当我们矩形和三角形采取了不同的颜色的时候,我们关闭了颜色数组?再次,我们需要对纹理映射这样做(关闭它),不然OpenGL将使用这个纹理去映射三角形。
保存代码,点击 “Build and Go”, 你可以看到如下的界面
我们的 checkerplate 纹理现在映射到矩形上,而我们的三角形和以前一样。
进一步的实验
首先,让我说下我们增加在绘制矩形之前这行代码:
glColor4f(1.0, 1.0, 1.0, 1.0); // NEW
当然,这是改变绘制颜色为白色,不透明。你能猜出来,我为什么要增加这行吗?OpenGL就是一个状态机,所以一旦我们设置了某个状态,这个状态就一直保留,直到我们改变它。所以绘制颜色被设置为蓝色,直到我们把它改为白色。
Ok,到纹理映射的时候,OpenGL将当前颜色设置(蓝色)乘以当前纹理像素做为最后的颜色。这就是
// 很经典呀。。怎么得到一个图片中的某个像素点的 RGB 值?????
R G B A
Colour Set: 0.0, 0.0, 0.8, 1.0
Texture Pixel Colour: 1.0, 1.0, 1.0, 1.0
所以,当OpenGL执行绘制的,乘积为:
Colour_Red * Pixel_Colour_Red = Rendered_colour
0.0 * 1.0 = 0.0
Colour_Green * Pixel_Colour_Green
0.0 * 0.0 = 0.0
Colour_Blue * Pixel_Colour_Blue
0.8 * 1.0 = 0.8
注销掉这行glColour4f函数,结果就变为了:
当它是白色的时候,乘积就是:
Set Colour : 1.0, 1.0, 1.0, 1.0
is mulitplied by
Pixel Colour : 0.8, 0.8, 0.8, 1.0
Result: 0.8, 0.8, 0.8, 1.0
这就是我们为什么将颜色设置为白色的原因.
好了,就是这样!
在本教程里,我真的说了很多,但我希望你可以看到,实际用于纹理映射的代码不是很多,更多的工作,是在建立纹理的时候。