ダークファンタジーの空気感を描く、『ELDEN RING』の大気表現【CEDEC2022】

2022.10.14
注目記事見た目を良くするゲームの舞台裏講演レポート公開資料まとめCEDEC2022
この記事をシェア!
twitter facebook line B!
twitter facebook line B!

国内最大規模のゲーム業界カンファレンス「CEDEC2022」が、2022年8月23日(火)から8月25日(木)までの日程で開催されました。2日目となる8月24日には、株式会社フロム・ソフトウェアの3Dグラフィックセクションチーフ 佐藤秀憲氏と、グラフィックシステムセクションシニア 二ノ宮絵理華氏が登壇し、「ELDEN RINGの大気表現 -スカイボックス、およびボリューメトリックフォグを活用したアートの作り方-」と題した講演が行われました。

本作で描かれた「ダークファンタジーの空気感」の表現について、アートとエンジニアリングの両面から解説された本講演をレポートします。

TEXT / rita
EDIT /  田端 秀輝、神山 大輝

目次

『ELDEN RING』と言えば、2022年上半期の話題をさらったオープンワールドのアクションRPG超大作です。『DARK SOULS』シリーズの更なる進化を目指した新規タイトルとして開発され、リリース後は歯ごたえのある難易度と美麗なビジュアルで、世界中のファンを魅了しました。

講演の冒頭ではゲーム内容を紹介するムービーが流れましたが、改めてそのアートに美しさ、緻密さに感嘆します。

ビジュアルコンセプト

まず、本講演の主題である「大気表現」が、どのようにビジュアルコンセプトに寄与するのかが説明されました。本作において「空」は画面内を占める面積が広く、フォグ(霧)は全体の色やグラデーションに影響を与えています。この2点が大気表現の中心となります。

続けて開発初期のビジュアルが紹介されましたが、これは当初あまり評判が良くなかったとのこと。先ほどの「空」と「フォグ」という観点で見てみると、確かにどのエリアも似たような雰囲気で印象に残らず、色の情報や変化に乏しいことが分かります。

全てのエリアが似たような雰囲気に

天候による見た目の変化も希薄だった

この状態を解決するため、「絵画的なビジュアルを目指す」「多彩な見た目を用意する」といったコンセプトのもと練り直されたのが以下のビジュアルです。現実的にはあり得ないような色を許容し、キーとなるカラーを場面ごとに変えることで、多彩な印象が残るビジュアルに仕上げています。

左の画像は「緑と黄」、右の画像は「彩度の高い赤」というように、地域によって絵作りの基準となる色を変え、与える印象を変えている

ダンジョンでも、左は「シアンベースに空中に魔法のエフェクトを加える」、右は「ダークソウルシリーズのような彩度の低い絵作り」とメリハリをつけている

地下のフィールド。紫をベースに星空をイメージしたファンタジーらしいビジュアル

また、同じシーンでも天候が変わることで、空の色とフォグの密度や分布が変化し、印象を大きく変更させることが出来ています。

スカイボックス

これらのビジュアルを支える技術として、スカイボックスの機能からおさらいしていきましょう。スカイボックスとは、3Dのシーンの空を包み込む天球を模した形状のことを指します。ここに大気の色、星、太陽、月、雲といったオブジェクトを描画します。

スカイボックスを扱う際は、作りたいシーンに応じて都度パラメータを調整するのは煩雑なため、「この時刻の時にはこんな色で、太陽や月・星のレイアウトはこうなる」といったプリセットを作っておき、後は時刻を指定するだけで設定を適用する運用が一般的です。「ELDEN RING」でも同様の運用になっています。

また、天球を構成する頂点のUV値を操作することで、空の一部に歪みを生じさせたり、テクスチャをスクロールさせる、といったテクニックも使えるようになっています。

本作においては一日を4段階に区切って設定している

UV変形の事例

