Unityで線を描画したい

Question

Unityで線を描画したいと思っています。
現在、ARを使ってプログラミングをしているのですが、その中でARCameraの子オブジェクトとして使っているcanvasの中で線を描画したいです。LineRendererや、他のサイトでの関数など試してみましたが、描画ができませんでした。
LineRendererに関しては、描画はできましたがワールド座標なのでマーカーを動かすと一緒に動いてしまいます。
UIの中での直線の描画の方法を教えてください。

Answer 1

Graphicを継承して独自のUIコンポーネントを作ることができるそうですので、これで「線を描くコンポーネント」を作ってみるのはどうでしょう?

自身の勉強をかねて下記のようなものを作ってみました。ご参考になりましたら幸いです。
コード中のコメントにも記しましたが、頂点が無駄に重複している箇所があり、もっと頂点数を削減できる余地がありますので、ぜひ改造を加えていただけますとさらにパフォーマンスが向上するかと思います。

using System.Linq;
#if UNITY_EDITOR
using UnityEditor;
#endif
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

[ExecuteInEditMode]
public class LineStrip : Graphic
{
    public int CornerDivisionCount = 1; // コーナー部分の接続部の分割数...大きくするとなめらかになるが、頂点数が増える
    public float LineWidth = 1.0f; // 線の太さ
    public Vector2[] Positions; // これらの点を結んだ折れ線を描く(原点はRectTransformの左下隅)

#if UNITY_EDITOR

    [MenuItem("GameObject/UI/Line Strip")] // メニューの「GameObject」→「UI」→「Line Strip」でオブジェクト作成
    public static void CreateLineStrip()
    {
        // Canvasを探し、もしなければ作成
        var canvas = FindObjectOfType<Canvas>();
        if (canvas == null)
        {
            canvas = new GameObject("Canvas", typeof(Canvas)).GetComponent<Canvas>();
            canvas.gameObject.AddComponent<CanvasScaler>();
            canvas.gameObject.AddComponent<GraphicRaycaster>();
            canvas.renderMode = RenderMode.ScreenSpaceOverlay;
        }
        // EventSystemを探し、もしなければ作成
        if (FindObjectOfType<EventSystem>() == null)
        {
            var eventSystem = new GameObject("EventSystem", typeof(EventSystem));
            eventSystem.AddComponent<StandaloneInputModule>();
        }
        // LineStripを作成し、Canvasの子にする
        var lineStrip = new GameObject("LineStrip", typeof(CanvasRenderer), typeof(LineStrip));
        lineStrip.transform.SetParent(canvas.transform, false);
        // 作成されたLineStripを選択
        Selection.activeGameObject = lineStrip;
    }

#endif

    protected override void OnPopulateMesh(VertexHelper vh)
    {
        this.CornerDivisionCount = Mathf.Max(this.CornerDivisionCount, 1);
        var pivot = this.rectTransform.pivot;
        var size = this.rectTransform.rect.size;
        var origin = Vector2.Scale(-pivot, size); // RectTransformの左下隅を原点とする
        vh.Clear(); // 以前に描いた頂点は削除
        var cornerCount = this.Positions == null ? 0 : this.Positions.Length;
        if (cornerCount < 2)
        {
            return; // コーナーの数が2未満だと線を引けないため、何もしない
        }

        var segmentCount = cornerCount - 1; // コーナーをつなぐ線分の数
        for (var i = 0; i < segmentCount; i++)
        {
            var a = origin + this.Positions[i];
            var b = origin + this.Positions[i + 1];
            // コーナー間に線分を追加
            AddSegment(
                vh,
                a,
                this.color,
                this.LineWidth,
                b,
                this.color,
                this.LineWidth);
            // 細い線なら気にならないでしょうが、太い線だと線分のつなぎ目が目立つので接続部を追加しました
            // ですが、1回AddSegmentまたはAddJointを行うごとに頂点数+4、三角形数+2のオーダーで形状が複雑化します
            // (本当は、折れ線全体が一つの三角形ストリップになるようにすれば頂点数増加を+2に抑えられるはずですが、手抜きしました...)
            // もし細い線しか使わない、あるいは大量のコーナーを持つ折れ線を描くので描画負荷を下げたい、といったことがありましたら
            // 以下のifブロックは削除してしまうのがいいでしょう
            if (i < (segmentCount - 1))
            {
                var c = origin + this.Positions[i + 2];
                var tangentFrom = (b - a).normalized;
                var tangentTo = (c - b).normalized;
                var tangentCount = this.CornerDivisionCount + 1;
                var tangentAngle = -Vector2.SignedAngle(tangentFrom, tangentTo) * Mathf.Deg2Rad;
                var tangents = Enumerable.Range(0, tangentCount)
                    .Select(
                        index =>
                        {
                            var angle = Mathf.Lerp(0.0f, tangentAngle, index / (tangentCount - 1.0f));
                            var cosAngle = Mathf.Cos(angle);
                            var sinAngle = Mathf.Sin(angle);
                            return new Vector2(
                                (cosAngle * tangentFrom.x) + (sinAngle * tangentFrom.y),
                                (cosAngle * tangentFrom.y) - (sinAngle * tangentFrom.x));
                        })
                    .ToArray();
                for (var j = 0; j < this.CornerDivisionCount; j++)
                {
                    AddJoint(vh, b, tangents[j], tangents[j + 1], this.color, this.LineWidth);
                }
            }
        }
    }

