映像屋さんのためのリアルタイムBG制作 ―リアルタイム超初心者からの脱却を目指して―

映像屋さんのためのリアルタイムBG制作 ―リアルタイム超初心者からの脱却を目指して― 2019/03/25

プレゼンテーション構成 1. エレメントファクトリーのご紹介 （エレメントファクトリー社長 齋藤秀行） 2. リアルタイムレンダリングの特性 （エレメントファクトリー取締役／ヒストリア代表取締役 3. 映像屋さんのためのリアルタイムBG制作 （ポリゴン・ピクチュアズ部長 宮川大輔） 佐々木瞬）

自己紹介 齋藤秀行 • 2001年にポリゴン・ピクチュアズに入社。 プロデューサーとして100件以上のプロジェクトに携わる。 • 2018年１月に設立された株式会社ヒストリアおよび株式会社ポリゴン・ ピクチュアズ・ホールディングスとの合弁会社「エレメントファクト リー」の代表取締役に就任。「アンリアルエンジン」を様々な形で活用し たリアルタイム用アセットの開発に取り組んでいる。

株式会社エレメントファクトリー 齋藤 秀行 代表取締役 2018年1月4日に設立

ワンアセットマルチユース ゲーム・遊技機化 VR/イベント 商品化 映像（映画・TV） 3Dモデルデータ活用

エレメントファクトリー取締役／ヒストリア代表取締役 佐々木瞬 リアルタイムレンダリングの特性

自己紹介 株式会社エレメントファクトリー 取締役 株式会社ヒストリア 代表取締役 佐々木 瞬 ゲーム制作のディレクター兼エンジニア Unreal Engine 3 を使用していた経験から、 2013年 Unreal Engine 専門会社のヒストリ アを設立。UE4黎明期からゲーム開発だけで なくコミュニティ活動にも力を入れる。また、 建築・自動車等の業界向けコンテンツも手掛 ける。

なぜ最近リアルタイムの進化が目覚ましいか？ GPUの 進化 ゲームエンジンの 進化・一般化 コミュニティの 発展

Epic Gamesも映像に力を入れる Sequencer 映像制作用途にも使えるように開発されたカットシーンエディタ

映像用途のリアルタイム • リアルタイムならレンダリング時間が実質ゼロ！ • アセットマルチユースで簡単にコンテンツを作れる！

そんなに甘くなかった！

本プロジェクト発足の経緯 • 10以上のCGスタジオを技術サポートして似た質問が多数 • CGスタジオのクリエイティビティへの驚き – ゲーム業界の持っていないノウハウがたくさん – ゲーム業界にもっと関わってもらいたい！ • プリレンアーティストとの架け橋を作りたい！ マニュアル作りプロジェクトの発足！

本プロジェクト発足の経緯 教材ほぼ無し リアル タイム プリレン [ ビギナー → リアルタイム ] の教材で学ぶよりも [ プリレン → リアルタイム ] の方が圧倒的に近い！ 教材多数 教材多数 そのための 教材を用意したかった ビギナー

本プロジェクトの体制 プロジェクトの統括・ビジョンメイキング モデル・実プロジェクトの作成 マニュアルの作成 プリレン文化の視点 技術的な監修 リアルタイム文化の視点

本プロジェクトの方針 • 一番手を付けやすいBGアセットから着手 • ゲームアセットを想定 – 一般的なリアルタイム用アセットの指標作りが目的なため • ライティングはベーシックな焼き付けのフロー – タイトルの特徴によって焼き付けないことも多々あるが、 まずは一般的な知識を付けることを目的にする

リアルタイムの特徴

リアルタイムの特徴 • 16ms～33msに1回レンダリングを行う（VRは11ms～） • 様々な制限に対する、様々な工夫で成り立っている アクション性が高いゲームは 60FPS それ以外は 30FPS が基準

リアルタイムレンダリングの4つの制限 【ディスク容量の制限】 【CPU処理速度の制限】 ユーザーのディスクに収まる必要がある CPU計算するのは主にプログラムとモーションと物理 GPUへのデータ転送も行う HDD Memory CPU GPU 16～33ms 16～33ms 【メモリ容量の制限】 レンダリングしたい素材はメモリに読み込む必要がある 【GPU処理速度の制限】 転送されたデータを元にレンダリングを行う

