Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

©  Cygames,  Inc. ©  Cygames,  Inc.

Slide 4

Slide 4 text

©  Cygames,  Inc. ©  Cygames,  Inc.

Slide 5

Slide 5 text

©  Cygames,  Inc. ⼤大阪Cygames • 設⽴立立⽇日 • 2015年年4⽉月1⽇日 • 所在地 • グランフロント⼤大阪 • 事業内容 • ハイエンドゲームの開発

Slide 6

Slide 6 text

©  Cygames,  Inc. グランブルーファンタジー PROJECT  Re:LINK 対応機種 :  PS4 発売⽇日 :  2018年年 予定

Slide 7

Slide 7 text

©  Cygames,  Inc. ©  Cygames,  Inc. グランブルーファンタジーの空と雲の表現について

Slide 8

Slide 8 text

©  Cygames,  Inc. 空と雲のコンセプト どこまでも広がる壮⼤大且つ繊細で 気持ちの良良い空の世界を表現する。

Slide 9

Slide 9 text

©  Cygames,  Inc. 空の世界

Slide 10

Slide 10 text

©  Cygames,  Inc. 空と雲の形、デザイン ファンタジーらしく不不思議な形から 誰もが理理解できる⼊入道雲などを組み合わせる。

Slide 11

Slide 11 text

©  Cygames,  Inc. 空と雲の形、デザイン

Slide 12

Slide 12 text

©  Cygames,  Inc. 空と雲の形、デザイン

Slide 13

Slide 13 text

©  Cygames,  Inc. 空と雲の形、デザイン

Slide 14

Slide 14 text

©  Cygames,  Inc. 空と雲の形、デザイン

Slide 15

Slide 15 text

©  Cygames,  Inc. 空と雲の形、デザイン

Slide 16

Slide 16 text

©  Cygames,  Inc. 光や影の表現 フォトリアルな空気遠近法を基本としつつ ⼿手書きイラストらしい表現も加える。 影の中にもしっかりと⾊色表現を⼊入れる。

Slide 17

Slide 17 text

©  Cygames,  Inc. 光や影の表現

Slide 18

Slide 18 text

©  Cygames,  Inc. 光や影の表現

Slide 19

Slide 19 text

©  Cygames,  Inc. 他の環境物との関係 空と雲だけの処理理で考えるのではなく、 同じ環境にある物として⾒見見えるようにする。

Slide 20

Slide 20 text

©  Cygames,  Inc. 他の環境物との関係

Slide 21

Slide 21 text

©  Cygames,  Inc. 他の環境物との関係

Slide 22

Slide 22 text

©  Cygames,  Inc. 他の環境物との関係

Slide 23

Slide 23 text

©  Cygames,  Inc. PROJECT  Re:LINKでは こ の 空の世界を 3Dで 描 く

Slide 24

Slide 24 text

©  Cygames,  Inc. ©  Cygames,  Inc. 『Project  Re:LINK』における雲表現の研究紹介

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

©  Cygames,  Inc. 雲表現

Slide 27

Slide 27 text

©  Cygames,  Inc. 雲表現 眼下に どこまでも広がる 雲表現が必要

Slide 28

Slide 28 text

©  Cygames,  Inc. どこまでも広がる雲 無限平⾯面下に 雲を充填して 表現 z y x 雲表現

Slide 29

Slide 29 text

©  Cygames,  Inc. z y x 平⾯面雲 Plane  Cloud 雲表現

Slide 30

Slide 30 text

©  Cygames,  Inc. ©  Cygames,  Inc. 平⾯面雲 スクリーンショット

Slide 31

Slide 31 text

©  Cygames,  Inc. ©  Cygames,  Inc.

Slide 32

Slide 32 text

©  Cygames,  Inc. ©  Cygames,  Inc.

Slide 33

Slide 33 text

©  Cygames,  Inc. ©  Cygames,  Inc.

Slide 34

Slide 34 text

