全スライドをDocswellで公開中！ https://www.docswell.com/s/historia_Inc/KXWNRZ-ue5-the-market-of-light-nanitelumen ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 「出張ヒストリア！ ゲーム開発勉強会2021」（https://historia.co.jp/archives/22783/）で行った「UE5制作事例 “The Market of Light” ～Nanite/Lumenへの挑戦～」講演のスライド資料です。 講演動画 https://youtu.be/gUwPnJ50rEQ 講演者 株式会社ヒストリア　佐々木 瞬 (代表取締役 / プロデューサー / ディレクター) 株式会社ヒストリア　ヒストリア・エンタープライズ 真茅 健一(アーティスト) 講演内容 ヒストリアでは2021年9月28日(火)に Unreal Engine 5（以下、UE5） の技術デモを兼ねた短編ゲーム”The Market of Light”をSteamにて公開しました。 本タイトルはUE5の新機能である、無限のポリゴンを扱う「Nanite」、完全に動的なライティングを可能にする「Lumen」をどう活かすかを主眼において開発されました。 本セッションでは技術デモとしての見どころや、このようなコンテンツになった経緯、Naniteを前提としたワークフローへの挑戦、そして実際にNanite・LumenおよびVirtual Shadow Mapsを使用して得た技術的知見をお話いたします。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

1. UE5制作事例 “The Market of Light“
～ Nanite / Lumenへの挑戦 ～

2. 自己紹介
株式会社ヒストリア 代表取締役
佐々木 瞬
プロデューサー / ディレクター / エンジニア
ゲーム系の専門学校を企画職として卒業。その後、ゲーム
のディレクターを経て、エンジニアへ転身。前職で
Unreal Engine 3 を使用していた経験から、2013年
Unreal Engine 専門会社のヒストリアを設立。ゲームと
エンタープライズコンテンツの両方の制作を行う。
Unreal Engine 歴 10年くらい。

3. 前提
※ Unreal Engine 5 はまだ早期リリース版です ※

4. “The Market of Light”とは
►ヒストリアより無料公開
►9月28日Steamで公開された
技術デモゲーム
►15-30分のコンテンツ

5. “The Market of Light”とは
Steam
https://store.steampowered.com/app/1691400/The_Market_of_Light/
PV
https://www.youtube.com/watch?v=SKHYaGjW8JM

6. 制作体制
►ヒストリアと
ヒストリア・エンタープライズの共同制作
►今年の3月ごろに、エンタープライズチー
ムの「今年のデモはどうしようかね」とい
うところから始まった。
►UE5はまだ無かったが、「2021年初頭に
プレビューが登場予定」と言ってたし、そ
ろそろ来るでしょう、ということで、今年
はUE5デモにしようと決まった。

7. 制作体制
佐々木
プロデューサー/ディレクター
真茅
アートディレクター
小林 大輔
背景アーティスト
天見
背景アーティスト
他数名
ヘルプやコリジョン設定
千葉
カットシーン/TA
橘内
リードエンジニア
柳田
エンジニア
VFX
主なエフェクト
UI
UI
Sound
BGM・SE
後藤
QA
小林 誠
PM

8. コンセプトワーク

9. UE5すげぇ！

10. Naniteすげぇ！

11. Naniteを活かすインタラクティブコンテンツにしよう！

12. コンセプト１：遠くからどこまでも近づける感動
遠くから超近接まで近づける感動でNaniteの凄さを表現できないか？
→虫の視点＋探索ゲーム

20. すげぇ！！

21. 過去案件で似たような経験があった
【特別対談】『見たことのない文化財』ー8K映像で美しく再現された文化財の裏側を制作陣に訊く【後編】
https://historia.co.jp/archives/19738/
どこまでも寄れることに感動があった！
↓詳しくはこちら

22. コンセプト１：遠くからどこまでも近づける感動
「虫の視点」＋「探索ゲーム」に決定

23. コンセプト２：Epicデモとは違う雰囲気
岩は技術デモで使いやすいが、雰囲気が似てしまう。
技術デモでは珍しい、明るい雰囲気にしたかった。

24. コンセプト３：新しいワークフローへの挑戦
アセットベース＋自作。フォトスキャンもやる。
＋Marketplaceアセット
＋映画用アセット
自作アセット

