离屏渲染与OpenGL渲染结构

大纲

• 理解离屏渲染
• OpenGL渲染结构
• 着色器
• OpenGL 基础图元/基本图元连接

理解离屏渲染

• 正常渲染流程：App->Frame Buffer(帧缓存区)->Display(显示)

  • iOS App CoreAnimation
  • OpenGL API 驱动GPU
  • 顶点数据->顶点着色器->图元装配->光栅化->片元着色器(像素着色器)->渲染数据->帧缓存区
  • 视频控制器收到垂直同步信号Vsync，向帧缓存区获取渲染数据
  • 显示器显示

• 离屏渲染流程(Offscreen Rendering)：App->offscreen Buffer->Display(显示)

  • iOS App CoreAnimation
  • OpenGL API 驱动GPU
  • 顶点数据->顶点着色器->图元装配->光栅化->片元着色器(像素着色器)->渲染数据->离屏缓存区
  • 图层叠加/纹理混合重复以上三步
  • 多个离屏缓存区的渲染数据进行合并之后，提交给帧缓存区
  • 视频控制器收到垂直同步信号Vsync，向帧缓存区获取渲染数据
  • 显示器显示

离屏渲染容易掉帧，影响性能？

• 离屏渲染的存储空间是屏幕像素点的2.5倍，存储空间是有限的，开辟离屏渲染缓存区，就开辟多了空间，占用空间。
• 容易掉帧，CPU+GPU的运算速度，处理多个离屏缓存区的数据，然后再进行合并，再给到帧缓存区，等待渲染，如果数据比较大的话，CPU+GPU就需要花费更多的运算时间，在帧率60FPS的情况下，CPU+GPU还没有准备好渲染数据，就会造成掉帧的情况。

为什么需要离屏渲染？

• 特殊效果，系统自动触发，计算机没有办法一次性把多层次的图形处理好，没有这么智能，不是天然形成的，在底层都是经过GPU的纹理混合等处理，所以，需要使用额外的offscreen Buffer保存中间状态，不得不使用离屏渲染

• 提高效率，手动触发，需要使用的多次的效果，提前渲染好，放在离屏缓存区（最大只能暂存100ms，超时没有使用将会被清空掉），通过技术手段，达到复用的目的

layer.shouldRasterize=YES打开光栅化，可以手动触发离屏幕渲染

光栅化使用建议：

• 如果layer不能被复用，则没有必要打开光栅化
• 如果layer不是静态的，需要被频繁修改，比如处于动画之中，那么开启离屏渲染反而影响效率了
• 离屏渲染缓存内容有时间限制，缓存内容100ms如果没有被使用，那么它就会丢弃，无法进行复用了
• 离屏渲染缓存空间有限，超过2.5倍屏幕像素大小的话也会失效，且无法进行复用了

离屏渲染的触发

打开模拟器的离屏渲染颜色标记

img

圆角触发

view.layer.cornerRadius = 2

是不是每一个圆角都会触发离屏渲染呢？不会

设置layer.cornerRadius,只会设置backgroundColor和border的圆角,不会设置content的圆角，除非同时设置了layer.masksToBounds = true（对应view中的clipsToBounds属性）

不设置layer.masksToBounds或者clipsToBounds、backgroundColor

 UIButton *btn1 = [UIButton buttonWithType:UIButtonTypeCustom];
    btn1.frame = CGRectMake(100, 30, 100, 100);
    btn1.layer.cornerRadius = 50;
    btn1.layer.borderColor = [UIColor redColor].CGColor;
    btn1.layer.borderWidth = 1.0f;
    [self.view addSubview:btn1];

e6c9d24egy1golwj9ks8lj20jo126my8

我们看到只有边框以及圆角的时候，确实不会触发离屏渲染。

当我们开启layer.masksToBounds或者clipsToBounds时，同样的没有触发离屏渲染。这是因为我们还没有设置图片

