unity描边效果

这里总结了几种在unity实现描边效果的方法,首先准备一个模型导入在unity中,使用默认shader,上传一张原始图,以便后面实现功能效果的对比



一、边缘光,这里参照官方的一个SurfaceShader Example,Rim Lighting

1.在unity创建一个SurfaceShader,命名RimLighting

Shader "Custom/RimLighting" {
	Properties {
		_Color ("Color", Color) = (1,1,1,1)
		_MainTex ("Albedo (RGB)", 2D) = "white" {}
		//边缘光颜色
		_RimColor("Rim Color",Color) =(1,1,1,1)
		//边缘光强度
		_RimPower("Rim Power", Range(0.5,8.0)) = 3.0
	}
	SubShader {
		Tags { "RenderType"="Opaque" }
		LOD 200
		
		CGPROGRAM
		// Physically based Standard lighting model, and enable shadows on all light types
		#pragma surface surf Standard fullforwardshadows

		// Use shader model 3.0 target, to get nicer looking lighting
		#pragma target 3.0

		sampler2D _MainTex;

		struct Input {
			float2 uv_MainTex;
			//法线
			float3 worldNormal;
			//视角方向
			float3 viewDir;
		};

		fixed4 _Color;
		fixed4 _RimColor;
		half _RimPower;

		void surf (Input IN, inout SurfaceOutputStandard o) {
			// Albedo comes from a texture tinted by color
			fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color;
			o.Albedo = c.rgb;
			o.Alpha = c.a;
			
			half rim = 1.0 - saturate(dot(normalize(IN.viewDir), IN.worldNormal));
			o.Emission = _RimColor.rgb * pow(rim, _RimPower);
		}
		ENDCG
	}
	FallBack "Diffuse"
}

2.将模型材质的shader改为刚才所写的shader,Custom/RimLighting


3.更改后,具体效果如下



二、法线外拓,用一个Pass渲染边框,一个Pass渲染实物

  1. 创建一个UnlitShader,命名为NormalUnlitShader

Shader "Custom/NormalUnlitShader"
{
	Properties
	{
		_MainTex ("Texture", 2D) = "white" {}
		_Outline("Out Line",Range(0.001,0.005))=0.002
		_Color("Color",Color)=(1,1,1,1)
	}

	CGINCLUDE
	#include "UnityCG.cginc"
	struct v2f
	{
		float4 pos:POSITION;
		float4 color:COLOR;
	};

	sampler2D _MainTex;
	float _Outline;
	fixed4 _Color;

	v2f vert(appdata_base v)
	{
		v2f o;
		o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
		float3 norm = mul((float3x3)UNITY_MATRIX_IT_MV, v.normal);
		float2 offset = TransformViewToProjection(norm.xy);
		o.pos.xy += offset * o.pos.z * _Outline;
		o.color = _Color;
		return o;
	}
	ENDCG

	SubShader
	{
		Cull Front
		Pass
		{
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			fixed4 frag (v2f i) : COLOR
			{
				return i.color;
			}
			ENDCG
		}

		CGPROGRAM
		#pragma surface surf Lambert  
		struct Input {
			float2 uv_MainTex;
		};
		void surf(Input IN, inout SurfaceOutput o) {
			fixed4 c = tex2D(_MainTex, IN.uv_MainTex);
			o.Albedo = c.rgb;
			o.Alpha = c.a;
		}
		ENDCG
	}
}

2.这里再换成新建的NormalUnlitShader,就会发现一些问题,他会在一些我们并不像描边的地方也改变了颜色,这就是因为这根据模型法线并不是全部都均匀的向外扩展,才导致这样的情况



3.再换一个Sphere模型应用与怪物同一个材质球,就会发现Sphere模型,是能达到我们的需求的,也能很明显的看出两者的差别,因为球的法线都是均匀的往外扩展的,这个方法的使用就需要以后根据实际的要求来使用



三、屏幕特效,描边效果

  1. 新建一个辅助摄像机,设置参数如下,并将模型的Layer设置为Monster,这样辅助摄像机就能单独看见这个怪物模型


2.写一个纯色shader,辅助摄像机用RenderWithShader,纯色渲染一张纹理处理

Shader "Custom/UnlitSolidColor"
{
	SubShader
	{
		Pass
		{
			//返回蓝色
			Color(0,0,1,1)
		}
	}
}

3.将纯色纹理,可以模糊放大几次,次数越多,边框就越宽,这里需要使用到一个像素偏移函数,Graphics.BlitMultiTap和一个Blur效果shader