25. 舞台設定
►フォトスキャンしやすい野菜や果物が良い。
たくさんばらまくことで、Naniteの威力も感じられる。
►イタリアっぽいところの市場＋テントウムシに決まった。
► アセット合わせで、野菜が大量にあるところを探した
► 川崎の「ラ チッタデッラ」とかのイメージ
►テントウムシからホタルへ……

26. シナリオ設定
►コンテンツにメッセージを込めたかった。
EpicのKite Demoに憧れがあった。

27. シナリオ設定
「この技術が切り替わる面白い時代を一緒に楽しもう！」
「Unreal Engine 5 という新しいオモチャを一緒に楽しもう！」

28. シナリオ設定
「この技術が切り替わる面白い時代を一緒に楽しもう！」
「Unreal Engine 5 という新しいオモチャを一緒に楽しもう！」
Nanite
Lumen
Niagara

29. 技術デモとしての柱
►３つの目玉新機能
► Nanite / Lumen / Niagara
►その他、重要な要素２つ
► Virtual Texturing、Virtual Shadow Maps
►Nanite時代の新たなワークフロー

30. Nanite時代のワークフローへの挑戦
超ハイポリが使える ＝ 作らなきゃいけない
また業界のクオリティラインが上がってしまう……

31. Nanite時代のワークフローへの挑戦
何もしなければただ単にコストが爆増する！

32. アセット制作効率化の発想
プロシージャル技術 アセット利用
など など

33. アセット制作効率化の発想
プロシージャル技術 アセット利用
今回はこっちの検証
など など

34. Nanite時代のアセット利用（仮説）
►使えるアセットの幅が広がる
► MegascansやMarketplaceのアセットが加工コスト低く利用できる
► 映画用アセットも使用できる
►ヒーローアセットや、足りないアセットを自分たちで作る
► 使用アセットに負けないクオリティで
►アセットの上手い使い方が今後のコンテンツ制作のカギ！
……かもしれない。

35. ここからはより具体的な話を真茅よりお送りします。

36. 自己紹介
► 建築・自動車関連・放送・バーチャルライブなどゲーム以外の案件を担当しています。
ヒストリアエンタープライズ 所属
アーティスト
まかや けんいち
真茅健一

37. アジェンダ
1.The Market of Lightの制作事例で見る
UE5の新機能
► Nanite
► Virtual Shadow Maps
► Lumen
2.The Market of Lightの世界を
表現するためにやったこと

38. 1.The Market of Lightの制作事例で見るUE5の新機能
Nanite

39. Naniteとは
ZBrush のスカルプトからフォトグラメトリスキャン
まで、映画品質の数百万ポリゴンのソースアートを
直接インポートし、そのアセットを数百万個設置し
ても、見た目の忠実度を損なわずにリアルタイムの
フレームレートを維持しているという様子を想像し
てみましょう。そんなことは不可能と思いますか？
今、これが実現します！
つまり、超ハイポリゴンを大量に扱えるようになった
https://www.unrealengine.com/ja/blog/unreal-engine-5-is-now-available-in-early-access?lang=ja
より引用

40. 超ハイポリゴンを使ってみる
►プリレンダリング用ラズベリーのモデル
►三角ポリゴン換算で一粒750万ポリゴン！

41. 一箱分配置すると1FPSとほぼフリーズ状態に
NaniteなしでUE5に配置

42. Nanite化してみる
►コンテンツブラウザもしくはスタティックメッシュエディタから
Naniteを有効に

43. 1→120FPSに！！
Nanite化してUE5に配置

44. Naniteだから可能な物量感のあるシーン
Nanite化すれば超ハイポリゴンを大量に扱えるという前提でアセットを用意することに

45. The Market of Lightのアセット
►Megascansのアセット
►自作アセット
►プリレンダリング用の購入アセット
►UE5内で加工したアセット
►MarketPlaceのアセット
Naniteを前提としたアセットワークを行った

46. Megascansのアセット
►小物など多くのアセットは
Megascansを使用
►UE5内でQuixelBridgeを使い直
接インポートできるのは便利
►Nanite設定があるものは使用
►企画の段階でMegascansのア
セットを多く使えるようなシー
ンを設定していた

47. 自作アセット
►ヒーローアセットとなる噴水
►フォトグラメトリで作ったアセット
►窓、壁、屋根などの汎用アセット

48. 噴水
►ヒーローアセットとなるためフルスクラッチで作成

