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

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

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

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

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

Cluster, Inc.

March 31, 2021
Tweet

More Decks by Cluster, Inc.

Other Decks in Programming

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