©  Cygames,  Inc. 平⾯面雲 1. そもそも雲とは? 2. 平⾯面雲を形作る⽅方法 3. 光学法則 4. レイマーチ 平⾯面雲の実装に必要な知識識

Slide 35

Slide 35 text

©  Cygames,  Inc. ©  Cygames,  Inc. 1.そもそも雲とは? 平⾯面雲の実装に必要な知識識

Slide 36

Slide 36 text

©  Cygames,  Inc. そもそも雲とは 液体もしくは固体です。 気体ではありません。 Wikipedia⽈曰く… 雲は、 ⼤大気中にかたまって浮かぶ⽔水滴または氷の粒粒(氷晶)のことを ⾔言う。

Slide 37

Slide 37 text

©  Cygames,  Inc. そもそも雲とは わた雲 ⾼高度度0.5~∼2kmに浮かぶ ⽔水滴。

Slide 38

Slide 38 text

©  Cygames,  Inc. そもそも雲とは ⾶飛⾏行行機雲 排気ガス中の⽔水蒸気が ⽔水滴や氷晶に なったもの。 ※単なる排気ガスではない!

Slide 39

Slide 39 text

©  Cygames,  Inc. そもそも雲とは – まとめ 雲は ⽔水滴 もしくは 氷晶 の集まり。

Slide 40

Slide 40 text

©  Cygames,  Inc. ©  Cygames,  Inc. 2.平⾯面雲を形作る⽅方法 平⾯面雲の実装に必要な知識識

Slide 41

Slide 41 text

©  Cygames,  Inc. 平⾯面雲を形作る⽅方法 • 雲を形作る⽅方法はいくつか存在します。 • 今回は Volumetric  Noise  Textureを⽤用いた ⼿手続き型(プロシージャル)雲 ⽣生成法を 研究しました。

Slide 42

Slide 42 text

©  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

Slide 43

Slide 43 text

©  Cygames,  Inc. 平⾯面雲を形作る⽅方法 • 通常の Noise  Texture  に 奥⾏行行き(W軸)が増えた ノイズテクスチャ。 • 雲を形作る際の 基準となります。 イメージ図 Volumetric  Noise  Textureとは? U

Slide 44

Slide 44 text

©  Cygames,  Inc. 平⾯面雲を形作る⽅方法

Slide 45

Slide 45 text

©  Cygames,  Inc. 平⾯面雲を形作る⽅方法 Noiseアルゴリズム紹介 このテクスチャの作り⽅方

Slide 46

Slide 46 text

©  Cygames,  Inc. Perlin Noise • Ken  Perlin⽒氏が開発したノイズ。 • 綺麗麗な雲模様を⽣生成することが 可能です。 • 左図は、 ⾮非整数ブラウン運動 (Fractional  Brownian  Motion) によるガウス過程を経たものです。 Fractal   Perlin noise

Slide 47

Slide 47 text

©  Cygames,  Inc. Worley  Noise • Steven  Worley⽒氏が 開発したノイズ。 • ⽔水⾯面がキラキラ反射している様な 模様を⽣生成することが可能です。 Worley  noise

Slide 48

Slide 48 text

©  Cygames,  Inc. Worley  Noise • 階調を反転(1-‐‑‒n)させることで、 モコモコとした膨らみをもつ 模様になります。 Worley  noise Inversed

Slide 49

Slide 49 text

©  Cygames,  Inc. Perlin-‐‑‒Worley  Noise Perlin Noise  と Worley  Noise  を合成することで モコモコとした膨らみを持つ雲模様を ⽣生成することが出来ます。

Slide 50

Slide 50 text

©  Cygames,  Inc. Perlin-‐‑‒Worley  Noise Perlin-‐‑‒Worley  noise と  は   ≦ ≦ の 任意のパラメータ Fractal Perlin Inversed Worley = ( ∗ )/  ( ∗ )

Slide 51

Slide 51 text

