Unityで2次元のMeshに対して固定のpixel幅のアウトラインを付ける方法

Question

AssetStoreなどからMeshに固定のpixel幅のアウトラインを付けるアセットを試してみましたが、2DのMeshで正常に動作するものがなく、自分で実装しようと試みて行き詰まったため質問です。

Meshの重心を求めて、「各頂点-重心」をすることで各頂点を拡大する方向を求め、その値を元にShaderで頂点座標を移動して、1pass目でアウトラインの色で描画、2pass目で通常の色、頂点座標で描画しましたが下の画像のようになり、各辺の太さが不均一になってしまいました。

        //擬似コード

        var directions = vertices.Select(v => (v-center)).ToArray();

    static Vector3 GetCenter(IEnumerable<Vector3> vector3s)
    {
        var count = vector3s.Count();
        var x = vector3s.Select(v => v.x).Sum();
        var y = vector3s.Select(v => v.y).Sum();
        var z = vector3s.Select(v => v.z).Sum();
        return new Vector3(x, y, z) / count;
    }

やっていることは、下記リンク先の手法と同じことを行っています(リンク先は内側にアウトラインを付けている)。
https://forum.unity.com/threads/shader-to-create-an-outline-inside-a-polygon.1009576/#post-7033693

原因がわかる方、もしくは2次元のMeshに対して固定のpixel幅のアウトラインを付ける方法をご存知の方がいらっしゃればご教授いただければ幸いです。

Answer 1

均一な太さにするとなると、形状によっては一点を中心に拡大するのでは無理なんじゃないかと思います。対策案として、下記のように拡大方向を決めるのはどうでしょうか。

using System;
using System.Collections.Generic;
using System.Linq;
using UnityEngine;

[RequireComponent(typeof(MeshFilter))]
public class InflationVectorEmbedder : MonoBehaviour
{
    private MeshFilter meshFilter;
    private Mesh sourceMesh;
    private Mesh modifiedMesh;

    // 両端の頂点インデックスを組にした、ポリゴンの辺を表現する型を定義しておく
    private readonly struct Edge : IEquatable<Edge>
    {
        public readonly int From;
        public readonly int To;

        public Edge(int from, int to)
        {
            this.From = from;
            this.To = to;
        }

        public bool Equals(Edge other) => (this.From == other.From) && (this.To == other.To);
        public override bool Equals(object obj) => obj is Edge other && this.Equals(other);
        public override int GetHashCode() => HashCode.Combine(this.From, this.To);
        public static bool operator ==(Edge left, Edge right) => left.Equals(right);
        public static bool operator !=(Edge left, Edge right) => !left.Equals(right);
    }

    private void Start()
    {
        this.meshFilter = this.GetComponent<MeshFilter>();
        this.sourceMesh = this.meshFilter.sharedMesh;

        // 三角形を構成する3つの辺を配列化する
        var sourceIndices = this.sourceMesh.triangles;
        static IEnumerable<Edge> EmitEdges(int i, int j, int k)
        {
            yield return new Edge(i, j);
            yield return new Edge(j, k);
            yield return new Edge(k, i);
        }
        var sourceEdges = Enumerable.Range(0, sourceIndices.Length / 3).SelectMany(
            i =>
            {
                var j = i * 3;
                return EmitEdges(sourceIndices[j], sourceIndices[j + 1], sourceIndices[j + 2]);
            }).ToArray();

        // 辺の配列をハッシュセットとして複製し...
        var outlineEdges = sourceEdges.ToHashSet();

        // 逆向きの辺があれば除去することで、外周の辺だけを残す
        // ※頂点インデックスだけで判断していますので、このやり方だと頂点座標が同じでも他の属性...たとえば
        // 　UV座標が異なるような辺は、外周扱いされて取り残されてしまうかもしれない点にご注意ください
        outlineEdges.ExceptWith(sourceEdges.Select(edge => new Edge(edge.To, edge.From)));

        // 閉じた輪になっている辺を抜き出し、外周のインデックスとして整理する
        var outlines = new List<List<int>>();
        while (outlineEdges.Count > 0)
        {
            var outline = new List<int>();
            var currentEdge = outlineEdges.Take(1).First();
            outlineEdges.Remove(currentEdge);
            var origin = currentEdge.From;
            outline.Add(origin);
            while (currentEdge.To != origin)
            {
                currentEdge = outlineEdges.Where(edge => edge.From == currentEdge.To).Take(1).First();
                outlineEdges.Remove(currentEdge);
                outline.Add(currentEdge.From);
            }
            outlines.Add(outline);
        }

        // 外周膨張ベクトルを求める
        var sourceVertices = this.sourceMesh.vertices;
        var inflationVectors = new Vector4[sourceVertices.Length];
        foreach (var outline in outlines)
        {
            var outlineVertexCount = outline.Count;
            for (var i = 0; i < outlineVertexCount; i++)
            {
                // 注目頂点のインデックス、およびその前後のインデックスを取得し...
                var previousIndex = outline[i == 0 ? outlineVertexCount - 1 : i - 1];
                var index = outline[i];
                var nextIndex = outline[i == (outlineVertexCount - 1) ? 0 : i + 1];

                // それらの座標を取得する
                var previousVertex = sourceVertices[previousIndex];
                var vertex = sourceVertices[index];
                var nextVertex = sourceVertices[nextIndex];

                // 注目頂点の前後の2つの辺の向きを求め...
                var d0 = ((Vector2)(vertex - previousVertex)).normalized;
                var d1 = ((Vector2)(nextVertex - vertex)).normalized;

                // それらの中間の向きを90°倒して膨張方向とする
                var v = d0 + d1;
                var d = new Vector2(v.y, -v.x).normalized;

                // 2つの辺の角度を加味して膨張量を増幅し...
                var factor = 1.0f / Mathf.Sqrt(Mathf.Max(0.0f, (Vector2.Dot(d0, d1) + 1.0f) * 0.5f));

                // 膨張ベクトルをセットする
                inflationVectors[index] = d * factor;
            }
        }

        // 膨張ベクトルを適当な頂点属性（さしあたりtangentsにしました）に埋め込む
        this.modifiedMesh = Instantiate(this.sourceMesh);
        this.modifiedMesh.name = $"{this.sourceMesh.name} (Inflation Vector Embedded)";
        this.modifiedMesh.tangents = inflationVectors;
        this.modifiedMesh.UploadMeshData(false);
        this.meshFilter.sharedMesh = this.modifiedMesh;
    }