49. 噴水
► モデリング Maya
► スカルプト ZBrush
► テクスチャリング Substance Painter

50. 噴水
►Mayaでベースメッシュを作り、ZBrushでスカルプト
ZBrushでスカルプトしたモデル
ベースメッシュ

51. 噴水
► スカルプトしたHighモデルのままだとUV展開時にMayaが固まるなど取り回しが悪い
► 微妙な凹凸はノーマルマップのほうが微調整が効く
↓
Naniteがあるものの取り扱いがいい程度のポリゴン数で抑えることに
UE5で使用したモデル
約38万 Triangle
ベイク用Highモデル
約820万 Triangle

52. 噴水
► 右のモデルからSubstance Painterでベイクしてノーマルマップを作成
► それでもこれまでのアセットと比べると非常にハイポリゴン
UE5で使用したモデル
約38万 Triangle
ベイク用モデル
約820万 Triangle

53. フォトグラメトリを使用したアセット
►野菜の大半はMegascansを使用
►検証としてブロッコリーはフォトグラメトリで自社制作

54. Megascansアセットをカスタマイズ
Megascansのオリジナルデータ

55. Megascansアセットをカスタマイズ
►ヘタがないのでZBrushで追加
Megascansのデータ
+ →
Megascansのデータを元にZBrush
でスカルプト。

56. Megascansアセットをカスタマイズ
►蛍目線だとさらにディティールがほしい。
野菜の表面の毛のようなものはトライコームと言います

57. Megascansアセットをカスタマイズ
►プロジェクト初期のルックデブではトライコームの表現にヘア
を検討していたが

58. Megascansアセットをカスタマイズ
►Naniteメッシュのほうがはるかに描画負荷が低かった
670万Triangleものメッシュを
Naniteに
ヘタにトライコームを追加
→

59. Megascansアセットをカスタマイズ
►さらにディティールを追加
テクスチャの解像感が足りない ディティールテクスチャを追加
→

60. インゲームでの見え方
Megascansアセットをカスタマイズ

61. プリレンダリング用アセットの使用
►これまで
► リダクションorローポリを作ってベイク
► 最適化に手間がかかるのでなるべくMARKET PLACEのゲーム用アセットを使って
いた

62. プリレンダリング用アセットを加工
►4万ポリゴンもあるが面取
りしていないため寄ったと
きに角が目立つ
►これまでの手法
・リダクションorローポリを作って
ベイク
・最適化に手間がかかるのでなるべく
MARKET PLACEのゲーム用アセット
を選ぶ

63. プリレンダリング用アセットを加工
►分割してベベルをかけ118
万ポリゴンに
►ローポリを作るより遥かに
楽にクオリティアップ

64. プリレンダリング用アセットの使用
►ポリゴン数30倍になったがNaniteだとFPSは変わらなかった
アセットワークが変わりアセット購入の自由度が増える

65. UE5内で加工したアセット
►UE5のモデリングツールでテクスチャからディスプレイスメントをかけ
て地面モデルを作成
ただの プレーンが手軽にハイメッシュに

66. マクロレンズで葉を撮影
►蛍目線だと通常サイズのテクスチャでは解像感が足りない
►葉っぱ一枚で8k x 4K の高解像度テクスチャを作成

67. Naniteの制限
►全てのメッシュをNaniteにできるわけではない
詳細はNaniteの公式ドキュメントを御覧ください
https://docs.unrealengine.com/5.0/ja/RenderingFeatures/Nanite/
より引用

68. Naniteにできなかったアセット

69. ワイヤーフレーム表示にするとNaniteメッシュは見えない
Naniteにできなかったアセット

70. Naniteにできなかったアセット
植物などMaskedのマテリアルのもの ガラスなどTranslucentマテリアルのもの
メッシュのLocationを元にランダム値を返すマテリアルの機能は
Nanite化されたメッシュでは機能しなくなった

71. Naniteにできなかったアセット
NaniteのマテリアルをTwo Sidedにすると裏が表示されず表は黒くなる

72. 植物と透明のマテリアル以外の大半はNaniteにできた
Naniteにできなかったアセット

