ラインレンダラーで描く折れ線の太さを一定にしたい

Question

unityのlinerendererを用いて頂点を多数もつ線を書こうとしています。
スクリプトで以下のように指定して線を表示させることはできましたが、太さが一定になりません。
inspectorで線の太さを調節することはわかりましたが、始点から終点まで同じ太さになるはずが（したいところ）、途中で線が細くなってしまいます。調べても解決難しそうであり相談させて頂きました。

public class NewBehaviourScript : MonoBehaviour
{
    public GameObject obj;
    private LineRenderer lineRenderer;


    void Start()
    {
        lineRenderer = obj.GetComponent<LineRenderer>();
        
       lineRenderer.SetPosition(0, new Vector3(0 , 0, 0));
        lineRenderer.SetPosition(1, new Vector3(0.6846106f , 0, 0));
        lineRenderer.SetPosition(2, new Vector3(0.9700001f , 0.2f, 0));
        lineRenderer.SetPosition(3, new Vector3(1.15665f , 0, 0));
        lineRenderer.SetPosition(4, new Vector3(1.599345f , 0, 0));
        lineRenderer.SetPosition(5, new Vector3(1.84345f , 1.728068f, 0));
        lineRenderer.SetPosition(6, new Vector3(1.971275f , -0.3221619f, 0));
        lineRenderer.SetPosition(7, new Vector3(2.172146f , 0, 0));
        lineRenderer.SetPosition(8, new Vector3(2.651402f , 0, 0));
        lineRenderer.SetPosition(9, new Vector3(2.914341f , 0.2874806f, 0));
        lineRenderer.SetPosition(10, new Vector3(3.153f , 0, 0));
        lineRenderer.SetPosition(11, new Vector3(3.498861f , 0, 0));
        lineRenderer.SetPosition(12, new Vector3(8.448442f , 0, 0));
        lineRenderer.SetPosition(13, new Vector3(10 , 0, 0));
        

        lineRenderer.startColor = Color.green;
        lineRenderer.sortingLayerName = "Effect";
        lineRenderer.sortingOrder = 1;

    }

    // Update is called once per frame
    void FixedUpdate()
    {
    }
}

2022/01/02追記です。
滑らかな折れ線を書く方法は教えていただいたとおり、頂点の数を増やす方法で対応できそうです。
しかし、色々と調べていると以下のコードで作られる折れ線ではどうやら太さが一定の状態で角度の急峻な折れ線を作れるようです。なぜこの方法ではきれいな折れ線が作れてしまうのか分かる方は教えていただけると幸いです。

public class GenerateLR : MonoBehaviour {

    void DrawLine(List<Vector2> my2DVec, int startPos) {
        List<Vector3> myPoint = new List<Vector3>();
        for(int idx=0; idx<2; idx++) {
            myPoint.Add(new Vector3(my2DVec[startPos+idx].x, my2DVec[startPos+idx].y, 0.0f));
        }

        GameObject newLine = new GameObject ("Line");
        LineRenderer lRend = newLine.AddComponent<LineRenderer> ();
        lRend.SetVertexCount(2);
        lRend.SetWidth (0.1f, 0.1f);
        Vector3 startVec = myPoint[0];
        Vector3 endVec   = myPoint[1];
        lRend.SetPosition (0, startVec);
        lRend.SetPosition (1, endVec);
    }

    void Start () {
        List<Vector2> my2DPoint = new List<Vector2> ();
        for (int idx=0; idx<100; idx++) {
            my2DPoint.Add (new Vector2 (-10 + 0.2f * idx, Random.Range(0.0f, 5.0f)));
        }

        for (int idx=0; idx < my2DPoint.Count - 1; idx++) {
            DrawLine (my2DPoint, /* startPos=*/idx);
        }
    }

    void Update () {

    }
}

Comments

[退会済みユーザー]

画像はCameraから見た視点（つまりGameビュー）で、質問はCameraから見える線の太さを一定にしたいということで大丈夫ですか？

[tsuneet]

ありがとうございます。言葉足らずですみません、cameraから見た視点で線の太さを一定にしたいという意味です。よろしくお願い致します。

Answer 1

LineRendererコンポーネントのAlignmentの値を調整してください。
Alignmentは描画する線の向きを設定する項目です。
選択項目は以下の通り。

