Shader Graphの超入門レシピ その6～頂点を波のように動かしてみる～
前回の記事
頂点を動かす
シェーダーグラフでは色情報のみではなく、頂点の座標も操作することができます。今回はその機能を使用してうねうねと動くPlaneを作ってみましょう。
使用する素材はこちらからお借りました。
エドゥアール・マネの代表作「フォリー・ベルジェールのバー」です。背後の鏡に映ったバーメイドと紳士の位置関係が物議を醸しだした名画です。興味のある方は調べてみてください。
今回のサンプルの完成形はこんな感じです。
ベースとなるシェーダーの作成
「VertexAnimation」という名前のUnlit Graphを新規に作成します。ノードエディタを開いたらMain Preview→右クリック→Custom Mesh→Planeに変更しておきましょう。
次に「Positionノード」を追加します。このノードを使用することでSpaceに指定した座標空間から頂点またはフラグメントの値を取得します。今回のサンプルではSpaceにObjectを指定しておきます。
この頂点のX位置を使用して高さを計算します。試しに次のようなノードを組んでみましょう。
追加したノードは「Splitノード」「Sineノード」「Combineノード」の３つです。特に「Splitノード」と「Combineノード」はとても使い勝手が良いノードなのでこれからも頻繁に使用していくと思います。
ここでやっていることは「入力されたXの座標値を元にSine関数を使用してY座標を求める」というシンプルなものです。メインプレビューを見るとPlaneがぐにゃぐにゃしているのが確認できます。無事頂点の座標が変化しているようです。しかし、入力される値が固定なので一切動きません。ということで次は動くようにノードを追加してみましょう。
取得しているX値に時間を加算しそれをSineの入力値としています。こうすることで頂点が波を打つようにうねうねと動くようになります。ここまで仕上がれば、あとはノードを追加して調整していくだけです。
波の速度、波の高さ、波の幅を変えてみる
各計算過程に「Multiplyノード」を挟むことで波の速度、幅、高さを変更できます。
良い感じに調整ができたらテクスチャを追加 & マテリアルを作成し実際にPlaneに張り付けましょう
できました！シンプルですが頂点を動かすことでまた別の表現もできそうですねー。
というわけで本日はここまで！また次回！
