グランブルーファンタジー『Project Re：LINK』におけるリアルタイム雲表現の研究と技術紹介！

2017/02/18 GAME CREATORS CONFERENCE'17

Transcript

3. ©  Cygames,  Inc. ©  Cygames,  Inc.
4. ©  Cygames,  Inc. ©  Cygames,  Inc.
5. ©  Cygames,  Inc. ⼤大阪Cygames • 設⽴立立⽇日 • 2015年年4⽉月1⽇日 • 所在地 • グランフロント⼤大阪 • 事業内容 • ハイエンドゲームの開発
6. ©  Cygames,  Inc. グランブルーファンタジー PROJECT  Re:LINK 対応機種 :  PS4 発売⽇日 :  2018年年 予定
7. ©  Cygames,  Inc. ©  Cygames,  Inc. グランブルーファンタジーの空と雲の表現について
8. ©  Cygames,  Inc. 空と雲のコンセプト どこまでも広がる壮⼤大且つ繊細で 気持ちの良良い空の世界を表現する。
9. ©  Cygames,  Inc. 空の世界
10. ©  Cygames,  Inc. 空と雲の形、デザイン ファンタジーらしく不不思議な形から 誰もが理理解できる⼊入道雲などを組み合わせる。
11. ©  Cygames,  Inc. 空と雲の形、デザイン
12. ©  Cygames,  Inc. 空と雲の形、デザイン
13. ©  Cygames,  Inc. 空と雲の形、デザイン
14. ©  Cygames,  Inc. 空と雲の形、デザイン
15. ©  Cygames,  Inc. 空と雲の形、デザイン
16. ©  Cygames,  Inc. 光や影の表現 フォトリアルな空気遠近法を基本としつつ ⼿手書きイラストらしい表現も加える。 影の中にもしっかりと⾊色表現を⼊入れる。
17. ©  Cygames,  Inc. 光や影の表現
18. ©  Cygames,  Inc. 光や影の表現
19. ©  Cygames,  Inc. 他の環境物との関係 空と雲だけの処理理で考えるのではなく、 同じ環境にある物として⾒見見えるようにする。
20. ©  Cygames,  Inc. 他の環境物との関係
21. ©  Cygames,  Inc. 他の環境物との関係
22. ©  Cygames,  Inc. 他の環境物との関係
23. ©  Cygames,  Inc. PROJECT  Re:LINKでは こ の 空の世界を 3Dで 描 く
24. ©  Cygames,  Inc. ©  Cygames,  Inc. 『Project  Re:LINK』における雲表現の研究紹介
26. ©  Cygames,  Inc. 雲表現
27. ©  Cygames,  Inc. 雲表現 眼下に どこまでも広がる 雲表現が必要
28. ©  Cygames,  Inc. どこまでも広がる雲 無限平⾯面下に 雲を充填して 表現 z y x 雲表現
29. ©  Cygames,  Inc. z y x 平⾯面雲 Plane  Cloud 雲表現
30. ©  Cygames,  Inc. ©  Cygames,  Inc. 平⾯面雲 スクリーンショット
31. ©  Cygames,  Inc. ©  Cygames,  Inc.
32. ©  Cygames,  Inc. ©  Cygames,  Inc.
33. ©  Cygames,  Inc. ©  Cygames,  Inc.
34. ©  Cygames,  Inc. 平⾯面雲 1. そもそも雲とは？ 2. 平⾯面雲を形作る⽅方法 3. 光学法則 4. レイマーチ 平⾯面雲の実装に必要な知識識
35. ©  Cygames,  Inc. ©  Cygames,  Inc. 1.そもそも雲とは？ 平⾯面雲の実装に必要な知識識
36. ©  Cygames,  Inc. そもそも雲とは 液体もしくは固体です。 気体ではありません。 Wikipedia⽈曰く… 雲は、 ⼤大気中にかたまって浮かぶ⽔水滴または氷の粒粒（氷晶）のことを ⾔言う。
37. ©  Cygames,  Inc. そもそも雲とは わた雲 ⾼高度度0.5~∼2kmに浮かぶ ⽔水滴。
38. ©  Cygames,  Inc. そもそも雲とは ⾶飛⾏行行機雲 排気ガス中の⽔水蒸気が ⽔水滴や氷晶に なったもの。 ※単なる排気ガスではない！
39. ©  Cygames,  Inc. そもそも雲とは – まとめ 雲は ⽔水滴 もしくは 氷晶 の集まり。
40. ©  Cygames,  Inc. ©  Cygames,  Inc. 2.平⾯面雲を形作る⽅方法 平⾯面雲の実装に必要な知識識
41. ©  Cygames,  Inc. 平⾯面雲を形作る⽅方法 • 雲を形作る⽅方法はいくつか存在します。 • 今回は Volumetric  Noise  Textureを⽤用いた ⼿手続き型(プロシージャル)雲 ⽣生成法を 研究しました。
42. ©  Cygames,  Inc. 平⾯面雲を形作る⽅方法 研究にあたって、Guerrilla  Games社の The  Real-‐‑‒time  Volumetric  Cloudscapes  of   Horizon  Zero  Dawn という資料料を参考にしました。 http://www.slideshare.net/guerrillagames/the-‐‑‒realtime-‐‑‒ volumetric-‐‑‒cloudscapes-‐‑‒of-‐‑‒horizon-‐‑‒zero-‐‑‒dawn
43. ©  Cygames,  Inc. 平⾯面雲を形作る⽅方法 • 通常の Noise  Texture  に 奥⾏行行き(W軸)が増えた ノイズテクスチャ。 • 雲を形作る際の 基準となります。 イメージ図 Volumetric  Noise  Textureとは？ U
44. ©  Cygames,  Inc. 平⾯面雲を形作る⽅方法
45. ©  Cygames,  Inc. 平⾯面雲を形作る⽅方法 Noiseアルゴリズム紹介 このテクスチャの作り⽅方
46. ©  Cygames,  Inc. Perlin Noise • Ken  Perlin⽒氏が開発したノイズ。 • 綺麗麗な雲模様を⽣生成することが 可能です。 • 左図は、 ⾮非整数ブラウン運動 （Fractional  Brownian  Motion) によるガウス過程を経たものです。 Fractal   Perlin noise
47. ©  Cygames,  Inc. Worley  Noise • Steven  Worley⽒氏が 開発したノイズ。 • ⽔水⾯面がキラキラ反射している様な 模様を⽣生成することが可能です。 Worley  noise
48. ©  Cygames,  Inc. Worley  Noise • 階調を反転(1-‐‑‒n)させることで、 モコモコとした膨らみをもつ 模様になります。 Worley  noise Inversed
49. ©  Cygames,  Inc. Perlin-‐‑‒Worley  Noise Perlin Noise  と Worley  Noise  を合成することで モコモコとした膨らみを持つ雲模様を ⽣生成することが出来ます。
50. ©  Cygames,  Inc. Perlin-‐‑‒Worley  Noise Perlin-‐‑‒Worley  noise と  は   ≦ ≦ の 任意のパラメータ Fractal Perlin Inversed Worley = ( ∗ )/  ( ∗ )
51. ©  Cygames,  Inc. 平⾯面雲を形作る⽅方法 まとめ Perlin-‐‑‒Worley   Volumetric  Noise Texture 平⾯面雲を形作る⽅方法は…
52. ©  Cygames,  Inc. ©  Cygames,  Inc. 3.光学法則 平⾯面雲の実装に必要な知識識
53. ©  Cygames,  Inc. 光学法則 雲のライティングを⾏行行うためには、 光が雲を通過した際の事象を シミュレートする必要があります。
54. ©  Cygames,  Inc. 光学法則 ライティング無し
55. ©  Cygames,  Inc. 光学法則 ライティング有り
56. ©  Cygames,  Inc. 光学法則 まとめ ライティング有り ライティング無し
57. ©  Cygames,  Inc. 光学法則 これからご紹介する光学法則は すべて液体に関する法則です。
58. ©  Cygames,  Inc. 光学法則 ランベルトの法則
59. ©  Cygames,  Inc. 光学法則 光が物質を通過する場合、 吸光度度は 光路路⻑⾧長に⽐比例例します。 これを、ランベルトの法則と⾔言います。 吸光度度＝光の透過度度
60. ©  Cygames,  Inc. ランベルトの法則 下の⽅方が 明るいぜ！ ランベルトの法則 イメージ 光 光 光 光 光路路⻑⾧長 ⻑⾧長い 光路路⻑⾧長 短い
61. ©  Cygames,  Inc. ランベルトの法則 吸光度度 = 吸光係数 ∗ 光路路⻑⾧長 吸光度度 = 吸光係数 ∗ 光路路⻑⾧長 = 透過光 ⼊入射光 吸光係数とは、物質固有の定数です。
62. ©  Cygames,  Inc. 光学法則 ベールの法則
63. ©  Cygames,  Inc. 光学法則 光が物質を通過する場合、 吸光度度は、物質のモル濃度度に⽐比例例します。 これをベールの法則と呼びます。 モル＝濃度度の単位
64. ©  Cygames,  Inc. ベールの法則 ベールの法則 イメージ 下の⽅方が 明るいぜ！ 光 光 光 光 濃度度 薄い 濃度度 濃い
65. ©  Cygames,  Inc. ベールの法則 吸光度度 = 吸光係数 ∗ モル濃度度 吸光係数とは、物質固有の定数です。
66. ©  Cygames,  Inc. ベールの法則 吸光係数とモル濃度度の違い • 吸光係数 物質固有の係数 • モル濃度度 体積あたりの濃度度
67. ©  Cygames,  Inc. 吸光係数とモル濃度度の違い 濃いジュースも 薄いジュースも 吸光係数は同じです。 モル濃度度は違います。 例例えば…
68. ©  Cygames,  Inc. 光学法則 ランベルト・ベールの 法則
69. ©  Cygames,  Inc. 光学法則 ランベルトの法則とベールの法則を 組み合わせたものを ランベルト・ベールの法則 と呼びます。
70. ©  Cygames,  Inc. ランベルト・ベールの法則 吸光度度は物質の濃度度に⽐比例例する ベールの法則 吸光度度は光路路⻑⾧長に⽐比例例する ランベルトの法則 + 吸光度度は物質の光路路⻑⾧長と濃度度に⽐比例例する
71. ©  Cygames,  Inc. ランベルト・ベールの法則 吸光度度＝吸光係数 ∗ 濃度度 ∗ 光路路⻑⾧長 =
72. ©  Cygames,  Inc. 光学法則 まとめ ライティング有り ライティング無し
73. ©  Cygames,  Inc. 光学法則 まとめ 雲密度度(濃度度)と 雲の厚さ(光路路⻑⾧長)が 必要になる。 雲をライティングする為には…
74. ©  Cygames,  Inc. ©  Cygames,  Inc. 4.レイマーチ 平⾯面雲の実装に必要な知識識
75. ©  Cygames,  Inc. レイマーチ 先程の光学法則は全て、 対象の濃度度が⼀一定の液体の場合でした。 ⼀一定！
76. ©  Cygames,  Inc. レイマーチ しかし、雲は⼤大気中に浮かぶ液体であり、 その濃度度は⼀一定ではありません。 濃い！ 薄い！
77. ©  Cygames,  Inc. レイマーチ そこで、レイマーチによる 濃度度(雲密度度)の測定を⾏行行う必要があります。
78. ©  Cygames,  Inc. レイマーチ レイマーチ…？
79. ©  Cygames,  Inc. レイマーチ レイマーチとは？ • レイトレースの⼀一種。 • レイを少しずつ進めながら 処理理を⾏行行います。
80. ©  Cygames,  Inc. レイマーチ 例例：衝突判定 衝突！ レイ 衝突物との距離離
81. ©  Cygames,  Inc. レイマーチ このような反復復処理理を レイマーチと呼びます。
82. ©  Cygames,  Inc. レイマーチ この をステップと呼び、 ⼀一つの幅を ステップ幅と呼びます。 ステップ
83. ©  Cygames,  Inc. レイマーチ ステップの反復復処理理を マーチング ループと呼び、 その回数をステップ回数と呼びます。 マーチング ループ
84. ©  Cygames,  Inc. レイマーチ 平⾯面雲では レイマーチを⽤用いて 雲密度度の測定を⾏行行います。
85. ©  Cygames,  Inc. レイマーチ レイマーチにより雲密度度を測定すると… • 雲のかたちが決定します。 • 密度度が０ならばそこに雲は存在しません。 • 雲のライティングが決定します。 • ステップの進んだ⻑⾧長さ＝光路路⻑⾧長 • ランベルト・ベールの法則 • 吸光度度＝吸光係数 ∗ 雲密度度 ∗ 光路路⻑⾧長
86. ©  Cygames,  Inc. レイマーチ 1 合計は 20mol/L！ 雲密度度の測定 (イメージ) 3 6 2 8 ※この数値はイメージです。 1  +  3  =  4
87. ©  Cygames,  Inc. レイマーチ 雲密度度の測定 (イメージ) 合計は 0mol/L！ 0 0 0 0 0
88. ©  Cygames,  Inc. レイマーチ ところで…
89. ©  Cygames,  Inc. レイマーチ レイマーチは負荷の⾼高い処理理です。 float density = 0.0; for (int i = 0; i < StepCount; i++) { density += calcDensity(...); } return calcColor(density); シェーダー内で ループ処理理… その為、 ⾼高速化が必要になります。
90. ©  Cygames,  Inc. レイマーチ ⾼高速化 平⾯面雲における レイマーチの基本的な⾼高速化⼿手法は、 以下があります。 1.レイマーチの省省略略 2.ステップの早期終了了 3.ステップ回数の削減
91. ©  Cygames,  Inc. レイマーチ ⾼高速化 1.レイマーチの省省略略 ⾼高速化前 合計は 0mol/L！ 0 0 0 0 0
92. ©  Cygames,  Inc. レイマーチ ⾼高速化 0 1.レイマーチの省省略略 ⾼高速化後 確実にレイが雲と衝突しない場合、 レイマーチを省省略略します。 合計は 0mol/L！
93. ©  Cygames,  Inc. Raymarch ⾼高速化 2.ステップの早期終了了 ⾼高速化前 合計は 20mol/L！ 1 3 6 2 8
94. ©  Cygames,  Inc. レイマーチ ⾼高速化 2.ステップの早期終了了 ⾼高速化後 1 3 6 合計は 10mol/L！ 雲密度度が充分濃い場合は、 ステップを早期終了了出来ます。
95. ©  Cygames,  Inc. レイマーチ ⾼高速化 3.ステップ回数の削減 合計は 20mol/L！ ⾼高速化前 1 3 6 2 8
96. ©  Cygames,  Inc. レイマーチ ⾼高速化 3.ステップ回数の削減 合計は 19mol/L！ 3.5 ステップ幅を拡⼤大することで、回数を削減出来ます。 ただし、測定結果の不不正確さが ⽐比例例することに注意してください。 ⾼高速化後 7.5 8
97. ©  Cygames,  Inc. レイマーチ ⾼高速化 3.ステップ回数の削減 ステップ回数の削減とステップの早期終了了は、 併⽤用することも可能です。 ⾼高速化後 3.5 7.5 合計は 11mol/L！
98. ©  Cygames,  Inc. レイマーチ – まとめ 平⾯面雲の形を決定し、 ライティングを⾏行行う為、 レイマーチにより、雲密度度を求めます。 ⾼高速化は必須です。
99. ©  Cygames,  Inc. ©  Cygames,  Inc. 平⾯面雲 おさらい
100. ©  Cygames,  Inc. ©  Cygames,  Inc.
101. ©  Cygames,  Inc. ©  Cygames,  Inc.
102. ©  Cygames,  Inc. 平⾯面雲 – おさらい 雲は 液体または固体です。
103. ©  Cygames,  Inc. 平⾯面雲 – おさらい 平⾯面雲は Perlin Worley   Volumetric  Noise  Texture で形作っています。 U
104. ©  Cygames,  Inc. 平⾯面雲 – おさらい 平⾯面雲は ランベルト・ベールの法則 を⽤用いて ライティングしています。
105. ©  Cygames,  Inc. 平⾯面雲 – おさらい 平⾯面雲は レイマーチ で 雲密度度を測定しています。
106. ©  Cygames,  Inc. ©  Cygames,  Inc.
107. ©  Cygames,  Inc. 平⾯面雲 まとめましたが…
108. ©  Cygames,  Inc. 平⾯面雲 -‐‑‒ ⽣生じた課題 • ⼊入道雲は形に個性があり、 機械的に⽣生成される Volumetric  Noise  Textureでは ⽣生成することが難しかった。 • 任意形状雲の研究が 別途必要に。 ⼊入道雲が表現出来ない！
109. ©  Cygames,  Inc. ©  Cygames,  Inc. 任意形状雲
111. ©  Cygames,  Inc. 任意形状雲について •任意形状雲は • ボリュームのある雲も表現できる！ • 形は簡単に変更更可能！ • カメラが雲の中に⼊入ることができる！
112. ©  Cygames,  Inc. 任意形状雲
113. ©  Cygames,  Inc. 形状の作成⽅方法 • 球体を結合させて作成 • 処理理が単純かつ⾼高速 • 雲の形を作りやすい イメージ 結合した時になんとなく雲っぽい
114. ©  Cygames,  Inc. 最初の雲 • 3Dテクスチャに形状を格納 • レイマーチで描画 • 平⾯面雲と⾒見見た⽬目に差異異が出る • 拡縮などに弱い
115. ©  Cygames,  Inc. 現在の雲 • 平⾯面雲と⾒見見た⽬目に 差異異が出ない • 拡縮にも強い
116. ©  Cygames,  Inc. 雲の描画 〜～単体の場合〜～ 空間に⾒見見えない雲を充満 ↓ 雲を表⽰示したい場所に球体を定義 ↓ 球体内のみ密度度を収集して描画
117. ©  Cygames,  Inc. ライティング 平⾯面雲と同じ 同じにすることで、 平⾯面雲と⼀一緒に表⽰示しても⾒見見た⽬目に違いが出ない！
118. ©  Cygames,  Inc. 完成図 〜～単体の場合〜～
119. ©  Cygames,  Inc. 雲の描画 〜～複数の場合〜～ • 視線⽅方向に 複数の雲が重なる • 雲同⼠士で 影を落落とす などを考慮する必要がある
120. ©  Cygames,  Inc. 視線⽅方向に複数の雲が重なるので（1/2） 描画する雲の球体をリストアップ
121. ©  Cygames,  Inc. 視線⽅方向に複数の雲が重なるので（2/2） 不不透明になった時点で終了了する Alpha 0.1 0.4 0.6 0.8 1.0 描画されない！
122. ©  Cygames,  Inc. 雲同⼠士で影を落落とすために ライト⽅方向へも複数の雲を考慮する
123. ©  Cygames,  Inc. 完成図 〜～複数の場合〜～
124. ©  Cygames,  Inc. 完成図 〜～複数の場合〜～
125. ©  Cygames,  Inc. 動的結合
126. ©  Cygames,  Inc. 動的結合
127. ©  Cygames,  Inc. 動的結合
128. ©  Cygames,  Inc. 動的結合
129. ©  Cygames,  Inc. 動的結合
130. ©  Cygames,  Inc. 様々な形状を表現可能
131. ©  Cygames,  Inc. 様々な形状を表現可能
132. ©  Cygames,  Inc. ©  Cygames,  Inc. 平⾯面雲と任意形状雲
133. ©  Cygames,  Inc. ⼆二つの雲を合体
134. ©  Cygames,  Inc. ⼆二つの雲を合体
135. ©  Cygames,  Inc. 今後の課題 • ⾼高速化対応が必要 • よりグランブルーファンタジーらしく！
136. ©  Cygames,  Inc. ©  Cygames,  Inc.
137. ©  Cygames,  Inc. 最後に 『最高の雲』を作り上げ 『最高のゲーム』へ
138. ©  Cygames,  Inc. ©  Cygames,  Inc. ご清聴ありがとうございました