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

11,228 views

Published on

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

Published in: Art & Photos
0 Comments
16 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
11,228
On SlideShare
0
From Embeds
0
Number of Embeds
8,130
Actions
Shares
0
Downloads
97
Comments
0
Likes
16
Embeds 0
No embeds

No notes for slide
  • オックスフォードライブラリの設立は1602年。
  • オックスフォードライブラリの設立は1602年。
  • 5日前の状態
  • オックスフォード図書館制作奮闘記

    1. 1. オックスフォード図書館制作奮闘記
    2. 2. 自己紹介 篠原愛子 制作プロダクション、ゲーム開発会社を経て 2015年からフリーランス。 (最初の1年は執筆したり、語学留学したりで働かず…) 背景アーティストとしてゲーム業界10年ぐらい。 UnrealEngineはUE3の頃から使用。約4年ぐらい。 Twitter:茄子 @nasubi_s
    3. 3. こんな本執筆しました! 『UnrealEngine4 マテリアルデザイン入門』 著者:茄子/もんしょ 608ページ ¥4,320 Kindle版も あるよ!
    4. 4. 本講演の概要 ○オックスフォード図書館の制作過程を追いながら、 アートとどのようなやり取りをしていたのかを振り返ります。 ◯制作の中から自分が学んだことをいくつかシェアしていきたいと思います!
    5. 5. おことわり ○ゲーム向けに作ったものではない → 描画負荷完全無視 ◯使用している画像が時系列にそっていないものがあります。 そのため少しわかりにくい部分があるかもしれません。 ○すでに公開している情報と被ってる部分が多くあります。 また、UE4の説明あまり出ません。 期待して頂いた方、ごめんなさい。 m(_ _)m
    6. 6. アジェンダ 01 作品について 02 なぜ図書館を作ったのか? 03 制作ワークフローとアート 04 制作をふりかえって 05 ざっくりアセットワークフロー 06 質疑応答
    7. 7. 01 作品について
    8. 8. ©2016 Aiko Shinohara
    9. 9. ©2016 Aiko Shinohara
    10. 10. ©2016 Aiko Shinohara
    11. 11. ©2016 Aiko Shinohara
    12. 12. ©2016 Aiko Shinohara
    13. 13. ©2016 Aiko Shinohara
    14. 14. インタビュー記事 - 英語 80 Level : How to Build Oxford Library in UE4 - 日本語 UnrealEngine 日本公式ブログ オックスフォード図書館のシーン制作
    15. 15. 制作体制 わたし コンセプトアーティスト
    16. 16. 制作体制 アセット制作 コンセプト案決め わたし コンセプトアーティスト レイアウト アドバイザーライティング ポストプロセス などなど…
    17. 17. テクスチャ モデル 制作環境 ○Unreal Engine 4.11
    18. 18. 制作期間 2.5か月ぐらい (実制作2か月、ツール習得・検証0.5か月) 制作物 Static Mesh 約60個 Texture 約150枚
    19. 19. 図書館構造物 ©2016 Aiko Shinohara
    20. 20. 小物(1) ©2016 Aiko Shinohara
    21. 21. 小物(2) ©2016 Aiko Shinohara
    22. 22. 02 なぜ図書館を作ったのか
    23. 23. 経歴 制作プロダクション ゲーム開発 会社A ゲーム開発 会社B フリーランス ゲーム業界 10年
    24. 24. 経歴 制作プロダクション ゲーム開発 会社A ゲーム開発 会社B フリーランス ゲーム業界 10年 マネジメント R&D アウトソース管理
    25. 25. ポートフォリオがなくてやばい!! フリーランスなのに…
    26. 26. 作らねば!
    27. 27. 達成しなければならない目標 ○クオリティの高い ポートフォリオの完成 ○Substanceを使った 効率的な ワークフローの確立
    28. 28. 達成しなければならない目標 ○クオリティの高い ポートフォリオの完成 ○Substanceを使った 効率的な ワークフローの確立
    29. 29. 目標をクリアするためにしたこと ○具体的な クオリティラインの設定 ○完成できる題材 を選ぶ ○アートスキル を補う
    30. 30. 目標をクリアするためにしたこと ○具体的な クオリティラインの設定 ○完成できる題材 を選ぶ ○アートスキル を補う
    31. 31. Sarah Wangさんの作品(UE4) ©2016 Sarah Wang
    32. 32. 80 level: Building Victorian Environment in UE4
    33. 33. 目標をクリアするためにしたこと ○具体的なクオリティラインの設定 ○完成できる題材を選ぶ ○アートスキルを補う
    34. 34. 目標をクリアするためにしたこと ○具体的な クオリティラインの設定 ○完成できる題材 を選ぶ ○アートスキル を補う - 実在するものを選ぶ (デザイン作業を減らす) - 複雑な装飾がない
    35. 35. 題材を選ぶ
    36. 36. 選んだ題材 オックスフォード大学の図書館
    37. 37. 目標をクリアするためにしたこと ○具体的な クオリティラインの設定 ○完成できる題材 を選ぶ ○アートスキル を補う - 実在するものを選ぶ (デザインをしない) - 複雑な装飾がない
    38. 38. 目標をクリアするためにしたこと ○具体的な クオリティラインの設定 ○完成できる題材 を選ぶ ○アートスキル を補う - 実在するものを選ぶ (デザインをしない) - 複雑な装飾がない
    39. 39. アートスキル… ○PBRなどリアルなアセットがあっても、絵的によい配置やライティングができなけれ ば絵の質は低い。 →『物理的に正しい』は『絵としていい』ということではない。 (例:プロが撮った写真 と スナップ写真) ○Naughty Dogの制作フローを見てても背景とアートが協力してグラフィックのクオリ ティを上げてる
    40. 40. Yap Kun Rong (ConceptArtist) ©2016 Yap Kun Rong
    41. 41. 目標をクリアするためにしたこと ○具体的な クオリティラインの設定 ○完成できる題材 を選ぶ ○アートスキル を補う - 実在するものを選ぶ (デザインをしない) - 複雑な装飾がない コンセプトアーティストの協力
    42. 42. 03 制作ワークフローとアート
    43. 43. ワークフローに沿った制作 背景のワークフローとは? 2014年12月 UE4 背景アーティスト勉強会 in 大阪
    44. 44. 背景ワークフロー ホワイト ボックス 1st Pass ポリッ シュ 2nd Pass グレイ ボックス
    45. 45. 背景ワークフロー ホワイト ボックス 1st Pass ポリッ シュ 2nd Pass グレイ ボックス
    46. 46. ホワイトボックス 最低限の形状、構成物で作られたレベル上の遊びを確認するための工程。
    47. 47. ワークフロー ホワイト ボックス 1st Pass ポリッ シュ 2nd Pass グレイ ボックス
    48. 48. グレイボックス コンセプトアートをベースにブロックアウトし、グラフィックの要素を軽く一通り入れ た状態。 (アセット仮モデル、仮ライティング、仮ポストプロセス)
    49. 49. ブロックアウト
    50. 50. Maya
    51. 51. UE4
    52. 52. UE4 情報量足りてる? このまま作り込んでも 大丈夫?
    53. 53. メッシュに情報を追加 メッシュにディテールを加えて、全体の情報量が足りてるかどうか確認 加える前 加えた後
    54. 54. 仮ライティング 太陽の光がどの方向から入ってくるかというのは絵作りで重要な要素。 ライティングの方針を決めるための工程
    55. 55. ライティングの参考 Directional LightとSky Lightを配置。
    56. 56. 【重要】マテリアルにベースカラーにテクスチャで使うのと近い色を入れておく ベースカラーの明るさによって、間接光の明るさが異なる。 『UnrealEngine4 マテリアルデザイン入門』より引用 暗い 明るい
    57. 57. 仮ポストプロセス この段階で入れていたポストプロセス要素 ○SSAO ○Exposure ○Scene Color(主にレンズ効果) ※色味におおきく影響する要素は入れない。これは最後にいれる。 (例:Film, Color Grading など)
    58. 58. 仮ポストプロセス この段階で入れていたポストプロセス要素 ○SSAO ○Exposure ○Scene Color(主にレンズ効果) ※色味におおきく影響する要素は入れない。これは最後にいれる。 (例:Film, Color Grading など) ライティングと大きく絡む要素。 仮ライティングで方針を決めて、 明るさが足りない時はここで調整してました。
    59. 59. ライティングOnly(ポストプロセスなし) Exposure Bias = 0
    60. 60. ライティングOnly(ポストプロセスなし) Exposure Bias=0 ポストプロセスあり(露出、AO) Exposure Bias = 4.3
    61. 61. 設定を詰める ○時代はいつなのか? ○誰が座ってる?
    62. 62. 設定を詰める ○時代はいつなのか? ○誰が座ってる? 時代が決まってないとプロッ プのデザイン決めれない。 机の上に配置する小物何がい いんだろうか…
    63. 63. 巻物? 筆ペン? 電気スタンド? 誰が座ってる?
    64. 64. 時代を考える・・・ ○1600年代? 近代? ○時代によって配置する小物が異なる。 ○光源も電気が使えるかどうかで変わる。
    65. 65. 1950年台の図書館
    66. 66. 設定を詰める ○時代はいつなのか? ○誰が座っていた机なのか? 1950年代
    67. 67. 設定を詰める ○時代はいつなのか? ○誰が座っていた机なのか? 第1次世界大戦で従軍 空軍パイロットだった 不思議の国のアリスが好き 初老の男性 1950年代
    68. 68. 机の上のもの 不思議の国のアリス パイプ バインダー マッチ
    69. 69. ワークフロー ホワイト ボックス 1st Pass ポリッ シュ 2nd Pass グレイ ボックス
    70. 70. 1st Pass メインとなる部分のアセットを制作し、配置した状態。 それに合わせて、ライティング、ポストプロセスを微調整。
    71. 71. Substance Designer導入 まずは土台となるクオリティのテクスチャを作成
    72. 72. 同じsbsファイルを流用して作成したテクスチャ(白い部分)
    73. 73. sbsファイルを流用する ローモデル、ハイモデルを SDに読み込みベイクした各 種テクスチャ - Normal - Curvature - AO - World Normal - Position
    74. 74. ローモデル ハイモデル sbsファイル
    75. 75. ライティング調整 Directional Light + Sky Lightだけではライティングのクオリティがいまいちだと感じるよう になった。
    76. 76. Koola式 バウンスライティング Koola式バウンスライティングとは? 窓の外に白い板を配置し、 スポットライトを当てることで 反射した間接光を使用してライティング する手法のこと。
    77. 77. Lightroom:Interior Day Light Marketplaceから無料でダウンロード可能
    78. 78. Directional Light + Sky Light
    79. 79. Directional Light + Sky Light + Bounce Light(天井のラフネス値調整)
    80. 80. アートチェック 2Dの絵として成り立っているかどうかの判断を仰ぐ。
    81. 81. なんか、 物足りないぞ…
    82. 82. 2人で色々調整して…
    83. 83. 加えた内容 ○簡単に入れることができる要素の追加、調整 ○視線を引く要素の追加 ○ライティングの調整
    84. 84. リフレクション用ライトの配置 反射をいれるために配置するライト Stationary もしくは Movableに設定し、 シャドウを落とさない。
    85. 85. リフレクションライトなし
    86. 86. リフレクションライトあり
    87. 87. この段階で決めたこと ○動画の作成 →数カット見せたいアングルを決めて、Matineeで作成。
    88. 88. この段階で決めたこと ○動画の作成 →数カット見せたいアングルを決めて、Matineeで作成。 作成するものがカットに固定されるので注力すべきポイントが明確になった。
    89. 89. レイアウトの調整 カットに合わせて、プロップを配置する
    90. 90. レイアウトの調整 カットに合わせて、プロップを配置する
    91. 91. 背景ワークフロー ホワイト ボックス 1st Pass ポリッ シュ 2nd Pass グレイ ボックス
    92. 92. 2nd Pass すべての要素が一通り入った状態。 ポリッシュ 必要な要素のクオリティをアップし、最適化を行う。
    93. 93. ポストプロセス 色調補正を行い、最終的な絵の雰囲気をつくりあげていく。
    94. 94. 参考となるポストプロセス 映画のような印象を目指していたので、 映画のスクリーンショットからどのように色補正をかけているかを参考にしました。 King’s Speech © GAGA Corporation. All Right Reserved. イギリス 落ち着いた感じ 格式ある雰囲気
    95. 95. 参考となるポストプロセス 映画のような印象を目指していたので、 映画のスクリーンショットからどのように色補正をかけているかを参考にする。 King’s Speech © GAGA Corporation. All Right Reserved. 青緑色寄りの色味 夕方の時間帯なので 黄色と青緑の補色関係
    96. 96. 色調補正前
    97. 97. 完成の状態
    98. 98. LUTを使って 色調補正した方がいいと思います。
    99. 99. CGっぽさの解消 完成の2週間ぐらいまえの状態
    100. 100. CGっぽさの解消 完成の2週間ぐらいまえの状態 整頓された本 均一な反射 並んだ机、椅子の配置
    101. 101. CGっぽさの解消 完成の2週間ぐらいまえの状態 整頓された本 均一な反射 並んだ机、椅子の配置 歪みが必要だ!
    102. 102. リフレクションのゆがみ 歪みなし 歪みあり
    103. 103. リフレクションのゆがみ マスターマテリアルに雲模様のノーマルマップを入れて、 フラットな表面にゆがみが入るようにした
    104. 104. そんな、こんなで…
    105. 105. 完 成
    106. 106. Oxford Library – UE4 Project Gumroadにてプロジェクトデータを 公開しています。
    107. 107. 04 制作を振り返って
    108. 108. クオリティ高く見せるための要素 ○構図、レイアウト ○ライティング ○リフレクション
    109. 109. 振り返ってみて… ○ワークフローに沿って作ることで、 その時考えなければならないポイントが絞れるので、不安を軽減しながら制作できた。 ○特にグレイボックスの工程は重要。 イメージできるところまでしっかりやること。 ○自分の能力を認め、すべてを自分でやろうとしない。 (もちろん、できた方がいいけど…)
    110. 110. 05 ざっくりアセットワークフロー
    111. 111. 作業効率はどうあげるか? ◯ツールを導入する ◯ルーチンな作業をスクリプトで解消 ◯やり直しや修正がし易いフローにする
    112. 112. レギュレーションを決める ◯ディレクトリ構造 ◯命名規則 ◯Mayaのシーンの構成 仕事と同じ!
    113. 113. テクスチャ制作ワークフロー(Prop) TextureMesh Zbrush Designer PainterMaya TGA UE4
    114. 114. テクスチャ制作ワークフロー(Env) TextureMesh Zbrush DesignerMaya TGA UE4 B2M
    115. 115. 資料について
    116. 116. PureRefの活用 資料を並べて閲覧することができるフリーソフト http://www.pureref.com/
    117. 117. ハイモデル
    118. 118. ハイモデル作成 ハイモデルはサブディビジョンモデリングで制 作をしていきます。 たいていの背景物はこのモデリング手法でハイ モデルが制作できると思います。
    119. 119. ハイモデル作成 木の部分だけプレビューをポリゴンに変換して、 FBXで書き出しをします。
    120. 120. ハイモデル作成 Zbrushで革の部分のに柔らかさがでる ように手を加えます。 また、SPでIDマップがベイクできるよ うにビスの部分と革の部分に頂点ペイ ントをいれます。
    121. 121. ハイモデル作成 革とビスの部分だけをFBXで書き出します。
    122. 122. ローモデル
    123. 123. ローモデルの作成 ハイモデルのサブディビジョンモデリングからサ ポートエッジを削除したものをベースに作成しま す。 ※ カクカクした感じを避けたかったので、 ローというほどリダクションしてません。
    124. 124. ローモデルの作成 UVを展開し、ノーマルマップが正しくベイクできるように ハードエッジ、ソフトエッジを設定します。 ○Polycount Maya MEL Script help needed (UV border edges)
    125. 125. FBXで書き出すとUVが元に戻る問題 FBXで書き出す前にローモデルに四角化をかけておくことで 解決。 三角化でもOK。
    126. 126. テクスチャ
    127. 127. テクスチャ作成 SubstancePainterで各種マップをベイクする。 - Normal Map - World Space Normal - ID Map - AO - Curvature - Position
    128. 128. テクスチャ作成 色々なレイヤーを重ねて、テクス チャを作成。 主にSmartMaskを使って、汚しの 入り方を調整。
    129. 129. Reprojectionの活用(1/2) ローモデルの形状やUVを編集し、ローモデルを差し替えても手描きペイントした部分 (ただし3DViewからのみ)も編集に合わせて移動してくれる機能。
    130. 130. Reprojectionの活用(2/2) Edit > Project Configuration からローモデルの差し替えができる ※ メッシュから生成されたテクスチャ(Normal, AO, Curvetureなど)を利用していれた 汚しなどの処理は、Baking Textureをしなおすことで新しいメッシュ形状に対応します。
    131. 131. UE4
    132. 132. 自動再インポートの設定 メッシュ、テクスチャの自動再インポートの設定(4.10から) 参照元のFBX,テクスチャが更新されたらUE4に自動的に再インポートされる。
    133. 133. ○エディタの環境設定 一般 > ロード&保存中
    134. 134. 06 質疑応答
    135. 135. ご清聴ありがとうございました 質問等はこちらへ sinocof@gmail.com

    ×