はじめに

頂点カラーをペイントするツールを作ってみました。

実装方法について紹介したいと思います。

注意点

今回の頂点カラーペイントツールでは、メッシュにペイントした結果は保存されません (Unityを再起動するとリセットされます)

環境

Unity2021.1.6f1

実装の流れ

Sceneビュークリック時、カメラからモデルへ向けてRayを飛ばす
Rayが当たった位置の近くの頂点を選択
選択頂点の頂点カラーを上書きする

3Dモデルには頂点カラーを表示するシェーダーを適用しておきます。

Tips01. Sceneビューのマウスクリックイベント取得

マウスクリック時に実行したい処理をOnSceneGUI()に実装します

VertexPaintToolEditor.cs

[CustomEditor(typeof(VertexPaintTool))]
public class VertexPaintToolEditor : Editor
{
    private void OnSceneGUI()
    {
        var evt = Event.current;

        // マウスクリックで頂点選択
        if (evt.type == EventType.MouseDown &&  Event.current.button == 0)
        {
            // マウスクリック時の処理をここに書く
        }
    }
}

Tips02. ColliderいらずのRaycast

SceneViewのマウスクリック位置からRayを飛ばし、モデルにぶつかった位置を取得する方法を紹介します。

以下の記事を参考に、EditorRaycastHelper.cs というクラスを作成しました。
https://forum.unity.com/threads/editor-raycast-against-scene-meshes-without-collider-editor-select-object-using-gui-coordinate.485502/

EditorRaycastHelper.cs

using System.Reflection;
using UnityEditor;
using UnityEngine;

public static class EditorRaycastHelper
{
    private static readonly MethodInfo intersectRayMeshMethod = typeof(HandleUtility).GetMethod("IntersectRayMesh",
        BindingFlags.Public | BindingFlags.NonPublic | BindingFlags.Static);

    private static GameObject lastGameObjectUnderCursor;

    public static bool RaycastAgainstScene(out RaycastHit hit)
    {
        Ray ray = HandleUtility.GUIPointToWorldRay(Event.current.mousePosition);

        // First, try raycasting against scene geometry with or without colliders (it doesn't matter)
        // Credit: https://forum.unity.com/threads/editor-raycast-against-scene-meshes-without-collider-editor-select-object-using-gui-coordinate.485502
        GameObject gameObjectUnderCursor;
        switch (Event.current.type)
        {
            // HandleUtility.PickGameObject doesn't work with some EventTypes in OnSceneGUI
            case EventType.Layout:
            case EventType.Repaint:
            case EventType.ExecuteCommand:
                gameObjectUnderCursor = lastGameObjectUnderCursor;
                break;
            default:
                gameObjectUnderCursor = HandleUtility.PickGameObject(Event.current.mousePosition, false);
                break;
        }

        if (gameObjectUnderCursor)
        {
            Mesh meshUnderCursor = null;
            if (gameObjectUnderCursor.TryGetComponent(out MeshFilter meshFilter))
                meshUnderCursor = meshFilter.sharedMesh;
            if (!meshUnderCursor &&
                gameObjectUnderCursor.TryGetComponent(out SkinnedMeshRenderer skinnedMeshRenderer))
                meshUnderCursor = skinnedMeshRenderer.sharedMesh;

            if (meshUnderCursor)
            {
                // Remember this GameObject so that it can be used inside problematic EventTypes, as well
                lastGameObjectUnderCursor = gameObjectUnderCursor;

                object[] rayMeshParameters = new object[]
                    {ray, meshUnderCursor, gameObjectUnderCursor.transform.localToWorldMatrix, null};
                if ((bool) intersectRayMeshMethod.Invoke(null, rayMeshParameters))
                {
                    hit = (RaycastHit) rayMeshParameters[3];
                    return true;
                }
            }
            else
                lastGameObjectUnderCursor = null;
        }

        // Raycast against scene geometry with colliders
        object raycastResult = HandleUtility.RaySnap(ray);
        if (raycastResult != null && raycastResult is RaycastHit)
        {
            hit = (RaycastHit) raycastResult;
            return true;
        }

        hit = new RaycastHit();
        return false;
    }
}

使い方

上記のクラスを導入することで、SceneViewにてRaycastできるようになります。

Sceneビューのマウス位置でRaycastを実行するコード

RaycastHit hit;
if (EditorRaycastHelper.RaycastAgainstScene(out hit))
{
    Vector3 point = hit.point; // Rayがぶつかった位置を取得
}

Tips03. 頂点データの取得・設定

メッシュが持つすべての頂点は以下のようなコードで取得可能です。

List<Vector3> vertices = new List<Vector3>(sharedMesh.vertexCount);
sharedMesh.GetVertices(vertices); // 頂点の取得

List<Color> colors = new List<Vector3>(sharedMesh.vertexCount); 
sharedMesh.GetColors(colors); // 頂点カラーの取得
sharedMesh.SetColors(colors); // 頂点カラーの設定

以下のようなコードでも頂点データは取得できますが、アクセスするたびに配列がAllocateされてしまうので、避けたほうが良いでしょう。

