【Unity】トレイルレンダラーとベジェ曲線で3Dなホーミングレーザーを表示する

一番下に追記あります。
**********************************************

先日作成したトレイルレンダラーでレーザーを表示するプログラムを改良してベジェ曲線を使った3次元的なホーミングレーザーを実装してみました。



WebGLでビルドしてブラウザで動くようにしたものをGitHubにて公開しています↓
https://xxxx-kt-xxxx.github.io/Homming_TEST/

unitypackageとProjectSettingsのファイルはこちら

ファイルのダウンロード

Unity2018.2.11f1使用

Zipファイルになっていますので展開したらHomming_TEST.unitypackageとProjectSettingsフォルダが入っています。

ファイルメニューのAsset→Import Package→Custom Packageを選択してHomming.unitypackageを読み込みます。

ProjectSettingsフォルダは作成したプロジェクトにあるProjectSettingsフォルダに上書きします。

実行すると左クリックした位置に座標(0,0,0)からホーミングレーザーを発射します。
右クリックしながらドラッグするとカメラアングルが変更出来ます。


先日作成したトレイルレンダラーでレーザーを表示するプログラムからの変更点を書いてみます。
まずベジェ曲線を使った3次元的なホーミングレーザーを実装についてですが、以前2次元なホーミングレーザーについては
http://ktstg.blog.shinobi.jp/Entry/658/
http://ktstg.blog.shinobi.jp/Entry/676/
辺りに詳しく書いていますので参考にして下さい。



上の動画のプログラムは↓でダウンロード出来ます。
ベジェ曲線プログラムのダウンロード
ソースファイルと実行ファイルが入ってます。

動画のP03の位置にレーザーを表示すればホーミングっぽく表示出来ますが3次元で表示する場合はどうするんやろ？と悩みみました。
色々ググってみたりしたのですが良くわからず、とりあえず全ての座標でZ軸を追加して計算してみたら上手くいったので今回はコレで良しとしています。

Laser_move.csを下記のように書き換えます。