©  Cygames,  Inc. 平⾯面雲を形作る⽅方法 まとめ Perlin-‐‑‒Worley   Volumetric  Noise Texture 平⾯面雲を形作る⽅方法は…

Slide 52

Slide 52 text

©  Cygames,  Inc. ©  Cygames,  Inc. 3.光学法則 平⾯面雲の実装に必要な知識識

Slide 53

Slide 53 text

©  Cygames,  Inc. 光学法則 雲のライティングを⾏行行うためには、 光が雲を通過した際の事象を シミュレートする必要があります。

Slide 54

Slide 54 text

©  Cygames,  Inc. 光学法則 ライティング無し

Slide 55

Slide 55 text

©  Cygames,  Inc. 光学法則 ライティング有り

Slide 56

Slide 56 text

©  Cygames,  Inc. 光学法則 まとめ ライティング有り ライティング無し

Slide 57

Slide 57 text

©  Cygames,  Inc. 光学法則 これからご紹介する光学法則は すべて液体に関する法則です。

Slide 58

Slide 58 text

©  Cygames,  Inc. 光学法則 ランベルトの法則

Slide 59

Slide 59 text

©  Cygames,  Inc. 光学法則 光が物質を通過する場合、 吸光度度は 光路路⻑⾧長に⽐比例例します。 これを、ランベルトの法則と⾔言います。 吸光度度=光の透過度度

Slide 60

Slide 60 text

©  Cygames,  Inc. ランベルトの法則 下の⽅方が 明るいぜ! ランベルトの法則 イメージ 光 光 光 光 光路路⻑⾧長 ⻑⾧長い 光路路⻑⾧長 短い

Slide 61

Slide 61 text

©  Cygames,  Inc. ランベルトの法則 吸光度度 = 吸光係数 ∗ 光路路⻑⾧長 吸光度度 = 吸光係数 ∗ 光路路⻑⾧長 = 透過光 ⼊入射光 吸光係数とは、物質固有の定数です。

Slide 62

Slide 62 text

©  Cygames,  Inc. 光学法則 ベールの法則

Slide 63

Slide 63 text

©  Cygames,  Inc. 光学法則 光が物質を通過する場合、 吸光度度は、物質のモル濃度度に⽐比例例します。 これをベールの法則と呼びます。 モル=濃度度の単位

Slide 64

Slide 64 text

©  Cygames,  Inc. ベールの法則 ベールの法則 イメージ 下の⽅方が 明るいぜ! 光 光 光 光 濃度度 薄い 濃度度 濃い

Slide 65

Slide 65 text

©  Cygames,  Inc. ベールの法則 吸光度度 = 吸光係数 ∗ モル濃度度 吸光係数とは、物質固有の定数です。

Slide 66

Slide 66 text

©  Cygames,  Inc. ベールの法則 吸光係数とモル濃度度の違い • 吸光係数 物質固有の係数 • モル濃度度 体積あたりの濃度度

Slide 67

Slide 67 text

©  Cygames,  Inc. 吸光係数とモル濃度度の違い 濃いジュースも 薄いジュースも 吸光係数は同じです。 モル濃度度は違います。 例例えば…

Slide 68

Slide 68 text

©  Cygames,  Inc. 光学法則 ランベルト・ベールの 法則

Slide 69

Slide 69 text

©  Cygames,  Inc. 光学法則 ランベルトの法則とベールの法則を 組み合わせたものを ランベルト・ベールの法則 と呼びます。

Slide 70

Slide 70 text

©  Cygames,  Inc. ランベルト・ベールの法則 吸光度度は物質の濃度度に⽐比例例する ベールの法則 吸光度度は光路路⻑⾧長に⽐比例例する ランベルトの法則 + 吸光度度は物質の光路路⻑⾧長と濃度度に⽐比例例する

Slide 71

Slide 71 text

©  Cygames,  Inc. ランベルト・ベールの法則 吸光度度=吸光係数 ∗ 濃度度 ∗ 光路路⻑⾧長 =

