オープンワールドを、 自然に意思を持って埋める。 LUMINOUS ENGINEの プロシージャルへの取り組み スピーカー

エンジニア アーティスト

© Luminous Productions Co., Ltd. 本日の内容 前置き

© Luminous Productions Co., Ltd. 広いワールドマップを どう編集するか? への取り組み

© Luminous Productions Co., Ltd. © Luminous Productions Co., Ltd. https://youtu.be/TG0q5Xh-efQ

© Luminous Productions Co., Ltd. 過去の取り組み

© Luminous Productions Co., Ltd. カーブを引く。 植物を塗る。 地形を上げ下げする。 といったことがリアルタイムでできる環境でした。

岩には植物を生やさない。 急斜面には植物を生やさない。 © SQUARE CO., LTD. All Rights Reserved. といった、少し賢い機能もありました。 FINAL FANTASY XVの時

高速に編集できる環境でした。

© Luminous Productions Co., Ltd. 過去の課題

• 編集コストがまだ高い – 高速に塗れるけど、 それでも追いつかないくらいにワールドマップは広い。 • 少し賢い機能がブラックボックス化 – 拡張するには、プログラマに依頼する必要がある。 • 地形が変わった時、再編集する必要があった。

© Luminous Productions Co., Ltd. 自動化したい。

© Luminous Productions Co., Ltd. 手で1つずつ置く。

塗って、高速に置く

自動で置く。

© Luminous Productions Co., Ltd. 新しいツールの 目標

© Luminous Productions Co., Ltd. 新しいツールの目標

• ミクロからマクロまで • 拡張、応用しやすく • 毎回同じ結果 • 結果をリアルタイムに確認

© Luminous Productions Co., Ltd. ミクロ(手作業)からマクロ(自動)まで

大域の、自動生成まで 細かな、手編集から、

© Luminous Productions Co., Ltd. 拡張、応用しやすく

単純な処理の組み合わせで表現。

ノードベースで プロシージャルの演算を定義

© Luminous Productions Co., Ltd. 毎回同じ結果

• 同じ入力に対しては、同じ結果が生成される。 – ランダムな要素の排除 • ワールド広域を生成しても、カメラに映っている一部のみ 生成しても、結果が同じになるようにする。

© Luminous Productions Co., Ltd. 結果をリアルタイムに確認

リアルタイムで編集して反映される動画

© Luminous Productions Co., Ltd. 詳細

© Luminous Productions Co., Ltd. 本日の内容

• プロシージャルの話 • ワークフローの話 • 処理の中身の話

© Luminous Productions Co., Ltd. 本日の内容

• プロシージャルの話 • ワークフローの話 • 処理の中身の話

演算をどう組み合わせて、プロシージャルを作ってく か?という話。

© Luminous Productions Co., Ltd. 本日の内容

• プロシージャルの話 • ワークフローの話 • 処理の中身の話

プロシージャルと、レベル作業者をどうつなぐか? というワークフローの話。

© Luminous Productions Co., Ltd. 本日の内容

• プロシージャルの話 • ワークフローの話 • 処理の中身の話

どのように処理を回しているか? というプログラマ向けの話。

© Luminous Productions Co., Ltd. プロシージャルの話

© Luminous Productions Co., Ltd. 自己紹介

山本 健斗 エンバイロメント アーティスト

2018年、株式会社Luminous Productions 入社

プロシージャル植生の作成 Env用Shader開発 アセット製作やマップレイアウト

© Luminous Productions Co., Ltd. プロシージャル植生

© Luminous Productions Co., Ltd. プロシージャル植生

Foliage

マスク&ポイントクラウド Effect 環境設定

Shader用マスク

etc..

© Luminous Productions Co., Ltd. プロシージャル植生

© Luminous Productions Co., Ltd. プロシージャル植生

各種ノイズマスク 地形テクスチャ Perlin Noise Ground Normal fBm Ground Occlusion Random Noise Erosion Mask etc..

© Luminous Productions Co., Ltd. プロシージャル植生

