iOS圖像渲染原理

首先回答一個問題:CPU和GPU都能進行圖形渲染,只是GPU 圖形渲染的并行計算能力速度更快

屏幕圖像顯示原理

下圖所示為常見的 CPU锨用、GPU丰刊、顯示器工作方式。
CPU 計算好顯示內(nèi)容提交至 GPU增拥,GPU 渲染完成后將渲染結果存入幀緩沖區(qū)啄巧,視頻控制器會按照 VSync 信號逐幀讀取幀緩沖區(qū)的數(shù)據(jù),經(jīng)過數(shù)據(jù)轉換后最終由顯示器進行顯示跪者。

最簡單的情況下棵帽,幀緩沖區(qū)只有一個熄求。此時渣玲,幀緩沖區(qū)的讀取和刷新都都會有比較大的效率問題。為了解決效率問題弟晚,GPU 通常會引入兩個緩沖區(qū)忘衍,即 雙緩沖機制。在這種情況下卿城,GPU 會預先渲染一幀放入一個緩沖區(qū)中枚钓,用于視頻控制器的讀取。當下一幀渲染完畢后瑟押,GPU 會直接把視頻控制器的指針指向第二個緩沖器搀捷。

雙緩沖雖然能解決效率問題,但會引入一個新的問題多望。當視頻控制器還未讀取完成時嫩舟,即屏幕內(nèi)容剛顯示一半時,GPU 將新的一幀內(nèi)容提交到幀緩沖區(qū)并把兩個緩沖區(qū)進行交換后怀偷,視頻控制器就會把新的一幀數(shù)據(jù)的下半段顯示到屏幕上家厌,造成畫面撕裂現(xiàn)象,如下圖:

視頻顯示器從幀緩沖區(qū)掃描繪制完成一幀畫面后椎工,會發(fā)出垂直同步信號饭于,簡稱VSync,當開啟垂直同步后维蒙,GPU 會等待顯示器的 VSync 信號發(fā)出后掰吕,才進行新的一幀渲染和緩沖區(qū)更新。

iOS 渲染框架

UIKit

UIKit 是 iOS 開發(fā)者最常用的框架颅痊,可以通過設置 UIKit 組件的布局以及相關屬性來繪制界面畴栖。

事實上, UIKit 自身并不具備在屏幕成像的能力八千,其主要負責對用戶操作事件的響應(UIView 繼承自 UIResponder)吗讶,事件響應的傳遞大體是經(jīng)過逐層的 視圖樹 遍歷實現(xiàn)的燎猛。

Core Animation

Core Animation 源自于 Layer Kit,動畫只是 Core Animation 特性的冰山一角照皆。

Core Animation 是一個復合引擎重绷,其職責是 盡可能快地組合屏幕上不同的可視內(nèi)容,這些可視內(nèi)容可被分解成獨立的圖層(即 CALayer)膜毁,這些圖層會被存儲在一個叫做圖層樹的體系之中昭卓。從本質上而言,CALayer 是用戶所能在屏幕上看見的一切的基礎瘟滨。

Core Graphics

Core Graphics 基于 Quartz 高級繪圖引擎候醒,主要用于運行時繪制圖像。工作步驟先傳輸命令到CPU杂瘸,計算完成后再提交到GPU倒淫。開發(fā)者可以使用此框架來處理基于路徑的繪圖,轉換败玉,顏色管理敌土,離屏渲染,圖案运翼,漸變和陰影返干,圖像數(shù)據(jù)管理,圖像創(chuàng)建和圖像遮罩以及 PDF 文檔創(chuàng)建血淌,顯示和分析矩欠。

Core Image

Core ImageCore Graphics 恰恰相反,Core Graphics 用于在 運行時創(chuàng)建圖像悠夯,而 Core Image 是用來處理 運行前創(chuàng)建的圖像 的癌淮。Core Image 框架擁有一系列現(xiàn)成的圖像過濾器,能對已存在的圖像進行高效的處理疗疟。

