VRChatでマントやロングコートなど丈の長い服を着ているとき、「服の裏地が透明になってしまう」という問題が発生しました。
自分視点では問題がないのですが、フレンドが撮影した写真だとコートの裏地が描画されていないという状態です。
いろいろ解決方法を模索した結果、「MeshFlipper」というツールで解決することができたので記録しておきます。
なぜ服の裏地が描画されないのか？
3Dモデルの多くは、片面レンダリングと呼ばれる標準的な手法で描画されています。
ポリゴンの「表面」側だけを表示し、反対側（裏面）は表示しないことで描画負荷を軽減しているのです。たとえば、体にぴったりと密着したスーツのような服の場合は、外側だけ見えれば問題なく、わざわざ見えない内側を描画する必要はありません。
ところが、コートやマントのような丈の長い衣服は事情が異なります。
キャラクターが移動したり、特定の角度から眺めたりすると、足元付近でコートの裏面が視界に入るような場面があります。ですが、裏面なので描画されません。他人視点や特定のカメラアングルでコートの内側を見たとき、裏地が存在しないように透けて見えてしまう原因です。
この問題を根本的に解決するには、「両面を表として描画させる」必要があります。そして、これを手軽に実現してくれるツールが、MeshFlipperです。
MeshFlipperとの出会いと実装手順
この問題を解決する方法を探していた際に、下記の記事のなかで「MeshFlipper」というツールの存在を知りました。
Android(Quest)対応方法マニュアルAdvanced!!
MeshFlipperは、Unity上でメッシュを両面表示可能な状態へ簡単に加工してくれる優れものです。
基本的な手順は以下の通りです。
- MeshFlipperのインポート：
MeshFlipperのスクリプト(MeshFlipper.cs)をUnityのAssetsフォルダへ入れます。 - 対象メッシュを選択：
VRChatアバターに使用されているSkinnedMeshRendererやMeshFilterを持つオブジェクトを選び、裏側が透ける服パーツを指定します。 - MeshFlipperウィンドウの起動：
Unityメニューのfum1/Mesh Flipperからウィンドウを開きます。 - オプション設定：
TwoSides：両面化することで裏面も描画可能になります。Flip：法線を反転して裏面を表にする処理も可能です。
多くの場合は
TwoSidesオプションを選択すれば裏地問題が解決します。 - 「Create Mesh」を実行：
新たな二重化メッシュが生成・適用され、裏側も正常に表示されるようになります。
MeshFlipperのコードから分かる裏地透明化問題の原因
MeshFlipperのコードを確認すると、内部でメッシュ法線の反転や頂点情報の二重化を行っています。片面しか存在しなかったメッシュに対 して、裏面用のポリゴンを新たに作り出し、両面を表示できるようにするのです。
- 法線の反転：元のメッシュ法線を逆向きにし、裏側から見たときでも面が「表面」として機能するようにします。
- 二重化：頂点・UV・ボーンウェイトなどを増やし、片側は通常、もう片側は反転された法線を持つため、表裏両面を描画可能なメッシュが形成されます。
要するに、もともと「表側しかない」服に裏側を追加してあげることで、透明に見えていた裏地を正しく描画できるようになる、という仕組みのようです。
これをワンクリックで簡単に実装できるので、丈の長い服を扱う場合に知っておくべきツールだなと思いました。
まとめ：裏地が透ける場合はMeshFlipperを試そう
VRChatで服の裏地が透けてしまう問題に悩んでいる場合は、MeshFlipperを使ってみてください。数回の操作でメッシュが両面化され、裏地も問題なく表示されるようになります。
MeshFlipperはfum1さんのBOOTHで無料配布されています。同じ問題に悩んでいる方は、是非試してみてください。