Shader Graphで円を伸縮させる

はじめに

自作でコンテンツを作成しているが、海面を表現するものが必要になった。
AssetStoreに自分が求めるものを見つけてShaderGraphを使っており、色々いじくってみたが、どうしてこんな形になるのが全く理解できなかったので、１から勉強してShader Graphをいじれるようにする。

円が伸縮し以下の機能を追加する

前回HDRPのセットアップ方法を投稿してます。手っ取り早くセットアップウィザードを実行して環境を整えましょう。

Shader Graphを作成する。

Shader Graphでノードを作成して図の配置をします。

これだけだと味気ないのでどのような動きをしているのか説明します。

UV座標のアクセスを提供する。

UV座標とは3DCGモデルをテクスチャーマッピングするときに、貼り付ける位置や方向、大きさなどを指定するために使う座標系のこと(CG用語辞典から一部引用)。

簡単に言えばShaderを使う為に座標を提供します。

入力Aおよび値Bの※ユーグリッド距離を返す。入力A・Bはお互いに同じ要素でないと動かない。中心点の算出で使用した。

※2点間の直線距離

入力Aと入力Bの掛け算。配色・テクスチャーの合成等色々できる。今回は時間軸との組み合わせで伸縮間隔調整を行う。

サイン波を描く。Timeノードとの組み合わせで点滅表示ができる

入力Aから入力Bを引く。ここでの入力値Bは半径の最大値を指定している。

入力Inの値が入力Edgeの値以上の場合は1を、それ以外は0を返す。色の境界がはっきりする。

1から入力Inを引いた結果を返します。主に反転処理に使われる。円を伸縮させるだけならいらない機能だが、勉強の為に追加をした。

Timeパラメーターをシェーダー上で利用できる。

Shader Graphは今まで弄ったことない機能で、実際にやってみると色々めんどくさいことがあったが、使っていくうちに表現の幅が広がって上達の実感は少しだが出てきた。

これはまだ基本中の基本なので、色々な表現に挑戦します。