HDD/メモリ容量を減らす工夫 • テクスチャサイズを減らす – ★テクスチャのタイリングとディティールマップ – テクスチャのmipmap • ポイントキャッシュを（ほぼ）使わない • ストリーミング技術 – 動画など ★マークは本日お話する内容です

CPU処理負荷を減らす工夫 • マテリアルによる頂点アニメーション – CPUではなく、GPUで動かす • アニメーションの計算を並列化 • 物理挙動のベイク ★マークは本日お話する内容です

グラフィック最大の壁 GPU

対GPUの大きな方針 事前 計算 事前に計算できるものは、事前計算 してデータとして持っておく。 ライトマップのベイクや、GIの事前 計算など。 そのフレームを描画するのに必要 最低限のデータのみを取り扱う。 カリング、LODなど。 フェイク 必要 最小限 高速にそれっぽく見えれば良い という割り切り。 ノーマルマップ、リフレクショ ン、影など。 これらをストイックに最適化するのがゲーム制作

GPU負荷を減らす工夫 • 描画頂点数を減らす工夫 • ライト計算を減らす工夫 – ★カリング – ★ノーマルマップの利用 – LOD • シェーダーを減らす工夫 – 複雑なシェーダーを組まない – 半透明を減らす ★マークは本日お話する内容です – ★焼き付け（ライトマップ） – ライトプローブ

GPU負荷を減らす工夫 • ポストプロセスの工夫 – G-Bufferの流用 • その他 – 動的解像度 ★マークは本日お話する内容です

ゲーム/ゲーム制作の特徴

その他、ゲーム/ゲーム制作の特徴 • ユーザーが世界を自由に動き回れる – カメラの位置が指定できない – 膨大な量のデータが必要 →量産のための工夫が独自進化！ • 絵作りでなく、ゲームの面白さから先に詰める – “企画職”が大雑把な地形を決める

量産を便利にする工夫 • ★頂点ペイント • ★ Follige • ★モジュラーアセット • ★デカール ★マークは本日お話する内容です

その他、プリレンとの大きな違い • 処理のためのデータ作成 – ★コリジョンの作成 • 制作環境の違い – バージョン管理（SVN / Perforce / Git ） • ワークフローの違い – ★レベルデザイナーによるグレーボックス • 自由にバッファ分けが出来ない • エフェクトの作り方 ★マークは本日お話する内容です

ポリゴン・ピクチュアズ部長 宮川大輔 映像屋さんのためのリアルタイムBG制作 2019/03/25 29

自己紹介 株式会社ポリゴン・ピクチュアズ 宮川 大輔 イノベーション・デザイン部 部長 1999年、ポリゴン・ピクチュアズに入社。制 作推進室長、執行役員を歴任し、制作組織の運 営に携わってきた。2018年4月からイノベー ション・デザイン部を立ち上げ、リアルタイム 技術開発を推進している。

本セッションの目的 リアルタイムの基本を映像屋さんの皆 さんと共有したい！ 基本さえおさえれば、リアルタイムっ て面白い事を実感してもらえれば幸い です。

本セッションの内容 基本＋実演！

制作フロー＆本セッションのサマリー UE4作業 の紹介 仕様を決めずに発注！ コ ン セ プ ト ア ー ト グ レ ー ボ ッ ク ス ① モ デ リ ン グ 修 正 （ 最 適 化 ） ② テ ク ス チ ャ ー 修 正 （ 最 適 化 ） ③ ブ ラ ッ シ ュ ア ッ プ

コンセプトアート ラスボスとのバトルステージを想定したゲーム用BG

デザイン詳細

映像屋さんが知っておくべきこと その1 モジュラーアセット レゴブロックみたいに、いくつかのパーツを自由に組合わせてBGを作成す れば効率が良いですよね。そのパーツのことをモジュラーアセットと言い ます。 その他にもモジュラー化の利点はあります。 モジュラー化の利点 ・アーティスト以外 でも組合わせて使える ・修正しやすい ・カリング 注意事項 ・ピボット位置 ・ユニークな要素を 減らす

映像屋さんが知っておくべきこと その2 カリング 処理負荷軽減のため、見えていないオブジェクトを描画しないように することです。 フラスタムカリング ◎フラスタムカリング カメラから見えてる範囲(視錐台と いう図形で表される)から外のオブ ジェクトを描画しない ○オクルージョンカリング 遮蔽されている(他のオブジェクト によって隠されている)オジェクト を描画しない C Far Clipping Plane B Near Clipping Plane A Camera 適切にカリングされやすいように、オブジェクトはある 程度細かい単位に分かれている事が望ましい

