Unity Shader實現線框效果的制作步驟
先上圖看看效果:
下面詳細分享一下制作步驟吧:
一、首先模型本身需要特殊處理
二、編寫Shader
shader "Giraffe/Wireframe" { properties{ _Color("Color",Color) = (1.0,1.0,1.0,1.0) _EdgeColor("Edge Color",Color) = (1.0,1.0,1.0,1.0) _EdgeColor2("Edge Color",Color) = (1.0,1.0,1.0,1.0) _Width("Width",Range(0,1)) = 0.2 } SubShader{ Tags {"Queue" = "Transparent" "IgnoreProjector" = "True"} Cull Front Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #pragma target 3.0 #include "UnityCG.cginc" struct a2v { half4 uv : TEXCOORD0; half4 vertex : POSITION; }; struct v2f { half4 pos : SV_POSITION; half4 uv : TEXCOORD0; }; fixed4 _Color; fixed4 _EdgeColor; float _Width; v2f vert(a2v v) { v2f o; o.uv = v.uv; o.pos = UnityObjectToClipPos(v.vertex); return o; } fixed4 frag(v2f i) : COLOR { fixed4 col; //step(a, x) : 如果 x<a,返回0;否則,返回1。 float LowX = step(_Width, i.uv.x); float LowY = step(_Width, i.uv.y); float HighX = step(i.uv.x, 1.0 - _Width); float HighY = step(i.uv.y, 1.0 - _Width); float num = LowX * LowY*HighX*HighY; col = lerp(_EdgeColor, _Color, num); clip((1-num)-0.1f); return col; } ENDCG } Cull Back Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" struct a2v { half4 uv : TEXCOORD0; half4 vertex : POSITION; }; struct v2f { half4 pos : SV_POSITION; half4 uv : TEXCOORD0; }; fixed4 _Color; fixed4 _EdgeColor2; float _Width; v2f vert(a2v v) { v2f o; o.uv = v.uv; o.pos = UnityObjectToClipPos(v.vertex); return o; } fixed4 frag(v2f i) : COLOR { fixed4 col; //step(a, x) : 如果 x<a,返回0;否則,返回1。 float LowX = step(_Width, i.uv.x); float LowY = step(_Width, i.uv.y); float HighX = step(i.uv.x, 1.0 - _Width); float HighY = step(i.uv.y, 1.0 - _Width); float num = LowX * LowY*HighX*HighY; col = lerp(_EdgeColor2, _Color, num); clip((1 - num) - 0.1f); return col; } ENDCG } } FallBack "Diffuse" }
三、講解
模型部分:
1、處理是為瞭把所有模型面,以重疊的方式撐滿整個UV。
2、為什麼會用四邊面,因為試過瞭三角面過多,看起來非常亂,效果不好。
代碼部分:
1、分成兩個Pass,分別渲染剔除正面和剔除背面的,這個比較好理解。
2、核心代碼部分是:
float LowX = step(_Width, i.uv.x); float LowY = step(_Width, i.uv.y); float HighX = step(i.uv.x, 1.0 - _Width); float HighY = step(i.uv.y, 1.0 - _Width); float num = LowX * LowY*HighX*HighY; col = lerp(_EdgeColor2, _Color, num);
在UV上找到對應的范圍進行著色,其他位置透明化,如圖所示:
以上就是Unity Shader實現線框效果的制作步驟的詳細內容,更多關於Unity Shader實現線框的資料請關註WalkonNet其它相關文章!