73. どんなメッシュをNaniteにすればいい？
►ハイポリだけでなくローポリアセットでもNanite化してデメ
リットはない
►なるべくNaniteにしたほうが後述の
►Lumen,Virtual Shadow Mapsを使う上でも描画負荷に優しい
► 一般的に Nanite は可能な限り有効にすべきです。スタティック メッシュで Nanite を有効にすると、通常はレンダリングが高速化され、メモリとディスク領域の消費が削減されます。
引用元 Naniteのドキュメント
https://docs.unrealengine.com/5.0/ja/RenderingFeatures/Nanite/
► Nanite 以外のジオメトリの VSM へのレンダリングは、Nanite ジオメトリよりもコストが高くなります。そのため、ポリゴン数の少ないメッシュも含めて、サポートされているすべてのジオメトリ
で Nanite を有効にすることをお勧めします。唯一の例外は、Nanite 仮想化ジオメトリでまだサポートされていない機能の場合です。
引用元 Virtual Shadow Mapsのドキュメント
https://docs.unrealengine.com/5.0/ja/RenderingFeatures/VirtualShadowMaps/

74. 1.The Market of Lightの制作事例で見るUE5の新機能
Virtual Shadow Maps

75. Virtual Shadow Mapsとは
・一貫性のある高解像度シャドウイングを実現する
ために使用される新しいシャドウ マッピング方法で
す。
・仮想シャドウ マップは非常に高解像度のシャドウ
マップにすぎません。現時点の実装での仮想解像度
は 16K x 16K ピクセルです。
https://docs.unrealengine.com/5.0/ja/RenderingFeatures/VirtualShadowMaps/
より引用
レイトレーシングシャドウに近い高品質のシャドウマップ

76. Virtual Shadow Maps オン
シャープかつボケた影

77. Virtual Shadow Maps オフ
シャープかつボケた影

78. Virtual Shadow Maps オン
シャープかつボケた影

79. Virtual Shadow Maps オフ
シャープかつボケた影

80. シャドウの解像度が足りず不正な影も落ちている
デフォルト設定だと寄ったときに

81. ►ドキュメントによるとVirtual Shadow Mapsはデフォルトでカメラから
64cm(2^6cm)~40km(2^22)カバーしています。
►コンソールコマンドは以下で調整できます。
r.Shadow.Virtual.Clipmap.FirstLevel 6
r.Shadow.Virtual.Clipmap.LastLevel 22
Virtual Shadow Mapsの設定
https://docs.unrealengine.com/5.0/ja/RenderingFeatures/VirtualShadowMaps/より引用
詳細はドキュメントを御覧ください

82. r.Shadow.Virtual.Clipmap.FirstLevel 6→ 4にすることで解決
デフォルト設定だと寄ったときに
(2^6=64cm) (2^4=16cm)

83. Virtual Shadow Mapsをオン 透け感がなくシャドウも不正
サブサーフェイスが効かない

84. Virtual Shadow Mapsをオフ
サブサーフェイスが効かない

85. Virtual Shadow Mapsをオン
葉のサブサーフェイスも効かない

86. Virtual Shadow Mapsをオフ
葉のサブサーフェイスも効かない

87. カットシーン、蛍目線の時はVirtual Shadow Mapsをオフにすることに
Virtual Shadow Mapsをオンオフして使用した

88. 1.The Market of Lightの制作事例で見るUE5の新機能
Lumen

89. Lumenとは
Lumen は、次世代コンソール向けに設計された
Unreal Engine 5 の新しい完全に動的なグローバル イ
ルミネーションおよび反射のシステムです。これは、
Unreal Engine 5 のデフォルトのグローバル イルミ
ネーションおよび反射のシステムとなります。
https://docs.unrealengine.com/5.0/ja/RenderingFeatures/Lumen/
より引用
ライトビルドなしにグローバルイルミネーションが可能に

90. Lumen 無効
Lumen

91. Lumen 有効
Lumen

92. デフォルトの設定
Lumen

93. Directional LightのIndirect Lighting Intensityを1→15に
Lumen

94. リアルタイムGIだからできたシームレスな時間変更
LumenはリアルタイムGI

95. ただしマテリアルが画面外に出ると効果は消える
LumenはマテリアルのEmissiveにも有効

96. ライトが増えるとベイクできない分シャドウ負荷がネックに
Lumenは複数のライトのGIにも対応している

97. Virtual Shadow Mapsが重いから影を消せば…
Virtual Shadow Mapsの負荷がネックになる

98. 他がリアルな分シャドウをオフにするとクオリティの低下が非常に目立つ
Virtual Shadow Mapsの負荷がネックになる