大部分情況下该默,Core Image 會在 GPU 中完成工作,但如果 GPU 忙策彤,會使用 CPU 進行處理栓袖。

OpenGL ES

OpenGL ES(OpenGL for Embedded Systems,簡稱 GLES)店诗,是 OpenGL 的子集裹刮。在前面的 圖形渲染原理綜述 一文中提到過 OpenGL 是一套第三方標準,函數(shù)的內(nèi)部實現(xiàn)由對應的 GPU 廠商開發(fā)實現(xiàn)庞瘸。

Metal

Metal 類似于 OpenGL ES捧弃,也是一套第三方標準,具體實現(xiàn)由蘋果實現(xiàn)。大多數(shù)開發(fā)者都沒有直接使用過 Metal违霞,但其實所有開發(fā)者都在間接地使用 Metal嘴办。Core AnimationCore Image买鸽、SceneKit涧郊、SpriteKit 等等渲染框架都是構建于 Metal 之上的。

當在真機上調試 OpenGL 程序時眼五,控制臺會打印出啟用 Metal 的日志妆艘。根據(jù)這一點可以猜測,Apple 已經(jīng)實現(xiàn)了一套機制將 OpenGL 命令無縫橋接到 Metal 上看幼,由 Metal 擔任真正于硬件交互的工作批旺。

image.png

OpenGL和Core Graphics
Core Graphics框架是先把命令輸入到CPU再調用GPU繪圖,OpenGL ES是直接操作GPU繪圖诵姜。很明顯OpenGL ES繪圖的效率更高汽煮。但是除了特別大的圖片運算需求外,我們很少使用OpenGL ES茅诱。因為繪制同一個圖形可能UIBezierPath需要5行代碼逗物,Core Graphics需要10行代碼搬卒,而使用OpenGL ES繪制一個圖形可能要300~400行代碼瑟俭。

CALayer

那么為什么 CALayer 可以呈現(xiàn)可視化內(nèi)容呢?因為 CALayer 基本等同于一個 紋理契邀。紋理是 GPU 進行圖像渲染的重要依據(jù)摆寄。

圖形渲染原理 中提到紋理本質上就是一張圖片,因此 CALayer 也包含一個 contents 屬性指向一塊緩存區(qū)坯门,稱為 backing store微饥,可以存放位圖(Bitmap)。iOS 中將該緩存區(qū)保存的圖片稱為 寄宿圖古戴。

圖形渲染流水線支持從頂點開始進行繪制(在流水線中欠橘,頂點會被處理生成紋理),也支持直接使用紋理(圖片)進行渲染现恼。相應地肃续,在實際開發(fā)中,繪制界面也有兩種方式:一種是 手動繪制叉袍;另一種是 使用圖片始锚。

對此,iOS 中也有兩種相應的實現(xiàn)方式:

  • 使用圖片:contents image
  • 手動繪制:custom drawing

Contents Image

Contents Image 是指通過 CALayercontents 屬性來配置圖片喳逛。然而瞧捌,contents 屬性的類型為 id。在這種情況下,可以給 contents 屬性賦予任何值姐呐,app 仍可以編譯通過殿怜。但是在實踐中,如果 content 的值不是 CGImage 曙砂,得到的圖層將是空白的稳捆。

既然如此,為什么要將 contents 的屬性類型定義為 id 而非 CGImage麦轰。這是因為在 Mac OS 系統(tǒng)中乔夯,該屬性對 CGImageNSImage 類型的值都起作用,而在 iOS 系統(tǒng)中款侵,該屬性只對 CGImage 起作用末荐。

本質上,contents 屬性指向的一塊緩存區(qū)域新锈,稱為 backing store甲脏,可以存放 bitmap 數(shù)據(jù)。

Custom Drawing

Custom Drawing 是指使用 Core Graphics 直接繪制寄宿圖妹笆。實際開發(fā)中块请,一般通過繼承 UIView 并實現(xiàn) -drawRect: 方法來自定義繪制。

