PIXIV MEETUP 2023で発表したLTスライドです
pixiv Inc.VRoid Studioの「透明なメッシュを削除」の先に挑んでみた@reud1
View Slide
ProfilereudBOOTH部 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
reud
erikaheidi
jmmastey
lara
paulrobertlloyd
jponch
tanoku
sonatard
jlugia
edds
keavy
malarkey
geoffreycrofte