99. 複数のライトを1パスで描画する実験的機能がある
Virtual Shadow Mapsの最適化を試す
https://docs.unrealengine.com/5.0/ja/RenderingFeatures/VirtualShadowMaps/
より引用
技術的詳細はVirtual Shadow Mapsのドキュメントをご覧ください

100. 蛍歩行時に加え夜もVirtual Shadow Mapsはオフにした
Shadow Depthの増加分は下がらなかった
Shadow
Maps
Virtual
Shadow
Maps 1Pass
Virtual
Shadow
Maps 1Pass
Lights 2.69ms 2.25ms 5.72ms
Shadow Depth 1.93ms 6.31ms 6.33ms
合計 4.62ms 8.56ms 12.05ms

101. 2.The Market of Lightの世界を
表現するためにやったこと

102. 歩行時は蛍の視点感を出したい
蛍の視点感をだすために

103. 飛行時より画角を広げつつレンズの歪みをいれて蛍視点を演出
r.Upscale.Panini.D 0.25 で設定した
蛍の視点感をだすために

104. カットシーンは蛍の小ささを感じさせるレンズボケを意識した
ボケでスケール感を演出

105. 飛行時はボケていると散策できないためボケを切っている
ボケでスケール感を演出

106. ボケでスケール感を演出
►蛍目線時にはプレイに支障がない程度に背景のみぼかした
► マクロレンズで撮るサイズのスケール感なので普通に設定すると被写界深度が浅す
ぎてボケすぎる
後ろボケをいいぐらいにすると
前ボケが大きすぎてプレイ不能
r.DOF.Kernel.MaxForegroundRadius 0.025→0
にして強制的に前ボケのみ切った

107. 最適化について
►ドキュメントは細かく説明されているものの、まだ十分な最適化情報は
なくエディタに出ていない設定を探したりと描画最適化が難しかった。
►いくつかご紹介します

108. 大量のアセットにものすごく近づけるには
►高解像度で多数のテクスチャが必要となる

109. GPUメモリがすぐにあふれる
►GPUメモリがすぐいっぱいになる
►するとエディタに左上にこのログが表示される
►GPUメモリがパンクしているので動作がすごく重くなる

110. Virtual Textureを使用
►画面に見える必要な部分だけテクスチャを読み込むため、高解像度テク
スチャを大量に扱える
► 詳しくはヒストリアブログでも解説しています
https://historia.co.jp/archives/14062/
►大半のテクスチャはVTとして使用した(古代の谷もそうなっています)

111. Virtual Shadow Mapsの設定
►箱庭サイズの本コンテンツでは遠方の影は不要なため
r.Shadow.Virtual.Clipmap.LastLevel 22→13
にすることでVirtual Shadow Mapsの負荷を1.2ms削減
(2^22≒40km) (2^13≒80m)

112. r.LumenScene.CardAtlasSize 4096
Lumenの設定

113. r.LumenScene.CardAtlasSize 1024 2.46ms削減
Lumenの設定

114. r.Lumen.Reflections.MaxRoughnessToTrace 0.4
Lumenの設定

115. r.Lumen.Reflections.MaxRoughnessToTrace 0.2 2.68ms削減
Lumenの設定

116. 古代の谷のDefaultEngine.iniは参考になる
► 古代の谷のDefaultEngine.iniで上書きしているレンダリング設定は非常に参考になる。
► 例 ルーメンの設定 r.Lumen~
► 例 バーチャルシャドウマップの設定 r.shadow.Virtual~
► UIから設定できない細かい調整、最適化ができる。
► 参考にしてThe Market of Lightに合うように値を調整していくつか使用した。
https://docs.unrealengine.com/5.0/ja/RenderingFeatures/Lumen/
より引用

117. まとめ

118. おかげさまで

119. おかげさまで
４.５万ダウンロード突破！

120. おかげさまで
公式動画に取り上げて頂きました！

121. 繰り返しになりますが
※ Unreal Engine 5 はまだ早期リリース版です ※

122. まとめ
►Naniteだからといって（だからこそ？）世界を広げたら死ぬ
►映画用アセットも使えると、単純にアセットの選択肢が広がる
►アプリケーションサイズが重くなるのどうしよう
►ゲーム体験として、LODからの解放は素晴らしい体験
►エンタープライズでは割と早い段階から使えそう
►Steamで出すの大変

123. 一緒に Unreal Engine 5 を楽しみましょう！