UnrealFest2016横浜で講演させていただいた、オックスフォード図書館の制作ワークフローに沿って、いてコンセプトアーティストとどのようにクオリティを上げていったのかについてお話しました。

1. オックスフォード図書館制作奮闘記

2. 自己紹介
篠原愛子
制作プロダクション、ゲーム開発会社を経て
2015年からフリーランス。
（最初の1年は執筆したり、語学留学したりで働かず…）
背景アーティストとしてゲーム業界10年ぐらい。
UnrealEngineはUE3の頃から使用。約4年ぐらい。
Twitter：茄子 @nasubi_s

3. こんな本執筆しました！
『UnrealEngine4 マテリアルデザイン入門』
著者：茄子/もんしょ
608ページ ￥4,320
Kindle版も
あるよ！

4. 本講演の概要
○オックスフォード図書館の制作過程を追いながら、
アートとどのようなやり取りをしていたのかを振り返ります。
◯制作の中から自分が学んだことをいくつかシェアしていきたいと思います！

5. おことわり
○ゲーム向けに作ったものではない → 描画負荷完全無視
◯使用している画像が時系列にそっていないものがあります。
そのため少しわかりにくい部分があるかもしれません。
○すでに公開している情報と被ってる部分が多くあります。
また、UE4の説明あまり出ません。
期待して頂いた方、ごめんなさい。 m(_ _)m

6. アジェンダ
01 作品について
02 なぜ図書館を作ったのか？
03 制作ワークフローとアート
04 制作をふりかえって
05 ざっくりアセットワークフロー
06 質疑応答

7. 01 作品について

8. ©2016 Aiko Shinohara

9. ©2016 Aiko Shinohara

10. ©2016 Aiko Shinohara

11. ©2016 Aiko Shinohara

12. ©2016 Aiko Shinohara

13. ©2016 Aiko Shinohara

14. インタビュー記事
- 英語
80 Level : How to Build Oxford Library in UE4
- 日本語
UnrealEngine 日本公式ブログ
オックスフォード図書館のシーン制作

15. 制作体制
わたし コンセプトアーティスト

16. 制作体制
アセット制作
コンセプト案決め
わたし コンセプトアーティスト
レイアウト
アドバイザーライティング
ポストプロセス
などなど…

17. テクスチャ
モデル
制作環境
○Unreal Engine 4.11

18. 制作期間
2.5か月ぐらい
（実制作2か月、ツール習得・検証0.5か月）
制作物
Static Mesh 約60個
Texture 約150枚

19. 図書館構造物
©2016 Aiko Shinohara

20. 小物(1)
©2016 Aiko Shinohara

21. 小物(2)
©2016 Aiko Shinohara

22. 02 なぜ図書館を作ったのか

23. 経歴
制作プロダクション ゲーム開発
会社A
ゲーム開発
会社B
フリーランス
ゲーム業界 10年

24. 経歴
制作プロダクション ゲーム開発
会社A
ゲーム開発
会社B
フリーランス
ゲーム業界 10年
マネジメント
R&D
アウトソース管理

25. ポートフォリオがなくてやばい!!
フリーランスなのに…

26. 作らねば！

27. 達成しなければならない目標
○クオリティの高い ポートフォリオの完成
○Substanceを使った 効率的な ワークフローの確立

28. 達成しなければならない目標
○クオリティの高い ポートフォリオの完成
○Substanceを使った 効率的な ワークフローの確立

29. 目標をクリアするためにしたこと
○具体的な クオリティラインの設定
○完成できる題材 を選ぶ
○アートスキル を補う

30. 目標をクリアするためにしたこと
○具体的な クオリティラインの設定
○完成できる題材 を選ぶ
○アートスキル を補う

31. Sarah Wangさんの作品（UE4)
©2016 Sarah Wang

32. 80 level: Building Victorian Environment in UE4

33. 目標をクリアするためにしたこと
○具体的なクオリティラインの設定
○完成できる題材を選ぶ
○アートスキルを補う

34. 目標をクリアするためにしたこと
○具体的な クオリティラインの設定
○完成できる題材 を選ぶ
○アートスキル を補う
- 実在するものを選ぶ
（デザイン作業を減らす）
- 複雑な装飾がない