    private void OnDestroy()
    {
        this.meshFilter.sharedMesh = this.sourceMesh;
        Destroy(this.modifiedMesh);
    }
}

上記のスクリプトをメッシュオブジェクトにアタッチし、マテリアルにはご提示いただいたPhil_42さんのシェーダーをベースにした下記のようなものを使用したところ...

Shader "Custom/Outline2D"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _Color("Color", Color) = (1,1,1,1)
 
        _BorderColor("Border Color", Color) = (0,0,0,1)
        _BorderWidth("Border Width", Range(0,0.2)) = 0.02
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100
 
        // パス1...メッシュを膨張させてアウトライン色で塗る
        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
 
            #include "UnityCG.cginc"
 
            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
                float4 inflationVector : TANGENT; // 頂点属性にTANGENTを追加する
            };
 
            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };
 
            float4 _BorderColor;
            float _BorderWidth;
 
            v2f vert (appdata IN)
            {
                v2f OUT;

                // アウトライン幅の分だけ頂点の位置をずらす
                float3 position = IN.vertex;
                position.xy += IN.inflationVector.xy * _BorderWidth;
                position.z -= 0.001;
                OUT.vertex = UnityObjectToClipPos(position);
                
                OUT.uv = IN.uv;
                return OUT;
            }
 
            fixed4 frag (v2f IN) : SV_Target
            {
                return _BorderColor;
            }
            ENDCG
        }
 
       
        // パス2...メッシュを膨張させずに塗る
        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 _Color;
 
            v2f vert(appdata IN)
            {
                v2f OUT;
                OUT.vertex = UnityObjectToClipPos(IN.vertex);
                OUT.uv = IN.uv;
                return OUT;
            }
 
            fixed4 frag(v2f IN) : SV_Target
            {
                fixed4 col = tex2D(_MainTex, IN.uv);
                col = col * _Color;
                return col;
            }
            ENDCG
        }
    }
}

アウトラインは下図のようになりました。

各ポリゴンは下図のように拡大されています。

なお、例示しましたスクリプトはメッシュに面積0の三角形がないこと、同じ座標に重複した複数の頂点がないこと...などの条件を満たしていることを前提にしており、そうでない場合の対策は組み込んでいないため、メッシュによっては正しく動かないかもしれません。変な挙動をするようでしたら、メッシュをご提示いただければ可能であれば修正してみようと思います。

頂点の膨張方向、および膨張量の算出について

Pが移動前の頂点座標、Qが膨張幅1の時の移動先です。d0とd1をそれぞれ90°回転させたd0'、d1'をP点に生やし、その先端をP0、P1とします。
△PQP0と△PQP1は斜辺を共有しており、d0'とd1'の長さはどちらも1なため、斜辺他一辺相等な直角三角形同士ですので合同と言えるはずです。そのため∠QPP0と∠QPP1の大きさは等しく、つまりPQは∠P0PP1の二等分線で、Qの方角はd0'とd1'のちょうど中間だろうと考えました。
d0'とd1'を求めてから（つまりd0、d1を90°回転させてから）中間の方向を求めてもよかったのですが、今回は私の気まぐれでd0とd1の中間を求めてから90°回転させました。

次にPQの長さですが、△PQP0をご覧いただきますと、これは直角三角形ですのでPQ * cos(θ/2) == |d0'| == 1という関係になるはずです。
つまりPQ == 1 / cos(θ/2)であり、さらにcos(θ/2)はcos(θ)から算出でき、cos(θ)はd0とd1（あるいはd0'とd1'）のドット積から算出できますので、結果としてPQ == 1 / √((d0・d1 + 1) / 2)と表現できるかと思います。

Comments

[concern12]

ご回答ありがとうございます!
詳細なコードまでありがとうございます。

>// それらの中間の向きを90°倒して膨張方向とする
の部分の理屈がわからないのですが、なぜそのベクトルを90度回転させたものが膨張方向となり、その手法でいい感じになるのでしょうか？
また、
>var factor = 1.0f / Mathf.Sqrt(Mathf.Max(0.0f, (Vector2.Dot(d0, d1) + 1.0f) * 0.5f));
の部分も理解できなかったので、お手数をおかけいたしますがご説明いただけると幸いです。

[Bongo]

ちょっと絵を描いてみまして、解答に追記いたしました。ご不明点がありましたらご遠慮なくコメントください。

[concern12]

理解できました！助かりました。
図がとてもわかりやすく見やすかったです。
ご丁寧にわかりやすく回答してくださりどうもありがとうございました！