Edited at

【Unity】Shader Graphで円柱の頂点をウニョウニョ動かしてみた

ここ最近、ShaderでUnity上の3Dモデルを動かしてみよう!と思い、シェーダーの勉強をしておりました。

そのときに出会ったのがShader Graphです。Shaderを視覚的に作れるGUIツールで、Shaderのscriptを書くのに四苦八苦している自分には救世主のような存在でした。

ウキウキ気分でShader Graphを使ったのですが、私には頂点をイジるまでも大変でした(^p^)

何とか形になったので、備忘録としてQiitaに投稿させて頂きます!


完成形

ウニョウニョ動く円柱

sg2.gif


全体図

スクリーンショット_2019-02-06_10_32_44.png

イメージとしては、yz軸によって頂点のx座標がsin関数に沿うShaderになります。順を追って説明していきます!


①サイン波のスピードを入力

スクリーンショット_2019-02-06_10_35_50.png

時間×パラメータ値をサイン波に入力することで、速度を表現しています。速度がゼロであれば動かないで動かないですし、大きければ大きいほど俊敏に動きます笑

速度ゼロから徐々に上げていったGifがこちら!

速度をあげると、すばやく左右に動くことが確認できます。

qiitasg1.gif


②サイン波の周波数を入力

スクリーンショット_2019-02-06_10_36_06-2.png

Positionノードからyz領域を取得し、サイン関数に影響するようにします。最終的には①のスピードと②の周波数を足したノードをsineノードに入力すれば、所望の動きが得られます。

周波数をゼロから徐々に上げていったGifがこちら!

周波数をあげると、波1つ単位の幅が狭まっていることがわかります。

qiitasg2.gif


③速度+周波数をx軸にaddして完了!

スクリーンショット_2019-02-06_10_37_05.png

①と②のノードを足したモノをsineノードに入力します。そして、入力した値にパラメータを乗算することで、波長の大きさを表現できます。

最後に本来の頂点のx座標(positionノードのx座標)に、サイン波を足して、出力になるpositionに打ち込めば完成です!


+αした動き

振り子のように動く円柱

sg3.gif

y座標の根本が動かないようにしたい感じですね。

こちらも簡単に紹介します!


波長にy座標を関係させればOK!

スクリーンショット_2019-02-06_11_15_33.png

波長のパラメータに、positionノードからy座標を関係させればOKです。そして波長パラメータと乗算すれば完成!

y座標が0であれば、波長ゼロ。y座標が大きくなるにつれて、波長が大きくなる仕組みです。


必ずオフセットは入れること!!!

ここで注意すべきポイントは、オフセットでy座標を+1することです!!!

円柱の場合は、オブジェクトの中心位置が真ん中なので、オフセットを入れないと、円柱の真ん中が動かなくなるだけで変化は見られません。

なので、オブジェクトの全体の位置を+することで、相対的にオブジェクトの中心位置(0,0,0)を下にズラせば振り子のような動きができます。

私はこの事実に気づかず、1.5時間くらい消耗しました(^p^)


最後に

Shader Graphで頂点を動かしたい方はぜひ参考にしてみてください!


参考URL