UnityVR -- コンポーネント 3 -- ラインレンダラー -- リニアレンダリング

リニアレンダリングコンポーネントの概要

線を描画するためのラインレンダラーコンポーネントの紹介

トレーリング Trail Renderer コンポーネントの描画の概要

応用例 1: Line Renderer を使用して線分を描画する

アプリケーション 1 の実装: システムツールまたはカスタムツールを使用して線分を描画します

アプリケーション 2: Trail Renderer は単純に弾丸の尾を引くエフェクトを作成します

応用3：LineRendererで円を描く（線分近似）

リニアレンダリングコンポーネントの概要

Line Renderer リニアレンダリングコンポーネントは、前のミニゲームで行われたレーザーゲートダメージなどの線分を 3D でレンダリングするために使用され、Line Renderer は VR ハンドルで使用されます。

Trail Renderer は線分のレンダリングにも使用され、オブジェクトに高速モーションの軌跡効果を追加するために使用されます。

この記事では主に、Line Renderer、Trail Renderer のコンポーネントと API の使用法、それらを使用して線分を描画する方法を記録し、これらの実用的なツールを格納するツールのコレクションを構築して、後続の開発でいつでも使用できるようにします。。

線を描画するためのラインレンダラーコンポーネントの紹介

ラインレンダラは、頂点を使用してレンダリングサイズと位置を制御する線であり、頂点の数と座標も制御できます。公式の Line Renderer コンポーネントの紹介については、Line Renderer コンポーネント - Unity マニュアル (unity3d.com)を参照してください。

その中で、より一般的に使用されるオプションは幅、マテリアルなどであり、その他の設定は一般にスクリプトによって制御されます。

width は線の幅を制御し、複数のノードを設定して線の幅をどこでも変化させることができます。

マテリアルは線の素材を制御します。追加しない場合はピンクのみが表示されます。もちろん、これはスクリプトで変更することもできます。

ラインレンダラーで一般的に使用される API は次のとおりです。

PositionCount: 線分のポイント数を設定します。

SetPosition(int index, Vector3[]position): 点の位置を追加します (点の添字、点の位置)。

startWidth、endWidth: 開始点と終了点の幅。

素材。カラー: レイ素材の色

トレーリング Trail Renderer コンポーネントの描画の概要

Trail Renderer コンポーネントは Line Renderer コンポーネントに非常に似ており、オブジェクトにぶら下げて追跡効果を持たせることができます。一般的には、前側を広く、後ろ側を狭くすることで、より高速感を得ることができます。

その他の設定については公式ドキュメント: Trail Renderer コンポーネント - Unity マニュアル (unity3d.com)を参照し、スクリプト内で API メソッドを使用して設定できます。トレーリング効果を次の図に示します。

応用例 1: Line Renderer を使用して線分を描画する

ツールキット Tools.cs を作成し、静的 Statics クラスとして設定します。コードは次のとおりです。

//静态工具类
public static class Tools
{
    //使用LineRenderer绘制线段，方法1（新建线段）
    public static LineRenderer DrawLine(Transform transform, Vector3 start, Vector3 end, Color color = default(Color),
        float width = 0.1f)
    {//DrawLine(设置父物体，线段起点，终点，颜色，宽度)
        GameObject gameObject = new GameObject();  //在场内新建一个物体
        gameObject.transform.SetParent(transform); //把这个物体方在父物体下面
        gameObject.name = "Line";                  //给物体命名
        LineRenderer line = gameObject.AddComponent<LineRenderer>();  //挂上LineRenderer组件
        line.useWorldSpace = true;  //线段设置为世界坐标
        line.material = Resload.Instance.LoadAsset<Material>("line");  //从Resource下加载名为line的材质
        line.SetVertexCount(2);  //设置顶点数量，2个，起点、终点
        line.SetWidth(width, width);  //设置第一个顶点的宽度、第二个顶点宽度
        line.material.SetColor("_Color", color);   //这个颜色是材质的颜色，是Material类中的一个属性
                                                   //这里修改的是Resource文件夹下line材质的颜色属性
        line.startColor = color;  //设置开始颜色和结束颜色
        line.endColor = color;    //可以有一个渐变的效果，当然也可以一致
        line.SetPosition(0, start);//设置起点和终点的位置
        line.SetPosition(1, end);
        return line;
    }

