こちらはクラスター Advent Calendar 2024 の17日目の記事です！

こんにちは、すぎしーです。クラスター株式会社にジョインして2年になります。

本記事のテーマは「Visual Studio CodeでVRMを改変する」になります！今回はUnityは使用しません！

改変例として「VRMのテクスチャをVSCodeで差し替える」と「VRM1.0のExpressionのOverride設定をVSCodeで変更する」も紹介しているので、よかったら参考にしてみてください。

使用するツール
前準備
- 1. VSCodeをインストール
- 2. VSCodeにglTF Toolsをインストール
補足情報: VRMはglTF拡張である
glTF ToolsでVRMをインポート
Appendix: 編集が許可されているVRMであることを確認する
VRMを編集する
glTF ToolsでVRMをエクスポート
補足: エクスポートで出力されるVRMバージョンはインポート時に従う
改変例
おまけ: VSCodeでモデルをプレビューする
雑感

使用するツール

Visual Studio Code
- 以下「VSCode」と呼称
glTF Tools (Visual Studio Codeの拡張)

前準備

1. VSCodeをインストール

Visual Studio Code からVSCodeをインストールしてください。

2. VSCodeにglTF Toolsをインストール

以下を参考にglTF ToolsをVSCodeにインストールしてください。

VSCodeのExtensionsを開く
"glTF Tools"と検索する
検索で出たglTF Toolsをクリック
Install ボタンをクリック

以上で前準備は完了です！

補足情報: VRMはglTF拡張である

VRMはglTFをいうファイルフォーマットを拡張したものになっています。そのためglTF向けのツールで改変が可能な場合が多いです。

もし深堀りしたい方は以下のクラスター Advent Calendar 2023の記事を御覧ください！

tsgcpp.hateblo.jp

この性質を利用してglTF ToolsでVRMを編集しようと思います。

glTF ToolsでVRMをインポート

まずはglTF ToolsでVRMを改変する時に毎回実施することになるインポート方法を紹介します！

編集対象のVRMを作業用のフォルダにコピーする

glTF Toolsはインポート時にVRM内のテクスチャや頂点などのバイナリデータを一気にファイル化するため、作業用フォルダを用意してそのフォルダの中にVRMファイルを置きましょう。

VSCodeで対象のVRMがある作業用フォルダを開く

VSCodeのOpen Folder...で作業用フォルダを開いてください。

対象のVRMをインポートする

以下の流れでインポートできます。

ファイル一覧を開く
編集対象のVRM上で右クリックする
"glTF: Import from GLB" をクリックする
インポートされたファイルを保存先(拡張子 "gltf"、以後「gltfファイル」と呼称)を指定する

保存先はVRMファイルとは別のフォルダでも大丈夫ですが、今回は同じ作業用フォルダに保存して説明します。

インポートが終わるとJSON形式のgltfファイルと関連するテクスチャなどのファイル群が生成されているはずです。

一緒に出力されたファイルたちはエクスポート時に必要になるので消さずに残しておいてください！

これでインポートは完了です。

Appendix: 編集が許可されているVRMであることを確認する

自身が所有者ではないVRMの場合は、glTF内の項目を確認して「このモデルを改変することを許可するか否か」を確認しておきましょう。

(VRM確認ツールでもいいですが、本記事ではトコトンVSCodeで確認します！)

