渲染原理

圖像渲染流程粗粒度地大概分為下面這些步驟:

渲染流程圖如下:


Application 應用處理階段:得到圖元

CPU 負責處理應用中的圖像药有,在這個階段應用可能會對圖像進行一系列的操作或者改變,最終將新的圖像信息傳給下一階段。這部分信息被叫做圖元(primitives)霉晕,通常是三角形推姻、線段训枢、頂點等。

Geometry 幾何處理階段:處理圖元

GPU 拿到上一個階段傳遞下來的圖元信息挺勿,GPU 會對這部分圖元進行處理,之后輸出新的圖元喂柒。

這一系列階段包括:頂點著色器(Vertex Shader):這個階段中會將圖元中的頂點信息進行視角轉換不瓶、添加光照信息、增加紋理等操作灾杰。

形狀裝配(Shape Assembly):圖元中的三角形蚊丐、線段、點分別對應三個 Vertex吭露、兩個 Vertex吠撮、一個 Vertex。這個階段會將 Vertex 連接成相對應的形狀讲竿。

幾何著色器(Geometry Shader):額外添加額外的Vertex泥兰,將原始圖元轉換成新圖元,以構建一個不一樣的模型题禀。簡單來說就是基于通過三角形鞋诗、線段和點構建更復雜的幾何圖形。

Rasterization 光柵化階段:圖元轉換為像素

光柵化的主要目的是將幾何渲染之后的圖元信息迈嘹,轉換為一系列的像素削彬,以便后續(xù)顯示在屏幕上全庸。這個階段中會根據(jù)圖元信息,計算出每個圖元所覆蓋的像素信息等融痛,從而將像素劃分成不同的部分壶笼。

一種簡單的劃分就是根據(jù)中心點,如果像素的中心點在圖元內部雁刷,那么這個像素就屬于這個圖元覆劈。如上圖所示,深藍色的線就是圖元信息所構建出的三角形沛励;而通過是否覆蓋中心點责语,可以遍歷出所有屬于該圖元的所有像素,即淺藍色部分目派。

Pixel 像素處理階段:處理像素坤候,得到位圖

經(jīng)過上述光柵化階段,我們得到了圖元所對應的像素企蹭,此時白筹,我們需要給這些像素填充顏色和效果。所以最后這個階段就是給像素填充正確的內容练对,最終顯示在屏幕上遍蟋。這些經(jīng)過處理、蘊含大量信息的像素點集合螟凭,被稱作位圖(bitmap)虚青。也就是說,Pixel 階段最終輸出的結果就是位圖螺男,過程具體包含:

這些點可以進行不同的排列和染色以構成圖樣棒厘。當放大位圖時,可以看見賴以構成整個圖像的無數(shù)單個方塊下隧。只要有足夠多的不同色彩的像素奢人,就可以制作出色彩豐富的圖象,逼真地表現(xiàn)自然界的景象淆院『魏酰縮放和旋轉容易失真酱虎,同時文件容量較大阿弃。

片段著色器(Fragment Shader):也叫做 Pixel Shader,這個階段的目的是給每一個像素 Pixel 賦予正確的顏色贤斜。顏色的來源就是之前得到的頂點拷淘、紋理各墨、光照等信息。由于需要處理紋理启涯、光照等復雜信息贬堵,所以這通常是整個系統(tǒng)的性能瓶頸恃轩。

測試與混合(Tests and Blending):也叫做 Merging 階段,這個階段主要處理片段的前后位置以及透明度黎做。這個階段會檢測各個著色片段的深度值 z 坐標叉跛,從而判斷片段的前后位置,以及是否應該被舍棄蒸殿。同時也會計算相應的透明度 alpha 值昧互,從而進行片段的混合,得到最終的顏色伟桅。

參考