    //使用LineRenderer绘制线段，方法2(对已有线段修改)
    public static LineRenderer DrawLine(Transform transform, LineRenderer line,Vector3 start,Vector3 end, Color color=default(Color), float width = 0.1f)
    {//DrawLine(设置父物体，提供一个线段供修改，线段起点，终点，颜色，宽度)
        if(line==null)
        {//先判断是否已有一个线段，如果没有，则用方法2新建一个
            return DrawLine(transform,start, end, color,width);
        }
        //如果线段已存在，就按照下面的设置修改线段属性，与方法1设置方法相同
        line.useWorldSpace = false;  
        line.SetVertexCount(2);  
        line.SetWidth(width, width);  
        line.material.SetColor("_Color", color);  
        line.startColor = color;  
        line.endColor = color;    
        line.SetPosition(0, start);
        line.SetPosition(1, end);
        return line;
    }

}

線分を描画する方法は 2 つあります。1 つ目は、フィールドに新しいオブジェクトを作成してラインレンダラーコンポーネントをマウントするなど、新しい線分を作成する方法です。2 つ目は、既にラインレンダラーをマウントしているオブジェクトを変更する方法です。成分。より複雑な線分を設定する必要がある場合は、より詳細に定義できます。

アプリケーション 1 の実装: システムツールまたはカスタムツールを使用して線分を描画します

フィールドに新しい空のノード行を作成し、スクリプト line.cs (任意の名前) をマウントします。ただし、この線分は子ノードとして使用されるため、この線分ノードの位置は後で描画される線分に影響します。line.cs のスクリプトは次のように Start() 内に記述するだけです。

void Start()
    {
        //使用Unity自带的Debug划线工具
        Debug.DrawLine(transform.position,transform.position+transform.forward*10,Color.green,100);
        Debug.DrawRay(transform.position, transform.forward, Color.red, 100);

        //使用Tools工具集划线段
        Tools.DrawLine(transform, transform.position, transform.position + transform.forward * 10, Color.blue, 0.1f);        
    }

ここではまず、Unity に付属している描画ツール Debug.DrawLine を使用してみます。その定義は次のとおりで、渡されるパラメータは比較的小さいです。

public static void DrawLine(Vector3 start, Vector3 end, Color color, float duration){}

* 注: 静的 (静的) クラス、静的メソッド、および静的変数を使用する場合、新しいオブジェクトの後に "object.method" を通じて呼び出すのではなく、クラスが呼び出されるとき (Tools.DrawLine()) にのみ呼び出すことができます。。

操作の結果は次のようになります。

アプリケーション 2: Trail Renderer は単純に弾丸の尾を引くエフェクトを作成します

以前に作成した弾丸プレハブに、コンポーネントを直接追加し、Trail Renderer コンポーネントを追加し、必要に応じて色、幅、影、その他のパラメーターを設定するだけで、次の効果を実現できます。

応用3：LineRendererで円を描く（線分近似）

まずツールを作成し、次の DrawCircle() メソッドを Tools.cs ツールセットに追加します。

    //使用LineRenderer绘制线段逼近一个圆
    public static void DrawCircle(GameObject go,float xRadius,float yRadius,float zRadius, 
        int number, float width,Color color = default(Color))
    {//画圆的物体，x/y/z方向的半径，线段数量，宽度，颜色
        if(!go.GetComponent<LineRenderer>())
        {
            go.AddComponent<LineRenderer>();
        }
        LineRenderer line=go.GetComponent<LineRenderer>();
        line.positionCount = number + 1;//5个线条有6个顶点
        line.useWorldSpace = false;  //使用本地坐标
        line.material = Resload.Instance.LoadAsset<Material>("line");
        line.material.SetColor("_Color", color);
        line.SetWidth(width, width);
        float x,y,z;
        float angle = 0;  //设置画圆（线）的初始角度为0，每画一条转一个angle角度，直到360度
        for(int i=0; i<line.positionCount; i++)
        {
            x = Mathf.Sin(Mathf.Deg2Rad * angle) * xRadius;
            y = Mathf.Cos(Mathf.Deg2Rad * angle) * yRadius;
            z=Mathf.Cos(Mathf.Deg2Rad*angle) * zRadius;
            line.SetPosition(i, new Vector3(x, y, z));  //设置line每个顶点的坐标
            angle += (360f / number);
        }

これを主人公に使用します (次の CircleDraw.cs を主人公に掛けます)。

public class CircleDraw : MonoBehaviour
{
    public int number; //组成圆的线条数
    public float xRadius;
    public float yRadius;
    public float zRadius;
    public float width;
    void Start()
    {
        Tools.DrawCircle(transform.gameObject, xRadius, yRadius, zRadius, number, width, Color.cyan);
    }
}

効果は次のとおりです。