Shader "Custom/OutterLineBlur" {

Properties {
	_MainTex ("", 2D) = "white" {}
}

Category {
	ZTest Always Cull Off ZWrite Off Fog { Mode Off }

	Subshader {
		Pass {
			CGPROGRAM
				#pragma vertex vert
				#pragma fragment frag
				#pragma fragmentoption ARB_precision_hint_fastest

				#include "UnityCG.cginc"

				struct v2f {
					float4 pos : POSITION;
					half4 uv[2] : TEXCOORD0;
				};

				float4 _MainTex_TexelSize;
				float4 _BlurOffsets;

				v2f vert (appdata_img v)
				{
					v2f o;
					float offX = _MainTex_TexelSize.x * _BlurOffsets.x;
					float offY = _MainTex_TexelSize.y * _BlurOffsets.y;

					o.pos = mul (UNITY_MATRIX_MVP, v.vertex);
					float2 uv = MultiplyUV (UNITY_MATRIX_TEXTURE0, v.texcoord.xy-float2(offX, offY));
				
					o.uv[0].xy = uv + float2( offX, offY);
					o.uv[0].zw = uv + float2(-offX, offY);
					o.uv[1].xy = uv + float2( offX,-offY);
					o.uv[1].zw = uv + float2(-offX,-offY);
					return o;
				}
				
				sampler2D _MainTex;
				fixed4 _Color;

				fixed4 frag( v2f i ) : COLOR
				{
					fixed4 c;
					c  = tex2D( _MainTex, i.uv[0].xy );
					c += tex2D( _MainTex, i.uv[0].zw );
					c += tex2D( _MainTex, i.uv[1].xy );
					c += tex2D( _MainTex, i.uv[1].zw );
					return c /2 ;
				}
				ENDCG
			}
		}
	}
	Fallback off
}

4.将扩大后的纹理与原来的纹理,做一个对比,并依据原来纹理剔除掉中间部分,就只剩下一个边框纹理,这里需要使用一个剔除shader

Shader "Custom/OutterLineCutoff" {
	Properties {
		_MainTex ("", 2D) = "white" {}
	}	
	Category {
	BlendOp RevSub
	Blend One One
	ZTest Always Cull Off ZWrite Off Fog { Mode Off }
	
	Subshader {
		Pass {
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			#pragma fragmentoption ARB_precision_hint_fastest 
			
			sampler2D _MainTex;
			sampler2D _MainTex1;
			struct appdata
			{
				float4 vertex : POSITION;
				float4 texcoord : TEXCOORD0;
			};
			struct v2f
			{
				float4 pos : SV_POSITION;
				float2 uv : TEXCOORD0;
			};
			v2f vert (appdata v)
			{
				v2f o;
				o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
				o.uv = v.texcoord.xy;
				return o;
			}
			half4 frag(v2f i) : COLOR
			{
				fixed4 c =  tex2D(_MainTex, i.uv);
				return c;
			}
			ENDCG
		}
		}	
	}
	FallBack "Diffuse"
}

5.在主摄像机上,使用OnRenderImage函数,将得到的轮廓纯色纹理与摄像机的图像使用混合shader进行混合

Shader "Custom/OutterLineComposer" {

Properties {
	_MainTex ("", 2D) = "white" {}
}

Category {
	ZTest Always Cull Off ZWrite Off Fog { Mode Off }
	Blend SrcAlpha OneMinusSrcAlpha

	Subshader {
		Pass {
			CGPROGRAM
				#pragma vertex vert
				#pragma fragment frag
				#pragma fragmentoption ARB_precision_hint_fastest

				#include "UnityCG.cginc"

				struct v2f {
					float4 pos : POSITION;
					half2 uv : TEXCOORD0;
				};

				v2f vert (appdata_img v)
				{
					v2f o;
					o.pos = mul (UNITY_MATRIX_MVP, v.vertex);
					o.uv = v.texcoord.xy;
					return o;
				}

				sampler2D _MainTex;

				fixed4 frag( v2f i ) : COLOR
				{
					return tex2D( _MainTex, i.uv );
				}
				ENDCG
			}
		}
	}
	Fallback off
}

6.绑定在主摄像机的脚本

using UnityEngine;
using System.Collections;

[ExecuteInEditMode]
public class outline : MonoBehaviour {
    /// <summary>
    /// 辅助摄像机
    /// </summary>
    public Camera outlineCamera;

    #region 纯红色材质 solidColorMaterail
    public Shader solidColorShader;
    private Material m_solid=null;
    private Material solidMaterail
    {
        get 
        {
            if (m_solid == null)
            {
                m_solid = new Material(solidColorShader);
            }
            return m_solid;
        }
    }
    #endregion
   
