$30 off During Our Annual Pro Sale. View Details »

VRM勉強会03 VRMのバイナリを読もう -VRM一覧表示を爆速にする-

m2wasabi
August 27, 2019

VRM勉強会03 VRMのバイナリを読もう -VRM一覧表示を爆速にする-

VRMファイルのバイナリを読む話です。
詳細が分からなくても、VRM.QuickMetaLoader を使ってみましょう。
https://github.com/m2wasabi/VRMQuickMetaLoader

m2wasabi

August 27, 2019
Tweet

More Decks by m2wasabi

Other Decks in Technology

Transcript

  1. VRMのバイナリを読もう VRM一覧表示を爆速にする VRM勉強会 #3 2019/08/27 えむにわ @m2wasabi

  2. 自己紹介 • 山本 允葵 (Masaki Yamamoto) えむにわ @m2wasabi 定職に就かずにふらふらしてるおっさん フ

    リ ー ラ ン ス エ ン ジ ニ ア 夏なのにイベントなさすぎて鬱
  3. 自己紹介 • 山本 允葵 (Masaki Yamamoto) えむにわ @m2wasabi 新しいものに何でも食いつく 雑食系野良エンジニア(フリーランス)

    Web,クラウド,IoT,xR周りが飯のタネ 引っ越したいので職探し中(信用について考えさせられる日々) https://m2wasabi.booth.pm/ Boothで書いたもの☝
  4. VRM関連で作ったもの OSSのアバターパペットツール https://github.com/m2wasabi/LiveAvatar 身につける装備なしで使える! バーチャル対面コミュニケーション 守衛のおじさん や 受付けのお姉さん アップデートしていいんだよ! 設置はシンプル!

    Viveコントローラー持って 椅子に座るだけ! VOICEROIDなどの音声合成にも対応! LiveAvatar VRMを読み込むUI https://github.com/m2wasabi/VRMLoaderUI ソースは MITライセンス アートワークは CC0 編集自由なのでカスタマイズして使おう! VRM Loader UI
  5. 続・ VRM関連で作ったもの • Looking Glass Libraryでアプリ公開してます • 今日、LookingGlassLargeで遊べます!!  ⇒

    Thanks!! なかじさん モーションはグレイさんのvmdモーションを Unityに移植したもの(移植・配布許可済) https://ux.getuploader.com/m2wunity/download/1
  6. 宣伝 • 技術書典7で DataDogAgentの本書きます!  お68C VRMちゃうやんけ!! VRMはネタが足りませんでした…すまぬ そして原稿はこれからなのだ…

  7. 今回の内容 • バイナリ ヨム ゴリラについて  何それ  ゴリラ ノ

    ナリカタ  VRMを読む • VRMメタ情報表示の高速化  標準的なメタ情報の表示方法  ゴリラのメタ情報の表示方法  VRM.QuickMetaLoader
  8. バイナリ ヨム ゴリラ とは • バイナリを直接読む知性と力を持った ジャングルの王

  9. ゴリラ ノ ナリカタ • 好きなキャラを選んでください 北国の独裁者 日本のロックの重鎮

  10. ゴリラ ノ ナリカタ • 好きなバイナリエディタを選んでください https://gitlab.com/devill.tamachan/binaryeditorbz/ ※OSS化+開発移管してるので古参は注意!! https://www.vector.co.jp/soft/win95/util/se079072.html なんと1999年製

  11. ゴリラ ノ ナリカタ • Stirlingを選んだら僕と握手

  12. ゴリラ ノ ナリカタ • Stirlingオススメ設定

  13. ゴリラ ノ ナリカタ • Stirlingオススメ設定

  14. ゴリラ ノ ナリカタ • Stirlingオススメ設定 もう迷わない!!

  15. ゴリラ ノ ナリカタ ツール ツカウダケ カンタン

  16. VRMを読む • とりあえず開いて中見てみましょう やめろ!

  17. VRMを読む • とりあえず開いて中見てみましょう お゛

  18. VRMを読む • とりあえず開いて中見てみましょう … glTF JSON JSON glTF のバージョン 全容量

    byte チャンク容量 byte 分析
  19. VRMを読む • とりあえず開いて中見てみましょう glTF JSON JSON glTF のバージョン 全容量 byte

    チャンク容量 byte 全容量:0x00783838 = 7,878,712 bytes チャンク[0]容量: 0x00019DAC = 105,900bytes チャンク[0]内容:J SON
  20. VRMを読む • とりあえず開いて中見てみましょう glTF JSON JSON glTF のバージョン 全容量 byte

    チャンク容量 byte 全容量:0x00783838 = 7,878,712 bytes チャンク[0]容量: 0x00019DAC = 105,900bytes チャンク[0]内容:J SON アドレス 0x00000014 から 105,900byte切り取ればJSONだ
  21. VRMを読む • JSONを抜き出してみる

  22. VRMを読む • JSONを抜き出してみる  glTF2.0拡張形式だ!  VRM独自の追加情報は  extentions >

    VRM 以下 glTF2.0についての参考資料 https://github.com/KhronosGroup/glTF https://qiita.com/emadurandal/items/1a034c4addd7ff8b5184 見覚えのある データ
  23. VRMを読む • Q:JSONが終わったらどうなってるの  0x14 + 0x019DAC = 0x019DC0

  24. VRMを読む • Q:JSONが終わったらどうなってるの  0x14 + 0x019DAC = 0x019DC0 •

    A:バイナリが詰まってるよ BIN チャンク容量 byte PNGだ
  25. VRMを読む • Q:JSONが終わったらどうなってるの  0x14 + 0x019DAC = 0x019DC0 •

    A:バイナリが詰まってるよ BIN チャンク容量 byte PNGだ 使い方: アドレスと容量を指定して抜き出すだけ
  26. VRMを読む • VRM完全に理解した!

  27. VRMメタ情報表示の 高速化

  28. 標準的なメタ情報の表示 • UniVRMの場合 var bytes = File.ReadAllBytes("AliciaSolid.vrm"); var context =

    new VRMImporterContext(); context.ParseGlb(bytes); var meta = context.ReadMeta(true); おなじみの4手
  29. 標準的なメタ情報の表示 • UniVRMの場合 var bytes = File.ReadAllBytes("AliciaSolid.vrm"); var context =

    new VRMImporterContext(); context.ParseGlb(bytes); var meta = context.ReadMeta(true); ここで ・JSON抽出 ・JSONパース ・バイナリ領域の分割読み込み をしている パースされたJSONから Metaオブジェクトの取り出し サムネイルの取り出し
  30. 標準的なメタ情報の表示 • UniVRMの場合 var bytes = File.ReadAllBytes("AliciaSolid.vrm"); var context =

    new VRMImporterContext(); context.ParseGlb(bytes); var meta = context.ReadMeta(true); ここで ・JSON抽出 ・全JSONパース ・バイナリ領域の分割読み込み をしている パースされたJSONから Metaオブジェクトの取り出し サムネイルの取り出し 実 は 軽 い
  31. ゴリラのメタ情報の表示方法 • ゴリラ JSON ヨクワカラナイ

  32. ゴリラのメタ情報の表示方法 • ゴリラ JSON ヨクワカラナイ • トリアエズ "extensions": サガス •

    ツギ "VRM": サガス • ツギ "meta": サガス • } マデノ ナガサ ハカル • トリダス
  33. ゴリラのメタ情報の表示方法 • ゴリラ JSON ヨクワカラナイ • トリアエズ "extensions": サガス •

    ツギ "VRM": サガス • ツギ "meta": サガス • } マデノ ナガサ ハカル • トリダス
  34. ゴリラのメタ情報の表示方法 • ゴリラ JSON ヨクワカラナイ • トリアエズ "extensions": サガス •

    ツギ "VRM": サガス • ツギ "meta": サガス • } マデノ ナガサ ハカル • トリダス 10倍速!!
  35. VRM.QuickMetaLoader • バイナリを直接読むことにより 最短手でメタ情報を読み込むライブラリ  サムネイルの読み込みも ゴリゴリしてるが説明は略…!!  MITライセンス 

    どんどん使ってくだせ!!  使い方は簡単3行!  詳しくはGitHub見てね https://github.com/m2wasabi/VRMQuickMetaLoader
  36. まとめ • VRM完全に理解した! • バイナリ ヨム ゴリラ ツヨイ

  37. Thanks for your attention おしまい!