    // p点に接続部を追加
    // tangentFromは入っていく線分の向き
    // tangentToは出ていく線分の向き
    private static void AddJoint(
        VertexHelper vh,
        Vector2 p,
        Vector2 tangentFrom,
        Vector2 tangentTo,
        Color color,
        float width)
    {
        var dFrom = width * 0.5f * new Vector2(-tangentFrom.y, tangentFrom.x);
        var dTo = width * 0.5f * new Vector2(-tangentTo.y, tangentTo.x);
        var offset = vh.currentVertCount;
        var vertex = UIVertex.simpleVert;
        vertex.position = p - dFrom;
        vertex.color = color;
        vh.AddVert(vertex);
        vertex.position = p + dFrom;
        vh.AddVert(vertex);
        vertex.position = p + dTo;
        vh.AddVert(vertex);
        vertex.position = p - dTo;
        vh.AddVert(vertex);
        vh.AddTriangle(offset + 0, offset + 1, offset + 2);
        vh.AddTriangle(offset + 2, offset + 3, offset + 0);
    }

    // a、b点間に線分を追加
    private static void AddSegment(
        VertexHelper vh,
        Vector2 a,
        Color colorA,
        float widthA,
        Vector2 b,
        Color colorB,
        float widthB)
    {
        var tangent = (b - a).normalized;
        var normal = new Vector2(-tangent.y, tangent.x);
        var dA = widthA * 0.5f * normal;
        var dB = widthB * 0.5f * normal;
        var offset = vh.currentVertCount;
        var vertex = UIVertex.simpleVert;
        vertex.position = a - dA;
        vertex.color = colorA;
        vh.AddVert(vertex);
        vertex.position = a + dA;
        vh.AddVert(vertex);
        vertex.position = b + dB;
        vertex.color = colorB;
        vh.AddVert(vertex);
        vertex.position = b - dB;
        vh.AddVert(vertex);
        vh.AddTriangle(offset + 0, offset + 1, offset + 2);
        vh.AddTriangle(offset + 2, offset + 3, offset + 0);
    }
}

###追記
上記LineStripを使う側のスクリプトでは、たとえば下記のようにPositionsを書き換えていくことになるでしょう。試しにAudioSourceの出している音をGetOutputDataで取得してPositionsに反映させてみました。

using System.Collections;
using UnityEngine;

public class WaveForm : MonoBehaviour
{
    private const int DataLength = 256;

    public AudioSource soundSource;
    public LineStrip waveLineStrip;

    private float soundVolume;
    private Coroutine stoppingSoundCoroutine;
    private float[] waveData;
    private float waveFormOffsetY;

    // 音量によって波の振幅が変化しているのをアピールするため、停止時にフェードアウトさせるようにしました
    private IEnumerator StopSound(float time)
    {
        while (this.soundSource.volume > 0.0f)
        {
            this.soundSource.volume -= (this.soundVolume * Time.deltaTime) / time;
            yield return null;
        }

        this.soundSource.Stop();
        this.stoppingSoundCoroutine = null;
    }

    private void Start()
    {
        this.soundVolume = this.soundSource.volume;
        this.waveData = new float[DataLength];
        this.waveLineStrip.Positions = new Vector2[DataLength]; // Positionsに新しいVector2配列をセット→DataLength個のコーナーを持つ折れ線になる

        for (var i = 0; i < DataLength; i++)
        {
            this.waveLineStrip.Positions[i].x = i; // 各コーナーのX座標を書き換える
        }

        this.waveLineStrip.SetVerticesDirty(); // Positionsを書き換えたので、メッシュの更新が必要なことを通知する
        this.waveFormOffsetY = this.waveLineStrip.rectTransform.rect.height * 0.5f;
    }

