LoginSignup
20
21

More than 1 year has passed since last update.

@shujimuna1102(ムナカタ シュウジ)inPlayCanvas運営事務局

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

Last updated at Posted at 2021-06-21

オリジナルの3DキャラクターをPlayCanvas上で動かしたい！と思っても中々ハードルが高いかと思います。
そこで、VroidとMixamo、Blenderを使い、無料且つ専門知識や技術を使わずオリジナルキャラを走り回らせてみようと思います。

使用するコンテンツは以下のモノです。

  • Vroid: キャラクターを作成します。
  • Blender: キャラクターの調整をします。
  • Mixamo: キャラクターにアニメーションを付けます。
  • PlayCanvas: キャラクターのアニメーション制御、ビルドを行います。

※ PlayCanvadで3Dモデルを制御するメリットとは
PlayCanvasはブラウザベースのゲームエンジンであるため、ソフトウェアなどのインストールなどが不必要で誰でも簡単にブラウザからアクセスすることができます。また、クロスプラットフォームにも対応しており、PCはもちろんスマホのブラウザからもアクセスができ、容易により多くの方に遊んでもらうことが可能です。

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データをドラッグ&ドロップもしくはSelect character fileからフォルダ指定してください。
image.png

キャラクターのセットアップ画面になります。モデルに問題が無ければNEXTをクリックしてください。
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フォルダ内にドラッグ&ドロップするか、+ボタンからUploadでファイルを選択します。
playcanvas08.png

続いて、test.glbをビューポートへドラッグ&ドロップします。
playcanvas06.png

マテリアルの調整

ビューポート上に表示されたtest.glbは顔のテクスチャが崩れています。これはBlender上とPlayCanvas上でのアルファ処理の相違で発生する問題です。
playcanvas09.png

PlayCanvasのインスペクターからマテリアルOPACITYの内容を変更して修正します。

  1. Blend TypeをAlpha
  2. 空きスロットルにtexture_0.png(顔部分のテクスチャ)をドラッグ&ドロップ
  3. Colore ChannelをA
  4. Alpha To Coverageにチェックを入れる

playcanvas07.png
これでモデルの表示は整いました。

CollisionとRigidBody

キャラクターが歩く為のフィールドを作成します。
HIERARCHYのRootを選択した状態で、HIERARCHY横の +ボタンからPrimitive→Planeを選択してください。
playcanvas10.png

右側のインスペクターのスケール値を15/0/15くらいのサイズにして調整します。
image.png

続いて、キャラクターに、当たり判定Collisionと剛性RigidBodyを持たせます。

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が共有用のURLとなります！
playcanvas22.png

これで完成です。おつかれさまでした。

まとめ

3Dキャラクターを作成し、ゲーム上で動かすというのは一昔前ではかなりの作業量が必要でした。
今回使用したVroid、Mixamo、Blender、PlayCanvasは全て無料！で且つ、かなりクオリティの高いモノを短時間で作成することができます。

※商用利用についてはこちらを参照ください。

20
21
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
20
21