© Luminous Productions Co., Ltd. プロシージャル植生

2値化

© Luminous Productions Co., Ltd. プロシージャル植生

減算

2値化

© Luminous Productions Co., Ltd. プロシージャル植生

© Luminous Productions Co., Ltd. プロシージャル植生

© Luminous Productions Co., Ltd. プロシージャル植生

AO TreeArea 減算

Slope Noise OtherArea

Artist Paint

© Luminous Productions Co., Ltd. プロシージャル植生

ベースの木配置

© Luminous Productions Co., Ltd. プロシージャル植生

木が多い 木が少ない

© Luminous Productions Co., Ltd. プロシージャル植生

木の配置マスク 木の配置数

ポイントの生成数 汎用的に生成数を調整可能 マスクから木の密度は判断できない

© Luminous Productions Co., Ltd. プロシージャル植生

木のポイントからマスク生成

 他の植生と重ならないため

 木の密度判断用

© Luminous Productions Co., Ltd. プロシージャル植生

範囲拡大で隙間埋め 外側から範囲が縮小

木のポイントマスク 森のマスク原型

© Luminous Productions Co., Ltd. プロシージャル植生

森マスクの用途

通常の植物

植物

森の植物

森マスク

© Luminous Productions Co., Ltd. プロシージャル植生

森マスクの用途

花畑マスク ×

森マスク

© Luminous Productions Co., Ltd. プロシージャル植生

森マスクの用途

木の根元 + ノイズ 森の堆積物 根っこ

森マスク

© Luminous Productions Co., Ltd. プロシージャル植生

森マスクの用途

森の奥地

木のスケール 森植生が占める割合 より鬱蒼とした配置 Etc...

© Luminous Productions Co., Ltd. プロシージャル植生

マスクベースのノードネットワーク 工夫次第で色々植生表現できる!!

エンジン上でリアルタイム反映 最終Lookがすぐに確認できて超便利!!

© Luminous Productions Co., Ltd. ワークフロー化

© Luminous Productions Co., Ltd. ワークフロー化

プロシージャルの課題 部分的な対応に弱い

© Luminous Productions Co., Ltd. ワークフロー化

プロシージャルの課題 ネットワークの作成難度

© Luminous Productions Co., Ltd. ワークフロー化

ネットワーク プロシージャル処理 最終結果

アーティストの編集

© Luminous Productions Co., Ltd. ワークフロー化

自由に編集が可能で、自動で自然な見た目へ

プロシージャルを レイアウト オリジナル 構成するマスクの との連携 植生の追加 上書き

© Luminous Productions Co., Ltd. ワークフロー化 プロシージャルを構成するマスクの上書き

ノイズ・地形テクスチャキーとなる各種エリアマスク

崖 花畑 岩場 出力 草原 茂み

土 下草 森

© Luminous Productions Co., Ltd. ワークフロー化 プロシージャルを構成するマスクの上書き

ノイズ・地形テクスチャキーとなる各種エリアマスク

崖 岩場 花畑 OFF 出力 草原 茂み

土 下草 森 OFF

© Luminous Productions Co., Ltd. ワークフロー化 プロシージャルを構成するマスクの上書き 状況による様々な出力結果 マスク強度値など ポイント生成数崖 岩場 花畑 草原 茂み

土 下草 森

アーティストの各種ペイント

© Luminous Productions Co., Ltd. ワークフロー化 プロシージャルを構成するマスクの上書き

サブエリアマスク 森マスク 茂みマスク Etc...

エリアマスク 草地面マスク 土地面マスク Etc...

© Luminous Productions Co., Ltd. ワークフロー化 プロシージャルを構成するマスクの上書き

土エリアマスク 茂みエリアマスク

© Luminous Productions Co., Ltd. ワークフロー化 プロシージャルを構成するマスクの上書き

© Luminous Productions Co., Ltd. ワークフロー化 プロシージャルを構成するマスクの上書き

森エリアと土エリアの併用

