前言
在平时的开发过程中，我们经常会使用 UImage 加载jpg、png等格式的图片，但其最终都是将这些图片数据解压为位图(Bitmap)。图片解压就是一个将jpg、png等图片解压为位图的过程。本文我们一起探索一下。
一、图片纹理映射
在 OpenGL ES初探 这篇文章中提到关于渲染流程如下图：
图片
我们在获取到图片的纹理数据后，要将纹理显示到屏幕上，先要做两件事：
1、将图片的纹理坐标通过 attribute方式，经顶点着色器桥接给片元着色器
2、将图片纹理数据通过Uniform传递给片元着色器，由片元着色器进行图片颜色的填充
在图片进行纹理颜色填充时，需要按照坐标进行一一对应，纹理坐标默认左下角为（0，0），右上角为（0，1），其映射关系如下图：
图片
纹理的坐标与图形的坐标一一对应，最终会将图片正确的显示出来。如果纹理坐标映射的不正确则可能出现图片翻转、倒置等情况，甚至图片信息错乱，如下图所示，纹理坐标不正确倒置图片出现倒置的情况。
二、图片解压
在解释图片解压之前我们先了解几个概念：
位图：
又叫像素图或栅格图，它记录了图片每一个像素的颜色、深度、透明度等信息。这一系列像素按照一定的规则排列起来，就形成了我们看到的图片。位图的优点是能够完整记录图片信息，无论图片怎样拉伸都不会失真，缺点是图片文件太大，因此一般将位图压缩为jpg、png等格式。
有损压缩：
不会完全真实的记录图片信息，会根据人眼观察世界的特性，忽略掉部分会被人眼忽略的颜色信息，代之以邻近的颜色。因此图片虽然大部分可以还原，但某些情况下还是会失真，常见的有损压缩格式有JPG等。
无损压缩：
无损压缩会完整记录图片颜色信息，但是相同颜色的区域，会被压缩记录，因此无损压缩也可以比较完整的还原图片。不过由于能够保存的颜色值有限，所以依然有可能会出现失真，常见的格式有PNG等。
在我们的开发过程中，我们使用比较多的都是 JPG 或者 PNG 等格式图片，但是在图片真正显示之前，都会被先解压成位图，再重新渲染到屏幕上。所以图片解压的流程是
-
解压JPG/PNG图片，获取图片信息
-
根据获取到的图片信息重新绘制位图，即纹理数据
-
将纹理数据载入，传入到片元着色器，经过渲染后显示
在iOS的 Gore Graphics 框架中提供了一些解压图片的方法。
UImage *image = [UImage imageNamed:@"fly"];
CGImageRef cgImageRef = [image CGImage]; // 将UImage转换为CGImageRef
// 获取图片宽高
GLuint width = (GLuint)CGImageGetWidth(cgImageRef);
GLuint height = (GLuint)CGImageGetHeight(cgImageRef);
//获取图片的rect
CGRect rect = CGRectMake(0, 0, width, height);
//获取图片的颜色空间
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
// 为图片开辟一片内存区域
// 一个像素点的颜色值包含 RGBA 各8位，共4个字节
void *imageData = malloc(width * height * 4);
// 创建上下文
/**
CGBitmapContextCreate(void * __nullable data,
size_t width, size_t height, size_t bitsPerComponent, size_t bytesPerRow,
CGColorSpaceRef cg_nullable space, uint32_t bitmapInfo)
data：开辟的图片内存区域，此处传 imageData
width: 图片宽度
height：图片高度
bitsPerComponent：每个颜色分量所占bit数，此处传8位
bytesPerRow：每一行占用字节数，此处为 width * 4
space：颜色空间
bitmapInfo：位图的信息，此处采用RGBA，即kCGImageAlphaPremultipliedLast
*/
CGContextRef context = CGBitmapContextCreate(imageData, width, height, 8, width * 4, colorSpace, kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);
// 将图片翻转过来(图片默认是倒置的)
// 图片的坐标系左上角为(0,0)，纹理坐标左下角为(0,0)，因此需要翻转
CGContextTranslateCTM(context, 0, height);
CGContextScaleCTM(context, 1.0f, -1.0f);
// 绘制前先清除颜色空间和绘图区域，防止残留数据
CGColorSpaceRelease(colorSpace);
CGContextClearRect(context, rect);
// 对图片进行重新绘制，得到一张新的解压缩后的位图
CGContextDrawImage(context, rect, cgImageRef);
// 设置图片纹理属性
// 获取纹理ID
GLuint textureID;
glGenTextures(1, &textureID); // 获取一个纹理句柄
glBindTexture(GL_TEXTURE_2D, textureID); // 将句柄绑定到纹理目标上，GL_TEXTURE_2D等
// 设置纹理属性
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
// 结束后是否数据
glBindTexture(GL_TEXTURE_2D, 0); // 将纹理目标重新绑定为0
CGContextRelease(context); // 释放context
free(imageData); // 释放图片数据区域
滑动显示更多
三、纹理翻转图解
在上述代码的注释中，提到纹理需要翻转，其翻转图解如下：
图片
-
先将原图沿y轴正方向移动一个图片高度 1 —— 2
-
再将纹理y轴缩放-1比例，及图片绕x轴翻转 2 —— 3
-
此时纹理坐标与图片坐标就可以对应了
网友评论