Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

    View full-size slide

  2. 自己紹介
    • 山本 允葵
    (Masaki Yamamoto)
    えむにわ
    @m2wasabi
    定職に就かずにふらふらしてるおっさん
    フ リ ー ラ ン ス エ ン ジ ニ ア
    夏なのにイベントなさすぎて鬱

    View full-size slide

  3. 自己紹介
    • 山本 允葵
    (Masaki Yamamoto)
    えむにわ
    @m2wasabi
    新しいものに何でも食いつく
    雑食系野良エンジニア(フリーランス)
    Web,クラウド,IoT,xR周りが飯のタネ
    引っ越したいので職探し中(信用について考えさせられる日々)
    https://m2wasabi.booth.pm/
    Boothで書いたもの☝

    View full-size slide

  4. VRM関連で作ったもの
    OSSのアバターパペットツール
    https://github.com/m2wasabi/LiveAvatar
    身につける装備なしで使える!
    バーチャル対面コミュニケーション
    守衛のおじさん や 受付けのお姉さん
    アップデートしていいんだよ!
    設置はシンプル!
    Viveコントローラー持って
    椅子に座るだけ!
    VOICEROIDなどの音声合成にも対応!
    LiveAvatar
    VRMを読み込むUI
    https://github.com/m2wasabi/VRMLoaderUI
    ソースは MITライセンス
    アートワークは CC0
    編集自由なのでカスタマイズして使おう!
    VRM Loader UI

    View full-size slide

  5. 続・
    VRM関連で作ったもの
    • Looking Glass Libraryでアプリ公開してます
    • 今日、LookingGlassLargeで遊べます!!
     ⇒ Thanks!! なかじさん
    モーションはグレイさんのvmdモーションを
    Unityに移植したもの(移植・配布許可済)
    https://ux.getuploader.com/m2wunity/download/1

    View full-size slide

  6. 宣伝
    • 技術書典7で DataDogAgentの本書きます!
     お68C
    VRMちゃうやんけ!! VRMはネタが足りませんでした…すまぬ
    そして原稿はこれからなのだ…

    View full-size slide

  7. 今回の内容
    • バイナリ ヨム ゴリラについて
     何それ
     ゴリラ ノ ナリカタ
     VRMを読む
    • VRMメタ情報表示の高速化
     標準的なメタ情報の表示方法
     ゴリラのメタ情報の表示方法
     VRM.QuickMetaLoader

    View full-size slide

  8. バイナリ ヨム ゴリラ とは
    • バイナリを直接読む知性と力を持った
    ジャングルの王

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    glTF
    JSON
    JSON
    glTF のバージョン
    全容量 byte
    チャンク容量 byte
    分析

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. VRMを読む
    • JSONを抜き出してみる

    View full-size slide

  22. VRMを読む
    • JSONを抜き出してみる
     glTF2.0拡張形式だ!
     VRM独自の追加情報は
     extentions > VRM 以下
    glTF2.0についての参考資料
    https://github.com/KhronosGroup/glTF
    https://qiita.com/emadurandal/items/1a034c4addd7ff8b5184
    見覚えのある
    データ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. VRMを読む
    • Q:JSONが終わったらどうなってるの
     0x14 + 0x019DAC = 0x019DC0
    • A:バイナリが詰まってるよ
    BIN
    チャンク容量 byte
    PNGだ
    使い方:
    アドレスと容量を指定して抜き出すだけ

    View full-size slide

  26. VRMを読む
    • VRM完全に理解した!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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




    View full-size slide

  31. ゴリラのメタ情報の表示方法
    • ゴリラ JSON ヨクワカラナイ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. VRM.QuickMetaLoader
    • バイナリを直接読むことにより
    最短手でメタ情報を読み込むライブラリ
     サムネイルの読み込みも
    ゴリゴリしてるが説明は略…!!
     MITライセンス
     どんどん使ってくだせ!!
     使い方は簡単3行!
     詳しくはGitHub見てね
    https://github.com/m2wasabi/VRMQuickMetaLoader

    View full-size slide

  36. まとめ
    • VRM完全に理解した!
    • バイナリ ヨム ゴリラ ツヨイ

    View full-size slide

  37. Thanks for your attention
    おしまい!

    View full-size slide