雖然 -drawRect: 是一個 UIView 方法拳缠,但事實上都是底層的 CALayer 完成了重繪工作并保存了產(chǎn)生的圖片墩新。下圖所示為 -drawRect: 繪制定義寄宿圖的基本原理。

  • UIView 有一個關聯(lián)圖層窟坐,即 CALayer海渊。
  • CALayer 有一個可選的 delegate 屬性,實現(xiàn)了 CALayerDelegate 協(xié)議哲鸳。UIView 作為 CALayer 的代理實現(xiàn)了 CALayerDelegae 協(xié)議臣疑。
  • 當需要重繪時,即調用 -drawRect:徙菠,CALayer 請求其代理給予一個寄宿圖來顯示讯沈。
  • CALayer 首先會嘗試調用 -displayLayer: 方法,此時代理可以直接設置 contents 屬性婿奔。
  • 如果代理沒有實現(xiàn) -displayLayer: 方法缺狠,CALayer 則會嘗試調用 -drawLayer:inContext: 方法。在調用該方法前脸秽,CALayer 會創(chuàng)建一個空的寄宿圖(尺寸由 boundscontentScale 決定)和一個 Core Graphics 的繪制上下文儒老,為繪制寄宿圖做準備,作為 ctx 參數(shù)傳入记餐。

  • 最后驮樊,由 Core Graphics 繪制生成的寄宿圖會存入 backing store

Core Animation 流水線

通過前面的介紹,我們知道了 CALayer 的本質囚衔,那么它是如何調用 GPU 并顯示可視化內(nèi)容的呢挖腰?下面我們就需要介紹一下 Core Animation 流水線的工作原理。

事實上练湿,app 本身并不負責渲染猴仑,渲染則是由一個獨立的進程負責,即 Render Server 進程肥哎。

App 通過 IPC 將渲染任務及相關數(shù)據(jù)提交給 Render Server辽俗。Render Server 處理完數(shù)據(jù)后,再傳遞至 GPU篡诽。最后由 GPU 調用 iOS 的圖像設備進行顯示崖飘。

Core Animation 流水線的詳細過程如下:

  • 首先,由 app 處理事件(Handle Events)杈女,如:用戶的點擊操作朱浴,在此過程中 app 可能需要更新 視圖樹,相應地达椰,圖層樹 也會被更新翰蠢。
  • 其次,app 通過 CPU 完成對顯示內(nèi)容的計算啰劲,如:視圖的創(chuàng)建梁沧、布局計算、圖片解碼呈枉、文本繪制等趁尼。在完成對顯示內(nèi)容的計算之后埃碱,app 對圖層進行打包猖辫,并在下一次 RunLoop 時將其發(fā)送至 Render Server,即完成了一次 Commit Transaction 操作砚殿。
  • Render Server 主要執(zhí)行 Open GL啃憎、Core Graphics 相關程序,并調用 GPU
  • GPU 則在物理層上完成了對圖像的渲染似炎。
  • 最終辛萍,GPU 通過 Frame Buffer、視頻控制器等相關部件羡藐,將圖像顯示在屏幕上贩毕。

對上述步驟進行串聯(lián),它們執(zhí)行所消耗的時間遠遠超過 16.67 ms仆嗦,因此為了滿足對屏幕的 60 FPS 刷新率的支持辉阶,需要將這些步驟進行分解,通過流水線的方式進行并行執(zhí)行,如下圖所示谆甜。

Commit Transaction

在 Core Animation 流水線中垃僚,app 調用 Render Server 前的最后一步 Commit Transaction 其實可以細分為 4 個步驟:

  • Layout
  • Display
  • Prepare
  • Commit

動畫渲染原理

iOS 動畫的渲染也是基于上述 Core Animation 流水線完成的。這里我們重點關注 app 與 Render Server 的執(zhí)行流程规辱。

