首先回答一個問題:CPU和GPU都能進行圖形渲染,只是GPU 圖形渲染的并行計算能力速度更快
屏幕圖像顯示原理
下圖所示為常見的 CPU、GPU、顯示器工作方式。
CPU 計算好顯示內容提交至 GPU,GPU 渲染完成后將渲染結果存入幀緩沖區,視頻控制器會按照 VSync
信號逐幀讀取幀緩沖區的數據,經過數據轉換后最終由顯示器進行顯示。
最簡單的情況下,幀緩沖區只有一個。此時,幀緩沖區的讀取和刷新都都會有比較大的效率問題。為了解決效率問題,GPU 通常會引入兩個緩沖區,即 雙緩沖機制。在這種情況下,GPU 會預先渲染一幀放入一個緩沖區中,用于視頻控制器的讀取。當下一幀渲染完畢后,GPU 會直接把視頻控制器的指針指向第二個緩沖器。
雙緩沖雖然能解決效率問題,但會引入一個新的問題。當視頻控制器還未讀取完成時,即屏幕內容剛顯示一半時,GPU 將新的一幀內容提交到幀緩沖區并把兩個緩沖區進行交換后,視頻控制器就會把新的一幀數據的下半段顯示到屏幕上,造成畫面撕裂現象,如下圖:
視頻顯示器從幀緩沖區掃描繪制完成一幀畫面后,會發出垂直同步信號,簡稱VSync,當開啟垂直同步后,GPU 會等待顯示器的 VSync 信號發出后,才進行新的一幀渲染和緩沖區更新。
iOS 渲染框架
UIKit
UIKit
是 iOS 開發者最常用的框架,可以通過設置 UIKit
組件的布局以及相關屬性來繪制界面。
事實上, UIKit
自身并不具備在屏幕成像的能力,其主要負責對用戶操作事件的響應(UIView
繼承自 UIResponder
),事件響應的傳遞大體是經過逐層的 視圖樹 遍歷實現的。
Core Animation
Core Animation
源自于 Layer Kit
,動畫只是 Core Animation
特性的冰山一角。
Core Animation
是一個復合引擎,其職責是 盡可能快地組合屏幕上不同的可視內容,這些可視內容可被分解成獨立的圖層(即 CALayer),這些圖層會被存儲在一個叫做圖層樹的體系之中。從本質上而言,CALayer
是用戶所能在屏幕上看見的一切的基礎。
Core Graphics
Core Graphics
基于 Quartz 高級繪圖引擎,主要用于運行時繪制圖像。工作步驟先傳輸命令到CPU,計算完成后再提交到GPU。開發者可以使用此框架來處理基于路徑的繪圖,轉換,顏色管理,離屏渲染,圖案,漸變和陰影,圖像數據管理,圖像創建和圖像遮罩以及 PDF 文檔創建,顯示和分析。
Core Image
Core Image
與 Core Graphics
恰恰相反,Core Graphics
用于在 運行時創建圖像,而 Core Image
是用來處理 運行前創建的圖像 的。Core Image
框架擁有一系列現成的圖像過濾器,能對已存在的圖像進行高效的處理。
大部分情況下,Core Image
會在 GPU 中完成工作,但如果 GPU 忙,會使用 CPU 進行處理。
OpenGL ES
OpenGL ES
(OpenGL for Embedded Systems,簡稱 GLES),是 OpenGL 的子集。在前面的 圖形渲染原理綜述 一文中提到過 OpenGL 是一套第三方標準,函數的內部實現由對應的 GPU 廠商開發實現。
Metal
Metal
類似于 OpenGL ES
,也是一套第三方標準,具體實現由蘋果實現。大多數開發者都沒有直接使用過 Metal
,但其實所有開發者都在間接地使用 Metal
。Core Animation
、Core Image
、SceneKit
、SpriteKit
等等渲染框架都是構建于 Metal
之上的。
當在真機上調試 OpenGL 程序時,控制臺會打印出啟用 Metal
的日志。根據這一點可以猜測,Apple 已經實現了一套機制將 OpenGL 命令無縫橋接到 Metal
上,由 Metal
擔任真正于硬件交互的工作。
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
可以呈現可視化內容呢?因為 CALayer
基本等同于一個 紋理。紋理是 GPU 進行圖像渲染的重要依據。
在 圖形渲染原理 中提到紋理本質上就是一張圖片,因此 CALayer
也包含一個 contents
屬性指向一塊緩存區,稱為 backing store
,可以存放位圖(Bitmap)。iOS 中將該緩存區保存的圖片稱為 寄宿圖。
圖形渲染流水線支持從頂點開始進行繪制(在流水線中,頂點會被處理生成紋理),也支持直接使用紋理(圖片)進行渲染。相應地,在實際開發中,繪制界面也有兩種方式:一種是 手動繪制;另一種是 使用圖片。
對此,iOS 中也有兩種相應的實現方式:
- 使用圖片:contents image
- 手動繪制:custom drawing
Contents Image
Contents Image 是指通過 CALayer
的 contents
屬性來配置圖片。然而,contents
屬性的類型為 id
。在這種情況下,可以給 contents
屬性賦予任何值,app 仍可以編譯通過。但是在實踐中,如果 content
的值不是 CGImage
,得到的圖層將是空白的。
既然如此,為什么要將 contents
的屬性類型定義為 id
而非 CGImage
。這是因為在 Mac OS 系統中,該屬性對 CGImage
和 NSImage
類型的值都起作用,而在 iOS 系統中,該屬性只對 CGImage
起作用。
本質上,contents
屬性指向的一塊緩存區域,稱為 backing store
,可以存放 bitmap 數據。
Custom Drawing
Custom Drawing 是指使用 Core Graphics
直接繪制寄宿圖。實際開發中,一般通過繼承 UIView
并實現 -drawRect:
方法來自定義繪制。
雖然 -drawRect:
是一個 UIView
方法,但事實上都是底層的 CALayer
完成了重繪工作并保存了產生的圖片。下圖所示為 -drawRect:
繪制定義寄宿圖的基本原理。
-
UIView
有一個關聯圖層,即CALayer
。 -
CALayer
有一個可選的delegate
屬性,實現了CALayerDelegate
協議。UIView
作為CALayer
的代理實現了CALayerDelegae
協議。 - 當需要重繪時,即調用
-drawRect:
,CALayer
請求其代理給予一個寄宿圖來顯示。 -
CALayer
首先會嘗試調用-displayLayer:
方法,此時代理可以直接設置contents
屬性。
如果代理沒有實現
-displayLayer:
方法,CALayer
則會嘗試調用-drawLayer:inContext:
方法。在調用該方法前,CALayer
會創建一個空的寄宿圖(尺寸由bounds
和contentScale
決定)和一個Core Graphics
的繪制上下文,為繪制寄宿圖做準備,作為ctx
參數傳入。最后,由
Core Graphics
繪制生成的寄宿圖會存入backing store
。
Core Animation 流水線
通過前面的介紹,我們知道了 CALayer
的本質,那么它是如何調用 GPU 并顯示可視化內容的呢?下面我們就需要介紹一下 Core Animation 流水線的工作原理。
事實上,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、視頻控制器等相關部件,將圖像顯示在屏幕上。
對上述步驟進行串聯,它們執行所消耗的時間遠遠超過 16.67 ms,因此為了滿足對屏幕的 60 FPS 刷新率的支持,需要將這些步驟進行分解,通過流水線的方式進行并行執行,如下圖所示。
Commit Transaction
在 Core Animation 流水線中,app 調用 Render Server
前的最后一步 Commit Transaction 其實可以細分為 4 個步驟:
Layout
Display
Prepare
Commit
動畫渲染原理
iOS 動畫的渲染也是基于上述 Core Animation 流水線完成的。這里我們重點關注 app 與 Render Server
的執行流程。
日常開發中,如果不是特別復雜的動畫,一般使用 UIView
Animation 實現,iOS 將其處理過程分為如下三部階段:
- Step 1:調用
animationWithDuration:animations:
方法 - Step 2:在 Animation Block 中進行
Layout
,Display
,Prepare
,Commit
等步驟。 - Step 3:
Render Server
根據 Animation 逐幀進行渲染。