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

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

Transcript

1. pixiv Inc. VRoid Studioの 「透明なメッシュを削除」 の先に挑んでみた @reud 1
2. Profile reud BOOTH部 CSサポートチーム エンジニア 読みは「れうど」 新卒エンジニア 好きな食べ物: 麻辣刀削麺 詳しくは話かけてください！ 2
3. 注意！ 3
4. これだけは読んでね • VRoid Studioで検討されていた機能について話します • この話はreudの内定者アルバイト時代の取り組みです • ピクシブには技術的に面白い挑戦が沢山行われているぞ！の一例を話します • アルゴリズムの話をメインにします ◦ 詰め込んでいるのでスライド公開時に見返して頂けると！ ◦ 気になることがあればAsk The Speakerで話かけてください！ 4

5. VRoid Studioの 「透明メッシュを削除する」機能 5
6. 「透明メッシュを削除する」 機能の概要 • 不要なポリゴンの削減が出来る • テクスチャのピクセルを見ている • 部分的に透明の場合は削除されない ❌ (黒い部分は透明を表す) ⭕ 6
7. 透明部分を考慮しないシェーダー • UnityのRendering ModeがOpaqueのStandardシェーダー ◦ とか・・・ VRoid Studioで作成したアバターの シェーダーを上記のものに変更すると・・・？ 7
8. 「海苔」と呼ばれる現象 8
9. やりたいこと 9
10. こうしたい！ 10
11. 二次元に落とす • 扱いづらい！ 11
12. モデル座標とUV座標 三角形上にある点は 三角形を作る点のベクトルで表せる 12
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
14. ちょっと分かりやすくなった 14
15. 平面で考える 15 ※ 白い部分は画像の透過部分とします
16. ピクセルの境界線をUV座標の世界に落とす • サイズが4x4の画像 とする • 左下が(0,0)、右上が(4,4)として点打ち 隣接する二点でピクセルの境界線が表せる！ さらに座標をそれぞれ ・幅のピクセル数 ・高さのピクセル数 で割るだけでUV座標に変換出来る 16
17. ピクセルの境界線をUV座標の世界に落とす 【例】 • (2,3) は境界線を持つ？ ◦ 持つとしたらどの方向にある？ 上下左右の境界線情報を4bitで持つとシンプルに解ける！ ・4bitで各ビットが(上|下|左|右)に境界線があるかを表す変数nを作る 　・初期値は0(どの方向にも境界線が無い)とする (P16の形式で表せる) 点の周辺4ピクセル を見て、 左下が非透明ピクセル... 左と下に対応するbitを反転 左上が非透明ピクセル... 左と上に対応するbitを反転 右上が非透明ピクセル... 右と上に対応するbitを反転 右下が非透明ピクセル... 右と下に対応するbitを反転 　　　　　・・・で境界線と方向を求めることが出来る 17
18. 境界線と三角ポリゴンとの交点に着目する 18
19. 交差点からグラフを作る 19
20. グラフをなぞって多角形を作り出す 20
21. グラフをなぞって多角形を作り出す 21
22. 透明/非透明部分に分離された多角形が出来ました 22
23. グラフをなぞって多角形を作り出す Ear Clipping(耳取り法) 詳しくは geometrictools.com 「Triangulation by Ear Clipping」が分かりやすい シンプルな形状の多角形を複数の三角形に分割する 手法 1. 連続する三頂点選び領域内に三角形が作れるか 調べ続ける 2. 多角形領域内に三角形が作れるならその三角形 を切り抜く 多角形が三角形になるまで1,2を繰り返す。 23
24. 透明な三角形を消す 24
25. モデル座標で表して完成！ 25
26. これで万事解決・・・！ とはいかなくて 26
27. たくさんの課題達 • Hole in Holeの対応(複雑！) • 頂点(ポリゴン数)増えすぎ問題 • 三角ポリゴンに対してやる処理が多く、シンプルに重い • floatの世界で線分の交点を使った処理を書くと誤差が本当に大変 ← Hole in Holeの例 穴の開いた多角形の穴に多角形がある 27
28. ありがとうございました！ 28