OpenGL入门 — 屏幕卡顿/撕裂 及 渲染流程解读

屏幕卡顿/撕裂

屏幕卡顿/撕裂 是指屏幕在显示图形图像时出现的一些显示异常的现象。

• 撕裂：是图形图片显示错位
• 掉帧：是重复显示同一帧图片数据

那么为什么会出现这样的显示问题呢来详细解说一下。

在分析之前，先了解一下 CPU和GPU的一些知识，以及 屏幕成像 的演变过程

CPU 和 GPU

• CPU：是整个计算机的运算核心和控制核心，处理复杂的逻辑和数据，依赖非常高，靠时间片切换实现并发
• GPU：绘图运算工作准用的微处理器，单元计算，高并发，依赖非常低

屏幕成像

计算机的显示方式是经过最开始的 演变到现在的的

是有组成的，图像的显示和图像的复杂度无关，都是从左上角开始扫描显示，是显示整个光栅的时间。

简单扫描光栅系统结构如下：

是在系统主存中开辟一块作内存为帧缓存，来存储显示的数据，但是依然通过系统总线中读取，依然读取受限，然后演变出了下面的

屏幕撕裂的原因

• 在屏幕显示图像过程中，是不断从帧缓存区获取一帧一帧是数据进行显示

• 然后在渲染的过程中，帧缓存区中仍是旧的数据，屏幕拿到旧的数据去进行显示

• 在旧的数据没有读取完时，新的一帧数据处理好了，放入了缓存区，这时就会导致屏幕另一部分的显示是获取的新数据，从而导致屏幕上呈现图片不匹配，人物、景象等错位显示的情况。如下图：

解决撕裂

苹果官方，采用来解决撕裂问题，下面是简单图解：

使用，从根本上解决了屏幕撕裂的问题，但是随之有产生了另一个问题——— 屏幕卡顿掉帧。

屏幕卡顿

掉帧：简单说就是屏幕重复显示同一帧数据，当接收到时，由于的图片数据还没处理完，拿不到的数据，而重复渲染同一帧的数据。

• App通过调用、、等框架的接口触发图形渲染
• 将渲染交由或者，驱动做渲染，最后显示到屏幕上
• 由于 是跨平台的，所以在实现中，需让各自的平台为提供载体。在中，就是通过提供窗口，让可以去调用。

View 和 CALayer 的关系

• View

  属于，负责绘制和动画，负责布局和的管理，负责处理点击事件

• CALayer

  属于框架，负责渲染显示，既用于，也用于

• 二者的关系

  二者基于的框架不同，基于框架，可以处理触摸事件，可以管理子视图，基于，而是基于，只负责渲染，不能处理用户事件。

  从继承关系来说，继承，而是直接继承自的，属于的组件，而的组件到最后都会被分解成，存储到图层树中，需要与用户交互时，用，不需要交互时，都可以

CoreAnimation

CoreAnimation官方解释：，本质是一个复合引擎，主要的职责包括 渲染、构建和动画实现。

中基于构建的框架有两个，分别是和，而底层是基于和

CoreAnimation的渲染流程

流程如如下：

渲染部分

• 通过顶点着色器、片元着色器完成对显示内容的渲染，将结果存入帧缓存区
• 通过帧缓存区、视频控制器等相关部件，将内容显示到屏幕