移动端渲染原理浅析

原创

于 2022-06-09 12:00:17 发布 · 3.4k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#android #面试 #java #编程语言 #python

动手点关注干货不迷路 👆

计算机或手机的渲染是一个非常复杂的过程，本文介绍了渲染相关的一些基础知识，并结合 iOS 和安卓的技术框架介绍了移动端渲染原理，最后详细的解析了 iOS 中的离屏渲染以及圆角优化的一些方法。

渲染基础知识

屏幕绘制的原始数据源

位图

我们在屏幕上绘制图像需要的原始数据叫做位图。位图(Bitmap) 是一种数据结构。一个位图是由 n*m 个像素组成，每个像素的颜色信息由 RGB 组合或者灰度值表示。根据位深度，可将位图分为 1、4、8、16、24 及 32 位图像等。每个像素使用的信息位数越多，可用的颜色就越多，颜色表现就越逼真，越丰富，相应的数据量越大。

物理像素和逻辑像素

位图一般存储的是物理像素，而应用层一般用的是逻辑像素，物理像素和逻辑像素之间会存在一定的对应关系。例如，iOS 中物理像素和逻辑像素的对应关系如下：

iOS1 倍屏 1pt 对应 1 个物理像素
iOS2 倍屏 1pt 对应 2 个物理像素
iOS3 倍屏 1pt 对应 3 个物理像素

将位图绘制到显示器

上边讲了屏幕上绘制图像需要的原始数据叫做位图。那么问题来了，有了位图数据之后如何将图像绘制到屏幕上呢？如下图所示：电子枪从上到下逐行扫描，扫描完成后显示器就呈现一帧画面。然后电子枪回到屏幕初始位置进行下一次扫描。为了同步显示器的显示过程和视频控制器的扫描过程，显示器会用硬件时钟产生一系列的定时信号。当电子枪换行进行扫描时，显示器会发出一个水平同步信号；当一帧画面绘制完成后，电子枪回到原位，准备画下一帧前，显示器会发出一个垂直同步信号。显示器通常以固定的频率进行刷新，这个刷新率就是垂直同步信号产生的频率。

CPU、GPU、显示器协同工作流程

前一部分介绍了视频控制器将位图数据显示到物理屏幕上的过程，那么位图数据是怎么得到的呢？其实位图数据是通过 CPU、GPU 协同工作得到的。下图就是常见的 CPU、GPU、显示器协同工作的流程。CPU 计算好显示内容提交至 GPU，GPU 渲染完成后将渲染结果存入帧缓冲区，接下来就需要将得到的像素信息显示在物理屏幕上了，这时候视频控制器（Video Controller）会读取帧缓冲器中的信息传递给显示器（Monitor）进行显示。完整的流程如下图所示：

CPU 和 GPU 的区别

讲到 CPU、GPU、显示器的协同工作流程，就不得不提一下 CPU 和 GPU 的区别。

CPU是中央处理器，适合单一复杂逻辑，而GPU是图形处理器，适合高并发简单逻辑。

GPU 有特别多的的计算单元和超长的流水线，但是控制逻辑非常简单，并且还省去了缓存，适合对低延迟要求不高的运算。而 CPU 不仅被 Cache 占据了大量空间，而且还有特别复杂的控制逻辑，相比之下计算能力只是 CPU 很小的一部分。图形渲染涉及到的矩阵运算比较多，矩阵相关的运算可以被拆分成并行的简单的运算，所以渲染处理这件事特别适合 GPU 去做。

总结来说：GPU 的工作计算量大，但技术含量不高，需要简单重复很多次。就好比有个工作需要算成百上千次一百以内加减乘除一样。而 CPU 就像老教授，积分微分都会算，适合处理单一复杂逻辑运算。

通用渲染流水线

我们通常将图像绘制的完整流程称为渲染流水线，这个过程是 CPU 和 GPU 协作完成的。一般一个渲染流程可以分成 4 个概念阶段，分别是：应用阶段（Application Stage），几何阶段（Geometry Stage），光栅化阶段（Rasterizer Stage），像素处理阶段（Pixel Processing）。在《Real–Time Rendering 4th》中非常透彻的讲解了实时渲染的各种知识点，对渲染原理感兴趣的可以看看这本书，这本书堪称“实时渲染圣经”。下边会简单介绍一下这几个过程。