項目	説明
View	カメラに正面を向ける(今回はこれ)
TransformZ	Z軸に正面を向ける

よってカメラに対して同じ幅で描画したい(=正面にしたい)ので、Viewにしてください。

【追記　LineRendererの仕様について】
私が少々勘違いしていたので仕組みを説明させていただきます。
LineRendererは折れ線の場合完全に同じ太さの線を引くことはできません。

この図で、赤い点A、B、C、DがPositionsの点を、黒い線分α、β、γ、εが線の幅、つまりWidthを意味します。
また、赤い線はPositionsの点を繋いだもの、薄い水色の部分が実際に線が描画される場所になります。
Widthを一定にした場合、α、β、γ、εの長さは全て等しくなります。
始点の点Aと通る線分αと、終点の点Dを通る線分εは、それぞれ線分ABとDCに垂直に配置されますが、途中の点である点B、Cを通る線分β、γについては、それぞれ∠ABC、∠BCDを二等分する方向に配置され、前後の線分と常に垂直にはなりません。
この線分α、β、γ、εの端点をなぞるように実際のLineが描画されるので、どうしてもLine自体の幅はずれてしまいます。
設定しているWidthの値が必ずしもLineの幅となるわけではないことを知っておくと良いと思います。

【再追記】
少し調べたところ、極端な角度でない限りは上手にUnityが調整してくれている模様です。
直角など、緩い角度であれば正常に描画されます。
この程度の角度であれば、先に追記した内容でのβやγの長さを調整してくれますが、あまりにも角度が急すぎるとβやγの長さがとても長くなってしまうため調整が(十分に)されず、結果、線の幅が異なってしまうということです。
ですので先程の図は少し誤っていますが、仕組みとしては間違っていないと思いますのでそのまま掲載させていただきます。
大変失礼しました。

【再々追記】
ikadzuchi様の指摘にあるように「角の頂点」を増やして検証してみました。
＜結果＞
左から：「角の頂点」1個(通常)、2個、3個、4個

それぞれのLineRendererの設定はPositions以外初期設定のままです。
LoopはOff、Widthは常に0.10、AlignmentはViewの状態で、Positionのみを以下のように変更しました。

Index	角の頂点：1個	2個	3個	4個
0	0,0,0	0,0,0	0,0,0	0,0,0
1	0.2,3,0	0.2,3,0	0.2,3,0	0.2,3,0
2	0.4,0,0	0.2,3,0	0.2,3,0	0.2,3,0
3	---	0.4,0,0	0.2,3,0	0.2,3,0
4	---	---	0.4,0,0	0.2,3,0
5	---	---	---	0.4,0,0

結果、角の頂点数を2にしたときは何やらおかしなことになりますが、頂点数を3、4と増やした場合はある程度線が上手に引けるみたいです。
ちなみにこの折れ線の角度は約7°でした。
ただ、生成にかかる負担も僅かながら増えるので注意が必要かと思います。
ikadzuchi様ありがとうございました。

【再々々追記】
ikadzuchi様のご指摘を勘違いしているとBongo様からのご指摘がありました。
LineRendererのCornerVertices、つまり「角の頂点」の数を増やすと上記と同様に線の太さを一定にすることができる模様です。

各設定項目、左から。記載が無いものはすべて同じ

項目	1	2	3	4	5	6	7
Positionsで1箇所に重ねる数	1個	2個	3個	4個	1個	1個	---
CornerVerticesの値	1	1	1	1	2	3	2

※左3つは【再々追記】の画像のものと同じです。
画像のように、CornerVerticesの値を修正すればPositionsでわざわざ頂点を重ねなくても鋭角の辺が等幅で描画されます。
ただ、Positionsでの方法と比べ、頂点が丸くなります。
90°などCornerVerticesの修正なしでも同じ幅で表示可能な角度でも、画像の一番右の線のように角が丸くなりますが、気にならないようでしたらこちらの方法を使った方が楽だと思います。
Bongo様ありがとうございました。

Comments

[tsuneet]

回答頂きましてありがとうございます。inspectorを確認するとviewになっておりました。他になにか問題があるのでしょうか。。

[退会済みユーザー]

