PBRやHDRは当たり前、高品質なモバイルゲームの背景に関する取り組みをご紹介

10.1K Views

October 26, 22

スライド概要

本講演では既に市販されているモバイルデバイスをターゲットにしたテックデモシーンの開発において、3D背景の表現力を上げていくために行った事前準備や追加した機能についてご紹介します。
また、基本的なライティングの作業だけでなく、視線誘導なども含めた複合的な手法についても解説いたします。
細かいエンジニアリングの話についてはデイセッション「PBRやHDRは当たり前、モバイルの限界を攻めるレンダリングパイプラインの実装」をご覧ください。

こんな人におすすめ:
・描画担当のエンジニアと共に表現力向上に取り組みたい方
・PBR環境での3D背景制作について興味のある方

受講者が得られる知見:
・背景の表現力を上げていく際に行った具体的な例や工夫。
・今後高品質なモバイルゲームを制作するにあたって必要な技術。

出演:
北村 康高 (株式会社コロプラ)
宮窪 直 (株式会社コロプラ)

--
初出: SYNC 2022 #UnitySYNC
https://events.unity3d.jp/sync/

profile-image

リアルタイム3Dコンテンツを制作・運用するための世界的にリードするプラットフォームである「Unity」の日本国内における販売、サポート、コミュニティ活動、研究開発、教育支援を行っています。ゲーム開発者からアーティスト、建築家、自動車デザイナー、映画製作者など、さまざまなクリエイターがUnityを使い想像力を発揮しています。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

PBRやHDRは当たり前、 高品質なモバイルゲームの 背景に関する取り組みをご紹介 2022

2.

目次 デモの紹介 ライティング アセット その他の取り組み まとめ

3.

デモの紹介 デモの紹介

4.

デモの紹介

5.

デモの紹介 使用ツール ・モデリング Maya Zbrush SpeedTree ・テクスチャ SubstancePainter SubstanceDesigner

6.

デモの紹介 取り組みの目的 • 実際に使える技術として高品質なグラフィックをモバイルで実現すること • ライティングの知識やノウハウの蓄積を行うこと • リアルテイストの画作りを目指しコロプラの表現の幅を増やすこと

7.

ライティング ライティング

8.

ライティング 方向性 ・全体的にはリアルテイスト 完全なフォトリアルというよりもアート的なコントロールは入れる ・形状は若干デフォルメをいれつつも ライティングによる質感や空気感はリアリティのあるもの

9.

ライティング ライティング目標 ・日光に頼らない人工灯のみで画作り ・廃炭鉱の設定なので廃れた雰囲気 ・簡単なアクションのギミックがあることを認識してもらう ・どこを目指すのか分かるように視線誘導を行う

10.

ライティング

11.

ライティング

12.

ライティング

13.

ライティング

14.

ライティング

15.

ライティング ポストエフェクト Exporsure (AutoExporsure) Tonemapping (Aces 暗部調整版) Bloom ExponentialHeightFog VolumeFog SSAO SSR Vignette

16.

ライティング 光源について 基準を決めやすい実際のライトをモチーフに選択 工事用LEDライト 2500lm 電球01 500lm 電球02 300lm

17.

ライティング 光学単位の追加 ライトの強さ(Intensity)にルーメンなどの単位を使用できる機能を追加

18.

ライティング GIについて UnityのRealtimeGI (Lightmap) ・Lightmapの 解像度不足によるライトリーク ・長時間のベイク問題 ・ファイルサイズの問題 ↓ ProbeベースのGI

19.

ライティング ProbeベースのGIについて ・ProbeにSH情報をベイクし ボリュームでライティングするもの ・ベイク時間も短くイテレーションも〇 ・配置やブレンドなどが 自由にできるため、アートの コントロールもしやすい

20.

ライティング

21.

ライティング

22.

ライティング

23.

ライティング

24.

ライティング

25.

ライティング

26.

ライティング

27.

ライティング

28.

アセット アセット

29.

アセット 配置モデル ハイモデルベイク (比較的小さめなOBJ) トリムシート (タイリングで表現可能) ベイク+ディティール マップ (巨大なOBJ)

30.

アセット シェーダー • 基本シェーダー • 岩シェーダー

31.

アセット シェーダー • 基本シェーダー URP Litをベースにカスタム チャンネルをHDRP Litと同様に BaseMap NormalMap MaskMap の3枚で表現

32.

アセット シェーダー • 岩シェーダー 形状に沿ったユニークな表現に NormalMap MaskMap ディティールの表現にタイリングの BaseMap Normal+MaskMap(MetallicとSmoothnessのマスク含む) の4枚で表現

33.

アセット シェーダー • 岩シェーダー MaskMapによる追加表現 R:エッジの色味の変化、強調 G:AO B:ブレンドテクスチャ適用個所

34.

アセット シェーダー • 岩シェーダー 法線方向をみたテクスチャブレンド

35.

アセット SpeedTree • 植物モデルはSpeedTreeを使用 葉や樹皮などの素材は SubstanceDesignerで作成

36.

その他の取り組み その他の取り組み

37.

その他の取り組み 事前準備 • オフィスの一室を3DCGで再現 会議室の写真 CGで再現した会議室

38.

その他の取り組み 事前準備 • HDRPでクオリティサンプル作成

39.

まとめ まとめ

40.

まとめ まとめ ・モバイルで高品質なグラフィックを実現するための 背景制作やライティングについて、その手法や必要な機能など ノウハウを貯めることができた。 ・特に屋内についてはDeferredRenderingによる多光源の制作環境と ProbeベースのGI表現により、作業のしやすさ・見た目の品質 両面を担保できたことは大きな収穫。

41.

Thank you 2022