    #region 合并材质 compositeMaterial
    public Shader compositeShader;
    private Material m_composite=null;
    private Material compositeMaterial
    {
        get
        {
            if (m_composite == null)
                m_composite = new Material(compositeShader);
            return m_composite;
        }
    }
    #endregion
    
    #region 模糊材质 blurMaterial
    public Shader blurShader;
    private Material m_blur=null;
    private Material blurMaterial
    {
        get 
        {
            if (m_blur == null)
                m_blur = new Material(blurShader);
            return m_blur;
        }
    }
    #endregion
    
    #region 剔除材质 cutoffShader
    public Shader cutoffShader;
    private Material m_cutoff=null;
    private Material cutoffMaterial
    {
        get
        {
            if (m_cutoff == null)
                m_cutoff = new Material(cutoffShader);
            return m_cutoff;
        }
    }
    #endregion
    /// <summary>
    /// 辅助摄像机渲染的RenderTexture
    /// </summary>
    private RenderTexture outlineRenderTex;
    /// <summary>
    /// 模糊扩大次数
    /// </summary>
    public int Iterations = 2;
    // Use this for initialization
    void Start () {
        outlineRenderTex = new RenderTexture((int)outlineCamera.pixelWidth, (int)outlineCamera.pixelHeight, 16);
    }

	// Update is called once per frame
	void Update () {
	}

    void OnPreRender()
    {
        outlineCamera.targetTexture = outlineRenderTex;
        outlineCamera.RenderWithShader(solidMaterail.shader, "");
    }

    void OnRenderImage(RenderTexture source, RenderTexture desture)
    {
        RenderTexture _renderTexture = RenderTexture.GetTemporary(outlineRenderTex.width, outlineRenderTex.height, 0);

        MixRender(outlineRenderTex,ref _renderTexture);
       
        Graphics.Blit(_renderTexture, desture, compositeMaterial);
        RenderTexture.ReleaseTemporary(_renderTexture);
    }

    
    void MixRender(RenderTexture in_outerTexture, ref RenderTexture _renderTexture)
    {
        RenderTexture buffer = RenderTexture.GetTemporary(in_outerTexture.width, in_outerTexture.height, 0);
        RenderTexture buffer2 = RenderTexture.GetTemporary(in_outerTexture.width, in_outerTexture.height, 0);

        Graphics.Blit(in_outerTexture, buffer);

        //多次模糊放大
        for (int i = 0; i < Iterations; i++)
        {
            FourTapCone(buffer, buffer2, i);
            Graphics.Blit(buffer2, buffer);
        }
        Graphics.Blit(in_outerTexture, buffer, cutoffMaterial);
        Graphics.Blit(buffer, _renderTexture);
      
        RenderTexture.ReleaseTemporary(buffer);
        RenderTexture.ReleaseTemporary(buffer2);
    }

    float Spread = 0.8f;
    public void FourTapCone(RenderTexture source, RenderTexture dest, int iteration)
    {
        float off = 0.5f + iteration * Spread;
        Graphics.BlitMultiTap(source, dest, blurMaterial,
                               new Vector2(off, off),
                               new Vector2(-off, off),
                               new Vector2(off, -off),
                               new Vector2(-off, -off)
                               );
    }

}

7.具体效果如下,因为这里是在主摄像机设置的屏幕特效,他可以忽略掉所有的遮挡,这是优点也是弊端


  • 4
    点赞
  • 37
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 18
    评论
