计算机渲染图片原理,计算机渲染原理与CoreAnimation

一、CPU与GPU

计算机中有三个关键硬件：中央处理器CPU，内存和I/O控制芯片，这三个部件几乎就是计算机的核心了，GPU是后来衍生出的专门用来处理绘图运算的处理器

CPU:现在计算机整个运行系统的计算/控制核心，中央处理器

GPU:绘图运算的专用微处理器，是连接计算机和显示终端的纽带

CPU处理复杂的逻辑运算，虽然现在有多核处理器，可以并发，但实际上并不是真正意义上的并发，而是通过时间片的切换来实现的

而GPU是真正意义上的高并发

二、计算机渲染原理

早期的计算机显示方式是随机扫描显示

显示文件>显示处理器>显示器

通过电子光束随机扫描

而光栅扫描是通过像素点逐行扫描显示到显示器上

image.png

流程如下：

将帧缓冲区里的数据交给视频控制器，视频控制器读取信息进行数模转化，然后进行光栅扫描，显示在显示器上

因为人眼有视觉暂留，一般最低每秒16帧就能让人的视觉感觉连贯

三、屏幕撕裂

image.png

屏幕撕裂如何产生的呢？

屏幕撕裂：当视频控制器拿到帧缓冲区数据显示的时候，这一帧的数据还没显示完，新一帧的数据来了，那么就会开始扫描新一阵的数据，所以就会产生屏幕撕裂

为了解决屏幕撕裂问题，就出现了垂直同步Vsync技术+双缓冲区DoubleBuffering，

垂直同步给帧缓冲区加锁，等待显示完成后交换缓冲区处理下一帧数据，但是如果屏幕刷新完成后，缓冲区的数据并没有计算完成(由于CPU和GPU的速度问题导致拿不到framebuffer)，屏幕就会重复渲染同一帧数据，这种情况我们成为掉帧，在视觉上的感受就是卡顿，为了减少掉帧次数，所以引入了三缓冲区技术，合理的使用CPU和GPU

掉帧

屏幕重复渲染同一帧数据

掉帧.png

四、Core Animation

CoreAnimation是苹果提供的一套基于绘图的动画框架

image.png

image.png

Core Animation 流水线

ios-core-animation-pipeline-steps.png

app 本身并不负责渲染，渲染则是由一个独立的Render Server 进程负责。

App 通过 IPC 将渲染任务及相关数据提交给 Render Server。Render Server 处理完数据后，再传递至 GPU。最后由 GPU 调用 iOS 的图像设备进行显示。

Core Animation 流水线的详细过程如下：

首先，由 app 处理事件(Handle Events)，如：用户的点击操作，在此过程中 app 可能需要更新 视图树，相应地，图层树 也会被更新。

其次，app 通过 CPU 完成对显示内容的计算，如：视图的创建、布局计算、图片解码、文本绘制等。在完成对显示内容的计算之后，app 对图层进行打包，并在下一次 RunLoop 时将其发送至 Render Server，即完成了一次 Commit Transaction 操作。

Render Server 主要执行 Open GL、Core Graphics 相关程序，并调用 GPU

GPU 则在物理层上完成了对图像的渲染。

最终，GPU 通过 Frame Buffer、视频控制器等相关部件，将图像显示在屏幕上。

Core Animation 图层打包->下一次runloop到来提交给RenderServer->RenderServer通过OpenGL等调用GPU->GPU进行渲染流程(顶点着色器、片元着色器等)->下一次runloop到来的时候显示到屏幕上