快捷導(dǎo)航

Unity Shader實(shí)現(xiàn)線框效果的制作步驟

更新時(shí)間：2021年06月07日 14:53:23 作者：小蓋子

最近比較忙，今天抽空給大家分享一篇文章，關(guān)于Unity Shader實(shí)現(xiàn)線框效果，本文給大家分享詳細(xì)制作步驟，通過(guò)圖文實(shí)例相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

一、首先模型本身需要特殊處理

在這里插入圖片描述

二、編寫(xiě)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、處理是為了把所有模型面，以重疊的方式撐滿整個(gè)UV。
2、為什么會(huì)用四邊面，因?yàn)樵囘^(guò)了三角面過(guò)多，看起來(lái)非常亂，效果不好。
代碼部分：
1、分成兩個(gè)Pass，分別渲染剔除正面和剔除背面的，這個(gè)比較好理解。
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上找到對(duì)應(yīng)的范圍進(jìn)行著色，其他位置透明化，如圖所示：

在這里插入圖片描述