映像屋さんのためのリアルタイムBG制作

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

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

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

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

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

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

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

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

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

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

そんなに甘くなかった！

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

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

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

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

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

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

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

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

グラフィック最大の壁 GPU

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

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

• ポストプロセスの工夫
– G-Bufferの流用
• その他
– 動的解像度
GPU負荷を減らす工夫

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

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

• ★頂点ペイント
• ★ Follige
• ★モジュラーアセット
• ★デカール
量産を便利にする工夫

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ノーマルマップ使用前ノーマルマップ使用後

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

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

「UVって何かルールはあるの？」
UVについて

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

ライトマップについて
ライトマップ専用の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って何かルールはあるの？」

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

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

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

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

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

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

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

「最適なテクスチャーサイズって
テクスチャー

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

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

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

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

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

ディテールノーマルなし

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

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

まずはテクスチャーを確認
ベースカラー(４K) ノーマルマップ(４K)

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

2564K
やっぱ無理か・・・さすがの安定感
あらっ,寄ればいけそう！あとは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/
・・・ポリゴリ君・・・キング師匠

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

映像屋さんのためのリアルタイムBG制作

映像屋さんのためのリアルタイムBG制作

Recommended

More Related Content

More from historia_Inc

More from historia_Inc(20)

Recently uploaded

Recently uploaded(8)

映像屋さんのためのリアルタイムBG制作

Editor's Notes