一步步學(xué)習(xí)計算機視覺 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)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市懈凹,隨后出現(xiàn)的幾起案子蜀变,更是在濱河造成了極大的恐慌,老刑警劉巖介评,帶你破解...
    沈念sama閱讀 219,039評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件库北,死亡現(xiàn)場離奇詭異,居然都是意外死亡们陆,警方通過查閱死者的電腦和手機寒瓦,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,426評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來坪仇,“玉大人杂腰,你說我怎么就攤上這事∫挝模” “怎么了喂很?”我有些...
    開封第一講書人閱讀 165,417評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長皆刺。 經(jīng)常有香客問我少辣,道長,這世上最難降的妖魔是什么羡蛾? 我笑而不...
    開封第一講書人閱讀 58,868評論 1 295
  • 正文 為了忘掉前任漓帅,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘忙干。我一直安慰自己屯伞,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,892評論 6 392
  • 文/花漫 我一把揭開白布豪直。 她就那樣靜靜地躺著,像睡著了一般珠移。 火紅的嫁衣襯著肌膚如雪弓乙。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,692評論 1 305
  • 那天钧惧,我揣著相機與錄音暇韧,去河邊找鬼。 笑死浓瞪,一個胖子當(dāng)著我的面吹牛懈玻,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播乾颁,決...
    沈念sama閱讀 40,416評論 3 419
  • 文/蒼蘭香墨 我猛地睜開眼涂乌,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了英岭?” 一聲冷哼從身側(cè)響起湾盒,我...
    開封第一講書人閱讀 39,326評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎诅妹,沒想到半個月后罚勾,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,782評論 1 316
  • 正文 獨居荒郊野嶺守林人離奇死亡吭狡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,957評論 3 337
  • 正文 我和宋清朗相戀三年尖殃,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片划煮。...
    茶點故事閱讀 40,102評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡送丰,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出般此,到底是詐尸還是另有隱情蚪战,我是刑警寧澤,帶...
    沈念sama閱讀 35,790評論 5 346
  • 正文 年R本政府宣布铐懊,位于F島的核電站邀桑,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏科乎。R本人自食惡果不足惜壁畸,卻給世界環(huán)境...
    茶點故事閱讀 41,442評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧捏萍,春花似錦太抓、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,996評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至逗噩,卻和暖如春掉丽,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背异雁。 一陣腳步聲響...
    開封第一講書人閱讀 33,113評論 1 272
  • 我被黑心中介騙來泰國打工捶障, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人纲刀。 一個月前我還...
    沈念sama閱讀 48,332評論 3 373
  • 正文 我出身青樓项炼,卻偏偏與公主長得像,于是被迫代替她去往敵國和親示绊。 傳聞我的和親對象是個殘疾皇子锭部,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,044評論 2 355