OpenGL ES专业名词解释
-
渲染 Rendering：将图形/图像数据通过解码，将其显示绘制到屏幕上的操作。 -
帧缓存（framebuffer）:像素（pixel），是显示器上最小的可见单元。计算机系统将所有的像素保存到帧缓存当中，后者是有图形硬件设备管理的一块独立内存区域，可以直接映射到最终的显示设备上` -
上下文 Context:一个保存了当前渲染所需要的全部信息的工作环境结构体。 -
变换矩阵 Transformation：例如图形想发生平移,缩放,旋转变换.就需要使用变换矩阵. -
模型（场景对象）：通过几何图元（点、线、三角形）来构建的。 -
投影矩阵 Projection： 用于将3D坐标转换为二维屏幕坐标,实际线条也将在二维坐标下进行绘制. -
纹理：纹理可以理解为图片. 大家在渲染图形时需要在其编码填充图片,为了使得场景更加逼真. -
片元着色器:一般用来处理图形中每个像素点颜色计算和填充。片段着色器是OpenGL中用于计算片段（像素）颜色的程序。片段着色器是逐像素运算的程序，也就是说每个像素都会执行一次片段着色器，当然也是并行的。 -
顶点着色器：一般用来处理图形每个顶点变换(旋转/平移/投影等)。顶点指的是我们在绘制一个图形时,它的顶点位置数据.而这个数据可以直接存储在数组中或者将其缓存到GPU内存中.顶点着色器是OpenGL中用于计算顶点属性的程序。顶点着色器是逐顶点运算的程序，也就是说每个顶点数据都会执行一次顶点着色器。 -
管线：管线是一个抽象的概念，因为显卡在处理数据的时候是按照一个固定的顺序来的。 -
光栅化：将输入图元的数学描述转为屏幕位置对应的像素片元，就是把顶点数据转换为片元的过程。片元中的每一个元素对应于帧缓冲区中的一个像素。光栅化其实是一种将几何图元变为二维图像的过程。该过程包含了两部分的工作。第一部分工作：决定窗口坐标中的哪些整型栅格区域被基本图元占用；第二部分工作：分配一个颜色值和一个深度值到各个区域。光栅化过程产生的是片元
图片显示到屏幕上是CPU与GPU的协作完成，图片是最占用手机内存的资源，将一张图片从磁盘中加载出来，并最终显示到屏幕上，中间其实经过了一系列复杂的处理过程。
图片加载的工作流程
我们使用
+imageWithContentsOfFile:方法从磁盘中加载一张图片，这个时候的图片并没有解压缩；然后将生成的 UIImage 赋值给 UIImageView ；
接着一个隐式的 CATransaction 捕获到了 UIImageView 图层树的变化；
在主线程的下一个 runloop 到来时，Core Animation 提交了这个隐式的
transaction，这个过程可能会对图片进行 copy 操作，而受图片是否字节对齐等因素的影响，这个 copy 操作可能会涉及以下部分或全部步骤：
- 分配内存缓冲区用于管理文件 IO 和解压缩操作；
- 将文件数据从磁盘读到内存中；
- 将
压缩的图片数据解码成未压缩的位图形式，这是一个非常耗时的 CPU 操作； - 最后 Core Animation 中CALayer使用未压缩的位图数据渲染 UIImageView 的图层。
- CPU计算好图片的Frame,对图片解压之后.就会交给GPU来做图片渲染
- 渲染流程
- GPU获取获取图片的坐标
- 将坐标交给顶点着色器(顶点计算)
- 将图片光栅化(获取图片对应屏幕上的像素点)
- 片元着色器计算(计算每个像素点的最终显示的颜色值)
- 从帧缓存区中渲染到屏幕上
我们提到了图片的解压缩是一个非常耗时的 CPU 操作，并且它默认是在主线程中执行的。那么当需要加载的图片比较多时，就会对我们应用的响应性造成严重的影响，尤其是在快速滑动的列表上，这个问题会表现得更加突出。
为什么要解压缩图片
既然图片的解压缩需要消耗大量的 CPU 时间，那么我们为什么还要对图片进行解压缩呢？是否可以不经过解压缩，而直接将图片显示到屏幕上呢？答案是否定的。要想弄明白这个问题，我们首先需要知道什么是位图
其实，位图就是一个像素数组，数组中的每个像素就代表着图片中的一个点。我们在应用中经常用到的 JPEG 和 PNG 图片就是位图
UIImage *image = [UIImage imageNamed:@"text.png"];
CFDataRef rawData = CGDataProviderCopyData(CGImageGetDataProvider(image.CGImage));
打印rawData,这里就是图片的原始数据.
不管是 JPEG 还是 PNG 图片，都是一种压缩的位图图形格式。只不过 PNG 图片是无损压缩，并且支持 alpha 通道，而 JPEG 图片则是有损压缩，可以指定 0-100% 的压缩比。值得一提的是，在苹果的 SDK 中专门提供了两个函数用来生成 PNG 和 JPEG 图片：
// return image as PNG. May return nil if image has no CGImageRef or invalid bitmap format
UIKIT_EXTERN NSData * __nullable UIImagePNGRepresentation(UIImage * __nonnull image);
// return image as JPEG. May return nil if image has no CGImageRef or invalid bitmap format. compression is 0(most)..1(least)
UIKIT_EXTERN NSData * __nullable UIImageJPEGRepresentation(UIImage * __nonnull image, CGFloat compressionQuality);
因此，在将磁盘中的图片渲染到屏幕之前，必须先要得到图片的原始像素数据，才能执行后续的绘制操作，这就是为什么需要对图片解压缩的原因。
解压缩原理
既然图片的解压缩不可避免，而我们也不想让它在主线程执行，影响我们应用的响应性，当未解压缩的图片将要渲染到屏幕时，系统会在主线程对图片进行解压缩，而如果图片已经解压缩了，系统就不会再对图片进行解压缩。因此，也就有了业内的解决方案，在子线程提前对图片进行强制解压缩。
而强制解压缩的原理就是对图片进行重新绘制，得到一张新的解压缩后的位图。其中，用到的最核心的函数是 CGBitmapContextCreate ：
CG_EXTERN CGContextRef __nullable CGBitmapContextCreate(void * __nullable data,
size_t width, size_t height, size_t bitsPerComponent, size_t bytesPerRow,
CGColorSpaceRef cg_nullable space, uint32_t bitmapInfo)
CG_AVAILABLE_STARTING(__MAC_10_0, __IPHONE_2_0);
YYImage\SDWebImage开源框架实现
用于解压缩图片的函数YYCGImageCreateDecodedCopy存在于 YYImageCoder类中，核心代码如下
CGImageRef YYCGImageCreateDecodedCopy(CGImageRef imageRef, BOOL decodeForDisplay) {
...
// BGRA8888 (premultiplied) or BGRX8888
CGContextRef context = CGBitmapContextCreate(NULL, width, height, 8, 0, YYCGColorSpaceGetDeviceRGB(), bitmapInfo);
if (!context) return NULL;
CGContextDrawImage(context, CGRectMake(0, 0, width, height), imageRef); // decode
CGImageRef newImage = CGBitmapContextCreateImage(context);
CFRelease(context);
return newImage;
} else {
...
}
}
它接受一个原始的位图参数 imageRef ，最终返回一个新的解压缩后的位图 newImage ，中间主要经过了以下三个步骤：
- 使用
CGBitmapContextCreate函数创建一个位图上下文； - 使用
CGContextDrawImage函数将原始位图绘制到上下文中； - 使用
CGBitmapContextCreateImage函数创建一张新的解压缩后的位图。
事实上，SDWebImage中对图片的解压缩过程与上述完全一致，只是传递给CGBitmapContextCreate函数的部分参数存在细微的差别.
性能对比:
在解压PNG图片,SDWebImage>YYImage
在解压JPEG图片,SDWebImage<YYImage
总结
图片文件只有在确认要显示时,CPU才会对齐进行解压缩.因为解压是非常消耗性能的事情.解压过的图片就
不会重复解压,会缓存起来.图片渲染到屏幕的过程: 读取文件->计算Frame->图片解码->解码后纹理图片位图数据通过数据总线交给GPU->GPU获取图片Frame->顶点变换计算->光栅化->根据纹理坐标获取每个像素点的颜色值(如果出现透明值需要将每个像素点的颜色*透明度值)->渲染到帧缓存区->渲染到屏幕
