はじめに
本記事は 『【年末だよ】Unity お・と・なのLT大会 2022』で登壇した内容の文字起こしとなります。
(諸事情でUnity Learning Materials には掲載されておりません)
動画でチェックしたい方は是非とも以下のリンクよりご確認ください。
概要
ポケモンSVで登場している「テラスタル」の見た目を頑張って再現してみた話です。
見た目については下記ツイートのgifにて
How to再現
結論としては クリスタルシェーダー
と FlatShading
の組み合わせになります。
クリスタルシェーダー
クリスタルシェーダーとは名前の通り「クリスタルっぽい見た目」になるシェーダーのことです。
※名前は今回名付けたもので一般的な用語ではありません
よくダイヤモンドのキラキラした感じとかで利用されます。
今回は海外ニキがYoutubeで公開していたのでそちらを参考にしました。
原理としては「ノイズ画像」と視差オクルージョンマッピングを組み合わせて、Emmision に渡してあげることで
面によってキラキラさせるといった形です。
Flat Shading
フラットシェーディングとは簡単に解説すると、各面の法線をスムージングをかけないでポリゴンを描画する方法です。
詳しくは オモチャラボさんの記事 で解説されてますので、こちらを是非ご覧ください。
課題点
UnityちゃんSDモデルがURP非対応
URPプロジェクトでSDモデルを追加すると全身ピンクの状態になります。
Toon ShaderがBRP(Built-in RenderPipeline)対応でURP非対応なのが原因です。
そのため、UnityちゃんSDに設定されているmaterialを全てURP対応版に変更する必要があります。
検証段階では雑に URPのLit シェーダーを無理矢理適応されることで表示させました。
※商用プロダクト等ではヴィジュアルの調整が必須になるのでこの手法は非推奨です。ヴィジュアルアーティストさんの調整やテクニカルアーティストに専用のToonShader を使うなどして回避した方がおすすめです。
画角によっては、ずれる
今回は3Dモデルのアウトライン表示のやり方の一つである背面法の亜種のような形で実装してます。
つまりクリスタルの方は元のモデルより1.01倍大きくスケールさせてます。
そのため、このスケールの影響で、画角によってはちょっとクリスタルのモデルが浮いているように見えてしまっています(髪の毛の部分などが顕著)。
結晶の厚み
今回は同じモデルをクリスタル化して重ねて表示していますが、わずか 1%大きくなっただけなので結晶感を出すための 結晶の厚み
はかなり薄くなっています。
本家ですと、しっかり厚みのある結晶になっているため、ここに関しては改善の必要があります。
最後に
ライセンス
本件はユニティちゃんライセンス条項の元に提供されています。
資料
本記事の登壇動画は以下から。
また、説明スライドのリンクは以下からアクセスすることが可能です。