Creative Blog #4 ShaderGraphでマスク処理

こんにちは。ポケラボクリエイティブ部です。

クリエイティブ部の若手メンバーの頑張ってる姿をお伝えしてるCreative Blogですが、スキルアップに励んでいるのは若手メンバーだけではありません！
中堅やベテランのシニアメンバーも日々スキルアップに励んでいます。

今回は、クリエイティブ部のシステムサポートチームのシニアエンジニアが、Unity2018の新機能である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で２倍サイズになります

結果はコチラ。