OpenGLES 1.1教程(四)-纹理映射

http://www.helmsmansoft.com/index.php/archives/1536

继续哈，从前面的几篇文章里，可以在三维空间里绘制出一个z轴为0的平面图形，这样绘制出来的东西看起来没什么意思，所以本课来介绍下“纹理映射”，这是一个将图像（纹理）应用到原始图像或图形的过程。它的基本概念：对每个定义多边形中的一个顶点，还得提供一个顶点来定义纹理中的一个点。然后将此信息提供给OpenGL ES ，OpenGL ES执行一系列复杂的工作以使纹理和多边形匹配，并在多边形内将纹理渲染出来。
纹理坐标：用于在纹理内部确定位置。范围为0到1.
本课继续使用前面课程所建立的模板，如果您还没有下载此模板，可以在本站查看前几篇文章并下载模板。
言归正传，继续我们的课程风格，用代码说事，在RenderView.h里添加属性

GLuint textures[1];

在RenderView.m文件里添加如下代码：

//添加下面的方法
//载入纹理
- (void)loadTexture
{
CGImageRef textureImage = [UIImage imageNamed:@"texture.png"].CGImage;//通过CGImage获取被UIImage加载的底层位图图数据,存储在CGImageRef结构体中
if(!textureImage){  //判断是否加载成功
NSLog(@"Load the Image failed!");
return;
}
 
NSInteger textImageWidth = CGImageGetWidth(textureImage); //获取图片数据 宽度
NSInteger textImageHeight = CGImageGetHeight(textureImage);  //获取图片数据 高度
 
GLubyte *imageData = (GLubyte *)malloc(textImageWidth*textImageHeight*4); //分配textImageWidth*textImageHeight*4字节空间，并返回指向这块内存的指针，存储在GLubyte中
 
CGContextRef textureContext = CGBitmapContextCreate(imageData, textImageWidth, textImageHeight, 8, textImageWidth*4, CGImageGetColorSpace(textureImage), kCGImageAlphaPremultipliedLast);  //创建位图语境，
 
CGContextDrawImage(textureContext, CGRectMake(0.0, 0.0, (float)textImageWidth, (float)textImageHeight), textureImage); ///* Draw `image' in the rectangular area specified by `rect' in the context`c'. The image is scaled, if necessary, to fit into `rect'. */
CGContextRelease(textureContext);  //释放创建的语境
 
glGenTextures(1, &textures[0]); //创建文理名称，这里是创建一个文理，也可以创建多个，第一个参数为文理个数
glBindTexture(GL_TEXTURE_2D, textures[0]); //绑定纹理，第一个参数为作用目标，在O盆GLES里必须使用GL_TEXTURE_2D,因为OpenGLES只支持这个，第二个为需要绑定的纹理名称，即上面创建的
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, textImageWidth, textImageHeight, 0, GL_RGBA, GL_UNSIGNED_BYTE, imageData);//将图像数据加载到纹理中
free(imageData);//释放内存
 
/*下面两行为设置纹理相关参数,GL_LINEAR参数能呈现一个平滑的、消除了锯齿的外观*/
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);  //图像被缩小时GL_TEXTURE_MIN_FILTER,
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);  //图像被放大时GL_TEXTURE_MAG_FILTER
glEnable(GL_TEXTURE_2D); //开启2D纹理贴图功能
 
}

render方法修改如下：

//渲染方法
- (void)render
{
static GLfloat rotation = 0.0; //角度
static CGFloat spinnySquareVertices[12] = {
-0.5f, -0.5f, -1,
0.5f,  -0.5f, -1,
-0.5f,  0.5f, -1,
0.5f,   0.5f, -1,
};
 
//    static CGFloat spinnSquareColor[] = {
//
//        255,255,0,255,
//        0,255,255,255,
//        0,0,0,0,
//        255,0,255,255,
//
//    };
 
const GLshort square[] = {
0,0,
1,0,
0,1,
1,1
};
 
glClearColor(0.1f, 0.8f, 1.0f, 1.0f); //设置清屏颜色
glClear(GL_COLOR_BUFFER_BIT);  //清屏
glViewport(0, 0, backingWidth, backingHeight);  //设置视口
 
glLoadIdentity();  //清空当前矩阵,还原默认矩阵
glOrthof(-1.0f, 1.0f, -1.5f, 1.5f, -1.0f, 1.0f);  //正交模式下可视区域
glColor4f(1.0, 1.0, 1.0, 1.0);  //绘制的颜色
glVertexPointer(3, GL_FLOAT, 0, spinnySquareVertices); //确定使用的顶点坐标数列的位置和尺寸
glEnableClientState(GL_VERTEX_ARRAY);  //启动独立的客户端功能，告诉OpenGL将会使用一个由glVertexPointer定义的定点数组
//    glColorPointer(4, GL_FLOAT, 0, spinnSquareColor);
//    glEnableClientState(GL_COLOR_ARRAY);
 
glTexCoordPointer(2, GL_SHORT, 0, square); //new //纹理坐标.参数含义跟以上的方法大相迳庭
glEnableClientState(GL_TEXTURE_COORD_ARRAY); //new
//    glShadeModel(GL_FLOAT);
glRotatef(rotation, 0.0, 0.0, 1.0);  //旋转
 
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4); //进行连续不间断的渲染,在渲染缓冲区有了一个准备好的要渲染的图像
glDisableClientState(GL_TEXTURE_COORD_ARRAY);
rotation += 0.5;
[_context presentRenderbuffer:GL_RENDERBUFFER_OES]; //将渲染缓冲区的内容呈现到屏幕上
 
}

render内的注释为new的是新添加的代码。
下面来具体解释下上面所用到的方法：
上面很多都加了详细的注释，这里说下关于OpenGL ES纹理映射的一些相关内容：
图像大小：在OpenGL ES中所有纹理大小必须为2的幂，也就是说，图像的高度和宽度应该等于以下的值之一
2 4 8 16 32 64 128 256 512 1024
高度和宽度不必相同。PS:iPhone3G,iPhone 4和iPad都支持2048*2048的纹理尺寸
如果需要的图片不是以上的大小，需要使用程序进行处理，使其符合以上尺寸。
glTexImage2D这个方法的几个参数：
第一个参数：目标纹理，必须为GL_TEXTURE_2D

第二个参数：细节程度。0是基本图像水平。 n级为mipma中的第n个缩小的图像。必须大于等于0.

第三个参数：纹理中的颜色组件，必须和之后的颜色参数相同。

第四个参数：纹理图像的宽度

第五个参数：纹理图像的高度

第六个参数：边框的宽度，必须为0

第七个参数：像素数据的格式

第八个参数：像素数据中使用的数据类型

第九个参数：内存中指向图像数据的指针
此命令发出后，imageData实力变量中的图像数据将被加载到OpenGL ES并与当前绑定的纹理关联。
到此运行程序，界面效果如下：