35. 題材を選ぶ

36. 選んだ題材
オックスフォード大学の図書館

37. 目標をクリアするためにしたこと
○具体的な クオリティラインの設定
○完成できる題材 を選ぶ
○アートスキル を補う
- 実在するものを選ぶ
（デザインをしない）
- 複雑な装飾がない

38. 目標をクリアするためにしたこと
○具体的な クオリティラインの設定
○完成できる題材 を選ぶ
○アートスキル を補う
- 実在するものを選ぶ
（デザインをしない）
- 複雑な装飾がない

39. アートスキル…
○PBRなどリアルなアセットがあっても、絵的によい配置やライティングができなけれ
ば絵の質は低い。
→『物理的に正しい』は『絵としていい』ということではない。
（例：プロが撮った写真 と スナップ写真）
○Naughty Dogの制作フローを見てても背景とアートが協力してグラフィックのクオリ
ティを上げてる

40. Yap Kun Rong (ConceptArtist)
©2016 Yap Kun Rong

41. 目標をクリアするためにしたこと
○具体的な クオリティラインの設定
○完成できる題材 を選ぶ
○アートスキル を補う
- 実在するものを選ぶ
（デザインをしない）
- 複雑な装飾がない
コンセプトアーティストの協力

42. 03 制作ワークフローとアート

43. ワークフローに沿った制作
背景のワークフローとは？
2014年12月
UE4 背景アーティスト勉強会 in 大阪

44. 背景ワークフロー
ホワイト
ボックス
1st
Pass
ポリッ
シュ
2nd
Pass
グレイ
ボックス

45. 背景ワークフロー
ホワイト
ボックス
1st
Pass
ポリッ
シュ
2nd
Pass
グレイ
ボックス

46. ホワイトボックス
最低限の形状、構成物で作られたレベル上の遊びを確認するための工程。

47. ワークフロー
ホワイト
ボックス
1st
Pass
ポリッ
シュ
2nd
Pass
グレイ
ボックス

48. グレイボックス
コンセプトアートをベースにブロックアウトし、グラフィックの要素を軽く一通り入れ
た状態。
（アセット仮モデル、仮ライティング、仮ポストプロセス）

49. ブロックアウト

50. Maya

51. UE4

52. UE4
情報量足りてる？
このまま作り込んでも
大丈夫？

54. メッシュに情報を追加
メッシュにディテールを加えて、全体の情報量が足りてるかどうか確認
加える前 加えた後

55. 仮ライティング
太陽の光がどの方向から入ってくるかというのは絵作りで重要な要素。
ライティングの方針を決めるための工程

56. ライティングの参考
Directional LightとSky Lightを配置。

57. 【重要】マテリアルにベースカラーにテクスチャで使うのと近い色を入れておく
ベースカラーの明るさによって、間接光の明るさが異なる。
『UnrealEngine4 マテリアルデザイン入門』より引用
暗い 明るい

58. 仮ポストプロセス
この段階で入れていたポストプロセス要素
○SSAO
○Exposure
○Scene Color（主にレンズ効果）
※色味におおきく影響する要素は入れない。これは最後にいれる。
（例：Film, Color Grading など）

59. 仮ポストプロセス
この段階で入れていたポストプロセス要素
○SSAO
○Exposure
○Scene Color（主にレンズ効果）
※色味におおきく影響する要素は入れない。これは最後にいれる。
（例：Film, Color Grading など）
ライティングと大きく絡む要素。
仮ライティングで方針を決めて、
明るさが足りない時はここで調整してました。

60. ライティングOnly（ポストプロセスなし） Exposure Bias = 0

61. ライティングOnly（ポストプロセスなし） Exposure Bias=0
ポストプロセスあり（露出、AO） Exposure Bias = 4.3

62. 設定を詰める
○時代はいつなのか？
○誰が座ってる？

63. 設定を詰める
○時代はいつなのか？
○誰が座ってる？
時代が決まってないとプロッ
プのデザイン決めれない。
机の上に配置する小物何がい
いんだろうか…

