創作內容

10 GP

Shader初學筆記

作者:pudding│2020-03-12 14:59:16│巴幣:20│人氣:2026
哈囉,感覺我很少在巴哈上更新XD
在之前發布了《T.O.W.E.R.S》正式版後就先暫時沒有再繼續增加內容,不過最近有開始去研究了之前一直沒有碰過的Shader,今天就讓我們先簡單看一下這玩意兒到底是什麼吧。

什麼是Shader?
Shader中文又稱著色器,簡單來說的話是用來處理渲染的程式 ,但是不同於我們平常所寫的其他程式(C#,Java之類的)是交給CPU完成運算,Shader是交給GPU來處理。
(圖源與其說明,簡單來說的話CPU是單一一個很強的運算單元,而GPU則是多個較弱的運算單元,前者擅長單一且複雜的工作,後者則擅長大量但簡單的工作,例如繪圖)

Shader則又可細分成
-Vertex Shader 頂點著色器
-Pixel Shader (fragment shader) 片元著色器 (我習慣稱像素/平面著色器)
-Geometry shader 幾何著色器
-Compute shader 計算著色器
-Tessellation/hull 細分曲面著色器

是不是覺得太多了?我也這麼覺得,不過其實可以不用急著把全部的Shader種類都先搞懂 (應該啦)
對於剛碰的人來說,我想先把前兩個Shader搞懂就好了
-Vertex Shader
-Pixel Shader (fragment shader)

基本渲染過程
一般來說如果我們要讓電腦繪製一個方塊的話,我們會先有這個方塊的網格資訊(它的外觀形狀,由數個頂點構成),先經過Vertex Shader的處理,將這些網格資料投射到螢幕平面上,轉換成螢幕上的點位,接著再將這些點位資料交給Fragment Shader,後者會負責去判斷說每個點位分別應該染上什麼顏色。
(簡言之:Vertex Shader先算出 "畫在哪",Fragment Shader再計算 "該畫啥")

那具體來說Shader要怎麼寫?
讓我們先回到我自己常用的Unity上吧,在Unity當中如果要寫Shader的話,你會需要先建立一個Shader (廢話

我們這邊先建立一個最基本的Shader,右鍵然後選Unlit Shader,選其他的話……我也暫時還不知道會怎樣XD
建立完後打開就會看到以下這些東西

……
我想第一次碰Shader的人應該都難免會產生 "這到底三小" 的想法XD不過別急,這邊我們先一個一個簡單地解釋 (畢竟詳細的解釋我也不會QQ)

先解釋一些大項目分別有
-名稱
-屬性
-子Shader
而子Shader當中則還包含了
-標籤(Tags)
-細緻程度(LOD)
-渲染過程(Pass)

接著我們再看看上圖中縮起來的Properties和Pass吧。
先看看屬性欄,Unlit Shader預設Properties當中會先有一個_MainTex的屬性,該屬性在編輯器那裡會顯示出來,並且可以讓開發者自由調動,如果要看到的話我們需要先建立一個材質(Material)
在Unity當中,要顯示一個物件時除了需要Shader外,我們也需要材質(Material),你可以把前者當作是一個渲染的設計藍圖,而後者則是根據該藍圖生出來的實體,能夠自己調整藍圖上的參數。 (不過記得你要在生成Material之後去切換他採用的Shader)
最後我們則可以看到Material上有著剛才Shader宣告的屬性欄位,一個叫Texture的貼圖,並且在還沒有指派任何貼圖之前,他預設的樣子會是白色。

說完了Porperties以及他在編輯器中看到的模樣後,接下來我們就接著繼續看到剛才的Pass部分吧
(fog的那一行我還不了解QQ,不過不是必要的)
Pass的部分算是整個Shader裡面最繁雜的一塊,不過平常有寫過其他程式(如C#,Java)的人現在應該會感覺比較親切一些 (大概)
Pass內部大致可以先分成取什麼資料,再到處理資料,這兩個步驟,讓我們先從取資料的部分看起吧。

(TEXCOORD0根據官方說法,他是第一個UV座標點,但之後的TEXCOORD1那些的我就看不太懂了,有興趣的人可以去研究一下官方的資料)
這裡我們把uv座標以及頂點的位置提取出來,對前者不熟悉的人,這裡先簡單提一下,UV我自己解釋為貼圖的取樣座標點,貼圖是物體的皮膚(想像一下把一張圖片整個貼在物體表面上),而UV就是去告訴我們,目前這的地方對應到原本貼圖的哪個區域 (例如說一個人的肚臍可能就對應到原本貼圖的0.5,0.5的位置,也就是正中央)
(圖源,以此圖為例,這裡的貼圖是一張地球的平面圖,然後把這個貼圖貼到一個球體上,並且我們可以帶入uv座標取得貼圖上對應的點)

那說完了準備資料後,接著就該來看看處理的部分了
這裡大致有3個步驟
1.先從Unity那邊取得appdata(依照我們先前宣告的格式取得資料),交給Vertex Shader
2.Vertex Shader將頂點資訊處理完後交給Fragment Shader (這邊將頂點的實際位置轉換成畫面上看到的位置)
3.最後Fragment Shader那邊再根據uv座標印出該位置應該要有的顏色

看懂了之後我們就可以來看看它具體的效果了!
我們先在場景中生成一個球體,然後去更換他對應的材質
(由於目前的材質還沒有給貼圖的關係,所以表面看起來就會是預設的白色,我們可以隨便找張圖來當作他的貼圖)
將江~球體Unity醬 (ㄍ

好啦,感覺這次在講解上寫得有點太囉嗦W而且可能還是不清楚,不過今天就先到這邊吧,希望大家喜歡! 或看的懂W
另外我個人也蠻推薦這個影片 (雖然長到靠杯),覺得太長的話可以先把前兩個鐘頭看完就好,我覺得算蠻清楚的
引用網址:https://home.gamer.com.tw/TrackBack.php?sn=4714375
All rights reserved. 版權所有,保留一切權利

相關創作

留言共 5 篇留言

樂小呈
大...大佬[e26]

04-11 23:08

pudding
多謝你這麼說>< 不過我感覺我這篇有點寫得太雜,不夠清楚04-12 00:20
⊰⊱求出處學術用⊰⊱
感謝分享

04-13 12:58

pudding
不會! 有幫到人就好W 也感謝你的捧場!(?04-13 13:19
RIVERANB
ShaderLab 裡面的 LOD 關鍵字語法其實不是在定義"細緻程度"
官方一直以來對於 ShaderLab 裡面的 LOD 用法說明就很少
我個人認為這個是可以被認定為要被淘汰的 feature
LOD 在這裡其實是定義這個 Shader 的運算複雜度
讓 Unity binary 在即時繪圖時由 LOD 值 (100/200/300/400 ... 越高越複雜) 決定目前的硬體效能是否可支持運行此 shader
如果 Unity binary 判定複雜度太高的話, 就會預設尋找定義好的 fallback shader 進行繪圖


嗯....相當雞肋的功能 XD

04-18 11:47

RIVERANB
#pragma multi_compile_fog
這邊是直接引用 Unity engine 幫我們準備好的 fog rendering 實作
官方說明 : expands to several variants to handle different fog types (off/linear/exp/exp2).

因此後來的 vertex/fragment shader 裡可以直接呼叫官方定義好的 API 實現 fog 效果
UNITY_TRANSFER_FOG()
UNITY_APPLY_FOG()

04-18 11:53

pudding
原來如此,我可以解釋成說呼叫UNITY_APPLY_FOG()這道指令,就能夠為我的物體產生霧氣的效果嗎?04-18 17:20
RIVERANB
不好意思不太會使用巴哈討論區
很晚才來回覆
基本上 FOG 顏色計算是在 vertex shader 中內插需要的資訊 (linear camera depth)
也就是 UNITY_TRANSFER_FOG() 做的事
傳送至 fragment shader 後, 在 per-pixel 中計算 fog color 的權重
也就是 UNITY_APPLY_FOG() 做的事

"為我的物體產生霧氣的效果" 所以這句話是對的

05-19 12:49

pudding
沒關係,我也常常因為巴哈的介面用不習慣而沒有上來W

所以意思算是,例如這個點有濃霧,那這個點的fog color權重就會比較高,使得最終顯示的顏色會比較貼近霧氣的色彩囉?05-22 21:45
我要留言提醒:您尚未登入,請先登入再留言

10喜歡★pudding70119 可決定是否刪除您的留言,請勿發表違反站規文字。

前一篇:自製遊戲《T.O.W.E... 後一篇:Shader初學筆記2—...

追蹤私訊切換新版閱覽

作品資料夾

lin881205大家
小屋不定期更新冷門西洋歌曲推廣與Reddit鬼故事翻譯唷!看更多我要大聲說昨天07:12


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】