[MR Dev Tips #13] Unity Line Renderer を使って引いた線を加工する

Unity の ``Line Renderer`` を使用して、線を引く方法について紹介します。

# Line Renderer とは
``Line Renderer`` コンポーネントは、3D空間の2つ以上の点 (Vector3) の配列を保持して、各点の間に直線を描きます。1つの Line Renderer を使用して、シンプルな直線から複雑な螺旋まで、どんなものでも描画することができます。線 (Line) は、必ず連続した状態になっています。1つの ``Line Renderer`` で描画できるのは一本の線なので、2本以上の線を描画したい場合は、複数のゲームオブジェクトを用意して、それぞれに ``Line Renderer`` を適用する必要があります。

# Line Renderer の使い方

Unity メニューバーで ``GameObject > Effects > Line`` を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/c98b7aa2-5a4e-029b-e149-0fe6d566afa7.png)

ヒエラルキービューに、Line (GameObject) が追加されます。ゲームオブジェクトには、``Line Renderer`` コンポーネントがアタッチされています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/9ab82863-3be3-532e-ad39-4df207e2ab50.png)

``Line Renderer`` コンポーネントを追加することで、簡単に線を追加することができます。

# Line Renderer のプロパティについて

``Line Renderer`` コンポーネントの Inspector を見ていきたいと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/ec6f5d70-f117-504f-fd0d-a1515cf27439.png)

| プロパティ名 | 説明 |
| --- | --- |
| Simplify Preview | Simplify Preview を有効にすると、Simplify を実行した際の線のプレビューを表示することができます。 |
| Tolerance | Simplify を実行する際に、元の線から逸脱できる度合いを設定します。値が 0　に設定されている場合、偏差は発生しないため、単純化 (Simplify) はほとんど、または全く行われません。正の値が大きいほど、元の線からの偏差が大きくなり、より簡略化されます。 |
| Loop | Loop を有効にすると、最初と最後の点を繋ぎ、閉じたループを作成します。 | 
| Positions | 線の元となる点 (Vector3) の配列を設定します。 |
| Size | Positions の配列の大きさ、点の数 | 
| Width | 線の幅とカーブの値によって、線の様々な位置での線の幅を制御します。カーブは各頂点でサンプリングされるので、正確に再現されるかどうかは頂点数に左右されます。 |

## Simplify でラインを簡略化する

Simplify の挙動を確認してみたいと思います。以下の図は、フリーハンドで書いた線です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/39d473e6-a9fb-5433-0cb1-cdd46a50e6ee.png)

``Simplify Preview`` が有効になっていないので、プレビューの線は表示されていません。Inspector から ``Simplify Preview`` のチェックボックスにチェックを入れてみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/535c1569-1ee9-cef1-4c53-f5b70026a9e5.png)

黄色いプレビューの線が表示されました。ただ、Tolerance が 0 のため、フリーハンドで書いた線のままです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/7e2356df-7153-99bf-5e34-3f8b81cb8cc8.png)

ここで、Tolerance を 0.3 に設定してみます。さきほどのプレビューと比べて、随分と簡略されました。このプレビューを実際の線に反映して、``Positions`` の配列を更新するには、Tolerance の横にある ``Simplify`` ボタンを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/58d94cb0-9547-d4f9-9a99-4fd47efb2761.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/cbd1460e-ef9b-59fb-a126-69ff166fd3be.png)

実際に ``Simplify`` を実行すると、Positions 配列の数が減り、フリーハンドで書いた線が簡略化されました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/e8aacf23-dbe4-68d8-3f38-df89dccebd61.png)

## ラインの幅を変更する

ラインの幅の変更は ``Width`` プロパティのカーブを使って行うことができます。初期設定では、``0.100`` に設定されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/8386aebc-ca4d-d132-76ee-dc3e62617d13.png)

カーブを使って、ライン全体の幅を少しずつ太くしてみると、以下のような線の形に変わりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/5f62c105-b736-d347-c1c4-81fd928fde69.png)

## ラインのカラーにグラデーションを設定する

ラインの色は、Color プロパティから ``Gradient Editor`` を開き、設定することができます。例えば、始点を黒、終点を白とするグラデーションを設定した場合は、このような表示になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/c3fc4c81-2253-782a-737f-9b0d96850d45.png)

上記設定を適用した後のラインは、以下のような色合いになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/e4750ab3-49d0-3f5f-7552-11fda912e004.png)

## ラインの始点と終点に丸みをつける

ラインの始点と終点に丸みをつけるには、``End Cap Vertices`` を設定します。``End Cap Vertices`` は、線にエンドキャップを描画する際の、追加の頂点をいくつ使用するかを制御します。この値を増やすと、線のキャップがより丸く表示されます。

**End Cap Vertices が 0 の場合**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/ab4378dd-85ad-8f59-853a-86a65db5509e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/8b9b349c-8f66-ea85-365a-26c418ad89bb.png)

**End Cap Vertices が 5 の場合**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/25b656bb-e9b3-7f65-0fd1-60ebf4e2ed6b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/3b7d08dd-33ce-1878-f166-0a49030bac22.png)

**End Cap Vertices が 20 の場合**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/0cb4f0d2-ca44-9d68-f323-88f980946bea.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180432/142bce7e-380c-4069-1aa3-caf4dbae15f6.png)


以上、簡略化、線の幅、色の変更を試してみました！

# Refs

https://docs.unity3d.com/ja/2021.2/Manual/class-LineRenderer.html