VRM実装項目リスト

[emadurandal]

実装項目リストを作成してみました。

VRM 0.x

• [ ] シェーダー実装
  • [ ] Unlit
  • [ ] MToon 0.x
• [ ] Humanoidボーンマッピング
• [ ] モーフ設定
• [ ] 一人称設定
• [ ] 揺れモノ設定
• [ ] モデル情報
• [ ] 反転（VRM0.xはVRM1.0とキャラクターの向きが反対なので180度反転させる必要がある）

VRM 1.0

• [ ] シェーダー実装
  • [ ] Unlit（VRM0.xと共通化可能）
  • [ ] MToon 1.0 （MToon 0.xと大体同じだが一部に差異）
• [ ] Humanoidボーンマッピング（やり方はVRM0.xと同じ）
• [ ] グローバルリターゲット処理（ローカル軸の問題を適切に処理するために必要）
• [ ] Expressions（VRM0.x でのモーフに相当）
• [ ] 一人称設定
• [ ] LookAt
• [ ] メタ情報（VRM0.xでのモデル情報に相当）
• [ ] SpringBone（VRM0.xでの揺れ物(SecondaryAnimation)に相当）
• [ ] Constraint
  • [ ] Roll Constraint
  • [ ] Aim Constraint
  • [ ] Rotation Constraint

VRMA (VRM Animation)

• [ ] Humanoidアニメーション
• [ ] Expressionsアニメーション
• [ ] LookAtアニメーション

[yushimatenjin]

ありがとうございます！PlayCanvasの機能で関連がありそうな部分を少し羅列させていただきます。

• シェーダー実装

マテリアルの書き換えはカスタムシェーダーの機能がある

// this.app.graphicsDevice.scope.variables
pc.app.graphicsDevice.scope.variables

（実行結果）

Shader Chunkとして、StandardMaterialを拡張する機能が存在しています。例えば、Diffuse / Emissiveなど、StandardMaterial特定のシェーダーを書き換えができます。

// 例 Emissiveのチャンクを書き換え
const material = new pc.StandardMaterial()
material.chunks.APIVersion = pc.CHUNKAPI_1_55;
material.chunks.emissivePS = emissivePS // 書き換えた後のチャンク
material.setParameter('iGlobalTime', 0);
material.update();

( サンプル/ コード )

• モーフ設定 GlbParserを使って読み込まれたRenderコンポーネント（モデルデータ）の場合にはMeshInstance以下にある、MorphInstanceからsetWeightやsetWeightなどモーフの操作ができる。

const render = pc.app.root.findByName("Face").render; // Renderコンポーネントを取得
const meshInstance = render.meshInstances[0]; // メッシュインスタンスを取得
const morphInstance = meshInstance.morphInstance; //  モーフインスタンスを取得

const key = 1; 
const weight = 0.5;
morphInstance.setWeight(key, weight) // モーフの操作

• 揺れものに関して PlayCanvasでは、物理エンジンとして、ammo.jsが使われています。 他にも、実験的な実装ですが、Joint Componentはマージをされているようです。 ( サンプル )

[emadurandal]

ありがとうございます。

シェーダーに関しては、カスタムシェーダーでやっていくことになりそうですね。 いずれはWebGPUへも対応しないといけないと思うのですが、PlayCanvasの場合はシェーダーコードのGLSL/WGSL両対応のための仕組みなどあるのでしょうか。それともそれぞれ書かないといけない？

モーフに関しては、その機能を使うことになりそうですね。VRMのモーフは、glTFにおける複数のMeshを組み合わせたモーフになります。

揺れ物に関してですが、ammo.jsを使わずにVerlet積分による物理計算を自前で実装することになると思います（それほど複雑ではないです）。

[yushimatenjin]

ありがとうございます！

WebGPUへの対応についてみ

PlayCanvasの実行時にglslangと、twgslというライブラリを使用してトランスパイルがされるようです。現状、カスタムシェーダーを作成した場合にもデバイスのタイプがWebGPUで実行されている場合にはトランスパイルが実行されます。

.wgslを直接利用をしていることもありますが、現状は、多くがこのトランスパイルで対応をされているようです。こちらの、Examplesでは、 ( createShaderFromCode ) にはES 3.0のシェーダーコードのみが渡されています。

WebGPUで実行をしている場合には、transpileのコードにてWGSLに変換されているようになりますね。

スクリーンショット (トランスパイル後のシェーダーコード）

[yushimatenjin]

.vrma の形式についても現状の確認をしています。.glbへリネームをして、PlayCanvasのGlbParserで読み込みを行いました。

スクリーンショット

VRMAは1.0用だと思いますが、0.0と並べて確認をしています。 現状のGlbParserでアニメーションの再生すると髪の毛のボーン周りはうまく処理されないようです。 （揺れ物の影響・・？）

• ( 実行URL / プロジェクト)

• 使用したアニメーションファイル https://booth.pm/ja/items/5512385

[emadurandal]

検証ありがとうございます。

VRM0.xで変なポーズになっているのは、主にはVRM0.xのキャラの向きがVRMAアニメーションの向き（VRM1.0想定）とは逆だら、というのと、ローカル軸の有無が影響している可能性があります。

また、VRMA_01~04がアニメーションが動くのに、VRMA_05以降がまったく動かないのは、ボーンの一致不一致の問題だと思います。VRMA_01~04が動いたのは、おそらくたまたまボーン番号が適用先のモデルと一致していたためだと思います。そのVRMAサンプルは私もだいぶ調べたのですが、VRMA_05以降はVRMA_04までとボーンの構造が違うんですよ。

なので、Humanoid情報とのマッピングが必要ですね。

髪の毛については、そうですね。揺れ物ボーンは別途で対応が必要だからでしょうね。