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

VRoid Studioの 「透明なメッシュを削除」の先に挑んでみた

reud
October 03, 2023
490

VRoid Studioの 「透明なメッシュを削除」の先に挑んでみた

PIXIV MEETUP 2023で発表したLTスライドです

reud

October 03, 2023
Tweet

Transcript

  1. pixiv Inc.
    VRoid Studioの
    「透明なメッシュを削除」
    の先に挑んでみた
    @reud
    1

    View Slide

  2. Profile
    reud
    BOOTH部 CSサポートチーム
    エンジニア
    読みは「れうど」
    新卒エンジニア
    好きな食べ物: 麻辣刀削麺
    詳しくは話かけてください!
    2

    View Slide

  3. 注意!
    3

    View Slide

  4. これだけは読んでね
    ● VRoid Studioで検討されていた機能について話します
    ● この話はreudの内定者アルバイト時代の取り組みです
    ● ピクシブには技術的に面白い挑戦が沢山行われているぞ!の一例を話します
    ● アルゴリズムの話をメインにします
    ○ 詰め込んでいるのでスライド公開時に見返して頂けると!
    ○ 気になることがあればAsk The Speakerで話かけてください!
    4


    View Slide

  5. VRoid Studioの
    「透明メッシュを削除する」機能
    5

    View Slide

  6. 「透明メッシュを削除する」 機能の概要
    ● 不要なポリゴンの削減が出来る
    ● テクスチャのピクセルを見ている
    ● 部分的に透明の場合は削除されない

    (黒い部分は透明を表す)

    6

    View Slide

  7. 透明部分を考慮しないシェーダー
    ● UnityのRendering ModeがOpaqueのStandardシェーダー
    ○ とか・・・
    VRoid Studioで作成したアバターの
    シェーダーを上記のものに変更すると・・・?
    7

    View Slide

  8. 「海苔」と呼ばれる現象
    8

    View Slide

  9. やりたいこと
    9

    View Slide

  10. こうしたい!
    10

    View Slide

  11. 二次元に落とす
    ● 扱いづらい!
    11

    View Slide

  12. モデル座標とUV座標 三角形上にある点は
    三角形を作る点のベクトルで表せる
    12

    View Slide

  13. 導出しよう 1. モデル座標で点A,B,Cが三角ポリゴンを作る
    2. モデル座標A,B,CのUV座標をa,b,cとする
    3. UV座標において三角形abcの内部に点pがある
    4. 点p (x,y)からのモデル座標P (X,Y,Z)を求めたい
    モデル座標とUV座標の関係から以下が成り立つ
    j,kを求めれば良い
    13

    View Slide

  14. ちょっと分かりやすくなった
    14

    View Slide

  15. 平面で考える
    15
    ※ 白い部分は画像の透過部分とします

    View Slide

  16. ピクセルの境界線をUV座標の世界に落とす
    ● サイズが4x4の画像 とする
    ● 左下が(0,0)、右上が(4,4)として点打ち
    隣接する二点でピクセルの境界線が表せる!
    さらに座標をそれぞれ
    ・幅のピクセル数
    ・高さのピクセル数
    で割るだけでUV座標に変換出来る
    16

    View Slide

  17. ピクセルの境界線をUV座標の世界に落とす
    【例】
    ● (2,3) は境界線を持つ?
    ○ 持つとしたらどの方向にある?
    上下左右の境界線情報を4bitで持つとシンプルに解ける!
    ・4bitで各ビットが(上|下|左|右)に境界線があるかを表す変数nを作る
     ・初期値は0(どの方向にも境界線が無い)とする
    (P16の形式で表せる) 点の周辺4ピクセル を見て、
    左下が非透明ピクセル... 左と下に対応するbitを反転
    左上が非透明ピクセル... 左と上に対応するbitを反転
    右上が非透明ピクセル... 右と上に対応するbitを反転
    右下が非透明ピクセル... 右と下に対応するbitを反転
         ・・・で境界線と方向を求めることが出来る
    17

    View Slide

  18. 境界線と三角ポリゴンとの交点に着目する
    18

    View Slide

  19. 交差点からグラフを作る
    19

    View Slide

  20. グラフをなぞって多角形を作り出す
    20

    View Slide

  21. グラフをなぞって多角形を作り出す
    21

    View Slide

  22. 透明/非透明部分に分離された多角形が出来ました
    22

    View Slide

  23. グラフをなぞって多角形を作り出す
    Ear Clipping(耳取り法)
    詳しくは geometrictools.com
    「Triangulation by Ear Clipping」が分かりやすい
    シンプルな形状の多角形を複数の三角形に分割する
    手法
    1. 連続する三頂点選び領域内に三角形が作れるか
    調べ続ける
    2. 多角形領域内に三角形が作れるならその三角形
    を切り抜く
    多角形が三角形になるまで1,2を繰り返す。
    23

    View Slide

  24. 透明な三角形を消す
    24

    View Slide

  25. モデル座標で表して完成!
    25

    View Slide

  26. これで万事解決・・・!
    とはいかなくて
    26

    View Slide

  27. たくさんの課題達
    ● Hole in Holeの対応(複雑!)
    ● 頂点(ポリゴン数)増えすぎ問題
    ● 三角ポリゴンに対してやる処理が多く、シンプルに重い
    ● floatの世界で線分の交点を使った処理を書くと誤差が本当に大変
    ← Hole in Holeの例
    穴の開いた多角形の穴に多角形がある
    27

    View Slide

  28. ありがとうございました!
    28

    View Slide