【タガヤス その27】わくわくUnity！ ～CPUとGPUを酷使しよう～【仙台発信の定期勉強会】 https://tagayas.connpass.com/event/255830/ 発表資料

1. VRChatでお酒が注げる
飲み物アセットの紹介
myxy

2. 自己紹介
● myxy
● @3405691582
● 愛知県出身 大学から仙台在住
● 30歳
● 入社3年目
● 業務は主にUnityでクライアントサイドの開発
● 最近はVRChatを遊んでいる

3. VRChat
● VRHMD対応メタバース
● アバター等3Dモデルをアップロードして遊べる
● 制作の自由度が高い
○ スクリプトが使える（ほぼC#で書ける）
○ シェーダが使える（ビルトインレンダーパイプライン）

4. 発表内容：製作物の紹介
VRChat上で動作するグラスとボトルのアセット
https://youtu.be/H6QDChcddqY

5. アセットに用いられている各種技術を
● GPU編
○ グラスや液体の描画
● CPU編
○ 揺れや体積の物理演算
の2つに分けて解説

6. GPU編

7. グラスの描画にはSDF (Signed Distance Field)を用いる
空間位置から物体表面からの距離を出す関数
物体外側が正、物体内側が負となる
円の距離場 正方形の距離場

8. 複数のSDFを組み合わせることで
様々な形状を作ることができる
min(円,正方形) max(円,正方形)

9. 3次元のSDFはレイマーチングという
レイトレーシングの手法を用いて描画することができる
float sphere(vec3 p, float r)
{
return length(p) - r;
}
float cube(vec3 p, vec3 b)
{
vec3 q = abs(p) - b;
return length(max(q,0.)) + min(max(q.x,max(q.y,q.z)),0.);
}
float map(vec3 p)
{
return min(cube(p-.25, vec3(.5)),sphere(p+.25,.5));
}

10. アセットではグラス本体と内部の液体をSDFで表現し、
レイマーチングを用いてCubeのメッシュに描画している

11. Q: なんでそんな面倒なことするの？モデリングすれば？
A:
● 動作に合わせて傾いたり波が立ったりする
液体の複雑な形状はモデリングでは再現できない
計算したほうが都合が良い
● パラメータを変更するだけで様々な形状、色のボトルを
生成することができる

12. 描画の流れ
視点からボトル表面にレイを飛ばす
→ボトル表面の情報が取れる
内部の水面情報や
ボトル裏側の情報も必要
複数回に分けてレイを飛ばすことで
各部の情報を取得

13. 1. 視点からボトルに向けてレイを当てる
視点
描画の流れ
2. レイ方向に十分離れた地点から
視点方向にレイを当てる
2つのレイ衝突地点の中間点が
ボトルのガラス部分にあるかどうかで
描画ピクセルにおいて
ガラスが重なっているかどうか判定できる

14. 液体部分に対しても同様にレイを飛ばすことで
● 水面を上から見ている
● 水面を下から見ている
● 水面を見ていない
等の状態を判定することができる
視点

15. ● ボトルの表面を見ているか
● 水を見ているか
● 水面を表面/裏面から見ているか
● 見えている水面は
ガラスに遮蔽されるか
等の場合分けを行い、
物理的に整合性が取れるような
ピクセルの描画内容を決定する

16. 透明度
水部分の視点側と視点の逆側にレイを当てているので
液体の厚みの情報が得られる
液体の厚みに対して
指数関数的に透明度が下がる様子を
表現できる

17. 表面張力の表現

18. グラス壁面
グラス壁面からの距離d
0
a*exp(-b*d)
グラスのSDF=壁面からの距離を適当な関数に入れると
壁面付近で盛り上がる形状を表現できる
a

19. 泡
水中に玉を描画 玉を複製
→ →
確率で玉を消去
動きも実装する
炭酸飲料のような泡の表現

20. 水流はレイマーチングではなく円柱状メッシュを変形している
体積、速度に応じて水流の太さが変化する
瓶の口付近では水面高さに合わせて形状が変化する
水流

21. 水流
格子状に展開されたUV座標を用いて各頂点を識別している
スクリプトから渡される水流の位置情報から頂点位置を計算

22. CPU編

23. グラス形状データ
グラスは基本的に回転体
半径の配列（長さ32）をテクスチャに記録している
スクリプトで処理した上でシェーダに渡す

24. ボトル側面形状の計算
半径の配列（長さ32）をCatmull-Rom splineで補間している
半径配列から毎フレーム計算するのではなく
3次の多項式の係数をスクリプトで計算し、
Vector4の配列としてシェーダに渡している
ax^3+bx^2+cx+d

25. 水面揺れの計算
水面全体の傾き
（CPUで計算）
細かい波
（GPUで計算)
最終的な水面形状
+ ⇒

26. 水面に接続されたばね - 質点系を計算
質点の逆方向が水面の向きとなる
振り子の計算

27. 振り子が激しく動くほど
水面の細かい波が大きくなる
具体的には振り子の躍度（加速度の
時間微分）に波の大きさが比例する
振り子の計算

28. グラスは液体の体積を保持している
体積一定であっても水面の傾きによって水面高さは異なる
体積と水面の傾きから水面高さを算出する必要がある
水面高さの計算

29. 目標体積より大きい
水面高さと水面の傾きから液体体積を計算する関数を作り、
目標の体積になるような水面高さを二分探索で求める
目標体積より小さい ・・・

30. 目標体積より大きい
二分探索各ステップ毎の体積計算が重い処理なので
8bit=256段階の水面高さの二分探索を8フレームに分けている
目標体積より小さい ・・・
1フレーム目 2フレーム目 8フレーム目
・・・

31. x
π/2+asin(x)
+t√(1-t^2)
液体部分の体積は弓形の底面の柱の積み重ねとして
近似的に積分する
弓形面積の式に重い関数があるのでテーブル化している

32. 体積断片を積み重ねていく過程で
● 液体部分の体積の最小値
● 空気部分の体積の最小値
がそれぞれ増加していく
● 液体体積最小値が目標液体体積を上回る
● 空気体積最小値が目標空気体積を上回る
ときに目標体積との大小関係が決定し、
計算を打ち切ることで処理を軽くしている
液体
空気
未計算

33. 水流の計算
● 水流チューブは水流方向に
64個のセグメントに分割されている
● 各セグメント毎に
○ 初期速度
○ 現在速度
○ 体積
○ 水流の側面方向
の情報を持つ
● 水流半径は
開口半径√(初期速度/現在速度)
となる

34. 注ぐ処理
● 水流セグメント毎に
レイキャストを行い、
レイが衝突したグラスに
セグメントの体積を追加する
● 注ぐ先の液体の色や泡の量を
変化させる

35. 現状の課題
● GPU・CPU共に重い処理をやっている
○ 特にレイマーチングはループ回数が200回くらい
距離関数等の見直しが必要
● ライティング設定によっては見栄えが悪い
○ VRChatで動くシェーダはありとあらゆる
ライティング設定で機能する必要がある
○ シェーダ書くのがむずかしい

36. Boothで販売中
https://usamimi-zakka.booth.pm/items/3636706