VRMフォーマット対応

yushimatenjin commented 3 months ago

概要

PlayCanvasにVRMフォーマットの対応を進めるためのルートチケットです。 VRMをPlayCanvas上で行えるようにするための開発を管理します。

リポジトリ

PlayCanvasでのglTF ( VRM ) の表示の検証用のリポジトリ playcanvas-vrm-viewer

参考情報

PlayCanvas https://github.com/playcanvas/engine
VRM https://vrm.dev/
UniVRM https://github.com/vrm-c/UniVRM
vrm-specification https://github.com/vrm-c/vrm-specification

yushimatenjin commented 3 months ago

VRMの対応について分類として

VRM 0.x (.vrm)
VRM 1.0 (.vrm)
VRM-Animation (.vrma) 3つの仕様があることが分かりました。

新規にVRMフォーマットへの対応をする場合には、VRM1.0から開発を進めるのが良いのか？ VRM 0.xから始めるか良いのかなどの疑問点があります。

VRMに対応をしているライブラリのそれぞれの状況を調べてみました。

ライブラリ名	VRM 0.x	VRM 1.0	VRM-Animation
Three.js three-vrm	✅	✅	✅
Babylon.js babylon-vrm-loader	✅	❓	❓
RhodoniteTS	✅	✅	✅

✅: 対応していると思われる ❓: 対応状況が不明

yushimatenjin commented 3 months ago

PlayCanvasエディターで利用をする場合には、エディターのサポートも必要になってくる可能性がありそうです。

開発者のMark Lundinさんのツイートにより、「PlayCanvasエディター」のアップデートとして「npm」経由でライブラリ利用できることが示唆されているので、こちらが実装をされることで対応方法が変わる、今後、PlayCanvasに対応するライブラリに可能性もありそうです。 https://x.com/mark_lundin/status/1777254374823117139

emadurandal commented 3 months ago

@yushimatenjin 私のRhodoniteにまで言及いただいていて恐縮です。あと、参考にすべき実装としてはJavaScript系ではないですが、Unity向けのUniVRMがありますね。 https://github.com/vrm-c/UniVRM UniVRMは事実上のリファレンス実装ですので、参考にする機会は多くなるかと思います。あとは、three-vrmも常にUpdateが意欲的に行われていますので、安心して参考にできる参考実装だと思います。

VRM1.0から開発を進めるのが良いのか？ VRM 0.xから始めるか良いのか

ちょっと迷うところですね。仕様が小さくより単純なのはVRM0.xなので、VRM0.xから始めてもいいかもしれませんが、VRM1.0と非互換な部分を念頭に置きつつ設計すると良いかなと思います。

yushimatenjin commented 3 months ago

@emadurandal

UniVRMは事実上のリファレンス実装ですので、参考にする機会は多くなるかと思います。あとは、three-vrmも常にUpdateが意欲的に行われていますので、安心して参考にできる参考実装だと思います。

ありがとうございます！three-vrmはMIT Licenseで進められているプロジェクトとなるのですね。

仕様が小さくより単純なのはVRM0.xなので、VRM0.xから始めてもいいかもしれませんが、VRM1.0と非互換な部分を念頭に置きつつ設計すると良いかなと思います。

別のリポジトリのコードなどを見させていただいておりますが、こちら0.xから進めていく方が作りやすそうに思えました

先日より、PlayCanvasの現状について検証をしていたのですが、PlayCanvasのAssetRegistry - loadFromUrlで.vrm形式の読み込みは可能なようです。

1. AssetRegistry - loadFromUrlでの`.vrm`読み込みについて

pc.app.assets.loadFromUrl("/path/model.vrm", "container", (err, asset) => {
  const entity = asset?.resource.instantiateRenderEntity();
  this.entity.addChild(entity);
});

スクリーンショット

PlayCanvas

2. GlbParser `glb-parser.js`について

現状、PlayCanvasで.glb ( .vrm ) パースの際に使われる、GlbParser glb-parser の機能が存在がありました。このParserの機能を部分的に利用して、メッシュ事にマテリアルの切り替えなどは容易にできました。

こちらのリポジトリでhttps://github.com/yushimatenjin/playcanvas-vrm-viewer/blob/main/src/lib/scripts/custom-glb-loader.tsで検証をしておりましたが、

スクリーンショット

PlayCanvas

emadurandal commented 3 months ago

検証ありがとうございます。コード拝見しました。 GlbParserですが、parseメソッドを使わずに、その中身のコードを拝借してカスタムしている感じですね。 Babylon.js勉強会 Discordでやまゆさんがおっしゃっていたように、parseメソッドにあるoptions引数で追加処理を入れられるっぽいので、parseメソッド＋options引数で実装できれば、glb-parserのコードをコピーしてくる必要がなくなるかもしれません。

この辺りの勘所は、PlayCanvasの本家公式フォーラムで誰かに相談に乗ってもらっても良いかもしれませんね。

yushimatenjin commented 3 months ago

ありがとうございます！本日こちらPlayCanvasオフィシャルDiscordで開発者の方々にお聞きいたしました。

ライブラリ化ですが、ESM対応が進んでおり、今後のアップデートでPlayCanvasのエディターからも直接npm経由のパッケージの読み込みもできるようになるようです。
Physicsなどの機能の追加の場合には、コンポーネントを新しく作成する方法が取れそうです。

（シンプルなコンポーネント例） https://github.com/playcanvas/engine/blob/main/src/framework/components/audio-listener/system.js

（コンポーネント拡張例） https://github.com/Gamebop/physics/blob/1b3c86a50c0098a98fc1e7902794af2badec84c3/src/physics/jolt/manager.mjs#L115-L123

parseメソッド＋options引数

こちらは、そうですね、コピーをするよりPlayCanvasエンジンの互換性を維持したまま開発をしつつ、必要に応じてPlayCanvasエンジンにプルリクエストを送る方法で進める方針が良さそうです。

yushimatenjin / playcanvas-vrm