© Luminous Productions Co., Ltd. ワークフロー化 プロシージャルを構成するマスクの上書き

マスク群A マスクペイントは共通

出力 マスクで マスク群B ブレンド

© Luminous Productions Co., Ltd. ワークフロー化 プロシージャルを構成するマスクの上書き

マ マ ス ス ク ク 群 群 A B

© Luminous Productions Co., Ltd. ワークフロー化 プロシージャルを構成するマスクの上書き

リージョンマスク Aの地域 Bの地域 各競合 優 先 エリアマスク 草地面 土地面 岩地面 Etc... 各競合 順

サブエリアマスク 森 茂み Etc... 併用可

マスクの塗り分けで、専用の景色に変わる

© Luminous Productions Co., Ltd. ワークフロー化 プロシージャルを構成するマスクの上書き

森ペイント

Aの地域 Bの地域

© Luminous Productions Co., Ltd. ワークフロー化 プロシージャルを構成するマスクの上書き

茂みペイント

草地面 枯れ草地面 森の中

© Luminous Productions Co., Ltd. ワークフロー化

自由に編集が可能で、自動で自然な見た目へ

プロシージャルを レイアウト オリジナル 構成するマスクの との連携 植生の追加 上書き

© Luminous Productions Co., Ltd. ワークフロー化 レイアウトとの連携

コリジョンをマスクとして取得

© Luminous Productions Co., Ltd. ワークフロー化 レイアウトとの連携 状況による様々な出力結果 崖 岩場 花畑 草原 茂み

土 下草 森

モデルから取得した属性

© Luminous Productions Co., Ltd. ワークフロー化 レイアウトとの連携

轍部分は草マテリアル

© Luminous Productions Co., Ltd. ワークフロー化 レイアウトとの連携

属性マスク取れるなら..

連携してもっと絵を強化

© Luminous Productions Co., Ltd. ワークフロー化 レイアウトとの連携

© Luminous Productions Co., Ltd. ワークフロー化 レイアウトとの連携

上面は草マテリアル

大きな石属性モデル周り の特別処理

© Luminous Productions Co., Ltd. ワークフロー化 レイアウトとの連携

自動配置+地面なじませ

自動配置 手配置

© Luminous Productions Co., Ltd. ワークフロー化 レイアウトとの連携

水属性周りの 特別処理

© Luminous Productions Co., Ltd. ワークフロー化

自由に編集が可能で、自動で自然な見た目へ

プロシージャルを レイアウト オリジナル 構成するマスクの との連携 植生の追加 上書き

© Luminous Productions Co., Ltd. ワークフロー化 オリジナル植生の追加

オリジナル植生セット

マスク範囲 + パラメーター + リソース

生成数

リソースウェイト

トランスフォーム ランダマイズ

生成閾値

© Luminous Productions Co., Ltd. ワークフロー化 オリジナル植生の追加

キーマスク 花畑 茂み 森

オリジナルマスク

© Luminous Productions Co., Ltd. ワークフロー化 レイアウトとの連携

自動化と組み合わせて

クオリティと開発速度の両立へ

© Luminous Productions Co., Ltd. ワークフローの話

© Luminous Productions Co., Ltd. 自己紹介

濵野 翔平 • 株式会社 Luminous Productions • プログラマー • 「FINAL FANTASY XV WINDOWS EDITION」 プラットフォーム対応、マウス・キーボード対応等を担当

© Luminous Productions Co., Ltd. 目指したのは・・

© Luminous Productions Co., Ltd. よりシンプルな操作で より複雑な結果を

© Luminous Productions Co., Ltd. 目指したのは・・

• レベル作業をする全員がネットワーク内の1つ1つのノー ドの処理を把握するのは大変 – 「良い感じ」になっていればOK – 細かいパラメータも簡単に調整できるように

© Luminous Productions Co., Ltd. データ作成のワークフロー

© Luminous Productions Co., Ltd. セットアップの流れ

© Luminous Productions Co., Ltd. データ作成のワークフロー

