iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 4
0
自我挑戰組

初見Unity Shader系列 第 4

一個三角形的誕生(上)

目標

  • 認識GPU渲染管線的前半部,幾何階段

一個三角形...

以前歐氏幾何學過,三個點可以形成一個最基本的面,也就是三角形,今天就來介紹電腦是怎麼是怎麼劃出一個三角形,並且把它塗滿顏色的。

這裡指的電腦是有CPU與GPU的電腦,請不要覺得這是廢話,在GPU還沒出現的年代,圖形計算都是在CPU上,或許聽過硬體光柵化(Hardware Rasterization),就是指由GPU計算圖形的技術,而由CPU來完全計算圖形的方式稱為軟體光柵化(Software Rasterization)

渲染管線

現在我們開發者所接觸的GPU渲染管線叫做「可程式化渲染管線」,可程式化就是指我們在Day2所寫的那些vertex shader、fragment shader,以及許多對於混合、深度、剔除的設定,這種管線可以讓我們開發者高度自由的去控制要繪製的資料。

沒錯,有可程式化的就有「不可程式化」的管線,這種稱為「固定渲染管線」。固定渲染管線幾乎已經被淘汰了,比起可程式化可以用Shader去控制資料,它只能對渲染管線的一些設定進行開關。

Day3提到的三個階段,應用、幾何、光柵化,已經講完了應用階段(對,就只有那張圖),接下去介紹幾何階段跟光柵化階段,先上圖

圖中可以明顯地看到整條管線拆成兩個大區塊。

其中綠色的小區塊表示開發者可以撰寫Shader進行控制的部分,除了vertex shader和fragment shader,還會有另外兩種Shader可以使用;黃色的區塊表示只能對該階段進行一些設定,但不能程式,例如:開啟深度檢測;藍色則表示不能控制的階段。

注意: 不同的圖形API在管線上會有名字上的差異,例如在OpenGL的fragment shader對應到DirectX叫做pixel shader

幾何階段

Day2使用的vertex shader就是在這個階段進行的,還可以看到有另外兩種shader,為tessellation shader和geometry shader,相比vertex shader是必要的,這兩種shader是可選的

在幾何階段開始前有一塊灰色的頂點資料,這些資料就是由應用階段處理完後,儲存至記憶體的。

以下來講解各個區塊在幾何階段發生的事情:

Vertex Shader

頂點處理的第一站,這裡的頂點不只是指座標位置,還包括紋理的座標、法線座標、顏色等。常見的操作就是像是進行視角上的位移,或是空間的轉換,Day2的範例就是將頂點從模型空間直接轉換至裁剪空間。

還有動畫也與vertex shader有所相關,為什麼呢?動畫最基本是由模型的位移、旋轉、放大、變形左和出來的,而這些皆可經由變換頂點的資訊達成。

雖說形成一個面的最小的單位是一個三角形,但在繪製上,可以是單純的一個,一條線,或是多邊形,而被處理過的頂點會被轉換為圖元(primitives)

Tessellation Shader

如上面所說,這是一個可選的Shader,Tessellation翻譯叫做鑲嵌,如其翻譯所示,他會在基礎的圖元內部加上(鑲嵌)更多頂點,讓模型看起來更平滑,下面的圖是可以看到一個正方體在開發者不自己增加頂點的情況下,變成了球體。

from wiki

Geometry Shader

也是一個可選的Shader,與tessellation shader相反,geometry shader是在圖元的外部增加頂點,達到擴展、變形的效果,通常會用在像是火焰、煙霧等地方,我們可以利用一個頂點,然後加上geometry shader擴展成一個平面。這樣可以做出火焰、煙霧的粒子特效。

from learnopengl

投影 (Projection)

到目前為止,我們的圖像或是模型都是在3D世界,表示這些物件的座標會是(x, y, z),在這個階段,我們利用相機把(x, y, z)變更為(x, y),就跟我們使用相機一樣,把3D的世界存成2D的圖像。

這裡會先提到一個東西叫做z-buffer,是來存取物件在Z軸的資訊的,會在後面的光柵化階段講到。

from Geo-F/X

關於投影還有兩種,一個是透視投影,一個是正交投影,你可以在Unity的Camera 元件中找到這個屬性。

裁剪 (Clipping)

來到裁剪,這個階段就是將我們完全看不到的圖像剃除,假設一個圖像被我們的相機視角截掉了一部分,那就會為這個圖像補上新的頂點,變成新的圖像,以下面這張圖來看,可以方便了解裁剪做了甚麼

from javapoint

除了裁切這些圖形以外,在這個階段還有一個重要的事是將圖像轉換至NDC上,所謂的NDC(Noramlized Device Coordinate)是一種XYZ三軸範圍只有[-1, 1]的正方體裡,也就是我們要把上一階段,圖形的的結果映射到正方體裡面。

螢幕映射 (Screen Mapping)

來到幾何階段的最後一個區塊,這裡就相對比較好理解了,裁剪階段我們把圖形變換至正方體裡,現在要把頂點映射在長方形的螢幕上,假設解析度為1980*1280的視窗上必定會有些縮放,這就是螢幕應設在做的事。

from commons.wikimedia

下集待續

感覺講了很多東西,多了很多新名詞,但也僅僅講完了頂點要配置在螢幕上的那些地方而已。

下一篇將繼續補完管線的後半段,光柵化階段。

Reference


上一篇
甚麼是Shader?
下一篇
一個三角形的誕生(下)
系列文
初見Unity Shader30

尚未有邦友留言

立即登入留言