Vector3[] vertices = mesh.vertices;
Color[] colors = mesh.colors ;

参考:
https://docs.unity3d.com/ScriptReference/Mesh.GetVertices.html
https://docs.unity3d.com/ScriptReference/Mesh.GetColors.html

Tips04. 距離を利用した頂点ペイント

オブジェクトSpaceにて、Rayのヒット位置に近い頂点の頂点カラーを書き換えます。
(ワールドSpaceで距離を判定してしまうと、オブジェクトのスケールが変わったときに塗り替わる範囲が変わってしまうため
オブジェクトSpaceで距離を判定します)

// Rayのヒット位置(オブジェクトSpace)
var hitPositionOS = transform.InverseTransformPoint(hit.point); 

// 頂点カラー 取得
var colors = new List<Color>(sharedMesh.vertexCount);
sharedMesh.GetColors(colors); 
    
// 頂点カラーの書き換え
for (int i = 0; i < vertices.Count; i++)
{
    var v = vertices[i]; // 頂点座標(オブジェクトSpace)
    float sqrDistanceOS = (hitPositionOS - v).sqrMagnitude; // Rayヒットと頂点の距離 (オブジェクトSpace)
    if (sqrDistanceOS > component.BrushSize * component.BrushSize) // 距離がある程度離れている頂点は除外する
        continue;

    colors[i] = Color.Lerp(colors[i], component.PaintColor, component.PaintColor.a);
}

// 頂点カラー 設定
sharedMesh.SetColors(colors);

頂点ペイントツールの実装

VertexPaintTool.cs

頂点カラーペイントしたいMeshのオブジェクトに以下のコンポーネントをアタッチします。

VertexPaintTool.cs

using UnityEngine;

[RequireComponent(typeof(MeshFilter))]
public class VertexPaintTool : MonoBehaviour
{
    [SerializeField] private MeshFilter meshFilter;
    [SerializeField] private Color paintColor = new Color(0f, 0f, 0f, 1f); // ブラシカラー
    [SerializeField, Range(0f, 1f)] private float brushSize = 0.3f; // ブラシサイズ

    public Color PaintColor => paintColor;
    public float BrushSize => brushSize;
    
    /// <summary>
    /// メッシュ
    /// </summary>
    public Mesh SharedMesh
    {
        get
        {
            if (meshFilter == null) 
                meshFilter = GetComponent<MeshFilter>();

            return meshFilter.sharedMesh;
        }
    }

    /// <summary>
    /// 色のリセット
    /// </summary>
    public void ResetColor()
    {
        Color[] colors;
        if (SharedMesh.colors.Length == 0)
        {
            colors = new Color[SharedMesh.vertexCount];
        }
        else
        {
            colors = SharedMesh.colors;
        }
        for (int i = 0; i < colors.Length; i++)
        {
            colors[i] = Color.white;
        }
        SharedMesh.colors = colors;
    }
}

VertexPaintToolEditor.cs

以下のスクリプトをEditorフォルダの中に入れます

VertexPaintToolEditor.cs

using System.Collections.Generic;
using UnityEditor;
using UnityEngine;

[CustomEditor(typeof(VertexPaintTool))]
public class VertexPaintToolEditor : Editor
{
    private List<Vector3> vertices = new List<Vector3>();

    public override void OnInspectorGUI()
    {
        base.OnInspectorGUI();

        if (GUILayout.Button("Reset Color"))
        {
            var component = target as VertexPaintTool;
            component.ResetColor();
        }
    }

    private void OnSceneGUI()
    {
        // マウスクリックで頂点カラーペイント
        if (Event.current.type == EventType.MouseDown &&  Event.current.button == 0)
        {
            var component = target as VertexPaintTool;
            if (EditorRaycastHelper.RaycastAgainstScene(out var hit))
            {
                // ヒット位置(オブジェクトSpace)
                var hitPositionOS = component.transform.InverseTransformPoint(hit.point); 

                Mesh sharedMesh = component.SharedMesh;
                
                // 頂点の取得
                if (vertices.Count != sharedMesh.vertexCount)
                    component.SharedMesh.GetVertices(vertices);
                
                if (sharedMesh.colors.Length == 0)
                    component.ResetColor();

                // 頂点カラーを取得
                var colors = new List<Color>(sharedMesh.vertexCount);
                sharedMesh.GetColors(colors);
                
                // 頂点カラーの書き換え
                for (var i = 0; i < vertices.Count; i++)
                {
                    var v = vertices[i]; // 頂点座標(オブジェクトSpace)
                    float sqrDistanceOS = (hitPositionOS - v).sqrMagnitude; // Rayヒットと頂点の距離 (オブジェクトSpace)
                    if (sqrDistanceOS > component.BrushSize * component.BrushSize) // 距離がある程度離れている頂点は除外する
                        continue;

                    // 色の書き換え
                    colors[i] = Color.Lerp(colors[i], component.PaintColor, component.PaintColor.a);
                }
                
                // 頂点カラー設定
                sharedMesh.SetColors(colors);
            }
        }
    }
}