それらに加えて本作では、絵画的な空を作るために色を積極的にコントロールしたいというニーズがありました。また、ゲームの世界観に直結する設定として「黄金樹の方角は暗くしたい」といった、任意の方角に任意の色をブレンドしたいという要望もあったそうです。

これらを実現するために、本作では色のコントロール機能が充実しています。これは恐らく、方角単位で頂点カラーを制御するような仕組みになっているものと推測されます。

絵画的な印象作りの一端として、写真でよく用いられる「ビネット効果」もスカイボックス用にサポートしています。これはポストプロセスとして画面全体に対して適用するケースとは別に、スカイボックスのみが画面端で暗くなるような仕組みが追加されています。

本作では天候や時刻によってシーン中のフォグの色も大きく変化します。この仕組みでは、スカイボックスとシーン中の配置物が馴染むように都度調整する必要が出てしまい、手間がかかります。

そこで、あらゆる環境で自動的に色がフォグに馴染むように、フォグの色を取得して任意の割合でブレンドする機能が作られました。

フォグの色をブレンドする機能をONにすることで(画像右)、雲の色を周囲になじませる

スカイボックスとは少し異なる話になりますが、ポストプロセスの中でも重要なものとして「グローフィルター」「露出逆補正」の機能についても紹介されました。物理ベースドレンダリング(PBR)において、発光表現は数式で正確に行おうとすると他の部分で破綻することが多いため、後乗せでうまく嘘をつく場面も必要になります。

また、この話題に関連して環境マップへの補正についても解説されました。

空が絵画的で彩度が高いと、そのまま環境マップをキャプチャして適用した際に、シーン全体の彩度が高くなってしまいます。これを回避するために、キャプチャの際には彩度の低い空に変更されるようにしたそうです。正確な絵作りよりも、印象を優先した補正を行うというアプローチは、昨今多くのタイトルで見られます。

シェーダーはアーティストが内製エディタで作成するフローを採用したとのこと。プログラマーが作成する場合よりもパフォーマンス最適化の面ではベストを狙いにくいものの、ディレクションに対して素早く応えられる環境で開発が進められました。

ノードベースの内製エディタによってアーティスト自身がシェーダーを作成

ボリューメトリックフォグ

本作では、大気散乱を表現するための技術としてボリューメトリックフォグが用いられています。

大気散乱とは、大気を構成する微少な粒子に光が当たり、経路が変化する現象のことを指します。代表的な散乱モデルとしてはレイリー散乱やミー散乱があり、これらはCG表現においてもよく用いられます。

大気散乱のシミュレーションを厳密にやってしまうと処理時間的にゲームが成り立たないので、近似計算を用いたり、散乱光が散乱先に与える影響を無視したりと簡略化が行われています。

簡略化した計算を、キューブ状の空間内で少しずつ移動しながら行い、その結果を足し合わせて影響量を求める手法がレイマーチングです。簡略化した計算であっても、全ての領域をレイマーチングでカバーするのは負荷は難しいため、本作では遠距離の場合は解析的手法による計算に切り替えて、より広範囲を処理できるような工夫が施されています。

一般的にボリューメトリックフォグといえばライトシャフトの表現に目が行きがちですが、シーンの状況に合わせた複雑なグラデーションが表現できるようになったことも、アーティストに好評だったとのことです。レイマーチングにより、空間中の光の散乱度合い・視線方向・光の向きを加味した結果がこれらの表現を可能にしています。

当初はシーンに一律で設定できるのみだったボリューメトリックフォグでしたが、「高低差がある場面ではビジュアル的に物足りない」といった声があったそうです。そこでアーティストが自由に配置可能なローカルフォグの機能を用意されました。これが配置式フォグボリュームです。

配置式フォグボリュームの形状は、パーリンノイズを用いた3Dテクスチャで表現しています。複数の異なる周波数をパラメータとして与え、合成することで、ランダム性とスムーズな連続性を持った密度分布を実現しています。

パラメーターの違いだけで、これらのようなフォグの表現を作ることができる