Slide 72

Slide 72 text

©  Cygames,  Inc. 光学法則 まとめ ライティング有り ライティング無し

Slide 73

Slide 73 text

©  Cygames,  Inc. 光学法則 まとめ 雲密度度(濃度度)と 雲の厚さ(光路路⻑⾧長)が 必要になる。 雲をライティングする為には…

Slide 74

Slide 74 text

©  Cygames,  Inc. ©  Cygames,  Inc. 4.レイマーチ 平⾯面雲の実装に必要な知識識

Slide 75

Slide 75 text

©  Cygames,  Inc. レイマーチ 先程の光学法則は全て、 対象の濃度度が⼀一定の液体の場合でした。 ⼀一定!

Slide 76

Slide 76 text

©  Cygames,  Inc. レイマーチ しかし、雲は⼤大気中に浮かぶ液体であり、 その濃度度は⼀一定ではありません。 濃い! 薄い!

Slide 77

Slide 77 text

©  Cygames,  Inc. レイマーチ そこで、レイマーチによる 濃度度(雲密度度)の測定を⾏行行う必要があります。

Slide 78

Slide 78 text

©  Cygames,  Inc. レイマーチ レイマーチ…?

Slide 79

Slide 79 text

©  Cygames,  Inc. レイマーチ レイマーチとは? • レイトレースの⼀一種。 • レイを少しずつ進めながら 処理理を⾏行行います。

Slide 80

Slide 80 text

©  Cygames,  Inc. レイマーチ 例例:衝突判定 衝突! レイ 衝突物との距離離

Slide 81

Slide 81 text

©  Cygames,  Inc. レイマーチ このような反復復処理理を レイマーチと呼びます。

Slide 82

Slide 82 text

©  Cygames,  Inc. レイマーチ この をステップと呼び、 ⼀一つの幅を ステップ幅と呼びます。 ステップ

Slide 83

Slide 83 text

©  Cygames,  Inc. レイマーチ ステップの反復復処理理を マーチング ループと呼び、 その回数をステップ回数と呼びます。 マーチング ループ

Slide 84

Slide 84 text

©  Cygames,  Inc. レイマーチ 平⾯面雲では レイマーチを⽤用いて 雲密度度の測定を⾏行行います。

Slide 85

Slide 85 text

©  Cygames,  Inc. レイマーチ レイマーチにより雲密度度を測定すると… • 雲のかたちが決定します。 • 密度度が0ならばそこに雲は存在しません。 • 雲のライティングが決定します。 • ステップの進んだ⻑⾧長さ=光路路⻑⾧長 • ランベルト・ベールの法則 • 吸光度度=吸光係数 ∗ 雲密度度 ∗ 光路路⻑⾧長

Slide 86

Slide 86 text

©  Cygames,  Inc. レイマーチ 1 合計は 20mol/L! 雲密度度の測定 (イメージ) 3 6 2 8 ※この数値はイメージです。 1  +  3  =  4

Slide 87

Slide 87 text

©  Cygames,  Inc. レイマーチ 雲密度度の測定 (イメージ) 合計は 0mol/L! 0 0 0 0 0

Slide 88

Slide 88 text

©  Cygames,  Inc. レイマーチ ところで…

Slide 89

Slide 89 text

©  Cygames,  Inc. レイマーチ レイマーチは負荷の⾼高い処理理です。 float density = 0.0; for (int i = 0; i < StepCount; i++) { density += calcDensity(...); } return calcColor(density); シェーダー内で ループ処理理… その為、 ⾼高速化が必要になります。

Slide 90

Slide 90 text

©  Cygames,  Inc. レイマーチ ⾼高速化 平⾯面雲における レイマーチの基本的な⾼高速化⼿手法は、 以下があります。 1.レイマーチの省省略略 2.ステップの早期終了了 3.ステップ回数の削減

Slide 91

Slide 91 text