グレーボックス 仮モデルで作ったBGのことをグレーボックスと言います。

ここからモジュラーアセットを発 注していきます！

①モデリング

モデリング 良く聞かれる質問 「最適なポリゴン数って どれくらい？」

モデリング このモデルから作っていきます 78,912

ポリゴン数について どこまでをポリゴンにして、どこまでをノーマルマップにすべきか？ 途中経過 78,912

ポリゴン数について まずはキャラクター目線をベースにして、シルエットに影響しなければ ノーマルマップを考えてみる！ 候補１ 候補1と候補2はノーマル マップで十分ですね。 候補３はシルエットに影 響しそう。ノーマルマッ プの解像度も高くしない といけないしポリゴンで OK！ 候補３ 候補２

ポリゴン数について ノーマルマップ使用前 ノーマルマップ使用後

ポリゴン数について ポリゴン数 上部のみ A A B C D ３０４ 78,912 2,454 5,310 45,000 748 1,560 B C D

ポリゴン数について 良く聞かれる質問 「最適なポリゴン数ってどれくらい？」 答え 最近はポリゴン数が絶対の指標ではなくなっており、 明確なルールはありません。ゲーム仕様に従おう。 ただ、ノーマルマップを使える所は使い、無駄に面を 増やさない事は意識すべき。

UVについて 良く聞かれる質問 「UVって何かルールはあるの？」

映像屋さんが知っておくべきこと その3 ライトマップ 処理負荷を軽減するために、スタティック(静的)オブジェクトが受け るライトや影の情報を事前に計算してテクスチャに焼き付けたもの A,B = 静的 Character = 動的 A A,Bは 事前計算 B Character

ライトマップについて ライトマップ専用のUVが必要 手順①FBXインポートオプション 手順②ライトやオブジェクトを スタティックorステイショナリに設定 手順②ビルド(焼きこむ) ←チェック！

ライトマップについて 注意事項！ UVが重なっていると、自動的にライトマップUVも重なって作成されます。 ライトマップUVが重なっているとビルド時にエラーになります。

ライトマップについて メインのUVを重ねたい場合 オブジェクト テクスチャー UV

ライトマップについて このままビルドする と・・ 注目！ 警告が出ます！

ライトマップについて ライトマップUVを手動で作成 ①MAYAでライトマップ用のUVを追加 ②”Generate Lightmap Uvs” をOffにしてインポート ③UE4で “Loght Map Coordinate Index”を設定

ライトマップについて 再ビルドすると・・ 注目！ 警告がなくなりました！

UVついて 良く聞かれる質問 「 UVって何かルールはあるの？ 」 答え あります！ ・ライトマップUVは絶対に重ねない。 そのためには、元のUVを重ねない。もしくはライト マップ用の重なっていないUVを自力で作る！ ・テクスチャー効率を考えてなるべくUVを広く展開 する。

映像屋さんが知っておくべきこと その4 コリジョン・・・当たり判定 本プロジェクトでは、床や壁などキャラクターが通過して欲しくない オブジェクトにコリジョンを設定しました。 FBXのインポート オプションで、自動作成の On/Offを選択できます。 ←チェック！

コリジョン 床オブジェクトにコリジョンを 設定してみましょう！ 自動作成のコリジョン でも、これには問題が・・・

コリジョン キャラクターが浮いてます！ この辺にいます

コリジョン メッシュをそのままコリジョンにすることも出来ます。

コリジョン コリジョンを手動で作成しました。でも、結果は変わりません。 調べてみましょう。 MeshName : SM_Floor CollisionName : UCX_SM_Floor

コリジョン UCX_[RenderMeshName]_## ここが駄目っぽい 完全に閉鎖型の凸型 3D 形状ならば何でも 凸型オブジェクトになります。例えば、 ボックスも 凸型オブジェクトになります。 以下の図は、凸型、および凸型ではない例 を示しています。 EPIC HPより

コリジョン コリジョンを別オブジェクトにして、凹をなくしました。 すると・・・ (別オブジェクトに) 出来ました！ (分かりやすくするために 縮小してます。)

②テクスチャー

テクスチャー 良く聞かれる質問 「最適なテクスチャーサイズって どれくらい？ 」