配置式フォグボリュームは領域ごとに固有の色を設定することもできれば、自動的にグローバルなフォグの設定と同期させることもできるとのことで、かなりアーティストにとって自由な表現の裁量があるようです。

また、アーティストが用意したハイトマップを適用することで、高低差のある地形にフィットしたフォグボリュームを表現することも可能です。

ハイトマップ未適用の状態

ハイトマップ(画像左)を適用した状態

実際に使用された配置式フォグボリュームは、下記の画像のように大きく3種類に分類でき、用途に応じて単体で使用することも、複数を組み合わせて使用することもあります。

フォグボリュームの例

しかし、単純なグラデーションと複雑な形状を持つものとでは負荷への影響が異なってきます。シーン内の重要度に応じて調整する必要があるわけですが、アーティストとしては複数のボリュームを組み合わせた絵作りがしたいので、負荷が高すぎてたくさんは配置できないという状況に陥ります。

そこで、ボリューム単位でチューニングするのではなく、一律に影響する負荷対策を導入したそうです。

その1つが、縮小描画してアップスケールするというアプローチでした。解像度を下げるだけでは見た目にも厳しいですが、レイマーチングの処理間隔を調整したり、アップスケール時のフィルタ処理を工夫することで、許容範囲に達したとのことです。

アップスケール時に情報量が不足し、エッジ部分で穴が空いてしまいってアーティファクト(望ましくない見た目の部分)が発生してしまうという問題もありました。これについては、穴が空く可能性があるピクセルに対してあらためてレイマーチングで再処理を行うことで回避できたそうです。

ボリュームを遮るオブジェクトのエッジが縮小描画時の解像度よりも細かな単位で表れる場合に再処理対象となるようですが、この点は聴講者からの質疑も集中し、開発者にとっても興味深いポイントであることが窺えました。

右画像がアーティファクト対策を行ったもの

再処理対象となるピクセルを可視化した図

さらに、アップスケール時にバイラテラルアップサンプリングという手法を採用することで、アーティファクト自体の抑制も図っています。バイラテラルとは画像処理における平滑化フィルタで用いられるアプローチの1つです。

単純なアップサンプリング比べてコストはかかるが、エッジ部分のアーティファクト対象のピクセルを減らすことができる

アーティストによる活用事例

ここからは、実際に制作されたシーンを見ながら、どのような技術が画作りに寄与しているのかを見ていきます。

リムグレイブができるまで

作品のキーとなる「黄金樹」が印象的なエリアが、本作における絵作りの基準となったエリアでした。スカイボックスやフォグといったこれまでに紹介したテクニックについては、ここで得られたノウハウをほかのエリアに転用していく形で開発が進められました。

講演では「リムグレイブ」のスカイボックスの制作工程について、以下のように解説が行われました。

スカイボックスの初期段階

雲を追加。テクスチャの色がそのまま表示されている

色の調整。大気の色を緑にして地球とは違う世界を演出。また画面左方と右方のように、方向によって雲の色を変え情報量を増やす

大気と雲にビネット効果を適用。画面左上、右上が暗くなっている

指定した方角の色を変更する機能で「黄金樹」の方角を暗くすることで、ランドマークである「黄金樹」を強調させて完成

ボリュームメトリックフォグにおけるライトについては、太陽がある方角や、日向と日陰とで色を変えたり、カメラからの距離でライトの強度を変えるといった工夫がされています。

この画像の左右のように、控えめではあるが太陽の方角によって色を変え、情報量を増やしている

日向と日陰での明暗の差を強くすることで、ライトシャフトを強調している

カメラから近距離ではライト強度を0にすることで、フォグでの光が拡散を無くし、コントラストの高い絵に

この「リムグレイブ」を具体例に、ボリュームメトリックフォグを使った絵作りについて見ていきましょう。

スカイボックスとグローバルフォグだけの状態。奥行きはあるが縦方向の情報量が少ない

画面中央の崖面の単調さを解消し、橋のアーチを強調するため、配置式フォグボリュームを追加