プロシージャル定義

レベル上にゲームオブジェクトとして配置

パラメータ編集

出力ファイル更新

© Luminous Productions Co., Ltd. データ作成のワークフロー

プロシージャル定義

レベル上にゲームオブジェクトとして配置

パラメータ編集

出力ファイル更新

© Luminous Productions Co., Ltd. データ作成のワークフロー

必要なのは・・・ • ネットワークのパス • プロシージャルの適用範囲

© Luminous Productions Co., Ltd. データ作成のワークフロー

プロシージャル定義

レベル上にゲームオブジェクトとして配置

リアルタイムに結果を パラメータ編集 確認・編集

出力ファイル更新

© Luminous Productions Co., Ltd. データ作成のワークフロー

プロシージャル定義

レベル上にゲームオブジェクトとして配置

リアルタイムに結果を パラメータ編集 確認・編集

出力ファイル更新

© Luminous Productions Co., Ltd. データ作成のワークフロー

• 編集するのは、「プロシージャルの入力データ」 – 出力データ(=配置データ)ではない。

• 配置データは、専用サーバーで定期ビルド – データのコンフリクト回避 – 特定領域の即時ビルドリクエストも可能

© Luminous Productions Co., Ltd. データの編集、どうやる?

© Luminous Productions Co., Ltd. 基本ツール紹介

© Luminous Productions Co., Ltd. Sculpt

© Luminous Productions Co., Ltd. Paint

© Luminous Productions Co., Ltd. Curve

© Luminous Productions Co., Ltd. 基本ツール紹介

© Luminous Productions Co., Ltd. 基本ツール紹介

© Luminous Productions Co., Ltd. カスタムパラメータ

© Luminous Productions Co., Ltd. Expose パラメータ

Network A Area 1

Network A‘ ✕ Area 2

• リソースだけ変更したい • 無駄が多い • 生成数だけ調整したい • メンテナンスコスト✕

© Luminous Productions Co., Ltd. Expose パラメータ

ネットワークの外から 編集可能に

© Luminous Productions Co., Ltd. カーブのポイントごとのパラメータ編集

© Luminous Productions Co., Ltd. レイヤーデータ

© Luminous Productions Co., Ltd. レイヤーデータ

入力 Network A ペイントデータ ←編集

Network B Area リソース ←編集 生成数 ←編集

Network C 追加はできない

© Luminous Productions Co., Ltd. レイヤーデータ

• 一つのグラフに同じような ネットワークが複数存在 • 無駄な処理が多い • メンテナンスコスト高い • 追加対応に弱い

© Luminous Productions Co., Ltd. レイヤーデータ

1つにまとめる

© Luminous Productions Co., Ltd. レイヤーデータ

入力

メタデータA ネットワーク メタデータB 出力ファイル 実際に流れるデータ メタデータC 出力ファイル メタデータD 出力ファイル

© Luminous Productions Co., Ltd. レイヤーデータ

© Luminous Productions Co., Ltd. 処理の中身の話

© Luminous Productions Co., Ltd. スピーカー

• 岩﨑 浩 Hiroshi Iwasaki – 株式会社 Luminous Productions • プログラムセクション ディレクター • システム系プログラマ

2009年 株式会社 スクウェア・エニックス 入社 自社エンジン開発 FINAL FANTASY XV MONSTER OF THE DEEP: FINAL FANTASY XV

© Luminous Productions Co., Ltd. 内部処理の話

© Luminous Productions Co., Ltd. 目指したのは、 発展性

応用のしやすさ 拡張のしやすさ メンテのしやすさ

© Luminous Productions Co., Ltd. 単純さを保つ

© Luminous Productions Co., Ltd. 目標

単純

単純 単純な 複雑そうに 処理 見える結果 単純

単純 単純単純 単純単純

© Luminous Productions Co., Ltd. © Luminous Productions Co., Ltd. 地形を 上げ下げしてるんだね!

© Luminous Productions Co., Ltd. 入力 処理 出力

これを上げ下げしてました!