©  Cygames,  Inc. レイマーチ ⾼高速化 1.レイマーチの省省略略 ⾼高速化前 合計は 0mol/L! 0 0 0 0 0

Slide 92

Slide 92 text

©  Cygames,  Inc. レイマーチ ⾼高速化 0 1.レイマーチの省省略略 ⾼高速化後 確実にレイが雲と衝突しない場合、 レイマーチを省省略略します。 合計は 0mol/L!

Slide 93

Slide 93 text

©  Cygames,  Inc. Raymarch ⾼高速化 2.ステップの早期終了了 ⾼高速化前 合計は 20mol/L! 1 3 6 2 8

Slide 94

Slide 94 text

©  Cygames,  Inc. レイマーチ ⾼高速化 2.ステップの早期終了了 ⾼高速化後 1 3 6 合計は 10mol/L! 雲密度度が充分濃い場合は、 ステップを早期終了了出来ます。

Slide 95

Slide 95 text

©  Cygames,  Inc. レイマーチ ⾼高速化 3.ステップ回数の削減 合計は 20mol/L! ⾼高速化前 1 3 6 2 8

Slide 96

Slide 96 text

©  Cygames,  Inc. レイマーチ ⾼高速化 3.ステップ回数の削減 合計は 19mol/L! 3.5 ステップ幅を拡⼤大することで、回数を削減出来ます。 ただし、測定結果の不不正確さが ⽐比例例することに注意してください。 ⾼高速化後 7.5 8

Slide 97

Slide 97 text

©  Cygames,  Inc. レイマーチ ⾼高速化 3.ステップ回数の削減 ステップ回数の削減とステップの早期終了了は、 併⽤用することも可能です。 ⾼高速化後 3.5 7.5 合計は 11mol/L!

Slide 98

Slide 98 text

©  Cygames,  Inc. レイマーチ – まとめ 平⾯面雲の形を決定し、 ライティングを⾏行行う為、 レイマーチにより、雲密度度を求めます。 ⾼高速化は必須です。

Slide 99

Slide 99 text

©  Cygames,  Inc. ©  Cygames,  Inc. 平⾯面雲 おさらい

Slide 100

Slide 100 text

©  Cygames,  Inc. ©  Cygames,  Inc.

Slide 101

Slide 101 text

©  Cygames,  Inc. ©  Cygames,  Inc.

Slide 102

Slide 102 text

©  Cygames,  Inc. 平⾯面雲 – おさらい 雲は 液体または固体です。

Slide 103

Slide 103 text

©  Cygames,  Inc. 平⾯面雲 – おさらい 平⾯面雲は Perlin Worley   Volumetric  Noise  Texture で形作っています。 U

Slide 104

Slide 104 text

©  Cygames,  Inc. 平⾯面雲 – おさらい 平⾯面雲は ランベルト・ベールの法則 を⽤用いて ライティングしています。

Slide 105

Slide 105 text

©  Cygames,  Inc. 平⾯面雲 – おさらい 平⾯面雲は レイマーチ で 雲密度度を測定しています。

Slide 106

Slide 106 text

©  Cygames,  Inc. ©  Cygames,  Inc.

Slide 107

Slide 107 text

©  Cygames,  Inc. 平⾯面雲 まとめましたが…

Slide 108

Slide 108 text

©  Cygames,  Inc. 平⾯面雲 -‐‑‒ ⽣生じた課題 • ⼊入道雲は形に個性があり、 機械的に⽣生成される Volumetric  Noise  Textureでは ⽣生成することが難しかった。 • 任意形状雲の研究が 別途必要に。 ⼊入道雲が表現出来ない!

Slide 109

Slide 109 text

©  Cygames,  Inc. ©  Cygames,  Inc. 任意形状雲

Slide 110

Slide 110 text

No content

Slide 111

Slide 111 text

©  Cygames,  Inc. 任意形状雲について •任意形状雲は • ボリュームのある雲も表現できる! • 形は簡単に変更更可能! • カメラが雲の中に⼊入ることができる!