Sceneビューで、線の正面がカメラの方向になっているか確認して戴いても構いませんか？
線の幅を太くすると見やすいと思いますので宜しくお願いします。
それで線がちゃんとカメラの方向を向いているなら、単にGameビューの解像度不足だと思いますよ。

[tsuneet]

sceneビューで確認致しますと、カメラは正面方向でした。
ご指摘の通り線の太さを太くすると、かなり見やすい線になりました。
細く設定しすぎていたのがよくなかったようです。
とても丁寧にご回答頂きありがとうございます。本当に助かりました。

[退会済みユーザー]

済みません、こちらで確認したところでも同様の現象が確認され、少し勘違いに気付きました。
LineRendererは仕様上、折れ線では完全に等幅にすることは出来なさそうです。
詳しくは回答の方に記載します。解決策を出せず申し訳ありません。

[tsuneet]

ありがとうございます。仕様上、折れ線が完全に等幅に出来ないと教えていただけただけでありがたいです。
何かしらコマンドで等幅にする方法があるのか考えておりました。
線が細くなってしまう所はスクリプトで頂点を多めに設定することである程度太さの調節をすることができるようになりました。ありがとうございます。

[退会済みユーザー]

そうですか。良かったです。

[tsuneet]

わかりやすく図解もして頂きありがとうございます。line描画のメカニズムよくわかりました。TIPをお支払いしたいぐらい感謝してます。

[退会済みユーザー]

いえ、お気になさらず。

[ikadzuchi]

使ったことが無いのでリファレンスを見ただけの感想ですが、
「角度が急すぎるとβやγの長さがとても長くなってしまうため」ということであれば、「角の頂点」を増やしたら適切に表示されませんかね?

[退会済みユーザー]

尖って線が細くなってしまう角の頂点に、二つ以上のLineRendererの点を置く、ということでしょうか？
分かりにくい書き方で申し訳ないです。

[退会済みユーザー]

頂点に置く点の数を2個にして実際に作ってみましたが、どうもおかしなことになってしまいました。
この方法ではできないようです。
回答の方に画像など追記しておきます。

[tsuneet]

ありがとうございます。頂点を４つにすると確かにかなり滑らかな折れ線が書けるようになった気がします。ご丁寧に図も載せていただきましてありがとうございます。

[tsuneet]

質問本文に追記させて頂きましたが、拾い物のコードではきれいな折れ線が書けてしまいました。リストを使ってランダムに点を発生させて折れ線を生成されていますが何故きれいに書けるのかはっきりとしません…。

[退会済みユーザー]

該当コードの9行目と10行目で、それぞれ新しくオブジェクトを生成、生成したオブジェクトに新たにLineRendererコンポーネントを生成しているので、見た目では1つの折れ線に見えますが実際は複数のLineRendererが使用されていますね。
1つのLineRendererにこだわらず複数使ってしまえば綺麗に描画できるということです。

[tsuneet]

なるほど、そういうことなんですね。よく見れば分かる話でしたね、、すみません。
勉強になりました。ありがとうございます。

[Bongo]

横槍すみませんが、ikadzuchiさんのおっしゃる「角の頂点」というのは、もしかするとnumCornerVertices（https://docs.unity3d.com/jp/current/ScriptReference/LineRenderer-numCornerVertices.html ）のことだったりしませんかね?

[退会済みユーザー]

本当ですね。
numCornerVertices（Inspecter上ではCorner Vertices）を操作することでも線の太さを一定に出来るようです。
ただ、先に書いた方法と頂点付近の形状が異なってくるので、どちらを使うかは実際に使う際に考えるべきかもしれないですね。
頂点が面取りされる（丸くなる）のが好ましくない場合もあると思いますので。
それでもこの方法は先の方法よりも簡潔（1つのパラメータを操作するだけで完結する）ので便利だと思います。
ご指摘ありがとうございます。

[ikadzuchi]

そうですね。紛らわしくてすみません。
このページ https://docs.unity3d.com/jp/current/Manual/class-LineRenderer.html
を見て「Corner Vertices」とあったのを、質問の添付画像を見たら日本語名が「角の頂点」であるようだったのでそう書きました。

[退会済みユーザー]

いえ、こちらの確認不足です。
わざわざご指摘いただいたのに申し訳ありません。