はなちるのマイノート

Unityをメインとした技術ブログ。自分らしくまったりやっていきたいと思いますー!

【Unity】ShaderGraphで頂点シェーダーを用いて簡単な蝶を動かしてみた

はじめに

今回はShaderGraphを用いてこんな感じの蝶を作ってみたいと思います!


環境

Unity2018.3.0b7
Shader Graph version4.1.0
Lightweight RP version4.1.0

下準備

今のところUnityでShader Graphを使おうとすると少しだけ準備をしなければなりません。

まずはPackage ManagerからShader GraphとLightweight RPをダウンロードしましょう。
こちらの記事が参考になると思います!
kiliware.hateblo.jp
kiliware.hateblo.jp

頂点シェーダーを触ってみよう

今回はUnlit Shaderを使っていきたいと思います。

頂点シェーダーで重要なポイントは下の図のPosition→Split→Combineの部分になります。

f:id:hanaaaaaachiru:20181119223302p:plain

Positionノード

PositionのSpaceをObjectにすることによってメッシュのピボットを基準とした頂点座標を得ることができます。
簡単にいうと、頂点シェーダーではこれを使いなさいということです笑

Splitノード

上のPositionノードからこのSplitノードにつなげると、RGBがそれぞれXYZ軸を表しています。
これを用いるとY軸だけを動かしたいといったことが可能になります。

Combineノード

ここでSplitによってXYZ軸のようにバラバラにされた情報をひとつにまとめて、元のような頂点情報に復元しています。
これをUnilit MasterのPositionに接続すると頂点シェーダーの完成です!

Planeに蝶を描写する

次はPlaneに蝶を描写していきたいと思います。
ここで「なんでわざわざPlaneでやるの?」と疑問に思うかもしれませんが、Shaderで描写することによってGPUをうまく活用できるので処理が高速にすることができます!

今回はこの蝶の画像を使ってみたいと思います。

f:id:hanaaaaaachiru:20181119224543p:plain


画像を表示するのはSample Texture 2D→Stepを用いました。
なんでこんなめんどくさいことをしたかというと、自分で色を変化できるようにしたかったからです。

f:id:hanaaaaaachiru:20181119225450p:plain


ここで少し注意点なのですが、Unilit Masterの設定でSurfaceをTransparent,Two Sidedにチェックをしましょう。
・SurfaceをTransparentにすることで透明を描写できる
・Two Sidedにチェックすることで両面描写ができる
このようになるので、忘れずに設定しましょう。

これらを活用して・・・

以上の事を理解できれば、あとはちょこちょこ盛り付けをするだけです。
ここの説明は少しめんどくさいので省きますが、私は以下のようなノードを組みました。

f:id:hanaaaaaachiru:20181119230213p:plain


これではじめにに載せたようなアニメーションが実現できました!

さいごに

Shader Graphはこんな簡単に頂点シェーダーを扱えて本当に便利です。
是非ともうまく活用していきましょう!