unity描边效果实现

在开发过程中，若能出色地处理描边效果，可为项目增色不少。本文将总结几种在 Unity 中实现描边效果的方法。首先，准备一个模型并导入到 Unity 中，使用默认 Shader，同时上传一张原始图，以便后续对比实现功能后的效果。

一、边缘光

此方法参照官方的一个 SurfaceShader 示例——Rim Lighting。

1. 创建 SurfaceShader

在 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 改为刚才所写的 Shader，即 Custom/RimLighting。

3. 查看效果

更改后，即可看到相应的边缘光描边效果。

二、法线外拓

使用一个 Pass 渲染边框，一个 Pass 渲染实物。

1. 创建 UnlitShader

创建一个 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. 更换 Shader 后的问题

将模型材质的 Shader 换成新建的 NormalUnlitShader 后，会发现一些问题，即在一些我们并不想描边的地方也改变了颜色。这是因为模型法线并非全部都均匀地向外扩展。

3. 不同模型的效果差异

将该 Shader 应用到 Sphere 模型上（与怪物使用同一个材质球），会发现 Sphere 模型能达到我们的需求，且能明显看出与其他模型的差别。这是因为球的法线都是均匀地往外扩展的。此方法的使用需要根据实际需求来决定。

三、屏幕特效描边效果

1. 设置辅助摄像机

新建一个辅助摄像机，设置相关参数，并将模型的 Layer 设置为 Monster，这样辅助摄像机就能单独看见这个怪物模型。

2. 编写纯色 Shader

编写一个纯色 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. 效果特点

此方法在主摄像机设置屏幕特效，它可以忽略掉所有的遮挡，这既是优点也是弊端。