画面右奥の大きな崖が単調に見える問題には、書割の雲を配置して対応。配置式フォグボリュームではないのは、雲のディテールを表現するにはテクスチャの解像度が足りなかったため

画面中央から少し右にある黄金樹周辺の情報量を増やすため、光のエフェクトを追加

湖のリエーニエ

「湖のリエーニエ」は、ハイトマップとボリューメトリックフォグの組み合わせにより、雲や霧の造形が丹念に行われたシーンであることが分かります。ノイズの組み合わせだけでは表現しきれない要素を、アーティストがハイトマップを足すことで豊かな見た目になっています。

造形の繰り返し感が目立つ雲や霧もハイトマップを適用させることでユニークな形状に

本来は地形の高低差にあわせて霧を発生させるためのハイトマップだが、使い勝手の良い手法だったので、他の場所でもフォグボリュームの印象を変えるために活用された

ストームヴィル城

3Dテクスチャをスクロールさせることで、嵐が動く様子を表現している

「ストームヴィル城」では、嵐の表現として配置式フォグボリュームのテクスチャスクロールというテクニックを用いました。ボリュームの外から見るとイマイチでも、中から見ると臨場感たっぷりな見た目になっています。

ただし、存在感が強すぎてゲームプレイの邪魔になる場面もあったため、その場合は表示距離を調整するなどして対処したとのことでした。

シーフラ河

幻想的な地底の星空が表現された「シーフラ河」。この星空は初期案にはなかった要素で、開発の途中で追加されたものであると明かされました。

地底に星空が広がるという要素が決まる前の、開発初期のスクリーンショット

星空を洞窟の空間内に収める必要があるためスカイボックスだけでは表現しきれず、ボリューメトリックフォグとポストプロセスの合わせ技で実現されています。

崩れゆくファルム・アズラ

「崩れゆくファルム・アズラ」は、これまでのように彩度の高いシーンではありませんが、竜巻の表現で魅せるシーンです。この竜巻は汎用的な仕組みで表現するのが困難だったそうで、最終的には竜巻の形状をメッシュにして、シェーダーアニメーションするという方法が採用されています。

そのままアニメーションさせるとポリゴン感が強かったため、動物の毛並み表現などで用いられた「ファーブラー」と呼ばれるポストエフェクトを適用して、この表現に行き着いたそうです。

おわりに

最後に佐藤氏は今後の大気表現の目標として、タイトルごとにあった絵作りを行うことの重要さと、アーティストが手動で調整していた箇所の自動化を進めたい方針を明らかにしました。また、これと同時に、フォグの3Dテクスチャや高度なアニメーションについては「アーティストによるカスタマイズができるようにしたい」というビジョンを語り、本セッションを締めました。

美麗な作例と技術的なアプローチ、アートの狙いが解説された、見所の多いセッションでした。大気表現やレイマーチングなどについては初歩的な解説もあり、昨今のCGトレンドを知るきっかけとしても貴重な講演でした。

ELDEN RING 公式サイトELDEN RINGの大気表現 -スカイボックス、およびボリューメトリックフォグを活用したアートの作り方- -CEDEC2022
rita

ゲームエンジンプログラマ。シリコンスタジオ、ゲームフリークを経て、現在はフリーランス的に活動中。低レイヤ・描画などのランタイムから、ツール・アセットパイプラインまで、ゲームに関する技術はなんでも守備範囲です。RPG・音ゲー・格ゲー・紳士ゲー・お馬さんなどなど幅広く嗜みます。新作を待ちわびているのは『世界樹の迷宮』『ブレイズアンドブレイド』『バーチャロン』など。

関連記事

