Help us understand the problem. What is going on with this article?

VRoid→Blender→PlayCanvas→Mixamo→PlayCanvasでアニメーションをガンガン追加してみる

はじめに

PlayCanvasにMixamoから色々なアニメーションをDLし、流し込む手順を解説します。
playCanvasにキャラクターがいないと話にならないので、VRoid Studioからセットアップ済みのキャラクターをDLします。
DLした.vrmPlayCanvasに持って行きたいのですが、ちょっと現段階では無理があるので、Blenderで.vrmをインポートします。
そこからさらに.fbxでエクスポートしたデータをPlayCanvasにインポート。これだけだとアルファテクスチャに問題があるので、マテリアルの調整を行い、再度playCanavsから.fbxをDL。そのデータをMixamoにアップロードし、任意のアニメーションをトレースし、モーションデータのみDL、PlayCanvasへインポートします。

…なんのこっちゃって感じだと思いますので、使うモノと手順を追って説明していきます。

使うソフトウェアやアプリケーション

PlayCanvas:デスクトップとモバイルブラウザ向けに作られたWebGL/HTML5ゲームエンジン
https://playcanvas.jp/
blender:オープンソースの統合型3DCGソフトウェア
https://www.blender.org/
.vrm:VRアプリケーション向けの人型3Dアバター(3Dモデル)データを扱うためのファイルフォーマット
.fbx:Autodeskが所有するプロプライエタリなファイル形式
VRoid Studio:人型アバター(キャラクター)の3Dモデルを作成できるWindows・Mac用アプリケーション
https://vroid.com/
Mixamo:3Dキャラクターアニメーション用のWebベースのサービス
https://www.mixamo.com/

VRoid StudioからVRMをエクスポートする

VRoidStudio01.png
VroidStudioでキャラクターのカスタマイズが完了したら右上の"撮影・エクスポート"→左側の"エクスポート"→右側の"エクスポート"とクリックしていきます。
VRoidStudio02.png
アバターの人格設定や表現の許可を設定します。ここで赤枠の☑を入れないとアニメーションをあとから設定できなくなるので、☑を必ずいれてください。
VRoidStudio03.png
保存してVroidStudioの作業は完了です。

BlenderへVRMをインポートし、FBXでエクスポートする

BlenderにVRMをインポートするにはいくつかのアドオンをBlenderにインストールする必要があります。

VRM_IMPORTER_for_Blender2_8 or VRM_IMPORTER_for_Blender2_79VRMのインポートに必要
(blenderのバージョンにより違います)
https://github.com/iCyP/VRM_IMPORTER_for_Blender2_8
https://github.com/iCyP/VRM_IMPORTER_for_Blender2_79

cats-blender-pluginVRMデータを最適化するために必要
https://github.com/michaeldegroot/cats-blender-plugin

アドオンのインストール方法から各アドオンの使い方の詳細は[みっちー@nyu___nS]様の記事がとても分かりやすく解説なさっています!
参考記事:https://qiita.com/nyu___nS/items/abfd8c8edcb866b4c2d9

ここではPlayCanvasへインポートするための最低限の最適化のみ解説します
blender00.png
ファイル→インポート→VRM(.vrm)からインポートするか、CATのimportから読み込みます。
blender03.png
赤枠の"Fix Model"をクリックすると…
blender04.png
1発でボーン構造とマテリアルが最適化されます。シーン上から不要なライトやカメラも削除されます。
blender05.png
"A"キーで全選択し、FBXへエクスポートします。
blender07.png
FBXのエクスポート設定は上記の画像のようにしてください。パスモードが"コピー"箱マークがオンになっていないとマテリアルが参照されずに保存されてしまいます。

PlayCanvasへimportして調整する

PlayCanvas03.png
PlayCanvasのビジュアルエディターを起動し、FBXをドラック&ドロップするかADD ASSETSからアップロードします。
PlayCanvas04.png
この時点では透過情報が抜けている箇所があります。この問題はVroidStudioとBlender、PlayCanvasの標準シェーダーの透過処理の違いで起こる問題です。VroidStudioの標準シェーダーは"MToon"というトゥーンレンダリング用のシェーダーのためです。
folder03.png
PlayCanvasの"OPACITY(透過)"用にグレースケール(白黒)の画像を作成します。
PlayCanvas05.png
作成したグレースケール画像をASSETS欄に入れます。
PlayCanvas06.png
マテリアルスロットルの"OPACITY"へ各グレースケール画像をアタッチ
ss1.png
BlendTypeを[Alpha]すると正常に透過されます。
PlayCanvas08.png
マテリアル全体の調整が完了したらFBXをDLします。ASSETS欄内のFBXを選択し、インスペクター内の"Download"をクリックします。

FBXをMixamoへアップロード/Mixamoからアニメーションをダウンロード

02.png
mixamoを開き、"UPLOAD CHARACTER"で先ほどダウンロードしたキャラクターのFBXを読み込みます。mixamo上でもアルファ処理が違っているので透過情報やカラーの一部がおかしい表示になっていますが、スキン情報は必要ないので、ここでは問題ありません。
03.png
任意のアニメーションを選択すると読み込んだキャラクターがそのアニメーションを再生します。
"DOWNLOAD"ボタンをクリックします。
04.png
ボーンの情報のみ必要なので"Without Skin"を選択してダウンロードしてください。

PlayCanvasでアニメーションを読み込む

06.png
ASSETS欄にアニメーション用のフォルダを新規作成し、ダウンロードしたアニメーションFBXをインポートします。
07.png
inspecterからADD COMPONENTでAnimationを追加し、+Add Assetsをクリックします。ASSETS欄内で選択可能なアニメーション.jsonにフォーカスされますので選択し、inspecter内のDONEをクリックするとアニメーションが追加されます。


Mixamoから以下の手順で簡単に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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした