Unity のシェーダーグラフで描画する軌跡をアニメーションさせる

※ これは 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) にそれぞれドラッグ接続します