17
Help us understand the problem. What are the problem?

posted at

updated at

Organization

Vroid→blender→Mixamo→PlayCanvasでオリジナル3Dキャラを操作できるようにする!

オリジナルの3DキャラクターをPlayCanvas上で動かしたい!と思っても中々ハードルが高いかと思います。そこで、VroidとMixamo、Blenderを使い、無料且つ専門知識や技術を使わずオリジナルキャラを走り回らせてみようと思います。
使用するコンテンツは以下のモノです。
Vroid:キャラクターを作成します。
Blender:キャラクターの調整をします。
Mixamo:キャラクターにアニメーションを付けます。
PlayCanvas:キャラクターのアニメーション制御、ビルドを行います。

#Vroidでキャラクターメイキング
キャラクターを作成していくには、通常、BlenderやMAYA、3dsMAXなどの3D作成ソフトからポリゴンモデリング、テクスチャ作成、リギング等の作成を行う必要があり、かなりハードルが高いです。
そこで、キャラクターをカスタマイズし、VRMでエクスポート出来る"Vroid"を使用します。
###Vroidをインストール
下記URLからDLし、それぞれの環境に合ったものをインストールしてください。
https://vroid.com/studio
image.png
起動するとキャラクターの選択画面がでます。今回はサンプルのキャラクターを任意に選んでください。
vroid01.png
キャラクターを選択し、右上部の"撮影・エクスポート"ボタンをクリック

###キャラクターをエクスポート
キャラクターのマテリアル数を最小にし、テクスチャーサイズも2048×2048へ変更します。
image.png
VRMデータとしてエクスポートします。
左側の"エクスポート"を選択後、右側の"エクスポート"をクリック
vroid03.png
VRM設定のモーダルがでますので、タイトルと作者を記入したください。OKをクリックし、任意の場所に保存してください。
vroid04.png
#Blenderをインストール
下記URLからBlender LTS版をDLし、インストールしてください。最新のBlenderでは対応していないアドオンが複数ありますので、今回はBlender 2.83 LTSで作業していきます。
https://www.blender.org/download/lts/
image.png

#BlenderへVRMを読み込むアドオンを入れる
VRMデータを直接インポートすることはできないので、"cats-blender-plugin"というアドオンを入れます。
https://github.com/GiveMeAllYourCats/cats-blender-plugin
blender01.png
ダウンロードした"cats-blender-plugin-master.zip"をBlenderのプリファレンスで設定します。
blender02.png
#Catを使用しVRMデータを調整する
まずはVRMモデルをインポートします。
blender03.png
###3Dモデルの修正
モデ修正ボタンをクリックし、最適化しておきます。
この際、アイトラッキングやビムス(口の動き)などの指定もできますが、今回は特におこないません。
blender06.png
続いて、シェイプキーを削除します。シェイプキーが存在していると、モデルとボーンのリンクを切ることができないので、ここで切れる状態にしておきます。
blender07.png
モディファイヤーリストからArmachereを"適用"しスタックから削除ます。
blender09.png
足のボーンを選択し、回転で角度を調整。もしくはボーンリストから数値で調整します。
だいたいZ:0.03 -0.03で丁度良い開きになります。この処理をしておかないと、Mixamoで見たときに足のポリゴンウェイトが正確に反映されずに、くっついた状態で処理されてしまいます。
blender08.png

###VRMデータをfbxでエクスポート
オブジェクト"body"を選択します。
image.png
ファイル→エクスポート→FBXをクリック
image.png
パスモードをコピーに変更し、その隣のマークをアクティブにします。
Limit toの"選択したオブジェクト"にチェック。ファイル名は任意に決めてください。今回は"test"という名前にしています。
"FBXをエクスポート"ボタンをクリック。任意の場所に保存してください。
blender05.png

#MixamoでアニメーションをDLしよう
Mixamoにログイン、もしくはサインアップしてください。
https://www.mixamo.com/#/
image.png
###キャラクター.fbxをインポート&設定
"UPLOAD CHARACTER"をクリックします。
mixamo01.png
fbxデータをdrag&dropもしくは"Select character file"からフォルダ指定してください。
image.png
キャラクターのセットアップ画面になります。モデルに問題が無ければ"NETX"をクリックしてください。
image.png
顎、手足の間接をマークして設定していきます。
右側のガイド画像を参考に大まかに位置をあわせるだけでOKです。セットできたら"NEXT"をクリックします。
image.png
オートリギングが完了するとマネキンがインポートしたキャラクターへ変わります。
image.png
検索窓に"Locomotion"を入力し、"Male Locomotion Pack"を選択し、右側のDLボタンをクリックします。ローカルフォルダの任意の場所に保存します。オリジナルのFBXがある場所がベストです。
mixamo02.png
今回使用するアニメーションは"Male Locomotion Pack"内にある以下の4つです。
test.fbx(Tポーズのオリジナルデータ)
idle.fbx
jump.fbx
walking.fbx
standard run.fbx
#Blenderでアニメーションを調整
歩く、走るのアニメーションはその場で歩く、走るアニメーションにする必要があります。MixamoでDLしたアニメーションはZ軸方向に移動のアニメーションが入っているので、これを削除します。
インポート時にアーマチェアの"ボーン方向の自動整列"にチェックをいれてください。
image.png

1.Animationタブをクリック
2.ポーズモードに変更
3.腰のボーンを選択
4.Z軸のキーフレームを全選択し、削除します。
blender10.png
ポーズモードをオブジェクトモードに変更し、ボーンオブジェクトを選択し、FBXでエクスポートします。エクスポート時に"NLAストリップ"と"全アクション"のチェックを外します。
image.png

