UnityChanの目がピカピカ光っちゃった原因を突き止めた。[WebGL]

2023 3/22 追記

インポートしなおしたらTransparencyがOnになっていました。つまり私の設定ミス。どこかで自分が弄ってしまっていたみたい..

気づけなかった悔しい。バグ遭遇時の対処の優先順位を今度からつけるべきだなと反省しました。

はじめに

Unity Chanを使ってワンボタンのゲームを作成したときに目の部分がピカピカするというバグに遭遇。

WebGLでしか確認できなかった。原因の特定に時間が掛った & 特殊なパターンなのでメモ。

問題のシーン

原因となる画像
  • WebGLの実機検証: Chromeで確認 (他ブラウザは未検証)
  • 問題の目の部分が一度他のオブジェクトによって隠れた後の描画では謎の光は出現しない

原因

原因はClippingだった。Clippingが上手く処理できずに、背景の光 (Directional Light, Unity-Chan用のLight どちらか片方のみにしても光っていた)が白目の部分を通過していることによって生じていた。

※ Unity Chanのようなアニメ系のモデルは眼球という球メッシュが存在しないことがある。人間でいう黒目の部分を表現するメッシュと、目が入る器のようなもので構成されている。そのため黒目部分が表示されているからと言って背景からの光を遮るわけではない

以下が何も設定を変更していないUnity Chanの顔。特に目元に注目。(記事を書いている際に思ったが、白目じゃない時点で描画が正しくない? 今度検証してみます。)

この時点での目のマテリアルの設定は以下

そして目のテクスチャは以下

この周りの緑の部分がClippingにより取り除かれている。そしてClippingによって取り除かれた部分に黒色のマスクが掛かっている。

試しにTransparencyをOnにしてみる。

Shader Settings >> TransparencyをOnにしてみる

予想通り、周りの黒い部分がなくなっている。

ではClippingの設定をOffにしてみると

ClippingをOffにしてみる

テクスチャの黄緑の部分が切り抜かれなくなった。

この状態でビルドし確認してみると上手くいった。

上手くいきました。目が黄緑色なのが分かる。黄緑色の目が案外合っていてビックリした。

UnityChanの目はEyeとEyeBaseで構成されている。EyeBaseは目の後ろの白い部分のメッシュである。EyeBaseが存在することを考えるとTransparencyをOnにするのが正しい選択かもしれない。

コメント

タイトルとURLをコピーしました