### 回答1: 这是一个描边效果的简单示例,你可以在这里找到更多关于描边效果的信息:https://docs.unity3d.com/Manual/OutlineEffect.html ``` Shader "Outlined/Silhouette Only" { Properties { _Color ("Color", Color) = (1,1,1,1) _OutlineColor ("Outline Color", Color) = (0,0,0,1) _Outline ("Outline width", Range (0.0, 0.1)) = 0.003 } SubShader { Tags { "RenderType"="Opaque" } LOD 200 CGPROGRAM // Physically based Standard lighting model, and enable shadows on all light types #pragma surface surf Standard fullforwardshadows // Use shader model 3.0 target, to get nicer looking lighting #pragma target 3.0 sampler2D _MainTex; struct Input { float2 uv_MainTex; }; half _Outline; fixed4 _Color; fixed4 _OutlineColor; void surf (Input IN, inout SurfaceOutputStandard o) { // Albedo comes from a texture tinted by color fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color; o.Albedo = c.rgb; // Metallic and smoothness come from slider variables o.Metallic = 0; o.Smoothness = 0; o.Alpha = c.a; } ENDCG } SubShader { // Render the outline on top of everything Tags { "RenderType"="Transparent" "Queue"="Geometry+10" } LOD 200 CGPROGRAM #pragma surface surf Standard fullforwardshadows #pragma target 3.0 sampler2D _MainTex; struct Input { float2 uv_MainTex; }; half _Outline; fixed4 _Color; fixed4 _OutlineColor; void surf (Input IN, inout SurfaceOutputStandard o) { fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color; o.Albedo = _OutlineColor.rgb; o.Alpha = c.a; } ENDCG } } ``` ### 回答2: Unity中可以通过编写Shader代码来实现描边效果。下面是一个简单的Unity描边效果shader代码示例: ```csharp Shader "Custom/Outline" { Properties { _MainTex ("Texture", 2D) = "white" {} _OutlineColor ("Outline Color", Color) = (1,1,1,1) _OutlineWidth ("Outline Width", Range(0, 0.1)) = 0.01 } SubShader { Tags { "Queue" = "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; }; sampler2D _MainTex; float4 _OutlineColor; float _OutlineWidth; v2f vert (appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); o.uv = v.uv; return o; } half4 frag (v2f i) : SV_Target { float2 uv = i.uv; // 在这里计算描边效果 float4 mainTexColor = tex2D(_MainTex, uv); float4 outlineColor = _OutlineColor; float4 finalColor = mainTexColor; float2 pixelUv = i.vertex.xy / i.vertex.w; float2 oPixelUv = float2(_ScreenParams.z, _ScreenParams.w) * 0.008 * _OutlineWidth; float4 outline = tex2D(_MainTex, pixelUv + float2(-oPixelUv.x, oPixelUv.y)) + tex2D(_MainTex, pixelUv + float2(oPixelUv.x, oPixelUv.y)) + tex2D(_MainTex, pixelUv + float2(-oPixelUv.x, -oPixelUv.y)) + tex2D(_MainTex, pixelUv + float2(oPixelUv.x, -oPixelUv.y)); if (length(mainTexColor - outlineColor) < 0.1) { finalColor = outline; } return finalColor; } ENDCG } } } ``` 这段Shader代码中,我们首先定义了两个属性:_MainTex是主纹理,_OutlineColor是描边颜色,_OutlineWidth是描边的宽度。然后在顶点和片段着色器中定义了相应的结构体,并通过顶点着色器将顶点坐标和纹理坐标传递给片段着色器。在片段着色器中,我们首先根据纹理坐标获取主纹理颜色,并计算出描边的颜色。然后,我们根据屏幕参数和描边宽度计算出描边效果,并判断是否需要将描边效果应用到最终的颜色中。最后返回最终的颜色。 ### 回答3: Unity中的描边效果可以通过编写一个自定义的shader来实现。以下是一个简单的示例代码: ```csharp Shader "Custom/Outline" { Properties{ _MainTex ("Texture", 2D) = "white" {} _Color ("Color", Color) = (1, 1, 1, 1) _OutlineColor ("Outline Color", Color) = (0, 0, 0, 1) _OutlineWidth ("Outline Width", Range(0, 0.1)) = 0.01 } SubShader { Tags { "RenderType" = "Opaque" } Cull Back 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; o.vertex = UnityObjectToClipPos(v.vertex); o.uv = v.uv; return o; } fixed4 _Color; sampler2D _MainTex; float4 frag (v2f i) : SV_Target { float4 col = _Color * tex2D(_MainTex, i.uv); float4 outlineCol = _OutlineColor; // 计算描边区域 fixed2 ddx = ddx(i.uv); fixed2 ddy = ddy(i.uv); fixed3 grad = normalize(fixed3(ddx.x, ddy.x, 0)); float2 o = i.uv + grad.xy * _OutlineWidth; float4 outline = tex2D(_MainTex, o); // 混合描边颜色和原始颜色 col = lerp(col, outlineCol, outline.a); return col; } ENDCG } } } ``` 以上是一个简单的Unity描边效果shader示例代码。该shader使用_MainTex作为主要纹理输入,并通过参数_Color指定基本颜色,并通过参数_OutlineColor指定描边颜色,并通过参数_OutlineWidth指定描边宽度。描边的计算是通过计算当前像素和偏移像素的颜色进行混合来实现的。混合使用了tex2D函数来获取主纹理颜色和偏移像素颜色,并使用lerp函数混合描边颜色和原始颜色。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

神码编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值