Go to Qiita Advent Calendar 2024 Top
LoginSignup
18
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

VRChatAdvent Calendar 2018

Day 11
@OrotiYamatano(やまだ たいし)inUnityゲーム開発者ギルド

爆速でボクセルアバターを作ってVRChatで動かす方法

Last updated at Posted at 2018-12-10

#まえがき
この記事はVRChat Advent Calendar 2018の11日目の記事です。
昨日の記事は@nyakome306さんによる、VRC PanoramaをGoogle Apps Scriptで活用するでした。

はじめまして！ﾄﾘﾌﾟﾙｱｯﾄ(@himadesuganani)です。
今回はアドベントカレンダーに空きが出来ていたので気まぐれで参加しました。
VRChatではよく見かけるボクセルアバターですが、作るのは面倒だと思う方も少なくないのではないかと思います。
本当は楽に作れるんだよと教えたかったので本記事を作成しました。

#前提条件

Unity5系、Windows10での実装を想定しています。
UnityはUnity2017でも動作は同じだと思いますが、今回は5系で動作確認をしました。
(Unity2017については公式アップデート後、追記予定)
記事閲覧者はUnity初心者を想定してます。

#作業の流れ

  1. ボクセルを作る
  2. リギング(リグを入れる作業)をする
  3. Unityをインストールする
  4. Unityにてアバターアップロード
  5. VRChatで動作確認

という感じでやっていきます！
使うのは3つのツール・サービス！

  • MagicaVoxel
  • Mixamo
  • Unity

Blenderは使いません！
ちなみに実測値では1時間32分でアップロードして確認までできました！
ボクセルアバターがうまく認識されずリギングできなかったため
時間がかかりましたが、素早い人なら30分でアップロードまで出来ると思います。

#1. ボクセルを作る
まずボクセルを作るためのツールをインストールします。
↓サイトにアクセス！
MagicaVoxel @ ephtracy (Win/Mac)

OSのbitに応じて該当zipをインストール！(bitの調べ方はOS bit 調べ方でググると調べ方はすぐわかります)
私はwindows10 64bitなのでwin64 0.99.2と書いてあるのをクリックしました。
クリックするとzipがダウンロードされます！
image.png

使い方はこちらを参考にするといいとおもいます。
MagicaVoxelの使い方(2)

カットアンドペーストは
左の項目の四角のマーク押すと範囲選択できますので、範囲選択後に右側の項目のSelect内にあるCutまたはCopyを押して、Pasteすればできるそうです。
範囲選択はShift押しながらすると、続けて行なえます。

今回はイチから作るのは大変なのでchr_rainという名前のアバターを改変して利用したいと思います。
image.png

こんな感じにしました。
image.png

モデルができたらツールの右下のエクスポートをクリックします。
image.png

objを選択して出力します(voxでも一旦保存しておくのがオススメ)
image.png

出力できたら完了です！

##注意点

###VRChatはTスタンス
モデルを作る上で注意したいのはVRChatのアニメーションはTスタンスで作られているということです。
スタンスとは3Dキャラクターを作る上でのデフォルトのポーズです。
代表的なものとしてAスタンスとTスタンスと言うものがあります。
腕をTの時に伸ばしたものをTスタンス、Aの字のように腕を下げたものをAスタンスと呼びます。

ちなみにVRChatは手のひらが下を向くようにして作らなければいけないようです。
しっかり合わせていないと、フルトラッキングの際に腕のメッシュがメッチャクチャになったりします。

なので、モデルの腕はTの字になるようにボクセルを作りましょう。

###VRChatのポリゴン制限は2万
VRChatにはポリゴンの制限があります。
アニメーション機能を利用して2万ポリゴン以上のモデルを持ち込めるとも聞いたこともありますが、2万です。
ボクセルでは案外あっさり2万ポリゴンを超えてしまうのでポリゴン数削減処理をする予定の無い方は、ポリゴン数が2万を超えないように気をつけましょう。

###オートリグを使うので人型で
人型以外のモデルを作ってしまうとオートリグがうまく動いてくれないため、変な髪形や人の形状から逸脱したキャラは作れません。
今回もツインテールが問題で人型として認識されませんでした。
image.png

#2. リギング(リグを入れる作業)をする

モデルができたらリギング作業です。
リギングとはリグを入れることをいいます。
リグとは3Dキャラクターにアニメーションを付ける際の仕組みやコントローラーのことを言います。
ボーンを入れたり、ウェイト付けを普通ならしなくては、いけないのですが、今回は簡単に出来るMixamoをご紹介します。

Mixamoとは2015年6月にAdobeに買収された　3Dキャラクターに特化したツールらしいです。
利用にはAdobeへの登録が必要になりますが、現在は無料で利用可能です。

では実際にアクセスして作業を進めましょう。
Mixamo
BROWSE ANIMATIONSをクリックします!
image.png

UPLOAD CHARACTERを選択！
image.png

