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

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

注意！ 3

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


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

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

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

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

やりたいこと 9

こうしたい！ 10

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

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

導出しよう 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

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

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

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

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

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

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

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

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

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

透明な三角形を消す 24

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

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

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

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