VRoidが正式版になったのでQuest版の完全対応手順を考えてみた奴
前提
この記事は
・Blenderにアドオンをインストールして使うことができる
・Blenderで何かしらの物体にテクスチャを貼ることができる
・Unityで素のFBXファイルにマテリアルやシェーダーを設定し、
アバターとしてVRchatにアップロードできる
という方を対象にしていますのでその辺りは割愛します。
はじめに
VRChatのモバイル版、いわゆるQuestクライアントにVRoidモデルを持って行くのはなかなか大変です。
色々と大変な理由はあるのですが、
Quest対応のシェーダーではテクスチャーを透過させられない
衣装やら何やらの形状をテクスチャーの透過部分で表現しているVRoidモデルとの致命的な相性の悪さはこれに尽きます。
眉毛や睫毛は海苔になり、コートの前開き部分には奇っ怪な三角ポリゴンが並び、メガネは白色プラバンと化す・・・。
今回はこれをなんとかする流れが一応できたかなという感じなので記事にしようと思います。
FBXファイルを手に入れる
この章で用意するもの
・VRCSDKと(必要であればDynamicBoneを)導入したUnity
・VRM Converter for VRChat (執筆当時のバージョンはv29.1.0)
・FBX Exporter(PackageManagerから導入するUnity公式アセット）
何はなくともまずVRoidモデルが必要です。
VRoidStudioをダウンロード(執筆当時のバージョンは1.0.1)してきて
適当に作ってください。
冒頭のモブ子ちゃんにメイド喫茶の店員になってもらいました。
・VRoidファイルのダウンロード
注意点として、半透明でなければ成立しないデザインは使えません。
胸元にハートの穴は開けられますが、スケスケのネグリジェは着れない。
そういうことです。
出来たのでVRMモデルとしてエクスポートしていくのですが、
上の画像にあるようにポリゴンやマテリアルの削減絡みはここではすべてオフにしてください。（髪の毛メッシュの統合だけはします）
どうせこの後Blenderに持ち込んで色々やるのでこの段階では素のデータを極力残したままにしておきたいわけですね。
出力したVRMモデルをUnityに取り込み、コンバーターで変換します。
コンバート設定は上の通り、初期状態のまま「複製して変換」としてください。
「あとはアップロードするだけ」という状態になるはずです。
（View Positionだけはここで合わせておいてもいいかもしれませんね）
そしてFBX Exporterが導入されていれば左上のヒエラルキーにあるアバターを右クリックすることでFBXファイルとして書き出す事が出来ます。
保存場所を確定させ、Export FormatをBinaryにします。(ASCIIだとBlenderが読めない)
VRoidのテクスチャはVRMをインポートした段階でVRM Prefabのある辺りに
こんな具合で纏まっているはずです。位置を確認しておきましょう。
かなり駆け足の説明ですが、ここまでの操作は解説などもそこそこある話なので、わからない部分は各自調べてみてください。
Blender作業の準備
この章で用意するもの
・Blender2.93 LTS
・Cats Blender Plugin (執筆時バージョン0.19.0)
・TexTools for Blender（執筆時バージョン1.4.4）
Cats Blender PluginとTexToolsはBlenderアドオンなので適切に導入しておいてください。
TexToolsに関しては元祖が3dsMax用で、Blender2.79版も存在しているので間違えないようにしましょう。（リンクは貼ってありますが）
2021/11/06時点でバージョンが1.4.4、作者がSavMartin氏になっているものを使います。
Cats Blender Pluginで先程出力したFBXファイルをBlenderにインポートします。もしかしたらここでエラーを吐くかもしれませんが、べつだん問題はなかったのでスルーしていきます。
インポートを済ませてテクスチャを表示させるとこうなっているはずです。
明らかに描画が乱れています。
Bodyメッシュの各マテリアルについて、Backface CullingをON、Blend ModeをAlpha Clipに変更してください。微妙におかしな部分も発生するかもしれませんが、ひとまず見れる状態になるはずです。
切り抜き作業に入る前にメッシュをマテリアルごとに分割します。
一応動画を用意しましたが、Bodyメッシュを選択し、Editモードに入り、
左上のメニューからMesh>Separate>By Materialと選択するだけです。
ここまで出来たら一旦保存してこの章は終わりです。
テクスチャを加工する
この章で用意するもの
・GIMP （執筆時バージョン2.10.28）
・Inkscape (執筆時バージョン1.1.1)
用意するものと書きましたがこれらは必須ではありません。
この後の流れをざっくり説明すると、
1.テクスチャの不透明部分を黒く塗りつぶす
2.それをSVG形式のベクターグラフィックスに変換する
3.SVGファイルをBlenderに読み込み、メッシュにする
という3手順が行えれば使い慣れたペイント・ドローツールを使ってもらって大丈夫です。
GIMPであればPhotoshopやFireAlpacaがあれば多分可能ですし
Inkscapeに関してもIllustratorが使えれば（たぶん）代用可能です。
クリスタはSVGでの線画抽出機能があるとかないとか・・・。
ひとまずこの記事ではGIMPとInkscapeでやっていきます。
ここからの手順は次の章で何度も戻って来ることになると思いますので、
手順を把握したらまとめてやっちゃっても大丈夫です。
GIMPをインストールして、これから加工する服のテクスチャを取り込んだら、透明部分を保護し、全体を黒に塗りつぶします。
こうなる
あとはファイル>エクスポートでPNG画像としてエクスポートしましょう。
※補足
この後のInkscape作業において、四隅に透明部分があるとちょっと具合が悪いので元のデザインに影響を与えない範囲で四隅に色がある状態にしておいてください。
次はInkscapeです。インストールした後起動したらようこそ画面的なものが出ると思いますので「新規ドキュメント」を選択して新しいドキュメントを作ってください。
「オブジェクト>整列と配置」「パス>ビットマップのトレース」と選択し
先ほどの画像を余白部分にドラッグして投げ込み、デフォルトのままでOKとすると下の図のような具合になると思います。(ズームはCtrl+ホイール)
設定は上の図の通りに合わせて適用を押すと、パッと見はわかりませんがベクター形式の画像が作成されているはずです。そのまま「整列と配置」タブに入り、図で示したボタンを押して左下隅に合わせます。
何も触っていなければ新規生成されたパスが選択されているはずなので、
今動いた方はパスです。不安なら画面下部に小さく「パス（番号）」という名前が書いてあるのでそこを見て判断してください。
トレース元としたビットマップは不要なので、クリックして選択し、Deleteキーで削除してしまいましょう。（下部の表示が画像 2048x2048とかの方）
「ファイル>名前をつけて保存」で適当な名前をつけてプレーンSVG形式で保存してください。
※補足
画像の隅に透明部分がある画像の場合、変換前と変換後でサイズが変化してしまい、この後の位置合わせが非常に難しくなります。ご注意ください。
またBlenderに戻りましょう。
メッシュを切り抜く
Blenderに戻ってきたら早速分割されたBody.xxxから服のメッシュを探しましょう。見つけたらTops_Baseなど「服」で「元のメッシュ」であることがわかる名前にしておきましょう。
TexToolsを使います。UV Editingレイアウトに変更して、先ほど名前を変更したTops_Baseの頂点編集ができる状態に入ったらキーボードの[A]で頂点をすべて選択してください。そしてUV関係のツールボックスからTexToolsを選択します。
「Create UV Mesh」をクリックすると巨大な板メッシュが現れると思います。動画を確認してください。
※補足
UVメッシュは3Dカーソルの位置に出来てしまうので事前に戻しておきましょう。
全体像を確認したいのでカメラを引いて真上視点にしています。
トップビューに変更するにはテンキーの[7]を押します。
後述するUV展開操作に必須なので必ず[7]でトップビューにしてください。「なんとなく上から」ではダメです。
少々複雑なのでこちらも動画で撮影しましたが、頂点編集モードで枠になっている四角形のどれかの頂点を選択して「Select>Select Linked>Linked」
(選択頂点からつながっている頂点をすべて選択)を行い、
「Face>Fill」で四角形に面を貼り、
頂点をすべて選択してから「UV>Project From View(Bounds)」で
現在の視点から見た配置をUVとして展開しています。面を貼ったのは展開されたUVをテクスチャ一杯に引き伸ばす際、外枠として機能してほしいからです。UV展開が終わったら「Deleteキー>Only Faces」で面を剥がします
最後にマテリアルを割り当ててテクスチャを表示させたら完成です。
気になるならここで外しましょう
UVメッシュを同じ位置に複製してリネーム、片方を非表示にしておき、
表示している方のシェイプキーを削除しておきます。
シェイプキーは「Model」→「UV」の順で消さないとおかしくなるので注意してください。また、複製を行うとカーソルにくっついて来ますが、右クリックで同じ位置に戻せます。
前の工程で作ったSVGファイルをインポートします。
ここでSVGファイルを読み込めるはずですが、もしない場合はインポーターがオフになっているかもしれません。
画像を参考にオンにしておいてください。
インポートしたSVG画像をUVメッシュにぴったり重ねた後、メッシュに変換して押し出しで立体にして透明部分をBooleanで抜きます。
サイズはCTRL+CとCTRL+Vでコピペして揃えます。
そして3Dカーソルを利用することで頂点の位置に持っていきます。
押し出す際はまっすぐ真上に押し出すようにしてください。
Booleanモディファイアでは頂点が重なってると想定通りに抜けないケースがあるので、押し出しが終わったら少し下にずらしておきましょう。
デザインによってはこれで抜けない場合もあります。
BooleanモディファイアのSolver OptionsのHole TolerantをONにするなどすると解決したケースがありました。
Surface Deformモディファイアを用いて切り抜いたメッシュを元の形に戻します。
わたしもこれ以外ではまだ使えていないのでざっくりとした理解ですが、
何かしらの変形を行うメッシュをガイドとして、モディファイアを適用したメッシュを同じように変形させる効果があります。
TexToolで作成したUVメッシュはシェイプキーで展開前の形に戻せます。
ただ、シェイプキーでの変形なので直接切り抜いてしまうとシェイプキーが破壊される危険性を伴います。
なので切り抜くメッシュを別に用意して、それにSurface Deformをかけて変形させようというアプローチなわけですね。
ターゲットを選択して[Bind]を押せば押した時点を基準として変形されます。今回の動画では途中で「Target contains invalid polygons」というエラーが出てしまいました。
ターゲット、今回で言えばTexToolsに出力してもらったUVメッシュに何かしらの問題があったような具合だったので
適当にSubdivision SurfaceのSimpleをかけてポリゴンを分割してみたところ、シェイプキーに影響を及ぼさずに解決できました。
これはもしかしたらもっといい方法があるかもしれないのであったら教えて下さい。
さあ、これで切り抜いたメッシュと元あったメッシュがトポロジーも含めてぴったりとくっついた状態になりました。
切り抜いたメッシュをアーマチュアの子に設定してArmatureモディファイアがあることを確認したら、元の服と選択後、Ctrlを押しながら切り抜いた服を左クリックで選択します。
正しく選択されていればTops_Base(元の服)が濃いオレンジ、UV_mesh Tops_New(切り抜いた服)が薄いオレンジのはずです。
WeightPaintモードに入り、「Weights>Transfer Weight」でウェイトの転送を行います。
Source Layers Sele..を「By Name」にした時点でウェイトの転送は終わってるはずです。(二回目以降はこの画面を出した瞬間に）
ポーズモードにして動作確認をしてみましょう。
動くことを確認した後は元の位置に戻しておくのを忘れないように！
ここまでの作業を図にするとこうなります。
切り抜きはこれで終わりです。あとは元の服やUVメッシュなどを削除して片付けて、透明部分のあるメッシュをすべて同じ方法で切り抜けばOKです。
しかしシェイプキーのある部位についてはこれだけでは足りません。
次の章ではそのあたりを説明します。
※補足
なんか新しいメッシュカクカクしてなぁい・・・？っていう向きについて
メッシュを右クリックしてShade Smoothでツヤツヤになる
Unityにもっていったとき影響あったかどうか忘れたけどいちおうスムーズ化
シェイプキーのあるメッシュの話
VRoidの場合、服にはシェイプキーがないのでここまでの工程で十分でした。しかしまつ毛やまゆ毛、瞳などの部位は表情のためのシェイプキーが存在します。
シェイプキーの詳細については割愛しますが、こいつはメッシュの頂点の数や位置が違うと単純にコピーすることができません。
ただ、先の衣服縫い直しと同じ仕組みでSurface Deformで解決できたのでそのあたりの説明をしていきます。
今回はアイラインを例に取って説明します。
すでに説明済みの部分は端折り、違う点だけ説明します。
動画でもショートカットキーを多用します。
今回は目頭のシワ（？）部分が半透明なので上記の処理を行います。
服などでは使えませんが、肌に密着する部分なので問題ありません。
同様に網タイツなどの表現も裏に肌の色を置けば使えます。ただしその場合は切り抜き範囲を決める黒塗りテクスチャも加工してください。
Blenderのマテリアルの方のテクスチャも加工した方に置き換えておきましょう。
メッシュを開きにしてパスと重ねるところまで来ました。
位置合わせのために置いた四隅の点はもう使わないので削除しましょう。
四隅の点を適当に選択し、つながった部分を選択したらDeleteキーでVertexを削除します。
まだゴミが残ってたのでこれも削除削除
複製して切り抜いてもとに戻してウェイト転送までをサクサクと。
後半でリネームを忘れててあわてて直してるポンコツぶりを確認。
次の動画は理論の説明だけなので実際に行わなくてもいいです。
戻すのもめんどくさいし
ここで初出なのは「変形系のモディファイアによる処理結果はシェイプキーとして保存できる」というコトです。
動画ではそれを利用して元のアイラインのシェイプキー変形にSurfaceDeformで追従した結果を新アイラインのシェイプキーとしてセーブし、リネームするという流れをやっています。
極論これを全シェイプキーに対して行えばシェイプキーの転送は完了します。やってられるか！！！！！（あと絶対どこかでミスする）
というわけで皆の大好きなスクリプトで自動化しました。
みんな好きだよね？
まずは新メッシュを旧メッシュにSurface DeformでBindするのは手動です。
前回見たとおりBindに失敗したらちゃんとエラー吐いてくれますので、
「Unbind」表記になればそれでオッケーです。
そして最上段から「Scripting」タブに移動してください。
間違えて「Sculpting」タブに行きやすいのでよく確認しましょう。・CopyShapekey.txt
動画で使用したスクリプトをDropBoxに上げておきました。
コピペでもDLしてOpenでもいいのでBlenderに読み込みましょう。
ド素人の雑スクリプティングなのでマジでセーブしてください。
選択状態が逆で元メッシュのシェイプキーを破壊してもCRTL+Zで戻せるとは限りませんよ！
処理の流れを一応書いておきますと、
・元メッシュのシェイプキーを有効にして新メッシュの形状を保存
・新メッシュのシェイプキーを元と同じ名前にリネーム
・元メッシュのシェイプキーを無効化して次のシェイプキーに移動
というのを元メッシュのシェイプキーすべてに対して行っているだけです。
どうしてもスクリプトが怖いという人は根性でなんとかしてください。
転送が終わったらもうSurface Deformは使わないのでUnbindして解除します
最後に一応シェイプキーが爆発してないか一通り確認したら元メッシュも削除して大丈夫です。
各パーツにつき切り抜き処理を行った結果がこちらになります。
全パーツリネームはしていますが、処理したのは「_New」が
ついているパーツだけです。
たとえば口内や白目、体や髪などはテクスチャを見て分かる通り
そもそも透明度でカットしている部分がありません。
これらのパーツは触らなくて大丈夫です。
また、前述の服や後頭部の髪には有効なシェイプキーが存在しないので
シェイプキーの転送は行っていません。
テクスチャに何も書き込まれていないまつ毛や、
全体が半透明なレンズ部分なんかは
まるごと消したほうが早いので消します。
伊達眼鏡を絶対に許さない眼鏡っ娘ガチ勢の方は
完全不透明のグルグルメガネテクスチャでも貼っといてください。
裏面を作る
これはデザインによっては必要ない場合もあります。
上の画像はスカートの裏側ですが、Quest版で使えるマテリアルは裏面を表示する機能がありません。
これを解決するには実際に裏側のポリゴンメッシュを作る必要があります。
やりすぎるとポリゴン数が大変な事になるので、あまり気にならない部分はスルーするのも手です。
今回はチョーカー部分と袖とスカートに裏面を作りましょう。
編集モードで裏を作りたい部分の頂点を選択します。
編集モードでMesh>Duplicateで選択メッシュを複製し、右クリックで同じ位置に戻します。さらに選択されたままでMesh>Normals>Flipとすることでポリゴンを裏返します。これで裏地が出来ました。
結合する
早速加工の終わったメッシュを結合しましょう！
すべて選択してCRTL+Jで結合し大惨事になった例
原因はここにあります。
シェイプキー欄の下、UV Mapsの中にUVマップが2つ並んでいます。
UV Project from Viewをやった時に新規作成されたUVマップが
元あったUVマップと名前が違ったせいで起きた悲劇です。
UVマップの名前がUVMapになってるものだけをすべて結合し、
UVマップの名前を揃えてから結合すれば大丈夫です。
マテリアルの数はちょっと大変なことになってはいますが、あとはExportすればUnityに持っていけます。
マテリアルを削減する
さすがに15だか14マテリアルだかは多いので削減する方法も書いておきます
Cats Blender Pluginと連携するMaterial-Combinerを入手し、インストールしておきましょう。
インストールが完了したらCats Blender Pluginでマテリアルの操作が解禁されます。
Optimization内のAtlasを選択し、Generate Material Listをクリックすると現在使用されているマテリアルの一覧が表示されます。
この状態でSave Atlas to..をクリックし、保存先フォルダを選択するとマテリアルがまとめられ、テクスチャもまとめられたものが出力されます、
超便利！
ただしいくつか使えないケースもあります。この後Unityに持っていった際にマテリアルの設定で色を変化させたり、専用のシェーダーを用いる部分は当然まとめてしまうと出来なくなります。
（エミッションでゲーミング発光・メガネレンズの反射など）
また、繰り返しテクスチャが用いられているマテリアルも単純にまとめるとおかしくなります。
こういうUVになっているマテリアルはまとめずに使う方が無難です。
（自分でUVを並べて適切に設定すれば使えなくもない）
保存先にはこんな具合でまとまったテクスチャがあるはずです。
これは後ほどUnityに突っ込んで使いましょう。
ここまですべて終わったら、
・ExportしたFBXファイル
・まとめたテクスチャ
・元あったテクスチャから取り出した髪テクスチャ
の3つをUnityに持っていきましょう。
Unityでセットアップする
ここはもう解説がいくらでもあると思うのでサクサク行きます
ただいま・・・！
一気に行きます
Wead/Write Enabledはチェックを入れ忘れると21億ポリゴンになります
HumanoidのJaw(あご）はボーンでのリップシンクに使うボーンで、
VRoidの場合はシェイプキーでリップシンクを行うため
あごボーンはそもそも存在しないのですが、自動割当の関係上
前髪のボーンが割り当てられてしまっているので消す操作です。
Blenderで改変したモデルはだいたい自動割当されるので消しましょう
追加したVRC Avatar Descriptorの各項目はこの記事の一番最初に追加したVRMと同じ数値に設定します。
右クリックからのCopy Componentでコピーしてきてもいいですが、
「LipSyncのFace Mesh」「Eye LookのLeft/Right Eye Bone」
「EyelidsのEyelids Mesh」の3つは今追加したQuest版メッシュ内のものに置き換えましょう。忘れがち。
Playerble LayersのFXやExpressionsは生成されたものをそのまま使うことが可能です。
もちろんここから改変していくことも可能です。
あとは普通にアップロードする方法を調べてください。お疲れ様でした！
おわりに
思った以上に書くことが多く、ざっくり4日ほどはかかってしまいました。
VRoid Studio正式版ということで、
この機会に触ろうという方も多いと思います。
以前よりまゆ毛やアイラインを直接テクスチャに書き込むというスタイルでのQuest対応プロトコルはありましたが、
アイラインテクスチャとフェイステクスチャの形状が違うので絵心のないわたしにはどうにも上手くマージできず・・・。
Blenderを普段使わない方にはハードルの高い作業だったとは思いますが、
正しい手順を踏めば何度でも同じように対応させられる・・・はずです。
この記事があなたのVRoidを拡張する助けになれば幸いです。