輪郭線を少しだけ綺麗に描画する

こんにちは。
プログラマーの中村です。

今回は昨今のトゥーンレンダリングにおいて重要な、
輪郭線（アウトライン）について、書いていきたいと思います。

検証環境はUnityを使用します。

輪郭線（アウトライン）とは

最近のゲームではアニメのような描画が増えてきています。
このような描画方法はトゥーンレンダリング、NPR(Non-photorealistic rendering)などと呼ばれています。

トゥーンレンダリングにおける重要な要素の一つとして、
輪郭線（アウトライン）が挙げられます。

キャラクターや背景などを縁取ることで、
アニメにおける線画を表現できます。
（実際にモデルを描画することで塗りを表現することになります。）

輪郭線の描画方法

輪郭線を描画する方法は日々研究されていますが、
最もよく使われている手法は、背面法や反転ポリゴン押し出し法などと呼ばれています。

簡単に説明すると、描画面を裏側にしたポリゴンを、
頂点シェーダーにおいて法線方向に拡大する手法です。

Web上にはさらに詳しい手法の説明やシェーダーの解説もあるので、興味のある方は検索してみてください。

今回使用したアウトラインのシェーダー

Shader "Custom/Outline"
{
    Properties
    {
        _Color( "Color", Color ) = ( 1,1,1,1 )
        _OutlineColor( "Outline Color", Color ) = ( 0, 0, 0, 0 )
        _OutlineWidth( "Outline Width", Float ) = 1
    }

    SubShader
    {
        Tags { "RenderType" = "Opaque" }

        Pass
        {
            Cull Front//描画面を裏側にする

            CGPROGRAM

            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            float4 _OutlineColor;
            float _OutlineWidth;

            struct v2f
            {
                float4 position : SV_POSITION;
            };

            v2f vert( float4 position : POSITION, float3 normal : NORMAL )
            {
                v2f o;
                float3 normalWS = UnityObjectToWorldNormal( normal );
                float3 positionWS = mul( unity_ObjectToWorld, position );
                o.position = UnityWorldToClipPos( positionWS + normalWS * _OutlineWidth );//法線方向に押し出す
                return o;
            }

            float4 frag( v2f IN ) : SV_Target
            {
                return _OutlineColor;
            }

            ENDCG
        }

        Pass
        {
            //実際の描画パス
        }
    }
}

背面法の問題点

背面法にはいくつか問題がありますが、
最も有名なものとして、ハードエッジのモデルで綺麗にアウトラインが描画できないことが挙げられます。

ソフトエッジは面を滑らかにしたい時に使用し、ハードエッジは角ばらせたい時に使います。

したがって背面法では、下記画像のような箱状のものや、髪の毛、剣などの尖ったもので、
描画が崩れる場合があります。

(ハードエッジの箱では角部分の輪郭線が途切れています)

ハードエッジの輪郭線を改善する

上述の問題点はモデルがハードエッジを使用しているため発生していました。
ちなみにソフトエッジ、ハードエッジとは主に法線の方向を指します。

つまり、輪郭線に使用する法線のみソフトエッジを使用すれば、
もう少し綺麗に輪郭線を描画できるはずです。

ここで注意したいのは、オブジェクトの描画に使用する通常の法線もソフトエッジにしてしまうと、
オブジェクトの陰影も変わってしまいます。

そのため今回は頂点カラーに対して法線情報を埋め込みます。

ソフトエッジを頂点カラーに埋め込むプログラム

const float error = 1e-8f;

public static void BakeNormal( GameObject obj )
{
    var meshFilters = obj.GetComponentsInChildren<MeshFilter>();

    foreach ( var meshFilter in meshFilters )
    {

        var mesh = meshFilter.sharedMesh;

        var normals = mesh.normals;
        var vertices = mesh.vertices;
        var vertexCount = mesh.vertexCount;

        Color[] softEdges = new Color[ normals.Length ];

        for ( int i = 0; i < vertexCount; i++ )
        {
            Vector3 softEdge = Vector3.zero;

            for ( int j = 0; j < vertexCount; j++ )
            {
                var v = vertices[ i ] - vertices[ j ];

                if ( v.sqrMagnitude < error )
                {
                    softEdge += normals[ j ];
                }
            }

            softEdge.Normalize();

            softEdges[ i ] = new Color( softEdge.x, softEdge.y, softEdge.z, 0 );
        }

        mesh.colors = softEdges;

    }

}

輪郭線シェーダーも頂点カラーを参照するように書き換えます。

v2f vert( float4 position : POSITION, float3 normal : NORMAL, float4 color : COLOR )
{
    v2f o;
    float3 normalWS = UnityObjectToWorldNormal( color.rgb );//頂点カラーを使う
    float3 positionWS = mul( unity_ObjectToWorld, position );
    o.position = UnityWorldToClipPos( positionWS + normalWS * _OutlineWidth );//法線方向に押し出す
    return o;
}