This page is intended for users in Japan(English). Go to the page for users in United States.

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/

下記のような手順で設定を進めていきます。

1.Unity2018.3にてプロジェクトを作成

2.LWRPを設定(PackageManagerからLWRPとShaderGraphをインストール)

3.ShaderGraphのシェーダを作成

4.シェーダグラフ編集ウィンドウを起動


さて、ShaderGraphで何を作ろうかと思い、ふとuGUIのマスクが思いついたので作っていきます。

その前にuGUIのマスクを簡単にご説明。

1.画像を切り抜くマスク画像を用意

2.uGUIのImageにマスクを当てる

3.結果はこんな感じです

うーん、輪郭線がちょっと・・・。

以前、このような問題をシェーダを使って解決しました。
今回はShaderGraphで作ったシェーダを当てて解決してみたいと思います。

さっそくですが、今回作成したShaderGraphの中身はコチラです。


マスクの範囲を作って、それを Unlit Master の Alpha と AlphaClipTresholdに繋げます。
マスク処理だけならもっとシンプルだったのですが、触っているうちに楽しくなり、少し機能を追加してしまいました。
追加した機能は、「画像の拡大縮小」と「画像の配置調整」の2点です。

まずは、マスク処理に関して。

・Stepノードを使ってUVノードからRとGを取り出し、それをCombineノードに渡します
・Combineノードの結果をDistanceノードに渡して円を作成します
・SmoothstepノードにDistanceノードの結果を渡してマスクの範囲を調整します
・Subtractノードで範囲を反転したらマスクの処理は完成です
・マスクの範囲をInspecotor上で調整したかったので、Sliderノードを作成しSmoothstepノードと繋げプロパティ化しました

結果はコチラ。

プロパティの MaskSize でマスクの範囲が調整できます。

続いて、画像まわりに関して。

・まず、Inspecotor上で調整できるようにSliderノードを3つ作ってプロパティ化します
・画像の配置調整は、Tiling And OffsetノードのOffsetを使います
・単純にOffset値を先ほど作成したプロパティで繋いでるだけです
・画像の拡大縮小は、Tiling And OffsetノードのTilingを使います
・1で通常、0.5で2倍のサイズになるので、NegateノードとRemapノードを使って実装しました
・結果、0.5で通常サイズ、1で2倍サイズになります

結果はコチラ。

プロパティの PosX と PosY を変更すると画像の配置位置が変わります。
プロパティの ImageSize で画像が拡大縮小できます。

最後に比較結果になります。


きれいにマスクで抜けただけでなく、Inspecotorでプロパティを調整するだけで色々変化するので楽しいです!
ShaderGraph楽しいぃーよぉーぉおーーー!!!(あまりの楽しさにテンションが上がる)
これからもShaderGraphの習得に励んでいきたいと思います!

今後も若手メンバーだけでなくシニアメンバーの頑張る姿もお送りいたします。
それでは次回もお楽しみに!



株式会社ポケラボ's job postings
Anonymous
Picture?height=40&width=40
12036399 906957906051253 7254629203306210773 n
Picture?height=40&width=40
B9e28606 f26d 472e 936e 104eea8eb2f9?1553177498
4 Likes
Anonymous
Picture?height=40&width=40
12036399 906957906051253 7254629203306210773 n
Picture?height=40&width=40
B9e28606 f26d 472e 936e 104eea8eb2f9?1553177498
4 Likes

Weekly ranking

Show other rankings
If this story triggered your interest, go ahead and visit them to learn more

Page top icon