テクスチャー このどでかいBGではかなりチャレンジング ですが、 テクスチャーのMAXを ”512*512”に設定。 ”512*512” や ”256*256” でも耐えられるように 工夫していきましょう！

映像屋さんが知っておくべきこと その5 テクセル比 実際のオブジェクトのスケールに対するテクスチャーのテクセル(テク スチャを構成するピクセル)の割合。 →自分で書いてても意味わからん？？ 要はあっちのオブジェクトは鮮明で、こっちはボケボケとならないよう にテクスチャーの見え方は統一しましょうってこと。 例えば、１m四方の正方形の板に 512のテクスチャーを貼った場合 512 512 1メートル テクセル比 ＝512テクセル/m よって、 今回のプロジェクトでは、 左図を例にすると、 テクセル比 ＝512/13.4m ＝38.2テクセル/m となります。 512*512 のテクスチャー 1340cm

４Kテクスチャー 鮮明で全く問題なし！

512テクスチャー さすがにテクスチャーがボケる・・

ディテールマップについて ディテールマップでディテールを補ってみよう！ シームレスなノーマルマップをタイリングして、メインのノーマルマップ にブレンドします。 (使用するディテールノーマルマップ) ブレンド 結果

ディテールノーマルなし

ディテールノーマルあり あらっ、意外にいけそう！

タイリングについて 床はキャラクターの足元にあるので目立ちます。 そうは言っても４Kテクスチャーを張る訳にもいかないですよね・・。 床のテクスチャーをタイリングしてみよう！ このオブジェクトを 検証してみます。

タイリングについて まずはテクスチャーを確認 ベースカラー(４K) ノーマルマップ(４K)

タイリングについて 256*256のシームレスなテクスチャーを作成 これを貼ってみましょう！ ベースカラー(256*256) ノーマルマップ(256*256)

タイリングについて 4K 256 さすがの安定感 やっぱ無理か・・・ さすがの安定感 あらっ,寄ればいけそう！あとはUE4で調整！

タイリングについて 良く聞かれる質問 「最適なテクスチャーサイズって どれくらい？ 」 答え！ ・決められたテクセル比を基準に！ ・小さく済むに越したことはないので、タイリング やディテールマップを駆使する。

モジュラーアセット完成！

グレーボックス

置き換え

③ブラッシュアップ (UnrealEngine4)

ブラッシュアップの方向性 1.リピート感の軽減 2.質感のバリエーションを増やす 3.ぶっさし感の軽減 4.色数を増やす 5.彩度を高めに 設定（方向性） 季節：春 時間：午前中 特記事項：雨上がり

汚し(シミ) 絶対ワールド位置 (AbsoluteWorldPosition) MAYA で言う ところの ワールドポジションをもとにテクスチャーを投影

汚し(シミ) – 結果

デカール テクスチャーだけでなくマテリアルごと投影 手順①デカールをレベルに配置

デカール 手順②マテリアルを作成 手順③レベル内のデカールに マテリアルを設定

デカール – 結果

メッシュペイント 頂点カラーを利用してメッシュに直接ペイントすることで、 同じメッシュに異なる色や質感を追加することが出来ます。 R・・・苔 G・・・黄緑 B・・・Wet

メッシュペイント 頂点数4 頂点数400 2つ塗るだけで・・ 細かく書き込める！ 注意事項 頂点数が少ないと、細かい塗り分け が出来ません。 よって、適度にメッシュを細かくす る必要があります。

メッシュペイント – 結果

フォリッジ(Foliage 訳すと「枝葉」) メッシュをブラシでペイントしながら大量に配置出来る機能 インスタンス化メッシュなので処理負荷が軽い

フォリッジ – 結果

PostProcessVolume ポストプロセスエフェクト ある意味、映像屋さんが最も好きなところですよね。

結果、こうなりました！

調整なし

汚し(シミ)

デカール＋メッシュペイント+フォリッジ

ポストプロセスエフェクト

ファイナルイメージ

ファイナルイメージ 昼

ファイナルイメージ 夕方

ファイナルイメージ 夜

告知1 https://www.element-factory.co.jp/ 無料公開中! ・・・キング師匠 ・・・ポリゴリ君 本セッションの元となったマニュアル をデータとともに公開します！ 本セッションでは伝えきれなかったこ と満載です！

• https://www.element-factory.co.jp/

ご清聴ありがとうございました。