Creative Blog #4 ShaderGraphでマスク処理
こんにちは。ポケラボクリエイティブ部です。
クリエイティブ部の若手メンバーの頑張ってる姿をお伝えしてるCreative Blogですが、スキルアップに励んでいるのは若手メンバーだけではありません！
中堅やベテランのシニアメンバーも日々スキルアップに励んでいます。
今回は、クリエイティブ部のシステムサポートチームのシニアエンジニアが、UnityのShaderGraphの習得に励む姿をお送りします。
その前に、クリエイティブ部に所属するシステムサポートチームに関して簡単に説明します。
システムサポートチームとは、「クリエイティブ部をシステム面でサポートし、創造力の最大化を図る」という目標のもと、主に下記の業務を行っています。
・制作したキャラクターや演出がベストパフォーマンスでアプリに反映されるための実装サポート
・テクニカルアーティスト業務（制作支援ツールの開発と保守、シェーダ開発など）
・アニメーション制作ツールの新機能の習得サポート
・バージョン管理システムのトラブルの解消
前回と同様、制作者のコメントを交えながらお送りします。
昨今、見た目のリッチ化が進みシェーダによる表現力の向上が求められるようになりました。
ただし、シェーダの習得は中々難しくハードルが高いというのが率直な感想です。
そんな中、ノードベースでシェーダが作れるShaderGraphなる機能がUnityからリリースされたので少し触ってみました。
ShaderGraphに関しては下記のサイトをご参照ください。
https://blogs.unity3d.com/jp/2018/02/27/introduction-to-shader-graph-build-your-shaders-with-a-visual-editor/
下記の手順で進めていきます。
１.Unity2018.3にてプロジェクトを作成
２.LWRPを設定（PackageManagerからLWRPとShaderGraphをインストール）
３.ShaderGraphのシェーダを作成
４.シェーダグラフ編集ウィンドウを起動
さて、ShaderGraphで何を作ろうかと思い、ふとuGUIのマスクが思いついたので作っていきます。
その前にuGUIのマスクを簡単にご説明。
１.画像を切り抜くマスク画像を用意
２.uGUIのImageにマスクを当てる
３.結果はこんな感じです
うーん、輪郭線がちょっと・・・。
以前、このような問題をシェーダを使って解決しました。
今回はShaderGraphで作ったシェーダを当てて解決してみたいと思います。
さっそくですが、今回作成したShaderGraphの中身はコチラです。
マスクの範囲を作って、それを Unlit Master の Alpha と AlphaClipTresholdに繋げます。
マスク処理だけならもっとシンプルだったのですが、触っているうちに楽しくなり、少し機能を追加してしまいました。
追加した機能は、「画像の拡大縮小」と「画像の配置調整」の２点です。
まずは、マスク処理に関して。
・Stepノードを使ってUVノードからRとGを取り出し、それをCombineノードに渡します
・Combineノードの結果をDistanceノードに渡して円を作成します
・SmoothstepノードにDistanceノードの結果を渡してマスクの範囲を調整します
・Subtractノードで範囲を反転したらマスクの処理は完成です
・マスクの範囲をInspecotor上で調整したかったので、Sliderノードを作成しSmoothstepノードと繋げプロパティ化しました
結果はコチラ。
プロパティの MaskSize でマスクの範囲が調整できます。
輪郭も綺麗ですね。
続いて、画像まわりに関して。
・まず、Inspecotor上で調整できるようにSliderノードを３つ作ってプロパティ化します
・画像の配置調整は、Tiling And OffsetノードのOffsetを使います
・単純にOffset値を先ほど作成したプロパティで繋いでるだけです
・画像の拡大縮小は、Tiling And OffsetノードのTilingを使います
・1で通常、0.5で２倍のサイズになるので、NegateノードとRemapノードを使って実装しました
・結果、0.5で通常サイズ、1で２倍サイズになります
結果はコチラ。
プロパティの PosX と PosY を変更すると画像の配置位置が変わります。
プロパティの ImageSize で画像が拡大縮小できます。
最後に比較結果になります。
きれいにマスクで抜けただけでなく、Inspecotorでプロパティを調整するだけで色々変化するので楽しいです！
ShaderGraph楽しいぃーよぉーぉおーーー！！！（あまりの楽しさにテンションが上がる）
これからもShaderGraphの習得に励んでいきたいと思います！
今後も若手メンバーだけでなくシニアメンバーの頑張る姿もお送りいたします。
それでは次回もお楽しみに！