iOS图像渲染解析

本篇对计算机图形渲染原理及iOS的渲染原理进行简要介绍

CPU & GPU

可视化应用程序都是由 CPU 和 GPU 协作执行的。

  • CPU

Central Processing Unit,现代计算机的三大核心部分之一,作为整个系统的运算和控制单元
CPU 内部的流水线结构使其拥有一定程度的并行计算能力。(多核切换)
CPU 可以处理逻辑复杂,依赖性高的数据运算。

  • GPU

Graphics Processing Unit,一种可进行绘图运算工作的专用微处理器。
GPU是连接计算机和显示终端的纽带。
GPU 能够生成 2D/3D 的图形图像和视频,从而能够支持基于窗口的操作系统、图形用户界面、视频游戏、可视化图像应用和视频播放。
GPU 具有非常强的并行计算能力。
GPU 处理高并发,依赖性低的逻辑运算。

GPU 强大的并行计算能力使其能够快速将图形结果计算出来并在屏幕的所有像素中进行显示。所以,通常使用 GPU 来渲染图形。

屏幕图像显示原理

光栅扫描
  1. 逐行扫描

CRT 显示器的电子枪从上到下逐行扫描,扫描完成后显示器就呈现一帧画面。然后电子枪回到初始位置进行下一次扫描。

  1. 同步信号

为了同步显示器的显示过程和系统的视频控制器,显示器会用硬件时钟产生一系列的定时信号。

  • HSync

当电子枪换行进行扫描时,显示器会发出一个水平同步信号(horizonal synchronization)。

  • VSync

而当一帧画面绘制完成后,电子枪回复到原位,准备画下一帧前,显示器会发出一个垂直同步信号(vertical synchronization)。

显示器通常以固定频率进行刷新,这个刷新率就是 VSync 信号产生的频率。

光栅扫描显示

现在主流的液晶显示屏其原理与上述基本一致。

图像显示
  1. CPU 将图片解码计算后 经由系统总线 (Bus) 提交至 GPU;
  2. GPU 渲染完成后将渲染结果存入帧缓冲区 (Frame Buffer);
  3. 视频控制器(Video Controller)会按照 VSync 信号逐帧读取帧缓冲区的数据(位图),并刷新部件;
  4. 经过数据转换后最终由显示器进行逐行扫描显示。
常见的 CPU、GPU、显示器工作方式
  • 帧缓冲区

简称帧缓存或显存,它是屏幕所显示画面的一个直接映象,又称为位映射图(Bit Map)或光栅。
帧缓冲区 是由像素组成的二维数组,每一个存储单元对应屏幕上的一个像素,整个帧缓冲对应一帧图像,即当前屏幕画面
帧缓冲通常包括:颜色缓冲,深度缓冲,模板缓冲和累积缓冲。
这些缓冲区可能是在一块内存区域,也可能单独分开。

  • 视频控制器

视频控制器一般由显卡驱动程序或DirectX中自带。
视频控制器模块是芯片与显示平台的数据接口

图像撕裂

在渲染过程中,当视频控制器还未读取完成时,即屏幕内容刚显示一半时,GPU 将新的一帧内容提交到帧缓冲区并把两个缓冲区进行交换后,视频控制器就会把新的一帧数据的下半段显示到屏幕上,造成画面撕裂,出现断层。

撕裂现象 在于视频控制器显示速度小于GPU处理图形的速度
在显示器处理显卡丢过来的第1帧的时候,第2帧又到了,导致同一个画面同时出现1、2两帧,撕裂就产生了。

屏幕撕裂

解决图像撕裂

  • 垂直同步(VSync)

前面讲到 显示器通常以VSync 信号产生的固定频率进行刷新。
即垂直同步相当于加锁。
当开启垂直同步后,GPU 会等待显示器的 VSync 信号发出后,才进行新的一帧渲染和缓冲区更新。

  • 双缓冲机制(DoubleBuffering)

为解决帧缓冲区读取和刷新的效率问题,GPU 开辟A/B两个帧缓冲区,一个缓冲区通过视频控制器进行当前帧数据的读取显示,另一个缓冲区进行接收下一帧GPU渲染的图像。两个缓冲区都执行结束,然后再交换缓冲区。

双缓冲机制

当A帧缓冲区拿到第一帧数据,给A缓冲区加上一把锁,屏幕控制器从A拿到数据并逐行扫描完成,A帧缓冲区解锁,并且屏幕控制器指向B帧缓冲区,B帧缓冲区加锁并逐行扫描显示,在屏幕控制器扫描B帧缓冲区的时候,A帧缓冲区拿到GPU传过来的新一帧数据,以此类推,解决撕裂问题。
通过垂直同步+双缓冲机制,能解决画面撕裂现象,但需要消费更多的计算资源,也会带来部分延迟,出现掉帧/卡顿问题。

掉帧/卡顿

每帧画面的处理时间大概在16.7ms(1s/60 ≈16.7ms),当超过这个时间就会出现掉帧现象。


掉帧

当接收接收Vsync ,由于cpu/gpu图⽚数据(速度大于了16.7ms) -> 拿不到FrameBuffer ->这个时候屏幕控制器只能显示同一帧的数据,即: 掉帧(重复渲染同⼀帧数据)。

三级缓存区

为减少掉帧现象,引入三级缓存区,在双缓冲区的基础上再添加一个缓冲区,提高交换速率,减少卡顿。
三级缓冲区是为了充分利用CPU/GPU的空余时间。

注意:三级缓冲区也有可能出现掉帧,并不能完全解决掉帧,只是尽量减少掉帧现象。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,793评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,567评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,342评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,825评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,814评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,680评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,033评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,687评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,175评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,419评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,020评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2 343