http://www.reibang.com/p/e2cead5c3e13

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市叽掘,隨后出現(xiàn)的幾起案子楣铁,更是在濱河造成了極大的恐慌,老刑警劉巖更扁,帶你破解...
    沈念sama閱讀 211,376評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件盖腕,死亡現(xiàn)場離奇詭異,居然都是意外死亡浓镜,警方通過查閱死者的電腦和手機溃列,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,126評論 2 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來膛薛,“玉大人听隐,你說我怎么就攤上這事『遄模” “怎么了雅任?”我有些...
    開封第一講書人閱讀 156,966評論 0 347
  • 文/不壞的土叔 我叫張陵,是天一觀的道長咨跌。 經(jīng)常有香客問我沪么,道長,這世上最難降的妖魔是什么锌半? 我笑而不...
    開封第一講書人閱讀 56,432評論 1 283
  • 正文 為了忘掉前任禽车,我火速辦了婚禮,結果婚禮上刊殉,老公的妹妹穿的比我還像新娘殉摔。我一直安慰自己,他們只是感情好冗澈,可當我...
    茶點故事閱讀 65,519評論 6 385
  • 文/花漫 我一把揭開白布钦勘。 她就那樣靜靜地躺著,像睡著了一般亚亲。 火紅的嫁衣襯著肌膚如雪彻采。 梳的紋絲不亂的頭發(fā)上腐缤,一...
    開封第一講書人閱讀 49,792評論 1 290
  • 那天,我揣著相機與錄音肛响,去河邊找鬼岭粤。 笑死,一個胖子當著我的面吹牛特笋,可吹牛的內容都是我干的剃浇。 我是一名探鬼主播,決...
    沈念sama閱讀 38,933評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼猎物,長吁一口氣:“原來是場噩夢啊……” “哼虎囚!你這毒婦竟也來了?” 一聲冷哼從身側響起蔫磨,我...
    開封第一講書人閱讀 37,701評論 0 266
  • 序言:老撾萬榮一對情侶失蹤淘讥,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后堤如,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蒲列,經(jīng)...
    沈念sama閱讀 44,143評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,488評論 2 327
  • 正文 我和宋清朗相戀三年搀罢,在試婚紗的時候發(fā)現(xiàn)自己被綠了蝗岖。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,626評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡榔至,死狀恐怖抵赢,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情唧取,我是刑警寧澤瓣俯,帶...
    沈念sama閱讀 34,292評論 4 329
  • 正文 年R本政府宣布,位于F島的核電站兵怯,受9級特大地震影響彩匕,放射性物質發(fā)生泄漏。R本人自食惡果不足惜媒区,卻給世界環(huán)境...
    茶點故事閱讀 39,896評論 3 313
  • 文/蒙蒙 一驼仪、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧袜漩,春花似錦绪爸、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,742評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至座掘,卻和暖如春递惋,著一層夾襖步出監(jiān)牢的瞬間柔滔,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評論 1 265
  • 我被黑心中介騙來泰國打工萍虽, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留睛廊,地道東北人。 一個月前我還...
    沈念sama閱讀 46,324評論 2 360
  • 正文 我出身青樓杉编,卻偏偏與公主長得像超全,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子邓馒,可洞房花燭夜當晚...
    茶點故事閱讀 43,494評論 2 348

推薦閱讀更多精彩內容

  • 1. 計算機渲染原理 CPU 與 GPU 的架構 CPU(Central Processing Unit):現(xiàn)代計...
    M_慕宸閱讀 441評論 0 0
  • Head 在性能優(yōu)化中嘶朱,有一個重要的知識點就是卡頓優(yōu)化,我們以FPS(每秒傳輸幀數(shù)(Frames Per Seco...
    寧夏灼雪__閱讀 2,540評論 0 7
  • OpenGL render theory on iOS iOS 底層渲染原理 寫在前面 下半年做過一次分享會光酣,是以...
    皮皮Warrior閱讀 2,909評論 0 12
  • 這是我在《游戲架構-核心技術與面試精粹》看的见咒,記錄一下~ 啥玩意是渲染?游戲圖像的繪制被稱為渲染 啥玩意是渲染管線...
    APP4x閱讀 1,941評論 0 2
  • 1. 圖像渲染流程 如圖所示挂疆,CPU 計算好顯示內容提交到 GPU,GPU 渲染完成后將渲染結果放入幀緩沖區(qū)下翎,隨后...
    NapoleonY閱讀 1,330評論 0 9