#PlayCanvasでアニメーションを制御しよう
PlayCanvas上でDLしたアニメーションデータを展開し、マウスをクリックした場所にキャラクターが走りながら移動するようにしていきます。
PlayCanvasのアカウントをお持ちでない方は下記URLからアカウントを作成してください。
https://playcanvas.jp/
image.png
###プロジェクトの作成
ログインするとマイページへ移動します。"NEW"ボタンをクリック
image.png
プロジェクトの種類、プロジェクト名(任意の名前)を入力し、"CREATE"ボタンをクリック
playcanvas01.png
作成された新規プロジェクトのENTERをクリックし、エディターを起動します。
playcanvas02.png
中央のボックスは非表示にするか、削除してしまって問題ありません。
非表示にする場合、ビューポート上の非表示にしたいオブジェクトを選択し、右側インスペクター内の"ENTITY"の"Enabled"のチェックを外します。
playcanvas03.png
###.fbxのインポート
下部ASSETS欄に3Dモデル用の新規フォルダを作成し、その中にインポートします。
root(一番上の階層)を選択し、ASSETS横の"+"ボタンから"Folder"を選択します。
playcanvas04.png
新しくフォルダが作成されました。フォルダ名を任意につけてください。フォルダを選択した状態で右側のインスペクターからリネームできます。
playcanvas05.png
まずはオリジナルデータ"test.fbx"をアップロードします。ローカルフォルダから"ASSETS"欄の"3Dmodel"フォルダ内にdrag&dropするか、"+"ボタンから"Upload"でファイルを選択します。
playcanvas08.png
続いて、"test.glb"をビューポートへdrag&dropします。
playcanvas06.png
#マテリアルの調整
ビューポート上に表示された"test.glb"は顔のテクスチャが崩れています。これはBlender上とPlayCanvas上でのアルファ処理の相違で発生する問題です。
playcanvas09.png
PlayCanvasのインスペクターからマテリアル"OPACITY"の内容を変更して修正します。
Blend TypeをAlpha
空きスロットルに"texture_0.png"(顔部分のテクスチャ)をdrag&drop
Colore Channelを"A"
Alpha To Coverageにチェックを入れる
playcanvas07.png
これでモデルの表示は整いました。
###CollisionとRigidBody
キャラクターが歩く為のフィールドを作成します。
HIERARCHYの"Root"を選択した状態で、HIERARCHY横の"+"ボタンから"Primitive"→"Plane"を選択してください。
playcanvas10.png
右側のインスペクターのスケール値を15/0/15くらいのサイズにして調整します。
image.png
続いて、キャラクターに、当たり判定"Collision"と剛性"rigitbody"を持たせます。
ADD COMPONENTから"Collision"と"RigidBody"を選択してください。
playcanvas11.png
CollisionのTypeを"Box"へ変更し、Half Extentsを7.5/0/7.5くらいにして、Planeと同じ大きさにします。
image.png
RigidBodyの設定はデフォルトの状態でOKです。
image.png
###キャラクターとカメラの位置調整
ビューポート右上にある"Perspective"をクリックすると、Cameraからの視点モードに切り替えられます。
playcanvas_cam01.png
斜め上から見下ろすような角度に任意で調整して、"Perspective"モードに戻ってください。
playcanvas_cam02.png

###プロジェクトの複製"Fork"とスクリプトのコピー
クリックした箇所にキャラクターが移動するスクリプトをコピーしてきます。
こちらのURLからプロジェクトを複製"Fork"します。
https://playcanvas.com/project/806242/overview/vroidblendermixamoplaycanvas
"Fork"ボタンをクリックしてください。
project.png
任意の名前を入力し、右下の"Fork"ボタンをクリック
fork.png
複製されたプロジェクトの"EDITOR"をクリックし、スクリプトをコピーします。
"Animation.js"と"Locomotion.js"を選択し、コピーします。
script.png

続いて、オリジナルのプロジェクトへペーストします。
playcanvas15.png
###スクリプトをキャラクターに追加
キャラクターを選択し、ADD COMPONENTから"Script"をクリックし、インスペクター内に表示された"ADD SCRIPT"をクリック。プロジェクト内で使用できるスクリプト一覧が表示されますので、"Animation.js"と"Locomotion.js"を選択します。
playcanvas16.png
playcanvas17.png

###実行してみる
ビューポート右上の三角マーク"Launch"ボタンをクリックすると別ウィンドウで現在設定されているプロジェクトが実行されます。
playcanvas18.png
マウスをクリックした箇所へキャラクターが歩く。
歩いている間に"X"をクリックしていると走る。
スペースボタンでジャンプです。
launch01.gif
これでプロジェクトは完成です。続いて、公開用のURLを生成します。
###publish&buildで公開用のURLを生成する
上部の"Manage Scenes"をクリックしてくださ。
playcanvas19.png
最初にシーンを選択した画面が出てきます。右側の"PUBLISH"をクリックし、"PUBLISH TO PLAYCANVAS"をクリックします。
playcanvas20.png
名称の変更やディスクリプション、バージョン情報等を記載する箇所があります。
一番下までスクロールすると"PUBLISH NOW"ボタンがありますので、クリックしてください。
playcanvas21.png
赤枠内にあるURLが共有用のULRとなります!
playcanvas22.png
これで完成です。おつかれさまでした。
#まとめ
3Dキャラクターを作成し、ゲーム上で動かすというのは一昔前ではかなりの作業量が必要でした。
今回使用したVroid、Mixamo、Blender、PlayCanvasは全て無料!で且つ、かなりクオリティの高いモノを短時間で作成することができます。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
17
Help us understand the problem. What are the problem?