一步步學習計算機視覺 in IOS番外篇(一)圖片從加載到渲染的全過程

圖片展示到屏幕的流程

讓我們來看下一張圖片展示的全過程:


image.png

1)讀入UIImage
在代碼中,我們讀取圖片一般需要一個path,無論是本地圖片還是遠程圖片,我們獲取到的實際上是一個二進制數(shù)據(jù)串,用UIImage來表示。

  1. 用UIImage為UIImageView賦值

3)系統(tǒng)偵測數(shù)據(jù)變化
一個系統(tǒng)提供的隱式事務(wù)CATransaction捕獲了UIImageView圖層樹的變化。在下一個runloop到來時,Core Animation提交了這個CATransaction,開始準備渲染所需的位圖BitMap數(shù)據(jù)。

4)解壓縮UIImage數(shù)據(jù)到位圖BitMap
位圖實際上是個像素數(shù)組,對應(yīng)著圖片上的每一個點。如果提供bmp文件,確實不需要解壓縮,但是平常使用最為廣泛的png或jpg圖片都是壓縮后的位圖。需要對齊進行解壓縮。

  1. GPU進行坐標變換
    一張1000*1000的BitMap,我們可以對其變形渲染到任意尺寸的UIImageView上,GPU需要對坐標進行轉(zhuǎn)換,計算出實際的屏幕坐標。

6)頂點著色器

它把一個單獨的頂點作為輸入。頂點著色器主要的目的是把3D坐標轉(zhuǎn)為另一種3D坐標(后面會解釋),同時頂點著色器允許我們對頂點屬性進行一些基本處理。

7)圖元裝配階段

將頂點著色器輸出的所有頂點作為輸入(如果是GL_POINTS,那么就是一個頂點),并所有的點裝配成指定圖元的形狀;

8)幾何著色器

圖元裝配階段的輸出會傳遞給幾何著色器(Geometry Shader)。幾何著色器把圖元形式的一系列頂點的集合作為輸入,它可以通過產(chǎn)生新頂點構(gòu)造出新的(或是其它的)圖元來生成其他形狀。

9)光柵化階段

幾何著色器的輸出會被傳入光柵化階段(Rasterization Stage),這里它會把圖元映射為最終屏幕上相應(yīng)的像素,生成供片段著色器(Fragment Shader)使用的片段(Fragment)。在片段著色器運行之前會執(zhí)行裁切(Clipping)。裁切會丟棄超出你的視圖以外的所有像素,用來提升執(zhí)行效率。

10)片段著色器

片段著色器的主要目的是計算一個像素的最終顏色,這也是所有OpenGL高級效果產(chǎn)生的地方。通常,片段著色器包含3D場景的數(shù)據(jù)(比如光照、陰影、光的顏色等等),這些數(shù)據(jù)可以被用來計算最終像素的顏色。

11)測試與混合

在所有對應(yīng)顏色值確定以后,最終的對象將會被傳到最后一個階段,我們叫做Alpha測試和混合(Blending)階段。這個階段檢測片段的對應(yīng)的深度(和模板(Stencil))值(后面會講),用它們來判斷這個像素是其它物體的前面還是后面,決定是否應(yīng)該丟棄。這個階段也會檢查alpha值(alpha值定義了一個物體的透明度)并對物體進行混合(Blend)。所以,即使在片段著色器中計算出來了一個像素輸出的顏色,在渲染多個三角形的時候最后的像素顏色也可能完全不同。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容