clusterでLOD対応したときの話 / cluster LOD

2021年3月31日(水) @第5回VRM勉強会 by xyx (@xanxys_)

LOD全体の裏話は↓にて
Cluster Tech Talk https://youtu.be/WyC76fzzzCA?t=7629

Transcript

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

   View Slide

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

   View Slide

3. 今日する話
   

   View Slide

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

   View Slide

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

   View Slide

6. 10分で理解するVRM minifier
   

   View Slide

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

   View Slide

8. 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

   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. 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
    

    View Slide

13. 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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

17. 宣伝
    

    View Slide

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

    View Slide