设置layer.masksToBounds或者clipsToBounds为YES，同时设置图片

  UIButton *btn1 = [UIButton buttonWithType:UIButtonTypeCustom];
    btn1.frame = CGRectMake(100, 30, 100, 100);
    btn1.layer.cornerRadius = 50;
    btn1.layer.borderColor = [UIColor redColor].CGColor;
    btn1.layer.borderWidth = 1.0f;
    [self.view addSubview:btn1];
    btn1.clipsToBounds = YES;
    btn1.layer.masksToBounds = YES;
    [btn1 setImage:[UIImage imageNamed:@"btn.png"] forState:UIControlStateNormal];

e6c9d24egy1golwji86jhj20jo126wfz

当我们开启layer.masksToBounds或者clipsToBounds时，同时设置图片时，就会触发离屏渲染

单层 内容需要添加圆角和裁切，是不会用到离屏渲染技术的，但如果加上了背景色、边框或其他有图像内容的图层，就会产生

多层 添加圆角和裁切，是会触发离屏渲染

常见触发离屏渲染的几种情况

• 使用了mask的layer（layer.mask）
• 需要进行裁剪的layer（layer.masksToBounds/view.clipsToBounds）
• 设置组透明度为YES，并且透明度不为1的layer(layer.allowsGroupOpacity/layer.opacity)
• 添加投影的layer(layer.shadow...)
• 采用了光栅化的layer（layer.shouldRasterize）
• 绘制了文字的layer(UILabel，CATextLayer，Core Text)等

OpenGL渲染结构

基础图形管线

渲染管线（rendering pipeline）,它是一系列数据处理过程，并且将应用程序的数据转换到最终渲染的图像。下图是OpenGL 4.3 版本的管线

img

img

OpenGL渲染管线简化流程图：摘抄至[凡几多],本文仅用于学习用途

img

客户端-服务器

管线上半部分是客户端，下半部分是服务器，客户端是CPU辅助部分，API调用等等，来驱动GPU干活，服务器端就是GPU部分了，顶点数据->顶点着色器等等到最后的渲染显示

服务器和客户端在功能上是异步的，客户端不断的将数据和命令组合在一起送入缓冲区，缓冲区再发送到服务器执行

三种向OpenGL 着色器传递渲染数据的⽅法

Attributes(属性)：顶点数据x,y,z,w，投影矩阵、模型矩阵，纹理坐标（图片映射坐标），只能传递到顶点着色器，然后桥接到片元着色器（像素着色器）

Uniform：通过设置 Uniform 变量就紧接着发送一个图元批次处理命令。Uniform 变量实际上可以无限次的使⽤。 设置一个应用于整个表⾯面的单个颜色值，还可也是一个时间值，经常用于设置不会频繁改变的值

Texture Data纹理数据：对纹理进行采样和筛选。纹理数据的作用不仅仅是表现图形。很多图形文件格式都是以无符号字节形式对颜色分量进行存储的，但我们仍然可以设置浮点纹理。这就是说，任何大型浮点数据块（例如消耗资源很大的函数的大型查询表）都可以通过这种方式传递给着色器

着色器

固定着色器（存储着色器）

• 单元着色器（最简单的）

• 平面着色器（用的最多的）

• 上色着色器

• 默认光源着色器

• 点光源着色器

• 纹理替换矩阵着色器（有图案的，不是单一的颜色）

• 纹理调整着色器（纹理和颜色混合）

• 纹理光源着色器（纹理、光源、混合）

OpenGL 基础图元/基本图元连接

OpenGL图元的模式标识

图元类型	OpenGL 枚举量
点	GL_POINTS
线	GL_LINES
条带线	GL_LINE_STRIP
循环线	GL_LINE_LOOP
独立三角形	GL_TRIANGLES
三角形条带	GL_TRIANGLE_STRIP
三角形扇面	GL_TRIANGLE_FAN

正面与背面：

img

在默认的情况下，OpenGL认为具有逆时针方向环绕的多边形是 正面的。而右侧的顺时针方向三角形是三角形的 背面

为什么区分正背面很重要？
因为我们常常希望为一个多边形的正面和背面分别设置不同的物理特征。我们可以完全隐藏一个多边形的背面，或者给它设置一种不同的颜色和反射属性。纹理图像在背面三角形中也是相反的。在一个场景中，使所有的多边形保持环绕方向的一致，并使用正面多边形来绘制所有实心物体的表面是非常重要的。