ここに先程出力したobjファイルをドラック！
image.png

nextで次へ

体の位置を右の画像に習って指定します。
image.png

するとリギングが始まります。
image.png

2分程待たされるので先に一旦次項のUnityインストールを終わらせておくのをおすすめします。

キャラが動き始めます。
うまくリギングできたならこのまま進みましょう。
image.png
上の画像はウェイトがへんな所についてしまっています。
この後にツインテールがめちゃくちゃになっていたのでボクセル(vox)を再度読み込み編集しました。

できたら、他のアニメーションを読み込んでみて動きが悪く無さそうかチェックします！
image.png

一通り動作確認ができたらPrayingの右のバツでアニメーションを削除します。
(アニメーションは必要ないため)
image.png

Downloadボタンでリギングされたキャラのダウンロードを行います。
FBX for UnityとT-poseを選択
image.png

すると、キャラクターがダウンロードされます！

#3. Unityをインストールする
https://www.vrchat.net/home/download にアクセス！
VRChatのID・パスワードでログイン！

Download SDK、DownLoad Unityの順番でクリック！
image.png

ダウンロード（Win）でUnityのインストール！
Unityの登録をしてない人は今登録しておきましょう！
image.png

↓登録の仕方とか、最初に選ばされる選択肢とか、全くわからない人はこの講座がオススメです！
ユニティちゃんが教える！初心者向けUnity講座

今回はAndroidもiOSも使わないのでチェックが付いていたら外しておきましょう。
image.png

適当な名前でプロジェクトを作ります。
image.png

許可します。
image.png

Assets>Import Package>Custom Packageで先程ダウンロードしたVRChatのSDKを選択、インポートしましょう。
image.png

インポート。(私の環境は(1)とついているがコレは二度目のため、ついているだけです)
image.png

インポートしたらVRChatSDKというメニューが追加されているはずなので、Settingsを選択
image.png

VRChatのIDとパスワードを入力してログイン！
image.png

インストールはコレで完了です。

#4. Unityにてアバターアップロード
アップロード用のシーンを作成します。

プロジェクトウィンドウ内で右クリック、Create>Scene
image.png

適当な名前をつけてそのシーンをダブルクリックして該当のシーンに移動！
image.png

Assets>Import New Asset…を選択して先程ダウンロードしたFBXを選択。
image.png

インポートしたモデルを選択する（Inspectorが開く）
image.png

インスペクターのAnimationTypeはヒューマノイドを選択。
このままじゃ動かないのでConfigure…ボタンをクリック。
image.png

↓ような感じで出てきます。
image.png

設定についてのPDFが配布されているのでコレを参考に値を入れ直していきます。
mixamoでHumanoidボーンを入れよう

(設定したらこんな感じになります)
設定ができたらApplyをクリック、Done。
image.png

最初にOBJファイルを作った際に出力したフォルダにpngファイルが出力されているので、それを現在のプロジェクトのAssetsフォルダに取り込みましょう。
image.png

Hierarchyにプロジェクトのモデルをドラックしてモデルを追加します。
image.png

Hierarchyのモデルファイルを選択して、Projectのpngファイルをキャラクターにドラック。
するとMaterialに画像が設定されます。
image.png

キャラクターの一番上の階層(ココではtest)を選択し、インスペクターの値を変更していきます。
TransformのScaleの値を6，6，6に(キャラクターが小さすぎるため)
そしてAdd ComponentからVRC_Avatar Descriptorを選択して追加。
image.png

こんな感じで値を設定。
image.png

目線の高さ(球体の位置)などは、こちらの記事を参考にしてみてください。
VRChatに３Dモデル(自作アバター)をアップロードして使用する方法まとめ

設定ができたら、VRChat SDK > Show Build Control Panelを選択。
image.png

このような画面が出てくるのでBuild ＆ Publish エラーが無ければこのまま行くはずです。
image.png

そうすると名前などの入力項目が出てくるので入力してUpload
image.png

入力項目は私のをパクればだいたい大丈夫ですが、気になる方はこちらを参考にしたらいいと思います。
全くの3DCG初心者が1日でVRChatアバターをBlenderで作ってログインする話-3-

完了。
image.png

#5. VRChatで動作確認

VRChatを起動します。
アバターを選択
image.png

アバターのパーソナルに追加されているはずです。
こちらの表示は、よくおかしくなるので実際にアバターを装着してみてちゃんと動くか試したほうが良いです。
image.png

動いた！
image.png

#まとめ
以上が爆速でボクセルアバターを作ってVRChatで動かす方法になります。
ボクセルをリギング出来るMixamoはとてもいいツールです。
VRChatにとどまらずゲーム制作などにも利用するのもいいのではないかと思います。
もっとボクセルが流行って色んな人が楽しんでくれたらなと思います。
以上です！

明日のVRChat Advent Calendarは@phi16_さんです。
おたのしみに

18
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
18
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?