© Luminous Productions Co., Ltd. © Luminous Productions Co., Ltd. 何か演算 何か入力 何か出力

エディタ 分離 結果

© Luminous Productions Co., Ltd. どれだけ 一般化出来るか? が大事

© Luminous Productions Co., Ltd. もう一人、大事な人

入力 処理 出力

ノードの間を流れるデータ

© Luminous Productions Co., Ltd. 演算 入力 出力

間を流れるデータ

© Luminous Productions Co., Ltd. 登場人物

• 入力 • 演算 • 出力 • 間を流れるデータ

演算 入力 出力

間を流れるデータ

© Luminous Productions Co., Ltd. 入力

• 外部画像ファイル • 塗るマスク – 汎用 – ハイトマップ • カーブ – 1本カーブ – 複数本カーブ • ノイズ • 地面情報 – 法線、高さ、遮蔽など • レベルのゲームオブジェクト

© Luminous Productions Co., Ltd. 処理

いろいろな演算処理

© Luminous Productions Co., Ltd. 出力

• 地形 – 頂点&マテリアル • 植物配置 • ゲームオブジェクト配置 • エフェクト配置 • メッシュ生成 ・・・・

© Luminous Productions Co., Ltd. 入力 演算 出力

どれもたくさん種類がある!

でも、このバリエーションは大事。

© Luminous Productions Co., Ltd. 単純さを守るのは、 間を流れるデータ

© Luminous Productions Co., Ltd. 演算 演算 入力 出力

入力 間のデータ 出力 真ん中が単純なら、 全体も単純さを維持できる。 入力 出力 演算 演算

© Luminous Productions Co., Ltd. 間を流れるデータ

マスク ポイントクラウド 2種類のみ © Luminous Productions Co., Ltd. マスク

• 画像みたいな、データ。 • 座標から、値が決まる。 • データの総数はない。 手塗り – 解像度の概念は、原則ない。

地面法線

© Luminous Productions Co., Ltd. ポイントクラウド

• 構造体の配列みたいなデータ – テーブルのデータ • インデックスから値が決まる。 • データの総数がある。

© Luminous Productions Co., Ltd. この2種類で 全部表現可能。

今のところ。

© Luminous Productions Co., Ltd. カーブもポイントクラウド

• カーブは、ベジェ曲線の集合。 • ベジェ曲線の持ち方。 P0 → ポイントクラウドの座標 P1 → P0からの相対座標

P2 → P3からの相対座標 P2 P1 P3 → 持たない(次の番号のポイントクラウドのP0)

P3 P0

© Luminous Productions Co., Ltd. リソースリストもポイントクラウド

• リソースリストは、どんなリソースを配置するのか? というアセットのリスト

この3つの木をリスト化して、 どれかを配置!みたいな目的に使う。 リソースのパレットみたいな感じ。

ポイント(座標)はないですが、ポイントクラウド

© Luminous Productions Co., Ltd. 編集方法

© Luminous Productions Co., Ltd. マスクの 編集

© Luminous Productions Co., Ltd. マスクの編集は、手塗り

塗る

© Luminous Productions Co., Ltd. 地形もマスク

スカルプト

© Luminous Productions Co., Ltd. ポイントクラウドの 編集

© Luminous Productions Co., Ltd. 選択して編集

選択して、編集

© Luminous Productions Co., Ltd. カーブとして編集

© Luminous Productions Co., Ltd. マスクとポイントクラウドの違い

マスク ポイントクラウド

座標で値が決まる。 インデックスで値が決まる。

塗って編集 スカルプトで編集 選択して編集 カーブとして編集

© Luminous Productions Co., Ltd. 登場人物

• 入力 • 演算 • 出力 • 間を流れるデータ

演算 入力 出力

間を流れるデータ

© Luminous Productions Co., Ltd. 演算の 基本ルール

© Luminous Productions Co., Ltd. 基本ルール1

入力 出力 主 主と同じ種類

© Luminous Productions Co., Ltd. マスク同士の演算