シリーズ初の3Dアクション『星のカービィ ディスカバリー』におけるカービィらしさと遊びやすさ、そして現実世界との融合を目指したアートディレクション【CEDEC2022】
2022.12.28
モデラーとしてコンセプトアートと徹底的に向き合う『ELDEN RING』におけるキャラクターモデルへのアプローチ【CEDEC2022】
2022.11.30
『星のカービィ ディスカバリー』プロシージャル地形生成への取り組みから見るアーティストとエンジニア、レベルデザイナーの協力体制【CEDEC2022】
2022.11.10
『ヘブンバーンズレッド』のゲームデザイン――ADV、フィールド、バトルパートの全てにおいて「切なさ」を演出【CEDEC2022】
2022.11.09
“フル”クラウド開発の第一歩は新人研修から。バンダイナムコスタジオによるリモート環境でのゲーム開発インフラ整備【CEDEC2022】
2022.11.07 [PR]
AIによるアセット自動生成、ビルド時間の短縮――『FORSPOKEN』事例から見るマイクロソフト&Luminous Productionsの開発効率化【CEDEC2022】
2022.10.25 [PR]

注目記事ランキング

2024.04.08 - 2024.04.15
1
フォートナイト クリエイティブとUEFNで使える仕掛け一覧
2
フォートナイトとUEFNがv29.20にアップデート。見下ろし視点でもプレイヤーキャラクターの向きを操作できるようになった
3
『フォートナイト』で動く本格的なゲームが作れるツール「UEFN」とは?従来のクリエイティブモードから進化したポイントを一挙紹介!
4
【2022年5月版】今から始めるフォートナイトの「クリエイティブ」モードープレイ開始から基本的な操作方法まで解説
5
【CHALLENGE1】「クリエイター ポータル」を使って、UEFNで作成した島を世界中に公開する
6
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.1「アイテム系」
7
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.5「島の設定」
8
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.7「NPC系」Part1
9
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.7「NPC系」Part2
10
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.2「ユーティリティ系」
11
【CHALLENGE2-1】フレンドと一緒にゲームを作ろう――UEFNプロジェクトをチームメンバーとリアルタイムで共同編集する
12
『フォートナイト』で建築ビジュアライゼーション!?UEFNでオリジナルの世界観をどう作り上げたか、その手法を解説【UNREAL FEST 2023 TOKYO】
13
【STEP2】UEFNの基本的な使い方を覚えよう
14
【CHALLENGE3】UEFNの機能「ランドスケープ」を使ってオリジナルの地形を作る
15
UEFNで使えるプログラミング言語「Verse」のノウハウが集結。『UEFN.Tokyo 勉強会 03 Verse Night』レポート
16
まるで『マイクラ』?ボクセル地形を生み出す無料アセット「VoxelPlugin Free」で”地形を掘ったり積み重ねたり”して遊んでみよう
17
フルカラー書籍「UEFN(Unreal Editor For Fortnite)でゲームづくりを始めよう!」、ついに本日発売!全国書店で好評発売中!
18
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.6「チーム・対戦系」Part1
19
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.4「ゲームシステム系」
20
フォートナイトとUEFNがv29.10にアップデート。プレイヤーのジャンプや射撃などの入力を無効化するオプションが追加
21
【STEP4-1】コース外に出たらデスする仕組みを作る
22
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.3「プレイヤー系」
23
「UEFN」って実際どうなの? 編集部が3時間で「みんなで遊べるアクションゲーム(?)」を作ってみた
24
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.10「UI系」Part1
25
【STEP4-2】リスポーンとチェックポイントの仕組みを作る
26
【STEP3】オリジナルのアスレチックコースを作ろう
27
【STEP5-1】スタート時のカウントダウンを作る
28
フォートナイト クリエイティブとUEFNで使える仕掛け一覧 Vol.8「ゾーン系」
29
【STEP6-1】「オリジナルキャラクターを登場させよう」――Fabでアセットをダウンロードしよう
30
【STEP1】「UEFN」を入手しよう
VIEW MORE

イベントカレンダー

VIEW MORE

今日の用語

レベル(Level)
レベル
  1. ゲーム開発において、位置情報を持つオブジェクトが配置されている地形。
  2. RPGなどのゲームにおいて、キャラクターの成長度合いを示す数値。レベルアップなど。
VIEW MORE

Twitterで最新情報を
チェック!