日常開發(fā)中谆棺,如果不是特別復雜的動畫,一般使用 UIView Animation 實現(xiàn)罕袋,iOS 將其處理過程分為如下三部階段:

  • Step 1:調用 animationWithDuration:animations: 方法
  • Step 2:在 Animation Block 中進行 Layout改淑,DisplayPrepare浴讯,Commit 等步驟溅固。
  • Step 3:Render Server 根據(jù) Animation 逐幀進行渲染。

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末兰珍,一起剝皮案震驚了整個濱河市侍郭,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌掠河,老刑警劉巖亮元,帶你破解...
    沈念sama閱讀 206,602評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異唠摹,居然都是意外死亡爆捞,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,442評論 2 382
  • 文/潘曉璐 我一進店門勾拉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來煮甥,“玉大人,你說我怎么就攤上這事藕赞〕芍猓” “怎么了?”我有些...
    開封第一講書人閱讀 152,878評論 0 344
  • 文/不壞的土叔 我叫張陵斧蜕,是天一觀的道長双霍。 經(jīng)常有香客問我,道長批销,這世上最難降的妖魔是什么洒闸? 我笑而不...
    開封第一講書人閱讀 55,306評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮均芽,結果婚禮上丘逸,老公的妹妹穿的比我還像新娘。我一直安慰自己掀宋,他們只是感情好深纲,可當我...
    茶點故事閱讀 64,330評論 5 373
  • 文/花漫 我一把揭開白布羞反。 她就那樣靜靜地躺著,像睡著了一般囤萤。 火紅的嫁衣襯著肌膚如雪昼窗。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,071評論 1 285
  • 那天涛舍,我揣著相機與錄音澄惊,去河邊找鬼。 笑死富雅,一個胖子當著我的面吹牛掸驱,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播没佑,決...
    沈念sama閱讀 38,382評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼毕贼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了蛤奢?” 一聲冷哼從身側響起鬼癣,我...
    開封第一講書人閱讀 37,006評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎啤贩,沒想到半個月后待秃,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,512評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡痹屹,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,965評論 2 325
  • 正文 我和宋清朗相戀三年章郁,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片志衍。...
    茶點故事閱讀 38,094評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡暖庄,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出楼肪,到底是詐尸還是另有隱情培廓,我是刑警寧澤,帶...
    沈念sama閱讀 33,732評論 4 323
  • 正文 年R本政府宣布淹辞,位于F島的核電站医舆,受9級特大地震影響,放射性物質發(fā)生泄漏象缀。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,283評論 3 307
  • 文/蒙蒙 一爷速、第九天 我趴在偏房一處隱蔽的房頂上張望央星。 院中可真熱鬧,春花似錦惫东、人聲如沸莉给。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,286評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽颓遏。三九已至徐矩,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間叁幢,已是汗流浹背滤灯。 一陣腳步聲響...
    開封第一講書人閱讀 31,512評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留曼玩,地道東北人鳞骤。 一個月前我還...
    沈念sama閱讀 45,536評論 2 354
  • 正文 我出身青樓,卻偏偏與公主長得像黍判,于是被迫代替她去往敵國和親豫尽。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,828評論 2 345

推薦閱讀更多精彩內(nèi)容

  • 原文鏈接 通過 圖形渲染原理 一文顷帖,大致能夠了解圖形渲染過程中硬件相關的原理美旧。本文將進一步介紹 iOS 開發(fā)過程中...
    baochuquan閱讀 5,991評論 1 38
  • 圖形渲染技術棧 下圖所示為 iOS App 的圖形渲染技術棧,App 使用 Core Graphics贬墩、Core ...
    KB_MORE閱讀 370評論 0 0
  • 一陈症、圖形渲染技術棧 下圖所示為 iOS App 的圖形渲染技術棧,App 使用 Core Graphics震糖、Cor...
    永遠的Beyond52閱讀 302評論 0 1
  • iOS原理 文章匯總[http://www.reibang.com/p/9fa8104e3698] iOS開發(fā)中...
    東籬采桑人閱讀 1,507評論 0 1
  • 我們先假設這樣一個場景:就是點擊一個按鍵录肯,然后實現(xiàn)一張圖片的動畫移動。 代碼如下: 一.圖形渲染過程 1.視圖渲染...
    林大鵬閱讀 4,207評論 6 19