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

by m2wasabi

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

VRMを読む • VRM完全に理解した！

Slide 27

Slide 27 text

VRMメタ情報表示の高速化

Slide 28

Slide 28 text

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Thanks for your attention おしまい！