64. 巻物？
筆ペン？
電気スタンド？
誰が座ってる？

65. 時代を考える・・・
○1600年代？ 近代？
○時代によって配置する小物が異なる。
○光源も電気が使えるかどうかで変わる。

66. 1950年台の図書館

67. 設定を詰める
○時代はいつなのか？
○誰が座っていた机なのか？
1950年代

68. 設定を詰める
○時代はいつなのか？
○誰が座っていた机なのか？
第１次世界大戦で従軍
空軍パイロットだった
不思議の国のアリスが好き
初老の男性
1950年代

69. 机の上のもの
不思議の国のアリス
パイプ
バインダー
マッチ

71. ワークフロー
ホワイト
ボックス
1st
Pass
ポリッ
シュ
2nd
Pass
グレイ
ボックス

72. 1st Pass
メインとなる部分のアセットを制作し、配置した状態。
それに合わせて、ライティング、ポストプロセスを微調整。

73. Substance Designer導入
まずは土台となるクオリティのテクスチャを作成

75. 同じsbsファイルを流用して作成したテクスチャ（白い部分）

76. sbsファイルを流用する
ローモデル、ハイモデルを
SDに読み込みベイクした各
種テクスチャ
- Normal
- Curvature
- AO
- World Normal
- Position

77. ローモデル
ハイモデル
sbsファイル

78. ライティング調整
Directional Light + Sky Lightだけではライティングのクオリティがいまいちだと感じるよう
になった。

79. Koola式 バウンスライティング
Koola式バウンスライティングとは？
窓の外に白い板を配置し、
スポットライトを当てることで
反射した間接光を使用してライティング
する手法のこと。

80. Lightroom:Interior Day Light
Marketplaceから無料でダウンロード可能

81. Directional Light + Sky Light

82. Directional Light + Sky Light + Bounce Light（天井のラフネス値調整）

83. アートチェック
2Dの絵として成り立っているかどうかの判断を仰ぐ。

84. なんか、
物足りないぞ…

85. 2人で色々調整して…

88. 加えた内容
○簡単に入れることができる要素の追加、調整
○視線を引く要素の追加
○ライティングの調整

90. リフレクション用ライトの配置
反射をいれるために配置するライト
Stationary もしくは Movableに設定し、
シャドウを落とさない。

91. リフレクションライトなし

92. リフレクションライトあり

93. この段階で決めたこと
○動画の作成
→数カット見せたいアングルを決めて、Matineeで作成。

94. この段階で決めたこと
○動画の作成
→数カット見せたいアングルを決めて、Matineeで作成。
作成するものがカットに固定されるので注力すべきポイントが明確になった。

95. レイアウトの調整
カットに合わせて、プロップを配置する

96. レイアウトの調整
カットに合わせて、プロップを配置する

98. 背景ワークフロー
ホワイト
ボックス
1st
Pass
ポリッ
シュ
2nd
Pass
グレイ
ボックス

99. 2nd Pass
すべての要素が一通り入った状態。
ポリッシュ
必要な要素のクオリティをアップし、最適化を行う。

101. ポストプロセス
色調補正を行い、最終的な絵の雰囲気をつくりあげていく。

102. 参考となるポストプロセス
映画のような印象を目指していたので、
映画のスクリーンショットからどのように色補正をかけているかを参考にしました。
King’s Speech © GAGA Corporation. All Right Reserved.
イギリス
落ち着いた感じ
格式ある雰囲気

103. 参考となるポストプロセス
映画のような印象を目指していたので、
映画のスクリーンショットからどのように色補正をかけているかを参考にする。
King’s Speech © GAGA Corporation. All Right Reserved.
青緑色寄りの色味
夕方の時間帯なので
黄色と青緑の補色関係

104. 色調補正前

105. 完成の状態

107. LUTを使って
色調補正した方がいいと思います。

108. CGっぽさの解消
完成の2週間ぐらいまえの状態

109. CGっぽさの解消
完成の2週間ぐらいまえの状態
整頓された本
均一な反射
並んだ机、椅子の配置