Laser_move.cs
using System.Collections; using System.Collections.Generic; using UnityEngine; public class Laser_move : MonoBehaviour { private float DivNum = 40;//分割数 private float Counter = 0f;//レーザー進行フレーム用 private float u = 0f;//ベジェ曲線位置用 private float P0x = 0f; private float P0y = 0f; private float P0z = 0f; private float P1x = 0f; private float P1y = 0f; private float P1z = 0f; private float P2x = 0f; private float P2y = 0f; private float P2z = 0f; private float P3x = 0f; private float P3y = 0f; private float P3z = 0f; private float P01x = 0f; private float P01y = 0f; private float P01z = 0f; private float P12x = 0f; private float P12y = 0f; private float P12z = 0f; private float P23x = 0f; private float P23y = 0f; private float P23z = 0f; private float P02x = 0f; private float P02y = 0f; private float P02z = 0f; private float P13x = 0f; private float P13y = 0f; private float P13z = 0f; private float P03x = 0f; private float P03y = 0f; private float P03z = 0f; public void Create_P3xyz(float x, float y, float z)//目標座標生成 { P3x = x; P3y = y; P3z = z; } void Start() { transform.rotation = Quaternion.Euler(90, 0, 0);//画像回転 P0x = 0f;//ベジェ曲線発生位置x P0z = 0f; P0y = 0f; P1x = Random.Range(-13.0f, 13.0f);//ベジェ曲線下側の目標座標x P1y = Random.Range(-13.0f, 13.0f); P1z = Random.Range(-13.0f, 13.0f); P2x = Random.Range(-13.0f, 13.0f);//ベジェ曲線真ん中付近の目標座標x P2y = Random.Range(-13.0f, 13.0f); P2z = Random.Range(-13.0f, 13.0f); Create_P3xyz(Laser_Create.x, Laser_Create.y, Laser_Create.z);//目標座標（クリックした位置） } void Update() { u = (1.0f / DivNum) * Counter;//ベジェ曲線の位置を移動させる P01x = (1.0f - u) * P0x + u * P1x; P01z = (1.0f - u) * P0z + u * P1z; P01y = (1.0f - u) * P0y + u * P1y; P12x = (1.0f - u) * P1x + u * P2x; P12z = (1.0f - u) * P1z + u * P2z; P12y = (1.0f - u) * P1y + u * P2y; P23x = (1.0f - u) * P2x + u * P3x; P23z = (1.0f - u) * P2z + u * P3z; P23y = (1.0f - u) * P2y + u * P3y; P02x = (1.0f - u) * P01x + u * P12x; P02z = (1.0f - u) * P01z + u * P12z; P02y = (1.0f - u) * P01y + u * P12y; P13x = (1.0f - u) * P12x + u * P23x; P13z = (1.0f - u) * P12z + u * P23z; P13y = (1.0f - u) * P12y + u * P23y; P03x = (1.0f - u) * P02x + u * P13x; P03z = (1.0f - u) * P02z + u * P13z; P03y = (1.0f - u) * P02y + u * P13y; Vector3 pos = transform.position; pos.x = P03x; pos.y = P03y; pos.z = P03z; transform.position = pos;//レーザー表示座標 Counter += 0.5f;//レーザーの速さ； if (u >= 1.0f) { transform.DetachChildren(); Destroy(gameObject); } } }
全ての座標でZ軸の計算を追加しています。座標(0,0,0)からクリックされた位置にレーザーを発射してクリックした位置に来たらトレイルレンダラーを付けた子オブジェクトを切り離してレーザーを消去しています。

今回はクリックした位置にレーザーを移動させますのでLaser_Create.csも下記のように変更します。

Laser_Create.cs
using System.Collections; using System.Collections.Generic; using UnityEngine; public class Laser_Create : MonoBehaviour { public static float x;//クリック位置x public static float y;//クリック位置y public static float z;//クリック位置z public GameObject Laser_prefab;//Laser_prefabをインスペクターに用意 void Start () { } void Update () { if (Input.GetMouseButton(0))//マウスを左クリックした時 { Vector3 touchScreenPosition = Input.mousePosition;//マウス座標を代入 touchScreenPosition.z = 10.0f;//ScreenToWorldPointを使うための呪文 Camera gameCamera = Camera.main;//カメラ取得 Vector3 touchWorldPosition = gameCamera.ScreenToWorldPoint(touchScreenPosition);//マウス座標をワールド座標に変換 x = touchWorldPosition.x;//クリック位置代入 y = touchWorldPosition.y; z = touchWorldPosition.z; Debug.Log("LeftClick:" + touchWorldPosition);//取得座標表示 Instantiate(Laser_prefab, new Vector3(0f, 0f, 0f), Quaternion.identity);//0,0,0にレーザー生成 } } }

Laser_Tail.csについては14行目を下記のように変更します。
if(time>240)

この状態で再生させるとクリックした場所にホーミングが飛んでくると思うのですが、軌跡が綺麗じゃない（トレイルレンダラーが崩れてしまう）時があるんですよね。

画像のような感じで綺麗に描画されない時があります。
どうやら曲がる角度が急になったりすると崩れてしまうようで、マテリアル変えたりトレイルレンダラーの数値を変えたりしたのですが根本的な解決は自分には出来ませんでした。
一応、トレイルレンダラーの幅を狭くすると目立たなくなるので、とりあえずはこの方法で妥協しようかなぁと思いってます。

トレイルレンダラーの数値Widthを0.1に変更してグラフを画像のように変更します。


マテリアルの画像を↓に変更します。



この状態で再生させるとこんな感じ。

トレイルレンダラーの崩れがかなり軽減されています。もうちょっと太くしたいなーと思いつつ綺麗に見える限界がこの辺かなぁと。
他の対策法としては急な角度がつかないようにするのが良いと思うのですが、良い実装方法が思いつきませんでした。

それと、右クリックしてカメラアングルを動かせるようにするスクリプトはコチラ
CameraRotator.cs
using System.Collections; using System.Collections.Generic; using UnityEngine; public class CameraRotator : MonoBehaviour { // カメラオブジェクトを格納する変数 public Camera mainCamera; // カメラの回転速度を格納する変数 public Vector2 rotationSpeed; // マウス移動方向とカメラ回転方向を反転する判定フラグ public bool reverse; // マウス座標を格納する変数 private Vector2 lastMousePosition; // カメラの角度を格納する変数（初期値に0,0を代入） private Vector2 newAngle = new Vector2(0, 0); void Start() { rotationSpeed.x = 0.2f; rotationSpeed.y = 0.2f; } // ゲーム実行中の繰り返し処理 void Update() { // 左クリックした時 if (Input.GetMouseButtonDown(1)) { // カメラの角度を変数"newAngle"に格納 newAngle = mainCamera.transform.localEulerAngles; // マウス座標を変数"lastMousePosition"に格納 lastMousePosition = Input.mousePosition; } // 左ドラッグしている間 else if (Input.GetMouseButton(1)) { //カメラ回転方向の判定フラグが"true"の場合 if (!reverse) { // Y軸の回転：マウスドラッグ方向に視点回転 // マウスの水平移動値に変数"rotationSpeed"を掛ける //（クリック時の座標とマウス座標の現在値の差分値） newAngle.y -= (lastMousePosition.x - Input.mousePosition.x) * rotationSpeed.y; // X軸の回転：マウスドラッグ方向に視点回転 // マウスの垂直移動値に変数"rotationSpeed"を掛ける //（クリック時の座標とマウス座標の現在値の差分値） newAngle.x -= (Input.mousePosition.y - lastMousePosition.y) * rotationSpeed.x; // "newAngle"の角度をカメラ角度に格納 mainCamera.transform.localEulerAngles = newAngle; // マウス座標を変数"lastMousePosition"に格納 lastMousePosition = Input.mousePosition; } // カメラ回転方向の判定フラグが"reverse"の場合 else if (reverse) { // Y軸の回転：マウスドラッグと逆方向に視点回転 newAngle.y -= (Input.mousePosition.x - lastMousePosition.x) * rotationSpeed.y; // X軸の回転：マウスドラッグと逆方向に視点回転 newAngle.x -= (lastMousePosition.y - Input.mousePosition.y) * rotationSpeed.x; // "newAngle"の角度をカメラ角度に格納 mainCamera.transform.localEulerAngles = newAngle; // マウス座標を変数"lastMousePosition"に格納 lastMousePosition = Input.mousePosition; } } } // マウスドラッグ方向と視点回転方向を反転する処理 public void DirectionChange() { // 判定フラグ変数"reverse"が"false"であれば if (!reverse) { // 判定フラグ変数"reverse"に"true"を代入 reverse = true; } // でなければ（判定フラグ変数"reverse"が"true"であれば） else { // 判定フラグ変数"reverse"に"false"を代入 reverse = false; } } }
このスクリプトをメインカメラにアタッチすれば右クリックでカメラアングルを変更出来るようになります。
このスクリプトは下記サイトさまのを、そのまま使わせて頂きました。
Unity:マウスドラッグでカメラを回転して視点を操作するスクリプト

*******************************************************************
追記
トレイルレンダラーが崩れてしまう問題ですが、マテリアルの画像を太いものに変更すると上手く出来ました。
laser_tailの画像を下の画像に変更してみて下さい。

お好みで下の画像でも良いです。

ファイル名はlaser_tailに変更して使用して下さい。

この画像でマテリアル作って表示すると、綺麗に表示されるようになりました。

私は勝手に勘違いしていて、画像は小さく（細く）すれば良いと思っていたのですが、画像は大きく（太く）作っておいてトレイルレンダラー側の設定で太さを調整するのが正解のようです。
マテリアルのShaderの設定もAlpha BlendedよりもAdditiveの方が良い感じな気がします。