轉自:http://unity3d.9tech.cn/news/2013/1202/39031.html
自己使用
所以,本“教程”的對象是
- 總的來說是新接觸Shader開發的人:也許你知道什么是Shader,也會使用別人的Shader,但是僅限於知道一些基本的內建Shader名字,從來沒有打開它們查看其源碼。
- 想要更多了解Shader和有需求要進行Shader開發的開發者,但是之前並沒有Shader開發的經驗。
當 然,因為我本身在Shader開發方面也是一個不折不扣的大菜鳥,本文很多內容也只是在自己的理解加上一些可能不太靠譜的求證和總結。本文中的示例應該會 有更好的方式來實現,因此您是高手並且恰巧路過的話,如果有好的方式來實現某些內容,懇請您不吝留下評論,我會對本文進行不斷更新和維護。
一些基本概念Shader和Material
如果是進行
所以說Shader並沒有什么特別神奇的,它只是一段規定好輸入(顏色,貼圖等)和輸出(渲染器能夠讀懂的點和顏色的對應關系)的程序。而Shader開發者要做的就是根據輸入,進行計算變換,產生輸出而已。
Shader大體上可以分為兩類,簡單來說
- 表面着色器(Surface Shader) - 為你做了大部分的工作,只需要簡單的技巧即可實現很多不錯的效果。類比卡片機,上手以后不太需要很多努力就能拍出不錯的效果。
- 片段着色器(Fragment Shader) - 可以做的事情更多,但是也比較難寫。使用片段着色器的主要目的是可以在比較低的層級上進行更復雜(或者針對目標設備更高效)的開發。
因為是入門文章,所以之后的介紹將主要集中在表面着色器上。
Shader程序的基本結構
因為着色器代碼可以說專用性非常強,因此人為地規定了它的基本結構。一個普通的着色器的結構應該是這樣的:
一段Shader程序的結構
首 先是一些屬性定義,用來指定這段代碼將有哪些輸入。接下來是一個或者多個的子着色器,在實際運行中,哪一個子着色器被使用是由運行的平台所決定的。子着色 器是代碼的主體,每一個子着色器中包含一個或者多個的Pass。在計算着色時,平台先選擇最優先可以使用的着色器,然后依次運行其中的Pass,然后得到 輸出的結果。最后指定一個回滾,用來處理所有Subshader都不能運行的情況(比如目標設備實在太老,所有Subshader中都有其不支持的特 性)。
需要提前說明的是,在實際進行表面着色器的開發時,我們將直接在Subshader這個層次上寫代碼,系統將把我們的代碼編譯成若干個合適的Pass。廢話到此為止,下面讓我們真正實際進入Shader的世界吧。
百行文檔不如一個實例,下面給出一段簡單的Shader代碼,然后根據代碼來驗證下上面說到的結構和闡述一些基本的Shader語法。因為本文是針對 Unity3D來寫Shader的,所以也使用Unity3D來演示吧。首先,新建一個Shader,可以在Project面板中找到,Create,選 擇Shader,然后將其命名為Diffuse Texture:
在Unity3D中新建一個Shader
隨便用個文本編輯器打開剛才新建的Shader:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
Shader
"Custom/Diffuse Texture"
{
Properties {
_MainTex (
"Base (RGB)"
, 2D) =
"white"
{}
}
SubShader {
Tags {
"RenderType"
=
"Opaque"
}
LOD 200
CGPROGRAM
#pragma surface surf Lambert
sampler2D _MainTex;
struct Input {
float2 uv_MainTex;
};
void surf (Input IN, inout SurfaceOutput o) {
half4 c = tex2D (_MainTex, IN.uv_MainTex);
o.Albedo = c.rgb;
o.Alpha = c.a;
}
ENDCG
}
FallBack
"Diffuse"
}
|
如 果您之前沒怎么看過Shader代碼的話,估計細節上會看不太懂。但是有了上面基本結構的介紹,您應該可以識別出這個Shader的構成,比如一個 Properties部分,一個SubShader,以及一個FallBack。另外,第一行只是這個Shader的聲明並為其指定了一個名字,比如我們 的實例Shader,你可以在材質面板選擇Shader時在對應的位置找到這個Shader。
在Unity3D中找到剛才新建的Shader
接下來我們講逐句講解這個Shader,以期明了每一個語句的意義。
屬性
在Properties{}中定義着色器屬性,在這里定義的屬性將被作為輸入提供給所有的子着色器:
_Name("Display Name", type) = defaultValue[{options}]
- _Name - 屬性的名字,簡單說就是變量名,在之后整個Shader代碼中將使用這個名字來獲取該屬性的內容
- Display Name - 這個字符串將顯示在
- type - 這個屬性的類型,可能的type所表示的內容有以下幾種:
- Color - 一種顏色,由RGBA(紅綠藍和透明度)四個量來定義;
- Rect - 一個非2階數大小的貼圖;
- Cube - 即Cube map texture(立方體紋理),簡單說就是6張有聯系的2D貼圖的組合,主要用來做反射效果(比如天空盒和動態反射),也會被轉換為對應點的采樣;
- Range(min, max) - 一個介於最小值和最大值之間的浮點數,一般用來當作調整Shader某些特性的參數(比如透明度渲染的截止值可以是從0至1的值等);
- Float - 任意一個浮點數;
- Vector - 一個四維數;
- defaultValue 定義了這個屬性的默認值,通過輸入一個符合格式的默認值來指定對應屬性的初始值(某些效果可能需要某些特定的參數值來達到需要的效果,雖然這些值可以在之 后在進行調整,但是如果默認就指定為想要的值的話就省去了一個個調整的時間,方便很多)。
- Color - 以0~1定義的rgba顏色,比如(1,1,1,1);
- 2D/Rect/Cube - 對於貼圖來說,默認值可以為一個代表默認tint顏色的字符串,可以是空字符串或者”white”,”black”,”gray”,”bump”中的一個
- Float,Range - 某個指定的浮點數
- Vector - 一個4維數,寫為 (x,y,z,w)
- 另外還有一個{option},它只對2D,Rect或者Cube貼圖有關,在寫輸入時我們最少要在貼圖之后寫一 對什么都不含的空白的{},當我們需要打開特定選項時可以把其寫在這對花括號內。如果需要同時打開多個選項,可以使用空白分隔。可能的選擇有 ObjectLinear, EyeLinear, SphereMap, CubeReflect, CubeNormal中的一個,這些都是OpenGL中TexGen的模式。所以,一組屬性的申明看起來也許會是這個樣子的
|
1
2
3
4
|
//Define a color with a default value of semi-transparent blue
_MainColor (
"Main Color"
, Color) = (0,0,1,0.5)
//Define a texture with a default of white
_Texture (
"Texture"
, 2D) =
"white"
{}
|
Tags
表面着色器可以被若干的標簽(tags)所修飾,而硬件將通過判定這些標簽來決定什么時候調用該着色器。比如我們的例子中SubShader的第一句
Tags { "RenderType"="Opaque" }
告 訴了系統應該在渲染非透明物體時調用我們。Unity定義了一些列這樣的渲染過程,與RenderType是Opaque相對應的顯而易見的 是"RenderType" = "Transparent",表示渲染含有透明效果的物體時調用。在這里Tags其實暗示了你的Shader輸出的是什么,如果輸出中都是非透明物體,那 寫在Opaque里;如果想渲染透明或者半透明的像素,那應該寫在Transparent中。
另外比較有用的標簽還有"IgnoreProjector"="True"(不被Projectors影 響),"ForceNoShadowCasting"="True"(從不產生陰影)以及"Queue"="xxx"(指定渲染順序隊列)。這里想要着重 說一下的是Queue這個標簽,如果你使用Unity做過一些透明和不透明物體的混合的話,很可能已經遇到過不透明物體無法呈現在透明物體之后的情況。這 種情況很可能是由於Shader的渲染順序不正確導致的。Queue指定了物體的渲染順序,預定義的Queue有:
- Background - 最早被調用的渲染,用來渲染天空盒或者背景
- Geometry - 這是默認值,用來渲染非透明物體(普通情況下,場景中的絕大多數物體應該是非透明的)
- AlphaTest - 用來渲染經過Alpha Test的像素,單獨為AlphaTest設定一個Queue是出於對效率的考慮
- Transparent - 以從后往前的順序渲染透明物體
- Overlay - 用來渲染疊加的效果,是渲染的最后階段(比如鏡頭光暈等特效)
這 些預定義的值本質上是一組定義整數,Background = 1000, Geometry = 2000, AlphaTest = 2450, Transparent = 3000,最后Overlay = 4000。在我們實際設置Queue值時,不僅能使用上面的幾個預定義值,我們也可以指定自己的Queue值,寫成類似這 樣:"Queue"="Transparent+100",表示一個在Transparent之后100的Queue上進行調用。通過調整Queue值, 我們可以確保某些物體一定在另一些物體之前或者之后渲染,這個技巧有時候很有用處。
LOD 很簡單,它是Level of Detail的縮寫,在這里例子里我們指定了其為200(其實這是Unity的內建Diffuse着色器的設定值)。這個數值決定了我們能用什么樣的 Shader。在Unity的Quality Settings中我們可以設定允許的最大LOD,當設定的LOD小於SubShader所指定的LOD時,這個SubShader將不可用。Unity 內建Shader定義了一組LOD的數值,我們在實現自己的Shader的時候可以將其作為參考來設定自己的LOD數值,這樣在之后調整根據設備圖形性能 來調整畫質時可以進行比較精確的控制。
- VertexLit及其系列 = 100
- Decal, Reflective VertexLit = 150
- Diffuse = 200
- Diffuse Detail, Reflective Bumped Unlit, Reflective Bumped VertexLit = 250
- Bumped, Specular = 300
- Bumped Specular = 400
- Parallax = 500
- Parallax Specular = 600
Shader本體
前面雜項說完了,終於可以開始看看最主要的部分了,也就是將輸入轉變為輸出的代碼部分。為了方便看,請容許我把上面的SubShader的主題部分抄寫一遍
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
CGPROGRAM
#pragma surface surf Lambert
sampler2D _MainTex;
struct Input {
float2 uv_MainTex;
};
void surf (Input IN, inout SurfaceOutput o) {
half4 c = tex2D (_MainTex, IN.uv_MainTex);
o.Albedo = c.rgb;
o.Alpha = c.a;
}
ENDCG
|
還是逐行來看,首先是CGPROGRAM。這是一個開始標記,表明從這里開始是一段CG程序(我們在寫Unity的Shader時用的是Cg/HLSL語言)。最后一行的ENDCG與CGPROGRAM是對應的,表明CG程序到此結束。
接下來是是一個編譯指令:#pragma surface surf Lambert,它聲明了我們要寫一個表面Shader,並指定了光照模型。它的寫法是這樣的
#pragma surface surfaceFunction lightModel [optionalparams]
- surface - 聲明的是一個表面着色器
- surfaceFunction - 着色器代碼的方法的名字
- lightModel - 使用的光照模型。
我們聲明了一個表面着色器,實際的代碼在surf函數,使用Lambert(也就是普通的diffuse)作為光照模型。
接 下來一句sampler2D _MainTex;,sampler2D是個啥?其實在CG中,sampler2D就是和texture所綁定的一個數據容器接口。等等..這個說法還是 太復雜了,簡單理解的話,所謂加載以后的texture(貼圖)說白了不過是一塊內存存儲的,使用了RGB(也許還有A)通道,且每個通道8bits的數 據。而具體地想知道像素與坐標的對應關系,以及獲取這些數據,我們總不能一次一次去自己計算內存地址或者偏移,因此可以通過sampler2D來對貼圖進 行操作。更簡單地理解,sampler2D就是GLSL中的2D貼圖的類型,相應的,還有sampler1D,sampler
解 釋通了sampler2D是什么之后,還需要解釋下為什么在這里需要一句對_MainTex的聲明,之前我們不是已經在Properties里聲明過它是 貼圖了么。答案是我們用來實例的這個shader其實是由兩個相對獨立的塊組成的,外層的屬性聲明,回滾等等是Unity可以直接使用和編譯的 ShaderLab;而現在我們是在CGPROGRAM...ENDCG這樣一個代碼塊中,這是一段CG程序。對於這段CG程序,要想訪問在 Properties中所定義的變量的話,必須使用和之前變量相同的名字進行聲明。於是其實sampler2D _MainTex;做的事情就是再次聲明並鏈接了_MainTex,使得接下來的CG程序能夠使用這個變量。
接 下來是一個struct結構體。相信大家對於結構體已經很熟悉了,我們先跳過之,直接看下面的的surf函數。上面的#pragma段已經指出了我們的着 色器代碼的方法的名字叫做surf,那沒跑兒了,就是這段代碼是我們的着色器的工作核心。我們已經說過不止一次,着色器就是給定了輸入,然后給出輸出進行 着色的代碼。CG規定了聲明為表面着色器的方法(就是我們這里的surf)的參數類型和名字,因此我們沒有權利決定surf的輸入輸出參數的類型,只能按 照規定寫。這個規定就是第一個參數是一個Input結構,第二個參數是一個inout的SurfaceOutput結構。
它 們分別是什么呢?Input其實是需要我們去定義的結構,這給我們提供了一個機會,可以把所需要參與計算的數據都放到這個Input結構中,傳入surf 函數使用;SurfaceOutput是已經定義好了里面類型輸出結構,但是一開始的時候內容暫時是空白的,我們需要向里面填寫輸出,這樣就可以完成着色 了。先仔細看看INPUT吧,現在可以跳回來看上面定義的INPUT結構體了:
|
1
2
3
|
struct Input {
float2 uv_MainTex;
};
|
|
1
|
作 為輸入的結構體必須命名為Input,這個結構體中定義了一個float2的變量…你沒看錯我也沒打錯,就是float2,表示浮點數的float后面緊 跟一個數字2,這又是什么意思呢?其實沒什么魔法,float和vec都可以在之后加入一個2到4的數字,來表示被打包在一起的2到4個同類型數。比如下 面的這些定義:
|
|
1
2
3
4
5
6
|
//Define a 2d vector variable
vec2 coordinate;
//Define a color variable
float4 color;
//Multiply out a color
float3 multipliedColor = color.rgb * coordinate.x;
|
在訪問這些值時,我們即可以只使用名稱來獲得整組值,也可以使用下標的方式(比如.xyzw,.rgba或它們的部分比如.x等等)來獲得某個值。在這個例子里,我們聲明了一個叫做uv_MainTex的包含兩個浮點數的變量。
如果你對
如 果你堅持看到這里了,那要恭喜你,因為離最后成功讀完一個Shader只有一步之遙。我們回到surf函數,它的兩有參數,第一個是Input,我們已經 明白了:在計算輸出時Shader會多次調用surf函數,每次給入一個貼圖上的點坐標,來計算輸出。第二個參數是一個可寫的 SurfaceOutput,SurfaceOutput是預定義的輸出結構,我們的surf函數的目標就是根據輸入把這個輸出結構填上。 SurfaceOutput結構體的定義如下
|
1
2
3
4
5
6
7
8
|
struct SurfaceOutput {
half3 Albedo;
//像素的顏色
half3 Normal;
//像素的法向值
half3 Emission;
//像素的發散顏色
half Specular;
//像素的鏡面高光
half Gloss;
//像素的發光強度
half Alpha;
//像素的透明度
};
|
這 里的half和我們常見float與double類似,都表示浮點數,只不過精度不一樣。也許你很熟悉單精度浮點數(float或者single)和雙精 度浮點數(double),這里的half指的是半精度浮點數,精度最低,運算性能相對比高精度浮點數高一些,因此被大量使用。
在例子中,我們做的事情非常簡單:
|
1
2
3
|
half4 c = tex2D (_MainTex, IN.uv_MainTex);
o.Albedo = c.rgb;
o.Alpha = c.a;
|
這 里用到了一個tex2d函數,這是CG程序中用來在一張貼圖中對一個點進行采樣的方法,返回一個float4。這里對_MainTex在輸入點上進行了采 樣,並將其顏色的rbg值賦予了輸出的像素顏色,將a值賦予透明度。於是,着色器就明白了應當怎樣工作:即找到貼圖上對應的uv點,直接使用顏色信息來進 行着色,over。
接下來…
我想現在你已經能讀懂一些最簡單的Shader了,接下來我推薦的是參考
在 接下來的教程里,打算通過介紹一些實際例子以及從基礎開始實際逐步動手實現一個復雜一點的例子,讓我們能看到shader在真正使用中的威力。我希望能盡 快寫完這個系列,但是無奈時間確實有限,所以我也不知道什么時候能出爐…寫好的時候我會更改這段內容並指向新的文章。您要是擔心錯過的話,也可以使用郵件訂閱或者訂閱本站的rss(雖然Google Reader已經關了- -)。
