VRMをVScodeで展開して閲覧/編集する

#はじめに
VRMはglTF-2.0のバイナリ形式glbをベースとして構成されています。そして、glbはテクスチャやボーン情報などが定義されているJSONファイル(.gltf)、アニメーションやジオメトリ情報を含むバイナリファイル(.bin)、テクスチャの画像ファイル(.jpg,.png)で構成されています。

実際にバイナリエディタでVRMファイルを開くとglTF形式を示すファイルシグネチャ(上位8バイトあたりまで)と明らかにJSONで記述されているバイナリ(16バイト目あたりの宣言と真っ赤に染まるビットイメージ)が確認できますね。
![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/140271/54f00531-90ac-4170-359d-bbb667b78a2c.png)

というわけで、VScodeを用いてVRMをglbとして展開し、gltfを取り出してモデルのプレビューや、テクスチャやオブジェクト情報などを再定義して編集してみようと思います。


gltfに関するより詳しい解説はこちらから
 - [gltf Github](https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md)
 -  [次世代の3Dデータフォーマット決定版 glTF 2.0 の概要図を日本語訳してみた](https://qiita.com/randall2835/items/ec911cb6b0f10677559b)



#動作環境
・Unity 2017.4.12f1 (64-bit)
・Vroid　Win版(64bit)　v0.2.13-p1
・VScode 1.28.1.0
・glTF Tools v2.1.16

#VScodeで閲覧/編集する手順
1. VScodeにglTF Toolsを入れる
2. 拡張子を.vrmから.glbに変更する
3. VScodeで読み込む
4. 閲覧/編集する
5. 保存する
6. 拡張子を.glbから.vrmに変更する

※サンプルモデルとしてVroidで作成したモデルを利用しています(デフォルトから変更なし)。

##1.VScodeにglTF Toolsを入れる
VScodeのEXTENSIONタブから「gltf」で検索をかけると見つかるのでそこからインストールをします。
![2018-10-17 (2).png](https://qiita-image-store.s3.amazonaws.com/0/140271/608fa4b5-3e23-04b3-8c8d-305ab8d7c6dd.png)


もしくは、以下のVisual Studio Marketplaceのサイトからでもインストールできます。
https://marketplace.visualstudio.com/items?itemName=cesium.gltf-vscode

##2.拡張子を.vrmから.glbに変更する
対象のvrmファイルを選択し、名前の変更で「\~\~\~\~.vrm」を「~~~~.glb」に変更します。ファイル名に拡張子が表示されない場合は、拡張子の表示がOFFになっているので、プロファイラーの表示設定を変更しましょう。
![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/140271/dfa7cfce-a9f8-7534-fce5-84269df4cb92.png)


##3. VScodeで読み込む
VScodeのコマンドパレット(Ctr+Shift+P)を開いて、glTF「Import form GLB」を選択します。するとプロファイラーが立ち上がるので、そこから拡張子を.glbに変更したvrmファイルを選択します。

その後、glb展開後のファイル名を聞かれるので、拡張子を.gltfにして保存します。見事JSONファイル(.gltf)とバイナリファイル(.bin)、テクスチャの画像(.png、.jpg)が出力されました。
また、同時にVScodeでgltfファイルが開かれたと思います。もし開いていなかったら先ほど展開された.gltfファイルをVScodeで開いてください。
![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/140271/27d9d958-ccd9-3d2f-4b67-95d61d98944a.png)

##3. 閲覧/編集する
VRMとglTFのファイル構造は[ドワンゴさんのGithub](https://dwango.github.io/vrm/vrm_spec/#%E3%82%B5%E3%83%A0%E3%83%8D%E3%82%A4%E3%83%AB-thumbnail)や[gltf Github](https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md)
にて詳しく解説されているので、編集について全ては紹介しません。
そちらの解説を元に編集してみてください。

本記事では個人的に試してみた編集を例として紹介します。

###プレビュー
Preview 3D Model(ALT+G)を行うとモデルのプレビューができます。原因不明ですが、たまに表示に失敗するときがあるのでその際は一度タブを消して再度表示し直すと治ります。
![2018-10-18 (1).png](https://qiita-image-store.s3.amazonaws.com/0/140271/5f77d9a9-a40a-54dd-5d6e-6eed4f05797a.png)

###サイズや向きの変更
nodes以下にモデルを構成するオブジェクトが定義されています。こちらのrotationやscaleを変更するとモデルの対応したオブジェクトの向きや大きさが変わります。また、こちらで行った変更はUnityのInspectorでも確認することができます。
![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/140271/3d5d8bbf-010d-55cb-91d0-72ae66548f81.png)

Ctr+Sで保存すると、変更がプレビューにも反映されます。以下は右手(VroidだとJ_Bip_R_Hand)のscaleを変更している様子です。
<blockquote class="twitter-tweet" data-partner="tweetdeck"><p lang="ja" dir="ltr">あ、いいぞこれ <a href="https://t.co/hTthjf9hOa">pic.twitter.com/hTthjf9hOa</a></p>&mdash; かいき (@kaikiofkaiki) <a href="https://twitter.com/kaikiofkaiki/status/1051781973113430016?ref_src=twsrc%5Etfw">October 15, 2018</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

###テクスチャを変更する
images以下にテクスチャによって参照される画像が定義されています。変更したいテクスチャのuriのファイル名を書き換えたら変更されます。
画像では、Vroidデフォルトの制服テクスチャをユニティちゃんの服のテクスチャに入れ替えてます(向きもサイズも合わせてないので綺麗にはなっていない)。
uriのファイル名にマウスを重ねると、簡易ビューによって画像の確認をすることができます。また、マウスを重ねた状態でCtrキーを押すことでVScode上の別タブで画像のプレビューもできます。
![2018-10-19 (4).png](https://qiita-image-store.s3.amazonaws.com/0/140271/4a5b64bc-edc4-7844-a21b-1cd8679cd649.png)

## 5. 保存する
Export to GLBを行い、.glbの形式で保存します。
![2018-10-19 (7).png](https://qiita-image-store.s3.amazonaws.com/0/140271/dbc14e92-0ed9-50be-aaa6-7e62586f0e7d.png)

## 6.　拡張子を.glbから.vrmに変更する
手順5で出力したglbファイルを手順2と逆の操作を行い、拡張子を.vrmに変更します。
これにて完了です。
Unityなどでインポートして確かめてみてください。

#参考

- [glTFに触れてみる](https://www.tattichan.work/entry/2018/07/02/glTF%E3%81%AB%E8%A7%A6%E3%82%8C%E3%81%A6%E3%81%BF%E3%82%8B)
- [dwango on GitHub](https://dwango.github.io/vrm/vrm_spec/#%E3%82%B5%E3%83%A0%E3%83%8D%E3%82%A4%E3%83%AB-thumbnail)
- [glTF Github](https://github.com/KhronosGroup/glTF/blob/master/specification/2.0/README.md#nodes-and-hierarchy)
- [glTF Tools](https://marketplace.visualstudio.com/items?itemName=cesium.gltf-vscode)