110. CGっぽさの解消
完成の2週間ぐらいまえの状態
整頓された本
均一な反射
並んだ机、椅子の配置
歪みが必要だ！

111. リフレクションのゆがみ
歪みなし 歪みあり

112. リフレクションのゆがみ
マスターマテリアルに雲模様のノーマルマップを入れて、
フラットな表面にゆがみが入るようにした

113. そんな、こんなで…

114. 完 成

115. Oxford Library – UE4 Project
Gumroadにてプロジェクトデータを
公開しています。

116. 04 制作を振り返って

117. クオリティ高く見せるための要素
○構図、レイアウト
○ライティング
○リフレクション

118. 振り返ってみて…
○ワークフローに沿って作ることで、
その時考えなければならないポイントが絞れるので、不安を軽減しながら制作できた。
○特にグレイボックスの工程は重要。
イメージできるところまでしっかりやること。
○自分の能力を認め、すべてを自分でやろうとしない。
（もちろん、できた方がいいけど…）

119. 05 ざっくりアセットワークフロー

120. 作業効率はどうあげるか？
◯ツールを導入する
◯ルーチンな作業をスクリプトで解消
◯やり直しや修正がし易いフローにする

121. レギュレーションを決める
◯ディレクトリ構造
◯命名規則
◯Mayaのシーンの構成
仕事と同じ！

122. テクスチャ制作ワークフロー(Prop)
TextureMesh
Zbrush Designer
PainterMaya
TGA
UE4

123. テクスチャ制作ワークフロー(Env)
TextureMesh
Zbrush
DesignerMaya
TGA
UE4
B2M

124. 資料について

125. PureRefの活用
資料を並べて閲覧することができるフリーソフト
http://www.pureref.com/

126. ハイモデル

127. ハイモデル作成
ハイモデルはサブディビジョンモデリングで制
作をしていきます。
たいていの背景物はこのモデリング手法でハイ
モデルが制作できると思います。

128. ハイモデル作成
木の部分だけプレビューをポリゴンに変換して、
FBXで書き出しをします。

129. ハイモデル作成
Zbrushで革の部分のに柔らかさがでる
ように手を加えます。
また、SPでIDマップがベイクできるよ
うにビスの部分と革の部分に頂点ペイ
ントをいれます。

130. ハイモデル作成
革とビスの部分だけをFBXで書き出します。

131. ローモデル

132. ローモデルの作成
ハイモデルのサブディビジョンモデリングからサ
ポートエッジを削除したものをベースに作成しま
す。
※ カクカクした感じを避けたかったので、
ローというほどリダクションしてません。

133. ローモデルの作成
UVを展開し、ノーマルマップが正しくベイクできるように
ハードエッジ、ソフトエッジを設定します。
○Polycount
Maya MEL Script help needed
(UV border edges)

134. FBXで書き出すとUVが元に戻る問題
FBXで書き出す前にローモデルに四角化をかけておくことで
解決。
三角化でもOK。

135. テクスチャ

136. テクスチャ作成
SubstancePainterで各種マップをベイクする。
- Normal Map
- World Space Normal
- ID Map
- AO
- Curvature
- Position

137. テクスチャ作成
色々なレイヤーを重ねて、テクス
チャを作成。
主にSmartMaskを使って、汚しの
入り方を調整。

138. Reprojectionの活用(1/2)
ローモデルの形状やUVを編集し、ローモデルを差し替えても手描きペイントした部分
（ただし3DViewからのみ）も編集に合わせて移動してくれる機能。

139. Reprojectionの活用(2/2)
Edit > Project Configuration からローモデルの差し替えができる
※ メッシュから生成されたテクスチャ（Normal, AO, Curvetureなど）を利用していれた
汚しなどの処理は、Baking Textureをしなおすことで新しいメッシュ形状に対応します。

140. UE4

141. 自動再インポートの設定
メッシュ、テクスチャの自動再インポートの設定（4.10から）
参照元のFBX,テクスチャが更新されたらUE4に自動的に再インポートされる。

142. ○エディタの環境設定
一般 ＞ ロード&保存中

143. 06 質疑応答

144. ご清聴ありがとうございました
質問等はこちらへ
sinocof@gmail.com