Slide 1

Slide 1 text

clusterでLOD対応したときの話 クラスター株式会社 xyx

Slide 2

Slide 2 text

Cluster, Inc. All Rights Reserved. 誰? xyx clusterでTech Leadやってます たまに調香とか作曲もしてます @xanxys_

Slide 3

Slide 3 text

今日する話

Slide 4

Slide 4 text

cluster 大加速祭2021 Keynote https://youtu.be/wRErhyoT70c?t=1261

Slide 5

Slide 5 text

モデルの自動変換 & LODでモバイル環境でもVRM50体表示できるようになった 開発したVRM minifierの(めっちゃ)技術的な話をします glTF-2.0 spec を手元にご用意ください LOD全体の裏話は↓で見れます Cluster Tech Talk https://youtu.be/WyC76fzzzCA?t=7629

Slide 6

Slide 6 text

10分で理解するVRM minifier

Slide 7

Slide 7 text

Cluster, Inc. All Rights Reserved. 概要 VRMを2種類に変換して クライアントに配信 変換は1secぐらいで終わる (が、システム全体でキャッ シュは3階層ぐらいある) 今日は積極的なminify (VRM minifier)の話をします

Slide 8

Slide 8 text

Cluster, Inc. All Rights Reserved. VRM minifier 20,301 verts / 23,387 tris / 9.8MB 
 7 static mesh + 4 skinned mesh 
 100 nodes
 1,998 verts / 1,526 tris / 0.2MB 
 1 skinned mesh
 18 nodes


Slide 9

Slide 9 text

Cluster, Inc. All Rights Reserved. VRM minifier 出力仕様 ● bone: VRM必須ボーンのみ ● mesh: Δ~2K, ~2K頂点 skinned mesh ひとつ ● material: unlit (opaque or alphacut), ~256px ひとつ 実装 ● go ● qmuntal/gltf + 数千行の独自コード 設計思想 ● 出力VRMの使用メモリの上限保証 ● 小ささの限界追求: プロダクト設計のベースラインとして機能させる ○ 非表示やプレースホルダのぎりぎり手前

Slide 10

Slide 10 text

Cluster, Inc. All Rights Reserved. minifier データフロー

Slide 11

Slide 11 text

Cluster, Inc. All Rights Reserved. マテリアル変換 Standard/MToon/Unlit → Unlitに ● base textureとemissive textureの統合 ● transparent → alpha cut ● 透明部分のmesh消去 VRoid Studioの服は 透明テクスチャ多用してるので 簡略化前に削らないと 見えないメッシュに貴重なポリゴン が吸われてしまう

Slide 12

Slide 12 text

Cluster, Inc. All Rights Reserved. メッシュ変換 I ひとつの空間に正規化してから統合 skinningはjoint nodeとinverse bind matrixが大事 ● node(skinとskeleton)のtransformは不要 glTF仕様では珍しく(?)skinは解釈が難しい書き方になってる https://github.com/KhronosGroup/glTF-Tutorials/blob/master/gltfTutori al/gltfTutorial_020_Skins.md 大変そうにしてる人たち https://github.com/KhronosGroup/glTF-Tutorials/issues/17 https://github.com/KhronosGroup/glTF/issues/1270 https://github.com/KhronosGroup/glTF/pull/1195

Slide 13

Slide 13 text

Cluster, Inc. All Rights Reserved. メッシュ変換 II メッシュ簡略化: ↓の論文を実装するだけ 高速化にコツがいる ● 部分的にpriorityが更新されるpriority queue ファンシーな簡略化アルゴリズムより、 実データ・要望に合わせたコスト関数の設計が肝 Surface Simplification Using Quadric Error Metrics (1997) doi.org/10.1145/258734.258849 https://www.cs.cmu.edu/~./garland/Papers/quadrics.pdf

Slide 14

Slide 14 text

Cluster, Inc. All Rights Reserved. 学び 実データで地道に改善していくのが大事 存在する仕様はすべて使われる 例 skin meshのbone hierarchyのネスト構造・スケーリング ● アバター改変勢のデータ構造の特徴 opaqueの場合alphaは無視しなければならない(MUST) ● 透明なテクスチャをopaqueで使ってる人がいる UVのrepeat mode textureが存在しない(flat colorな)mesh などなど…

Slide 15

Slide 15 text

Cluster, Inc. All Rights Reserved. 学び こういう(Web-basedな) 比較ツールをつくると 圧倒的に捗る ● 手動+CI ここに数日掛けても 絶対に工数のもとが取れる

Slide 16

Slide 16 text

Cluster, Inc. All Rights Reserved. me/v 元になってるのはme/v ● Web VRM viewer ● 編集もちょっとできる ● glTFデバッグに便利 これは個人でやってて オープンソース https://xanxys.github.io/mev/

Slide 17

Slide 17 text

宣伝

Slide 18

Slide 18 text

Cluster, Inc. All Rights Reserved. 宣伝 採用加速中! 🔍「Wantedly cluster」で検索 https://speakerdeck.com/clusterinc/we-are-hiring 社員インタビュー記事 会社説明記事