座標を指定して値を取得

GetValueByPosition

マスク マスク

マスク

© Luminous Productions Co., Ltd. ポイントクラウドの演算

インデックスを指定して値を取得

GetValueByIndex

ポイントクラウド ポイントクラウド

ポイントクラウド

© Luminous Productions Co., Ltd. ポイントクラウドとマスクの演算

2項演算は、V1と同じデータ型を出力するルール

ポイントクラウド ポイントクラウド

マスク

© Luminous Productions Co., Ltd. ポイントクラウドとマスクの演算

GetValueByPosition

GetValueByIndex

ポイントクラウド ポイントクラウド

ポイントクラウドはPositionを持っている(と思うので) それを元にマスクからデータを取得 マスク ポイントクラウドに座標がない場合は、原点のマスク の値を取得

© Luminous Productions Co., Ltd. ポイントクラウドとマスクの演算

これはNG

マスク

ポイントクラウド マスクの「座標」から それっぽい、ポイントクラウドを持ってくることは出来ますが、 半径何mまで持ってきて良いの?とか不明瞭なので、なし。

© Luminous Productions Co., Ltd. マスク ポイントクラウド

変換可能

© Luminous Productions Co., Ltd. ポイントクラウド→マスク

ポイントクラウドの周りにマスク生成。 半径を指定する。

© Luminous Productions Co., Ltd. マスク→ポイントクラウド

マスクの場所に、ポイントクラウドを生成

© Luminous Productions Co., Ltd. 演算のルール まとめ

• 演算で扱うデータは、マスクとポイントクラウドのみ • マスクとポイントクラウドは相互変換可能。 • マスクとポイントクラウドは演算可能。

© Luminous Productions Co., Ltd. 処理の順番

© Luminous Productions Co., Ltd. 処理の流れ

入力 処理 出力

処理の順番は、 逆順

© Luminous Productions Co., Ltd. 逆順に処理している理由

• 最終結果に必要なデータのみを、計算するため。 • リアルタイムで、編集結果を確認できるようにするために、 16m x 16m のブロック単位で計算しています。

© Luminous Productions Co., Ltd. 処理の順番

入力 処理 出力

GetValueByPosition

足し算

GetValueByPosition GetValueByPosition

出力に必要なデータのみ計算

© Luminous Productions Co., Ltd. 編集したとき(塗ったとき)

更新の通知 生成処理

塗ったよ!

ここは変わっていないので処理不要。 ビルド結果をキャッシュしておく。

© Luminous Productions Co., Ltd. 基本の仕組みは ここまで

© Luminous Productions Co., Ltd. 少し特殊なケース

© Luminous Productions Co., Ltd. 依存関係のある 生成

© Luminous Productions Co., Ltd. 配置した岩、の上に、草を配置したい!

© Luminous Productions Co., Ltd. 自動配置した岩、の上に、草を配置したい!

© Luminous Productions Co., Ltd. 処理の順番、大事

© Luminous Productions Co., Ltd. Phase という仕組み

© Luminous Productions Co., Ltd. Phaseごとに順番に処理

Phase1 Phase2 Phase3 …

© Luminous Productions Co., Ltd. Phase Phaseを決めるのは、出力

逆順だから

© Luminous Productions Co., Ltd. 例 (おまけ)

© Luminous Productions Co., Ltd. 例(おまけ)

© Luminous Productions Co., Ltd. まとめ

© Luminous Productions Co., Ltd. まとめ

• マスクとポイントクラウドの組み合わせで、多くの表現を可 能にしました。 • プロシージャル処理をオープンにすることで、アーティストが 意思を持って自動配置出来るようになりました。

© Luminous Productions Co., Ltd. Q&A

© Luminous Productions Co., Ltd. © Luminous Productions Co., Ltd. • WINDOWSはマイクロソフト コーポレイションの商標または登録商標です。 • その他掲載されている会社名、商品名は、各社の商標または登録商標です。

© Luminous Productions Co., Ltd.