MagicaVoxelでVRChatのボクセルアバターを起こす備忘録 2020年春

はじめに

f:id:hageatama-:20200412102549p:plain

当初は2019年春に、新発売のOculus QuestでVRChatにも対応(ただし5000ポリゴン制限)という告知があったのを端に発します。　当時、完全に3DモデリングとUnityの知識0から、自前アバターで降臨すべく四苦八苦して、1年越しで実現した記録です。

ephtracy.github.io

その骨子は、操作も直感的で、地雷も少なく、簡単に3Dモデリングを実現可能な神ツール"MagicaVoxel"ですね。これでドット絵風モデル作って、骨入れて、VRChatにアップロードするまでです。

当初は、検討の過程で使ったBlender、メタセコ、XISMO2などの感想も入れ込みながら書いてましたが、もうボクセルアバターについてだけでいいだろ、となっています。そんなわけで、ボクセルアバターについて集合知を高めていって、巨人の肩乗っていきましょうという備忘録も兼ねたフロー集です。

ちなみに、3Dモデリングはソフトのバージョン、アセット、形式、その他もろもろで地獄のような派生をしていき、「ここで〇〇を選びます」→「そもそも〇〇が無いんですけど……(8時間経過)」とかがざらにある世界なので、この記事も信じすぎないように！

行き着いた作業フロー

assetstore.unity.com

MagicaVoxel → Voxel Importer → Unity本体→VRChat

要するに「Voxel Importerに30ドルさえ払えば大体の問題は解決する！」というのが本旨。この30ドルを払えない人はお帰りください。

環境はWindowsでもMacでもいけると思います(去年はMacbookPro2017で作業していたので)が、実質的にWindows一択かと。

ボクセルアバター、素晴らしい

ド素人がオリジナルアバターを起こす上で最大の壁になるのが、前述した5000ポリゴン制限です。ただでさえ難しい3Dモデリングで縛りプレイを強要されるてるわけです。そんな中、マインクラフト的モデリングによるボクセルアバターは、以下のような利点があるので、もはやこれしかないという手法です。

自然とポリゴン数を削れる
直線ベースなので他ソフトでの微調整も容易
無理なくデフォルメが効くので絵心無くても可愛く作れる
テクスチャ展開も簡単
髪の動き、リップシンク、関節の整合性、衣装の貫通などを考える必要が薄い
細かい手順が省かれるので、ネットの記事通りにやればある程度何とかなる

①《MagicaVoxel》インストール

Mac版、起動してもいきなり黒い画面のみで何も出来なくて戸惑ってる人は、手順ミスってます、それ。

ZIPを解凍したら、一旦アプリファイル本体を別のフォルダに移動させて、再度戻すという作業が必要になるのです。注意表示もされるんですが、何のことかわからず困惑しました。パスをどっかに認識させる作業なんですかね？

②《MagicaVoxel》最初はあまり作り込まない

このあとにも様々な難関があるため、習熟に徹して、棒人間＋αぐらいで一旦手足動くまで作ってみて、改めて作り直した方が結果的に早いと思われます。
レッツスモールスタート！

③《MagicaVoxel》x20 × y20 × z35

f:id:hageatama-:20200412093445p:plain

モデリングの領域設定の目安ですが、最初はx20 × y20 × z35ぐらいからが作りやすいかな、と。ちなみに後述のVoxel Importerというアセットがポリゴン削減上手なので、私は＋10～15ずつしても2000ポリゴン切ってますが、Blenderに普通にエクスポートするとポリゴン数が数倍に跳ね上がります。

④《MagicaVoxel》各種操作

これ単体の解説は日本語でもいくつも見られるのでご自分で調べてください。

アドバイスとしては、左右対称にすると本当に早く作れるので、どんどんMirror機能で楽していきましょう。Face単位の編集とMirror使えればだいぶ楽。

⑤《Unity》インストール

一般的な話なのでインストール方法については割愛しますが、一点だけ要注意事項。

VRChatはUnityの最新バージョンを入れても使えません。そして、今月2020年4月から対応しているUnity Editorのバージョンが、Unity2017からUnity2018へと久しぶりに上がりました。

