轮廓线，描边

卡通渲染中的描边

在渲染物体时一个常见的需求就是给物体添加一个描边，实现描边的方式有很多，今天介绍一种简单的。

原理

• 对一个物体渲染两遍第一次让顶点对外做一个偏移（沿着法线）。渲染颜色为描边的颜色
• 正常渲染一个物体，因为第一次有偏移，这次渲染的时候遮不住的地方就是描边了
• 如图A是需要渲染的物体，B是第一次渲染，C是第二次渲染，这就出现了一个描边效果

关键代码

//渲染背面的pass 使得顶点沿着向法线移动一些
v2f vert (appdata v)
{
    v2f o;
    o.vertex = UnityObjectToClipPos(v.vertex);
    float3 normal = UnityObjectToWorldNormal(v.normal);
    normal = mul(UNITY_MATRIX_VP,normal);
    o.vertex.xyz += normal* _OutLineWidth;

    return o;
}

fixed4 frag (v2f i) : SV_Target
{
        return _OutLineColor;
}

• 这里使用了unity里面的内置函数这些函数在UnityCG.cginc里面 官网内置函数链接
• UnityObjectToClipPos 把顶点坐标转到投影坐标
• UnityObjectToWorldNormal 把法线转到世界坐标，这里不能直接使用物体到世界坐标的矩阵 关于这个这里有一个好的介绍链接
• _OutLineWidth 控制轮廓大小的变量

效果图

完整代码

Shader "Unlit/OutLine"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _OutLineWidth("OutLineWidth",Range(0,1)) = 0
        _OutLineColor("OutLineColor",Color) = (1,1,1,1)
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100


        Pass
        {
            Cull Front
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"
            float _OutLineWidth;
            float4 _OutLineColor;
            struct appdata
            {
                float4 vertex : POSITION;
                float4 normal:normal;
            };

            struct v2f
            {
                float4 vertex : SV_POSITION;
            };

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                float3 normal = UnityObjectToWorldNormal(v.normal);
                normal = mul(UNITY_MATRIX_VP,normal);
                o.vertex.xyz += normal* _OutLineWidth;

                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                return _OutLineColor;
            }
            ENDCG
        }

        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 _MainTex_ST;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                return o;
            }

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