全スライドをDocswellで公開中！ https://www.docswell.com/s/historia_Inc/Z9WDPZ-bg-138874043 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 2018年11月4日に開催された「CGWORLD 2018 クリエイティブカンファレンス」、および、2019年3月25日に開催された「ボーンデジタルセミナー」にて行われた、「映像屋さんのためのリアルタイムBG制作 ―リアルタイム超初心者からの脱却を目指して―」のスライドです。 本講演は、制作マニュアル「映像屋さんのためのリアルタイムBG制作」を作成した際に得た知見をまとめた講演です。マニュアルは無料公開中です。詳しくはこちら（http://historia.co.jp/archives/10794/）をご覧ください。 講演者： 株式会社エレメントファクトリー　齋藤　秀行 株式会社ヒストリア / 株式会社エレメントファクトリー　佐々木 瞬 株式会社ポリゴン・ピクチュアズ　宮川　大輔 以下、セッション概要より抜粋。 リアルタイム超初心者のプリレンダーの背景アーティストに向けて、リアルタイムアセット制作のルールや概念を分かりやすく解説します。プリレンダー経験はそこそこ長い我々が、リアルタイム初心者をようやく抜けられたような気がしている今だからこそ伝えられる内容です。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

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

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

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

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

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

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

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

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

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

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

11. そんなに甘くなかった！

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

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

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

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

16. リアルタイムの特徴

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

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

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

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

21. グラフィック最大の壁 GPU

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

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

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

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

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

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

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

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

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

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

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

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

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

35. デザイン詳細

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

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

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

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

40. ①モデリング

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

64. ②テクスチャー

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

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

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

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

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

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

71. ディテールノーマルなし

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

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

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

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

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

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

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

79. グレーボックス

80. 置き換え

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

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

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

84. 汚し(シミ) – 結果

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

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

87. デカール – 結果

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

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

90. メッシュペイント – 結果

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

92. フォリッジ – 結果

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

94. 結果、こうなりました！

95. 調整なし

96. 汚し(シミ)

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

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

99. ファイナルイメージ

100. ファイナルイメージ 昼

101. ファイナルイメージ 夕方

102. ファイナルイメージ 夜

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

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