iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 5
0
自我挑戰組

初見Unity Shader系列 第 5

一個三角形的誕生(下)

目標

  • 認識渲染管線前半段,光柵化階段

光柵化階段

延續昨天的渲染管線,今天介紹後半段,光柵化階段。再把昨天的管線圖貼出來:

上一個階段,幾何階段,設置好了頂點的資料,在光柵化階段我們要把這些頂點連接起來,在圖形範圍內的像素(pixel)塗上想要的顏色,最終輸出到螢幕上。

首先會遇到的是三角形設置與三角形遍歷合稱為光柵化(Rasterization),這裡的三角形不代表只處理三角形,而是圖元大多為三角形。

如果忘記或不是跟著系列文的讀者,圖元指的是頂點經過vertex shader處理過後的點、線、面(不一定是三角形)。

三角形設置

光柵化的第一站,最直白的解釋就是把頂點連起來,組成點線面,然後告訴管線有哪些像素被包在或是經過剛剛框起來的範圍裏面。

三角形遍歷

第二站就是運用剛剛存起來資訊,來決定要對範圍內的像素做甚麼處理,在這個階段會把圖元轉換成像素。

遍歷有幾種方式,目前我所知的有兩種,一種是傳統(Traditional)的光柵化,另外一種是Conservative Rasterization(註1),Conservative Rasterization往下分還可以分為內部的(Inner)跟外部的(Outer)。

註1: Conservative翻譯過來是「保守」,我不知道有甚麼好的中文翻譯,有的話還請告訴我

區別在於,想像每個像素中心都有一個點,在三角形設置畫過像素的線會有三種結果

  1. 像素以及其中心點完全包含在裡面
  2. 中心點有包含在裡面,像素不完全包含
  3. 中心點沒有包含在裡面,像素不完全包含

對第一和第二個條件進行處理的,就是傳統方式的光柵化;若只對條件一進行處理的被稱為內部的Conservative Rasterization,對全部條件進行處理的叫做外部的Conservative Rasterization,下面這張圖可以更好的演示光柵化是甚麼:

from Vortez

左邊為傳統方式,右邊為Conservative的方式。

fragment shader

經過上面的光柵化處理,圖元變換成了像素,又來到一個可控制且必須的shader,fragment shader。這個shader是利用我們之前在vertex shader處理過後的頂點資料,然後接下去處理光源、紋理貼圖、影子等任務,換一種說法,fragment shader就是在依照開發者的程式內容,把像素圖上正確的顏色。

後續我會介紹光源、貼圖、影子的作法,大多會在fragment shader這裡進行處理。

補充一下,在DirectX中,fragment shader會翻譯成pixel shader。

逐片段操作

再一次看一下最上方渲染管線那張圖,fragment shader的後半段還有三個小階段,這些橘色區塊合稱逐片段操作(Per-sample Operations),比起管線上那些shader,他們只能做一些開關設定(要不要經由這項測試),或是如其名,對測試做一些限制。

  • 模板測試
  • 深度測試
  • 混合

既然叫做測試(Test),肯定有著通過測試與不通過的關係。我的像素再fragment shader處理過後不會全部都渲染到螢幕上,還要經過這些嚴格的「測試」才可以顯示在螢幕上。

先不細講這些測試的功能,往後會很常再碰到他們,會很快地認識到如何利用這些測試做出許多常見的遊戲效果。

輸出顯示

終於,我們的頂點資料經過這些千辛萬苦的處理,最終存到了顏色緩衝區(Color buffer),之後只要等我們開發者去呼叫他,就可以把結果顯示在螢幕上了。

總結

花了兩天的時間解釋渲染管線,刪除了很多東西,希望以最白話的方式去理解並講解它,但總覺得缺了很多東西,深深感覺這是另外一個大坑。

Reference


上一篇
一個三角形的誕生(上)
下一篇
漫反射
系列文
初見Unity Shader30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言