视频渲染是什么意思解释,视频渲染是什么意思

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

视频渲染是什么意思解释,视频渲染是什么意思CPU、GPU、显示器协同工作流程

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

视频渲染是什么意思解释,视频渲染是什么意思

讲到 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》中非常透彻的讲解了实时渲染的各种知识点,对渲染原理感兴趣的可以看看这本书,这本书堪称“实时渲染圣经”。下边会简单介绍一下这几个过程。

视频渲染是什么意思解释,视频渲染是什么意思几何阶段(Geometry Stage)

1. 顶点着色器(Vertex Shader)

顶点着色器可以对顶点的属性进行一些基本的处理。将顶点信息进行视角转换、添加光照信息、增加纹理等操作。CPU 丢给 GPU 的信息,就好像是站在上帝视角把这个视角看到的所有信息都给到 GPU。而 GPU 则是站在人类的角度,将人类可以观察到的画面,输出在显示器上。所以这里是以人的视角为中心,进行坐标转换。

2. 形状装配(Shape Assembly)这个阶段是将顶点着色器输出的所有顶点作为输入,并将所有的点装配成指定图元的形状。图元(Primitive)如:点、线、三角形。这个阶段也叫图元装配。

3. 几何着色器(Geometry Shader)在图元外添加额外的顶点,将原始图元转换成新图元,来构建更加复杂的模型。

光栅化阶段(Rasterizer Stage)

光栅化阶段会把前三个几何阶段处理后得到的图元(primitives)转换成一系列的像素。

视频渲染是什么意思解释,视频渲染是什么意思应用阶段视图的创建布局计算对图层进行打包,在下一次 RunLoop 时将其发送至 Render Serverapp 处理用户的点击操作,在这个过程中 app 可能需要更新视图树,如果视图树发生更新,图层树也会被更新其次,app 通过 CPU 完成对显示内容的计算Render Server & GPU这一阶段主要执行 metal、Core Graphics 等相关程序,并调用 GPU 在物理层上完成对图像的渲染GPU 将渲染后的位图数据存储到 Frame BufferDisplay视频控制器将帧缓冲区的位图数据一帧一帧的显示在物理屏幕上

如果把把上边的步骤串在一起,会发现它们执行消耗的时间超过了 16.67 ms,因此为了满足对屏幕的 60 FPS 刷新率的支持,需要通过流水线的方式将这些步骤并行执行,如下图所示。每一个阶段都在源源不断的给下一个阶段输送产物。这时候就可以满足 16.67 毫秒产生一帧数据的要求了。

视频渲染是什么意思解释,视频渲染是什么意思系统底层渲染显示

应用层的 view 对应到 canvas,canvas 到系统进程就成了 layer。SurfaceFlinger 主要提供 layer 的渲染合成服务。SurfaceFlinger 是一个常驻的 binder 服务,会随着 init 进程的启动而启动。下面这张图就详细的介绍了上层 view 到底层 layer 的转化,以及 SurfaceFlinger 对多个 layer 的渲染合成。

视频渲染是什么意思解释,视频渲染是什么意思触发离屏渲染的原因视频渲染是什么意思解释,视频渲染是什么意思

讲离屏渲染的原因不得不提画家算法,画家算法的整体思想是按层绘制,首先绘制距离较远的场景,然后用绘制距离较近的场景覆盖较远的部分。这里的层在 iOS 的渲染技术栈中就可以被对应到 layer。

视频渲染是什么意思解释,视频渲染是什么意思

通常对于每一层 layer,Render Server 会遵循“画家算法”,按次序输出到 frame buffer,后一层覆盖前一层,就能得到最终的显示结果,对于这个 layer 树则是以深度优先的算法将 layer 输出到 frame buffer。

作为“画家”的 GPU 虽然可以一层一层往画布上进行输出,但是却没有办法在某一层渲染完成之后,再回过头来改变其中的某个部分。因为在这一层之前的若干层 layer 像素数据,已经在渲染中被合成在一起了。其实这里和 photoshop 中的图层合并非常像,一旦多个图层被合并在一起,就无法再单独对某一个图层进行修改。所以需要在离屏缓冲区中把子 layer 依次画好,然后把四个角裁剪好之后再和之前的图层进行混合。