    private void Update()
    {
        // スペースキーで音声の再生・停止を切り替える
        if (Input.GetKeyDown(KeyCode.Space))
        {
            var stopping = this.stoppingSoundCoroutine != null;

            if (this.soundSource.isPlaying && !stopping)
            {
                this.stoppingSoundCoroutine = StartCoroutine(StopSound(5.0f));
            }
            else
            {
                if (stopping)
                {
                    this.StopCoroutine(this.stoppingSoundCoroutine);
                    this.stoppingSoundCoroutine = null;
                }

                this.soundSource.volume = this.soundVolume;
                this.soundSource.Play();
            }
        }

        this.soundSource.GetOutputData(this.waveData, 0); // soundSourceが現在再生している音声データをwaveDataに取り出す

        for (var i = 0; i < DataLength; i++)
        {
            this.waveLineStrip.Positions[i].y =
                this.waveFormOffsetY + (this.waveData[i] * 64.0f); // waveDataの値に応じて各コーナーのY座標を書き換える
        }

        this.waveLineStrip.SetVerticesDirty(); // Positionsを書き換えたので、メッシュの更新が必要なことを通知する
    }
}

コード内コメントにあるように、今回の例ではPositions変更後にいちいちSetVerticesDirtyを実行しないと変更が反映されなかったりします。Positions書き換え用のメソッドを追加して、その中でSetVerticesDirtyを行うようにした方が使いやすいかもしれません。

Comments

[akito0705]

ありがとうございます！作成していただいたコンポーネントを改造して使わせていただきたいのですが、コンポーネントの作成をやったことがなくて使い方がわかりません。
これをLineStrip.csを作成し張り付けて、線を引きたいときは別スクリプトからPositions.Addを行えばいいのでしょうか？初歩的な質問ですみません、よろしくお願いします。

[Bongo]

今回作ったものの場合は、Positionsは単なるVector2の配列でして、新しい配列を代入するか、Positionsの各要素を個別に書き換えることになりますね。スクリプトからPositionsの値を書き換える例を追記しました。
配列でなく、たとえばList<Vector2>を使うようにすれば、ご質問者さんのおっしゃるようにAddで座標を追加できるようになるかと思います。

追記でも言及しましたが、今回の例ではPositionsに変化を加えた場合、メッシュの更新が必要なことをUnityに知らせるために、少々面倒ですがSetVerticesDirtyを実行する必要があります。
Positionsは取得専用にして、コーナーの追加や変更は専用のメソッドを使わせるよう書き換え、それらメソッド内でPositionsの書き換えおよびSetVerticesDirtyの実行を行うようにすれば、LineStripを使う側がいちいちSetVerticesDirtyを呼ぶ必要はなくなるかと思います...

[akito0705]

たびたびの質問申し訳ありません。Start関数内で最初にwaveLineScript.Position= new Vector2[DataLength]を書くと思いますが、プログラム実行時にそこでObject reference not set to an instance of an object（オブジェクトに参照できない？）というエラーが出てしまいます。
これにかかわる変数は

'''public LineStrip ImageLineStrip;
private const int DataLength = 256;

　　 void start(){
this.ImageLineStrip.Positions = new Vector2[DataLength];
}'''

しか入れてないのですが、なぜでしょうか。原因に心当たりがあれば教えていただきたいです。

[Bongo]

そのスクリプトをアタッチしたオブジェクトのインスペクタを見てみると、「Image Line Strip」という名前の参照設定欄が出現しているかと思いますが、そこが「None (LineStrip)」のままになっていませんでしょうか?
もしそうであれば、そこにヒエラルキー上のLineStripをドラッグ&ドロップする、または設定欄右隣にある丸をクリックすると現れるウィンドウでシーン上のLineStripを選択すると、スクリプト実行時にそのLineStripを参照してくれるので、NullReferenceExceptionは消えるかと思います...

※お節介かもしれませんが補足いたしますと、回答に追記しました例では、soundSourceフィールドも「public AudioSource soundSource;」という風に「public」指定して外部に公開しています。これもインスペクタ上で「Sound Source」に手動で適当なAudioSourceをセットすることを前提としたものです。
たとえば下記のような感じで...

- プロジェクトに適当な音声ファイルを追加
- 適当なオブジェクトに「Audio Source」コンポーネントをアタッチ
- そのAudio Sourceの「AudioClip」に追加した音声をセット
- 「WaveForm」スクリプトをアタッチしたオブジェクトの「Sound Source」に、先ほどのAudio Sourceをアタッチしたオブジェクトをセット

[akito0705]

何から何まで本当にありがとうございます。無事カメラ映像内に描画できました。初歩的な質問にまで答えてくださって本当にありがとうございました。