この記事について

Wolf3Dが提供している「Ready Player Me」を使って自分の顔写真からアバターを生成してPlayCanvasで動かす方法を紹介します。「Ready Player Me」では写真からアバターを生成することができます。また作成したアバターは同じボーン構造のアバターで多くの種類のアバターが作れるので一度、対応するアニメーションを使い回すことが出来ます。

完成プロジェクト

プロジェクトURL:https://playcanv.as/p/UG59NNgq/

アバターを作成

こちらのページにアクセスをして自分のアバターを作成していきます。

1. Ready Player Meへアクセス

今回は全身のfbxファイルを作成するのでこちらのURLから生成します。
https://vrchat.readyplayer.me/avatar

2. アバターの種類を選択

body typeを選択します。

3. 顔写真をアップロード

次にアバターの元となる3Dモデルをアップロードします。

4. アバター生成

アップロードした画像を元にアバターが生成されます。

この画面アバターの調整が出来ます。
調整ができたら「Next」を押しましょう。

5. 作成したアバターをダウンロード

ダウンロードURLが表示されますので「Download the Avatar」の下のURLをコピーしてください。ファイルは.fbx形式でファイルのダウンロードができます。

アバターを動かす

今回の記事ではPlayCanvasを利用してアバターを動かしていきます。予め移動などのアニメーションが入っているプロジェクトを利用して作成していきます。アニメーションは「mixamo」を利用して作成しています。

PlayCanvasについて

PlayCanvasはJavaScriptで記述されたWebGLのエンジンで、最近GitHubのスター数が7000を超えました。SaaS型のエディターを兼ね備えているゲームエンジンです。engineについては主にSnapのメンバーWill Eastcottを中心にOSSとして公開及び継続的に開発が進められています。Engine単体として利用する場合には、Three.js, Babylon.jsなどのWebGLライブラリと似た使い方を使用することができます。またビジュアルエディターとコードエディターが存在しており。エディターはクラウド上でプロジェクトの作成から公開までが出来ます。FBXやOBJといった3Dモデルの素材については、ブラウザへドラッグアンドドロップをすることでGUIから操作・配置ができるエディターがあります。

プロジェクトの準備

PlayCanvasで3Dモデルを利用するためにプロジェクトの準備をします。PlayCanvasのアカウントが無い場合は「公式サイト」からアカウントの作成をします。プロジェクト自体は新規で作成をしても問題ありませんが、移動に関するスクリプトが入ったテンプレートを用意しておりますのでそちらを利用して作成します。

1.テンプレート用プロジェクトにアクセス

こちらのプロジェクトにアクセスをしてください。

2. プロジェクトをフォーク

プロジェクト名を入力してください。（好きな名前で大丈夫です）

3. エディタを起動

プロジェクトページの中にある、EditorボタンをクリックしPlayCanvas Editorを開きます。

テンプレートのモデルを入れ替える

次に、モデルを先程作成したモデルに置き換えます。

1.モデルをアップロード

次に先程作成したモデルをPlayCanvasにモデルをインポートします。
fbxファイルをドラックアンドドロップをして、3Dモデルをアップロードします。

2. スターターキットのモデルを入れ替える

スターターキットはReady Player　Meで作成したモデルが入っておりますのでこちらのモデルを入れ替えます。ヒエラルキー上に新しいモデルを配置して古いモデルを消します。

3. 起動

これで自分の作成した３DモデルをPlayCanvas上で三人称視点で動かすことが出来ます。

追加情報

移動方法について

移動方法のサンプルプロジェクトについては「Third Person Controller」をご覧ください。

その他プロジェクトについて

また、他の使い方としては、プロジェクト内で生成することも出来ます。
Saad Haiderさん作成の「Playcanvas X Ready Player Me TPC」のプロジェクトがありますので興味がある方はこちらもご参照ください。