VRM0.xの場合は extensions.VRM.meta.licenseName (参考: 公式仕様書 0.0/README.ja.md)
VRM1.0の場合は extensions.VRMC_vrm.meta.modification: (参考: 公式仕様書 VRMC_vrm-1.0/meta.ja.md#metamodification)

VRM1.0の場合であれば allowModification、もしくはallowModificationRedistributionであれば改変が許可されています。

ちなみに VRoid Studioで作成したアバターの場合は、エクスポート時に「改変」の項目で設定した内容が反映されているはずです。

VRMを編集する

インポートが終わったらVRMの仕様書 (vrm-specification) に従いつつ、テクスチャを変えたりgltfファイルを変更してVRMを編集することになります。

改変したgltfファイルは必ず保存(Ctrl+S)してください！

具体的な作業は「改変例」を後述しているので参考にしてみてください。

次項でひとまず改変が完了した後に実施するVRMへのエクスポート方法を紹介します。

glTF ToolsでVRMをエクスポート

以下の流れで編集したgltfファイルからVRMをエクスポートします。

エクスポート対象のgltfファイル上で右クリックする (開いているタブ上で右クリックでも可)
"glTF: Export to GLB (Binary file)" をクリックする
出力するファイルの拡張子を".vrm"にして保存先を指定する (例: "vroid_sample_ex.vrm")

エクスポート時の拡張子はデフォルトで ".glb" になっているので、
拡張子を必ず ".vrm" に変更して保存してください！

エクスポートが完了するとVRMファイルが出力されているはずです。

ここまでが VRMをインポート → VRMを改変 → VRMをエクスポートの流れになります。VSCodeでVRMを編集する場合は毎回やることになります。

補足: エクスポートで出力されるVRMバージョンはインポート時に従う

今回のやり方でエクスポートした場合、出力されるVRMバージョンはインポート時と同じになります。

というよりglTF Toolsは純粋なglTF向けツールでありVRM0.xからVRM1.0に変換するみたいな機能は特に入っていないため、gltfファイルのJSON内容はそのままで出力されるので結果としてインポート時と同じVRMバージョンが出力されます。

改変例

今回はVRoid Studioから作成した以下のVRM1.0アバターの子を使います。

改変例1: VRMのテクスチャをVSCodeで差し替える

glTF Toolsはテクスチャの入れ替えができます。やり方は簡単でインポート直後に出力されているpng画像のうち、テクスチャに使われるpng画像を差し替えるだけです。

今回は先程のアバターのシャツのテクスチャを変えて色を変えてみようと思います。

VSCodeで確認するとシャツのテクスチャの名前は vroid_sample_img13.png になっているようです。

そのテクスチャを色を変更した以下のpngに差し替えます。差し替えた後もファイル名は必ず一致させてください。

あとはgltfファイルからエクスポートするだけです。

clusterで確認してみるとアバターのシャツが差し替わっているはずです。

テクスチャを変えたいぐらいであればVSCodeだけでできちゃうのでぜひ試してみてください。

改変例2: VRM1.0のExpressionのOverride設定をVSCodeで変更する

お次はVRM1.0のExpression(表情)のOverride設定をVSCodeで変更してみようと思います。

ちなみに今回の作業内容は以下の「エモート中に口が動くようにする」をUnityを使わずVSCodeで実現するやり方になっています。

creator.cluster.mu

今回用意したVRoidStudioから出力されたアバターですが、↑の記事と同様にOverride設定がないのでエモート「笑顔」のときにまばたきが発生すると表情が崩れてしまいます。

今回はエモート「笑顔」のときにまばたきをブロックして、表情が崩れるのを回避するように設定したいと思います。

gltfファイルのJSONのから "expressions" 項目を確認する

まずは表情設定項目である "expressions" をgltf内で確認しましょう。"expressions"はVRM1.0におけるExpressionの設定項目になっています。

VSCodeでgltfファイルを開いて検索(Ctrl+F)で "expressions": と検索すると飛べます。

ここを改変することでExpressionの設定変更が可能になります。

対象のExpressionのoverrideBlink、overrideLookAt、overrideMouthを変更する

VRM1.0の仕様書のVRMC_vrm-1.0/expressions.ja.md の「プロシージャルのオーバーライド」を参照すると以下の記載があります。

つまり対象のExpressionの表情でOverride設定を指定する場合は、overrideBlink, overrideLookAt, overrideMouth それぞれに none, block, blend のいずれかを指定すれば良いことになります。

試しに改変前のgltfファイルのexpressions項目のエモート「笑顔」に該当するhappyを見てみると以下のようになっています。

      "expressions": {
        "preset": {
          "happy": {
            "morphTargetBinds": [
              {
                "node": 126,
                "index": 3,
                "weight": 1
              }
            ],
            "isBinary": false,
            "overrideBlink": "none",
            "overrideLookAt": "none",
            "overrideMouth": "none"
          },

overrideBlink, overrideLookAt, overrideMouth それぞれに none つまり「指定無し」になっているため、エモート「笑顔」中にまばたきがブロックされていなかったことがわかります。

今回はまばたきやリップシンクなどの表情切替をすべてブロックしたいので、overrideBlink, overrideLookAt, overrideMouth に block を指定します。

      "expressions": {
        "preset": {
          "happy": {
            "morphTargetBinds": [
              {
                "node": 126,
                "index": 3,
                "weight": 1
              }
            ],
            "isBinary": false,
            "overrideBlink": "block",
            "overrideLookAt": "block",
            "overrideMouth": "block"
          },

こうすることでエモート「笑顔」中は "overrideBlink": "block",によりまばたきが、"overrideMouth": "block"によりリップシンクがブロックされるので結果的に表情が崩れることを避けられます。

VRMに再エクスポートして確認する

このgltfファイルからエクスポートしてclusterで確認してみると、エモート「笑顔」中はまばたきが発生せずマイクに声を入れても口が変形しなくなっていることが確認できます。

他Expression (angry, sad, aa, ih, ou, etc..) も同様にoverrideBlink, overrideLookAt, overrideMouth を編集することでOverride設定の変更が可能です。

VSCodeとUnityのどっちがやりやすいかは人それぞれかと思いますがよかったらご活用ください！

おまけ: VSCodeでモデルをプレビューする

glTF Toolsにはモデルをプレビューする機能がついているので紹介します。

ボタンはgltfファイルを開いた状態のときにタブの右側に出現しています。

VRMのポーズを変えたりはできませんが、簡易的なモデルの確認に使えます。

雑感

去年に引き続きVRMを取り上げてみましたがいかがでしたでしょうか？

今年からクラスターでもVRM1.0アバターが使用できるようになりましたし、みなさんのVRMライフの一助になれば幸いです。

明日のクラスター Advent Calendar 2024の18日目は @MSA-iさんの記事になります。お楽しみに！

記事をご覧いただきありがとうございました！それでは～

すぎしーのXRと3DCG

主にXR, Unity, 3DCG系の記事を投稿していきます。

Visual Studio CodeでVRMを改変する