Slide 112

Slide 112 text

©  Cygames,  Inc. 任意形状雲

Slide 113

Slide 113 text

©  Cygames,  Inc. 形状の作成⽅方法 • 球体を結合させて作成 • 処理理が単純かつ⾼高速 • 雲の形を作りやすい イメージ 結合した時になんとなく雲っぽい

Slide 114

Slide 114 text

©  Cygames,  Inc. 最初の雲 • 3Dテクスチャに形状を格納 • レイマーチで描画 • 平⾯面雲と⾒見見た⽬目に差異異が出る • 拡縮などに弱い

Slide 115

Slide 115 text

©  Cygames,  Inc. 現在の雲 • 平⾯面雲と⾒見見た⽬目に 差異異が出ない • 拡縮にも強い

Slide 116

Slide 116 text

©  Cygames,  Inc. 雲の描画 〜~単体の場合〜~ 空間に⾒見見えない雲を充満 ↓ 雲を表⽰示したい場所に球体を定義 ↓ 球体内のみ密度度を収集して描画

Slide 117

Slide 117 text

©  Cygames,  Inc. ライティング 平⾯面雲と同じ 同じにすることで、 平⾯面雲と⼀一緒に表⽰示しても⾒見見た⽬目に違いが出ない!

Slide 118

Slide 118 text

©  Cygames,  Inc. 完成図 〜~単体の場合〜~

Slide 119

Slide 119 text

©  Cygames,  Inc. 雲の描画 〜~複数の場合〜~ • 視線⽅方向に 複数の雲が重なる • 雲同⼠士で 影を落落とす などを考慮する必要がある

Slide 120

Slide 120 text

©  Cygames,  Inc. 視線⽅方向に複数の雲が重なるので(1/2) 描画する雲の球体をリストアップ

Slide 121

Slide 121 text

©  Cygames,  Inc. 視線⽅方向に複数の雲が重なるので(2/2) 不不透明になった時点で終了了する Alpha 0.1 0.4 0.6 0.8 1.0 描画されない!

Slide 122

Slide 122 text

©  Cygames,  Inc. 雲同⼠士で影を落落とすために ライト⽅方向へも複数の雲を考慮する

Slide 123

Slide 123 text

©  Cygames,  Inc. 完成図 〜~複数の場合〜~

Slide 124

Slide 124 text

©  Cygames,  Inc. 完成図 〜~複数の場合〜~

Slide 125

Slide 125 text

©  Cygames,  Inc. 動的結合

Slide 126

Slide 126 text

©  Cygames,  Inc. 動的結合

Slide 127

Slide 127 text

©  Cygames,  Inc. 動的結合

Slide 128

Slide 128 text

©  Cygames,  Inc. 動的結合

Slide 129

Slide 129 text

©  Cygames,  Inc. 動的結合

Slide 130

Slide 130 text

©  Cygames,  Inc. 様々な形状を表現可能

Slide 131

Slide 131 text

©  Cygames,  Inc. 様々な形状を表現可能

Slide 132

Slide 132 text

©  Cygames,  Inc. ©  Cygames,  Inc. 平⾯面雲と任意形状雲

Slide 133

Slide 133 text

©  Cygames,  Inc. ⼆二つの雲を合体

Slide 134

Slide 134 text

©  Cygames,  Inc. ⼆二つの雲を合体

Slide 135

Slide 135 text

©  Cygames,  Inc. 今後の課題 • ⾼高速化対応が必要 • よりグランブルーファンタジーらしく!

Slide 136

Slide 136 text

©  Cygames,  Inc. ©  Cygames,  Inc.

Slide 137

Slide 137 text

©  Cygames,  Inc. 最後に 『最高の雲』を作り上げ 『最高のゲーム』へ

Slide 138

Slide 138 text

©  Cygames,  Inc. ©  Cygames,  Inc. ご清聴ありがとうございました