视频渲染是什么意思解释,视频渲染是什么意思视频渲染是什么意思解释,视频渲染是什么意思GPU 离屏渲染的性能影响

一提离屏渲染,我们直观上的感觉是会对性能有影响。因为为了满足 60fps 的刷新频率,GPU 的操作都是高度流水线化的。本来所有的计算工作都在有条不紊地正在向 frame buffer 输出,这时候突然又有一些特殊的效果触发了离屏渲染,需要切换上下文,把数据输出到另一块内存,这时候流水线中很多中间产物只能被丢弃,这种频繁的上下文切换对 GPU 的渲染性能有非常大的影响。

如何防止非必要离屏渲染?对于一些圆角可以创建四个背景颜色弧形的 layer 盖住四个角,从视觉上制造圆角的效果对于 view 的圆形边框,如果没有 backgroundColor,可以放心使用 cornerRadius 来做对于所有的阴影,使用 shadowPath 来规避离屏渲染对于特殊形状的 view,使用 layer mask 并打开 shouldRasterize 来对渲染结果进行缓存圆角实现的优化策略

使用CALayer的cornerRadius并设置 cliptobounds 以后会触发离屏渲染(offscreen rendering)。滚动时每秒需要在 60 帧上执行裁剪操作,即使内容没有发生任何变化。GPU 也必须在每帧之间切换上下文,合成整个帧和裁剪。这些对性能的消耗直接影响到 Render Server 这个独立渲染进程,造成掉帧。为了优化渲染性能,我们可以选择一些其他的实现圆角的方案。下边是圆角的具体实现需要考虑的条件。

圆角的具体实现需要考虑的条件

圆角下(movement underneath the corner)是否有滑动。是否有穿过圆角滑动(movement through the corner)。四个圆角是否处于同一个 layer 上,有没有与其他 子 layer 相交。视频渲染是什么意思解释,视频渲染是什么意思

圆角的具体实现方案

视频渲染是什么意思解释,视频渲染是什么意思

如何根据对应的条件选取圆角的实现方案

上边提到了圆角的优化要考虑的条件以及不同的圆角实现方案,下边这个流程图就是把条件和方案对应起来,给出了圆角的最佳实现方案。

视频渲染是什么意思解释,视频渲染是什么意思总结

本文主要介绍了移动端渲染原理的相关内容。文章开始介绍了一下渲染相关的基础知识,讲了渲染所需要的原始数据源-位图以及 CPU 和 GPU 如何协同工作得到位图数据的。后面又结合 iOS 和安卓的技术框架介绍了移动端渲染的相关原理。最后深入分析了 iOS 中的离屏渲染,讲解了现有的圆角优化的一些方案。

参考文章

1.iOS 图像渲染原理 http://chuquan.me/2018/09/25/ios-graphics-render-principle/

2.iOS Rendering 渲染全解析 https://juejin.cn/post/6844904162765832206

3.iOS 渲染流程 https://www.jianshu.com/p/464c08d87f75

4.从 Auto Layout 的布局算法谈性能 https://draveness.me/layout-performance/

5.Auto Layout 是怎么进行自动布局的,性能如何?https://juejin.cn/post/6844904055790108680

6.iOS 界面渲染流程分析 https://www.jianshu.com/p/39b91ecaaac8

7.iOS 浅谈 GPU 及“App 渲染流程” https://juejin.cn/post/6844904106419552269

8.CPU 和 GPU 的区别是什么?https://www.zhihu.com/question/19903344

9.IOS 进阶-图层与渲染 https://bytedance.feishu.cn/wiki/wikcnWq4HdGQygFEolgKgAVv9Oh

10.一篇文章搞懂到底什么是渲染流水线 https://segmentfault.com/a/1190000020767062

11.GPU Rendering Pipeline——GPU 渲染流水线简介 https://zhuanlan.zhihu.com/p/61949898

12.关于 iOS 离屏渲染的深入研究 https://zhuanlan.zhihu.com/p/72653360

13.texture https://texturegroup.org/docs/corner-rounding.html

14.Android 的各个渲染框架和 Android 图层渲染原理 https://juejin.cn/post/7021840737431978020

本文来自副业大咖投稿,不代表汇美部落立场,如若转载,请注明出处:https://www.huimeiktv.com/129410.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。