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

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 作品について

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枚

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

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

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

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

26. 作らねば！

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

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

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

32. 80 level: Building Victorian Environment in UE4

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

35. 題材を選ぶ

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

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

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

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

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

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

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

44. 背景ワークフローホワイトボックス 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. レイアウトの調整カットに合わせて、プロップを配置する

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

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

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

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

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

Recommended

More Related Content

What's hot

What's hot(20)

Viewers also liked

Viewers also liked(7)

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

Similar to オックスフォード図書館制作奮闘記(10)

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

Editor's Notes