ここが混ざっていると詰むので、新規の人は必ずUnity2018.4.20f1を入れましょう。逆に、Unity2017.4.28f1を説明している記事等があったら古い記事なので信じすぎないようにしましょう。

⑥Voxel Importer

ここまでチラチラと名前が出てましたが、要はUnityにMagicaVoxelの独自ファイル専用に扱うためのアセット(追加機能？)です。独自形式のファイルを直接ロードして、Unity上でポリゴン最適化やボーン調整が出来ます。異様に出来が良くてビビります。

これのおかげでBlender使わなくて済むようになって、慣れたらこれ以降の作業を30分で終えられるようになるけど、将来的な技術習得という観点ではBlenderで早めに苦しんでおいた方がいい気もする。難しい。

↓ 便利さの比較としてわかりやすい記事ですが、古い記事なので要注意。

rocinante0o.hatenablog.com

その便利さの一端として、ボクセルの取り扱いがあります。

すごく感覚的な話ですが、一般的な3Dモデルのポリゴンの自動調整って、要はJPEGの量子化みたいなもんなので、一般的な写真ならJPEG化するだけでいい感じに削れますが、ドット絵に適用するとぼやけて良さが消し飛ぶアレが、ボクセルでも発生するわけです。

一方、ボクセル操作に最適化されたVoxel Importerなら、綺麗に面単位でポリゴン分けてくれるわけです。ポリゴン数削減しつつもボクセルのパキパキ感がそのまま継承されて、本当に最高です。
自動でやってくれて手作業の余地がないので、リテイクがスムーズなのもありがたい。

百聞は一見にしかず。以下の検証画像見れば、ポリゴン分割の綺麗さは一目瞭然かと。

Voxelの頂点数についての話題がTLにあったので自作アセットの検証してみました
検証データは @UteNyan さんのデータを使用させて頂きました、ありがとうございます pic.twitter.com/uiZOkMYXZS
— RAS (@AloneSoftGames) 2016年7月16日

⑦《Voxel Importer》チュートリアル動画

[VRChat] Tutorial to create voxel avatar

字幕オンで日本語対応。

Voxel Importerの公式チュートリアル動画ですが、本当に神で、操作をトレースしたら実際にできてしまうので、動画って素晴らしい。

VRChatに適した形で、.voxファイル読み込んで、サイズ調整して、骨とウェイト付けて、アップロードするまでが細かに解説されています。この通りにやれば出来ますし、出来ない場合は何度も見て、さらっと操作して見逃しているところを探しましょう。

⑧《Voxel Importer》リギング

Unity初めて触るので悩みましたが、動画以外にも、以下の記事を読むと良いかと。ただ、以下の記事はVRChatに最適化した記事ではないので、ベースはチュートリアル動画の通りにやってたほうがいいです。

ohotarupsycho.hatenablog.com

www.hanachiru-blog.com

⑨《Voxel Importer》個人的Tips

ボクセルアバターは比較的頭が大きくなりがちなので、その時は身長自体は若干低めの方が都合がいいです。VRChat上で体積のでかい物体を動かすの、何かと邪魔なので。
非人間的な頭身の場合、VRChatにアップロードする際、「背がshortだよ？」と注意が出ますが、気にせずやっちゃいましょう。
ボーンのポジション調整は文字通り「ヒエラルキー」で進むことに注意。親要素から子要素という関係あり。
ボーンの位置調整はxyzの矢印を掴んで、一方向ずつ調整する。正面から見ているので、奥行き方向にズレてしまうと気付きづらい。
ボーンのウェイトはボクセルアバター特有の関節処理問題があります。具体的には、Voxelだと面単位でカクカク動いて、Vertexだと滑らかな連続的な曲がりになります。この例だと、グラデーションのついていない肩の部分だけ四角を保って動いて、グラデーションついている肘側は繋がって曲がります。使い分けるとGood.
ボーンのウェイト塗りをRectでやるのが楽ですが、正面から塗ってると視差で裏だけ一段抜けたりしやすいです。いろんな方向から見たり、モデルの動きを確認したりして気を付けましょう。