※ これは 2018/12/07 Unity 2018.3.0b12 時点の情報です
最新版では動作が異なる可能性がありますのでご注意ください
前回インストールした軽量レンダリングパイプライン、ただ描画負荷をおさえるだけでなく、UI 操作でグラフィック処理が作成できるシェーダーグラフというものが使えるようになります
そこで、今回はこのシェーダーグラフを利用して、運動軌跡の予測線をアニメーションさせてみたいと思います
スポンサードリンク
まずは Unity Editor のメニュー [Window]-[Package Manager] から Package Manager を開きます
表示されるパッケージライブラリ一覧の中から、「Shadergraph」を選び、インストール
インストールが終わったら、Project ビュー上で、Assets 直下に右クリックメニューからライティング付与なしの 「Unlit Graph」を選んで Shader を追加
名前は UV Scroll にしました
この UV Scroll を選んで Inspector ビューから「Open Sahder Editor」ボタンを押下し編集ウィンドウを開きます
この編集ウィンドウで作るシェーダーグラフは下記のようなグラフ状のノード構成になります
左から右へ向かって作っていきます
まずは 右クリックメニュー [Create Node] を選んだのち、[Input] - [Basic] - [Time] と選び、Time ノードを追加
同様に、[Create Node]、[Channel] - [Combine] で Combine ノード、[Create Node]、[UV] - [Tiling And Offset] で Tiling And Offsetノードを作成します
Time ノードの Time(1) を Combine ノードの R(1)、Combine ノードの RG(2) を Tiling And Offset ノードの Offset(2) にドラッグで接続し、 Tiling And Offset ノードの Tiling(2) に接続されている x を -1 にします
ここまでで、１秒間（Time(1)）に左から右へ一周スクロールさせる（x: -1）という処理になります
次に [Create Node]、[Input] - [Texture] - [Sample Texture 2D] で Sample Texture 2D ノードを追加したのち、UV Scroll のヘッダのあるパネル右上の「＋」ボタンより、Texture2D を選択してプロパティとして追加、Default の画像として dashline を選択します
この Texture2D の角丸部分をマウスでつかんでドラッグドロップすれば入力ノードとして追加できるので、これを Sample Texture 2D ノードの Texture(T2) にドラッグ接続します
さらに、Tiling And Offset ノードの Out(2) を Sample Texture 2D ノードの UV(2) へ、Sample Texture 2D ノードの RGBA(4)、A(1) を Unlit Master ノードの Color(3)、Alpha(1) にそれぞれドラッグ接続します
これで、dashline の点線画像が左から右へスクロールする処理ができるはず
最後に、予測線を描画するのに利用していた Simulation マテリアルを選択、Shader を作成した UV Scroll に切り替えて、Texture2D は dashline の画像が選択されるようにします
ここまでできたら動作確認！
できました！Shader でスクロールさせているので、CPU ではなくグラフィックボードをうまく活用できるし、予測線がどんなに曲がってもしっかりスクロールできていますね