はじめに
今回はShaderGraphを用いてこんな感じの蝶を作ってみたいと思います！
Shader Graphでやりたかった事がやっとできた！
— はなちる@ゲーム制作 (@hanaaaaaachiru) 2018年11月18日
あとは大量生産の準備をするのみ・・・#Unity pic.twitter.com/iniZZtboBn
環境
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の部分になります。
Positionノード
PositionのSpaceをObjectにすることによってメッシュのピボットを基準とした頂点座標を得ることができます。
簡単にいうと、頂点シェーダーではこれを使いなさいということです笑
Splitノード
上のPositionノードからこのSplitノードにつなげると、RGBがそれぞれXYZ軸を表しています。
これを用いるとY軸だけを動かしたいといったことが可能になります。
Combineノード
ここでSplitによってXYZ軸のようにバラバラにされた情報をひとつにまとめて、元のような頂点情報に復元しています。
これをUnilit MasterのPositionに接続すると頂点シェーダーの完成です！
Planeに蝶を描写する
次はPlaneに蝶を描写していきたいと思います。
ここで「なんでわざわざPlaneでやるの？」と疑問に思うかもしれませんが、Shaderで描写することによってGPUをうまく活用できるので処理が高速にすることができます！
今回はこの蝶の画像を使ってみたいと思います。
画像を表示するのはSample Texture 2D→Stepを用いました。
なんでこんなめんどくさいことをしたかというと、自分で色を変化できるようにしたかったからです。
ここで少し注意点なのですが、Unilit Masterの設定でSurfaceをTransparent，Two Sidedにチェックをしましょう。
・SurfaceをTransparentにすることで透明を描写できる
・Two Sidedにチェックすることで両面描写ができる
このようになるので、忘れずに設定しましょう。
これらを活用して・・・
以上の事を理解できれば、あとはちょこちょこ盛り付けをするだけです。
ここの説明は少しめんどくさいので省きますが、私は以下のようなノードを組みました。
これではじめにに載せたようなアニメーションが実現できました！
さいごに
Shader Graphはこんな簡単に頂点シェーダーを扱えて本当に便利です。
是非ともうまく活用していきましょう！
