Unity Shader 实现描边OutLine效果

Shader实现描边流程大致为:对模型进行2遍(2个pass)绘制,第一遍(描边pass)在vertex shader中对模型沿顶点法线方向放大,fragment shader设置输出颜色为描边颜色;第二遍正常绘制模型,除被放大的部分外,其余被覆盖,这样就有了描边的效果。

实现代码如下:

Shader "Custom/OutlineShader" {
	Properties {
		_MainTex ("Albedo (RGB)", 2D) = "white" {}
		_OutLineWidth("width", float) = 1.2//定义一个变量
	}
	SubShader {

		Pass
		{
			CGPROGRAM		
			#pragma vertex vert
			#pragma fragment frag
			#include "UnityCG.cginc"

			struct appdata {
				float4 vertex:POSITION;
				float2 uv:TEXCOORD0;
			};

			struct v2f
			{
				float2 uv :TEXCOORD0;
				float4 vertex:SV_POSITION;
			};


			float _OutLineWidth;//设置变量
			v2f vert(appdata v)
			{
				v2f o;
				//设置一下xy
				//v.vertex.xy *= 1.1;
				v.vertex.xy *= _OutLineWidth;//乘上变量
				o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
				o.uv = v.uv;
				return o;
			}

			sampler2D _MainTex;

			fixed4 frag(v2f i) :SV_Target
			{
				fixed4 col = tex2D(_MainTex, i.uv);
				//return col;
				return fixed4(0, 0, 1, 1);
			}
			ENDCG
		}
		

		Pass
			{
				ZTest Always
				CGPROGRAM
				#pragma vertex vert
				#pragma fragment frag
				#include "UnityCG.cginc"

				struct appdata {
				float4 vertex:POSITION;
				float2 uv:TEXCOORD0;
			};

			struct v2f
			{
				float2 uv :TEXCOORD0;
				float4 vertex:SV_POSITION;
			};


			v2f vert(appdata v)
			{
				v2f o;
				o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
				o.uv = v.uv;
				return o;
			}

			sampler2D _MainTex;

			fixed4 frag(v2f i) :SV_Target
			{
				fixed4 col = tex2D(_MainTex, i.uv);
				//return fixed4(0, 0, 1, 1);//返回蓝色,因为再次渲染会把第一个颜色覆盖掉
				return col;
			}
				ENDCG
			}
	} 
	FallBack "Diffuse"
}

物体被遮挡,仍然需要显示,需要设置描边pass的语句ZTest为Always,深度检测一直通过,这样描边pass的片段不会被深度剔除。

运行效果图:

  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Unity实现描边效果,可以通过编写Shader实现。具体实现方法如下: 1. 首先,在Shader中需要先声明一个描边颜色的变量: ```csharp // 描边颜色 _Color ("Outline Color", Color) = (0,0,0,1) ``` 2. 接着,需要在Shader中将表面进行放大,然后将描边颜色填充到放大后的表面上: ```csharp // 放大表面,并填充描边颜色 float2 borderOffset[4] = {float2(1,0), float2(-1,0), float2(0,1), float2(0,-1)}; float border = _OutlineWidth * (1.0 / _ScreenParams.z); float4 borderColor = _Color; float4 c; for (int i = 0; i < 4; i++) { c = tex2D(_MainTex, i.uv + border * borderOffset[i]); borderColor.a *= c.a; o.Normal += borderColor.a * borderOffset[i]; } ``` 这里,`borderOffset`表示描边的偏移量,`border`表示描边的宽度,`borderColor`表示描边的颜色,`c`表示当前像素点的颜色值。在循环中,依次对当前像素点的上、下、左、右四个方向进行采样,并将采样到的颜色值和描边颜色进行叠加。 3. 最后,在Shader中将表面的颜色和描边颜色进行混合: ```csharp // 混合表面颜色和描边颜色 o.Albedo = lerp(_Color.rgb, o.Albedo, o.Normal); ``` 这里使用了`lerp`函数来对表面颜色和描边颜色进行混合,根据描边的程度不同,可以调整`_Color`的alpha值来控制描边的显示程度。 综上所述,完整的描边Shader代码如下: ```csharp Shader "Custom/Outline" { Properties { _MainTex ("Texture", 2D) = "white" {} _Color ("Outline Color", Color) = (0,0,0,1) _OutlineWidth ("Outline Width", Range(0, 2)) = 1 _ScreenParams ("Screen Params", Vector) = (0,0,0,0) } SubShader { Tags {"Queue"="Transparent" "RenderType"="Transparent"} LOD 100 Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; }; struct v2f { float2 uv : TEXCOORD0; float4 vertex : SV_POSITION; float4 Normal : TEXCOORD1; }; sampler2D _MainTex; float4 _Color; float _OutlineWidth; float4 _ScreenParams; v2f vert (appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); o.uv = v.uv; o.Normal = float4(0,0,0,0); return o; } fixed4 frag (v2f i) : SV_Target { float2 borderOffset[4] = {float2(1,0), float2(-1,0), float2(0,1), float2(0,-1)}; float border = _OutlineWidth * (1.0 / _ScreenParams.z); float4 borderColor = _Color; float4 c; for (int j = 0; j < 4; j++) { c = tex2D(_MainTex, i.uv + border * borderOffset[j]); borderColor.a *= c.a; i.Normal += borderColor.a * borderOffset[j]; } i.Normal.a = 1.0; i.Normal = normalize(i.Normal); fixed4 col = tex2D(_MainTex, i.uv); col.rgb = lerp(_Color.rgb, col.rgb, i.Normal); col.a = col.a * i.Normal.a; return col; } ENDCG } } FallBack "Diffuse" } ``` 使用该Shader,你可以在游戏中对需要描边的物体进行材质替换,从而实现描边效果

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值