こんにちは。株式会社Synamonでエンジニアとして『NEUTRANS』の開発をしている岡村（@Sokuhatiku）です。今回は、過去のイベント参加時に作った、立体的なメッシュに対して自然なテクスチャペイントを行う手法を紹介します。

Unity内で立体的なメッシュ（キャラクターなど）に対して動的にペイントする時、一般的には描画したい点のメッシュ情報を取得し、UV座標を使ってテクスチャに書き込むという方法が取られると思います。

その際に

UVが重複していることにより他の部分にも同時に描画されてしまう
UVの切れ目でペイントが途切れてしまう
UVが伸びてペイントが歪んでしまう

といった、UVに起因するいくつかの問題が出てきます。

１に関しては、重複が起こらないようUV展開をすることで、手間をかければ解決することが可能です。しかし、立体物に対してペイントする場合、どうしてもメッシュの何処かにUVの切れ目や歪みが現れてしまい、２、３の問題が出てきてしまいます。

去年（2017年）開催された「例のカノジョハッカソン」というイベントに参加した際、例のカノジョや例の部屋をインク的なもので塗りたくる必要があったのですが、扇風機のような複雑なオブジェクトに対してペイントをしようとすると、UVの問題が顕著に出てしまいました。

PositionMap

この問題の解決法として、ペイント時にUV座標ではなく、メッシュ座標を参照して描画する手法を試しました。

テクスチャペイント時には、描画ターゲットがテクスチャである以上、そのままではメッシュの情報を持ってくることが出来ません*1。その為、事前に特殊なシェーダーで対象テクスチャが貼ってあるメッシュをレンダリングします。

VertexShaderの出力（頂点座標）にUVを、FragmentShaderの出力(Color)にメッシュ座標を与えることで、UV座標をメッシュ座標に変換する2次元マップが作成出来ます。

// Graphics.DrawMeshNow()で呼び出すシェーダ
v2f vert (appdata v)
{
    v2f o;
    
    // クリップ空間座標に変換
    float2 uv = v.uv * 2 - 1;

    // 座標系の違いを吸収
    #if UNITY_UV_STARTS_AT_TOP
    uv.y *= -1;
    #endif

    o.vertex = float4(uv, 1, 1); // POSITION
    o.pos = v.vertex; // TEXCOORD0
    return o;
}

float4 frag (v2f i) : SV_Target
{
    return float4(i.pos, 1); // a==1ならばこのピクセルは有効
}

そうやって作ったマップをRenderTexutreに書き込み、テクスチャペイントシェーダーで参照します。

すると、テクスチャに対するペイント時にメッシュ座標を参照出来るため、UVの切れ目や歪みを無視したペイントが可能になります。

// Graphics.Blit()で呼び出すシェーダ
fixed4 frag (v2f i) : SV_Target
{
    float4 pos_a = tex2D(_PositionMap, i.uv);
    fixed4 inColor = tex2D(_MainTex, i.uv);

    // ※メッシュのLocalToWorldMatrixは来ていないので、自分で与える必要がある。
    float3 wpos = mul(_ObjectToWorld, float4(pos_a.xyz, 1)).xyz;

    bool dopaint = distance(wpos, _Pos_Rad.xyz) < _Pos_Rad.w;

    fixed4 col = dopaint ? lerp(inColor, _Color, pos_a.a) : inColor;
    return col;
}