Weitere ähnliche Inhalte
Ähnlich wie Game Creators Conference 2019 Takashi Itai (10)
Game Creators Conference 2019 Takashi Itai
- 1. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
株式会社スクウェア・エニックス 板井 崇
大 規 模 ゲ ー ム 開 発 の キ ャ ラ ク タ ー マ テ リ ア ル 制 作 例
- 2. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
動 画 が ご 覧 い た だ け ま す 。 発 表 者 用 ノ ー ト が ご 覧 い た だ け ま す
パワーポイントのスライドデータはこちらにあります。
ダウンロードしてご覧ください。
h t t p s : / / d r i v e . g o o g l e . c o m / f i l e / d / 1 r 2 4 Z d D V j d U K a m Q J d G H _ g z z X 5 V l P R t e J X / v i e w ? u s p = s h a r i n g
- 3. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
SNS
- 4. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
・スライド内では 開発エンジンである『Unreal Engine 4』
で使用されている 用語が含まれています
・略称について『Unreal Engine 4』をスライド内では
『UE4』と記載しています
- 5. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
自己紹介
- 6. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
• 株式会社スクウェア・エニックス
• 板井 崇
• 3Dキャラクターアーティスト
• キャラクターマテリアルの基礎構築と仕様決め
• ユニークマテリアルの構築
• キャラクター制作の効率化スクリプト作成
自己紹介
- 7. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
•過去の経験
• モーション制作
• CGムービー制作
自己紹介
- 8. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
発表テーマ
- 9. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
◆UVの多様性による制作例
◆空間座標による制作例
◆フェイク表現による制作例
◆ポストプロセスによる制作例
発表テーマ
- 10. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
発表の内容について
- 11. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
初歩的な内容も含まれています
暖かく見守ってください
発表の内容について
- 12. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
UVの多様性による制作例
- 13. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
UVといえば?
UVの多様性による制作例
- 14. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
UVエリアに画像を貼る
UVの多様性による制作例
- 15. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
UVをタイリングする
UVの多様性による制作例
- 16. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
UVをスライドさせて
アニメーション
UVの多様性による制作例
- 17. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
UVのイメージ
UVの多様性による制作例
- 18. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
UVを表現する
絵? アイコン?
UVの多様性による制作例
- 19. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
横と縦を表すもの
UVの多様性による制作例
- 20. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
座標数値で表すと
黒0 白1
数値情報なので
計算式で扱えます
UVの多様性による制作例
- 21. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
画像として利用できます
UV で作られた画像は
テクスチャの 枚数制限
などには 換算されない
UVの多様性による制作例
- 22. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
UVを使って
色々な形が形成できる
UVの多様性による制作例
- 23. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
UVを使って
色々な形が形成できる
マスクとして利用できる
UVの多様性による制作例
模様作り 是非チャレンジしてみてください!
- 24. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
UVの多様性による制作例
■ UVを使った計算式による制作例
- 25. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
UVの多様性による制作例
パターンを集めた画像を使用して
複数のタイルパターンを生成し
マテリアル内で使用することができます
- 26. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
UVの多様性による制作例
ひとつのマテリアル内で複数のマスクエリアを生成し
それぞれの素材パターンを管理することができます
- 27. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
■画像とUVの組み合わせによる制作例
UVの多様性による制作例
- 28. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
・ビジュアルの方向性を決めるルックデブ
UVの多様性による制作例
- 29. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
・ベースカラー
UVの多様性による制作例
- 30. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
・ベースカラー
・スペキュラーカラー
UVの多様性による制作例
- 31. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
・ベースカラー
・スペキュラーカラー
・影カラー1
UVの多様性による制作例
- 32. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
・ベースカラー
・スペキュラーカラー
・影カラー1
・影カラー2
UVの多様性による制作例
- 33. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
・ベースカラー
・スペキュラーカラー
・影カラー1
・影カラー2
・オクルージョンカラー
他 合計13枚のテクスチャ
UVの多様性による制作例
- 34. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
マテリアルに使用できるテクスチャには上限があり
とても 13枚をカラー表現に充てることができません
UVの多様性による制作例
- 35. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
画像とUVを組み合わせることで 複数のカラーを生成する
UVの多様性による制作例
- 36. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
UVの多様性による制作例
ルックアップテーブルという仕組みを使用する
カラー調整 コントラスト調整
- 37. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
UVの多様性による制作例
画像(絵)をルックアップテーブルに通すことで
登録されているカラー情報に従い 色を変化させます
- 38. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
UVの多様性による制作例
ルックアップテーブルを
1枚のテクスチャに複数登録
ルックデブで必要だった
複数のカラー情報を 一つの
ベースカラーで 生成することが
可能になります
- 39. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
UVの多様性による制作例
オリジナルの画像から 複数のルックアップカラーを出力
カラー情報については オリジナル画像と
テーブルデータ画像 の2枚で済みました
- 40. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
UVの多様性による制作例
■UVの位置をタイムラインとして使用する制作例
- 41. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
UVの多様性による制作例
円柱のUV位置を 縦位置のみ加減を付けます
- 42. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
UVの多様性による制作例
V方向に スライドアニメーションさせてみます
UVがタイムラインの役割をしている事がわかります
- 43. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
UVの多様性による制作例
横方向のラインにも 変化を与えてみます
- 44. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
UVの多様性による制作例
ワールドポジションオフセット
とタイムラインの組み合わせで
物体の出現を表現しています
出現前の頂点を 一ヶ所に集め 見えなくしておき
タイムラインUVのスクロールが 出現タイミング
に到達した時から 頂点を元の位置に戻すよう設定
されています
- 45. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
UVの多様性による制作例
テクスチャ用のUVも必要なので
別UV としてタイムラインUVを
準備し 対応しています
UV1:テクスチャUV
UV2:タイムラインUV
- 46. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
UVの多様性による制作例
■スクリーンスペースUVを使用した制作例
- 47. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
UVの多様性による制作例
スクリーンスペースUVとは
- 48. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
UVの多様性による制作例
スクリーンスペースUVを
使用した デジタル表現
- 49. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
UVの多様性による制作例
RGBカラーの粒と
その隙間のマスクを
スクリーンスペースUV
を使って作成
- 50. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
UVは 情報を組み合わせることで
多様な表現が可能となり
ユニークなマテリアルを構築する為の
重要なアイテムであることがわかります
UVの多様性による制作例
- 51. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
空間座標による制作例
- 52. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
空間って?
空間座標による制作例
- 53. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
・UVの縦横と奥行がある
空間座標による制作例
- 54. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
・UVの縦横と奥行がある
・マイナス方向にも
空間は続いている
空間座標による制作例
- 55. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
マテリアルで扱う空間は?
・ワールドポジション(ワールド空間)
・ローカルポジション(ローカル空間)
・バーテックスノーマルワールドスペース
・ビュースペース
空間座標による制作例
- 56. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
空間座標の情報とは?
・空間の中の1点を指すもの
・X軸 Y軸 Z軸 3つの位置座標情報
空間座標による制作例
- 57. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
空間座標をどうやって取得する?
・直接パラメータとして座標値を入力
・画像に座標値を埋め込む
・外部から座標情報をもらう
空間座標による制作例
骨から情報取得ができると マテリアル制作において
とても強力なアプローチが可能になります
- 58. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
■直接 座標を使用した制作例
空間座標による制作例
- 59. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
空間座標による制作例
座標パラメータとして 直接入力する例①
- 60. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
内部発光の表現です
空間座標による制作例
- 61. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
1点の指定座標と空間の
距離をとる『Distance』
を使うことで ボリューム
を作り出します
空間座標による制作例
- 62. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
開始座標に近い部分が
より強い発光になり
離れると 減衰していく
空間座標による制作例
- 63. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
空間座標による制作例
座標パラメータとして 直接入力する例②
- 64. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
野菜のカット表現
空間座標による制作例
- 65. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
カットUVを含んだモデルを
スクリプトで自動生成
一緒に動かしたい
頂点ごとに ブロック化
空間座標による制作例
- 66. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
マテリアルでカットUVを使用して
空間座標による制作例
- 67. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
ローカル原点から
空間座標による制作例
- 68. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
ローカル原点からゴール地点の座標に向けて
空間座標による制作例
- 69. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
0から1へ ワールドポジションオフセット
を通して移動させます
空間座標による制作例
- 70. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
[Distance]を使って距離のグラデーションを
生成し 半分に分けます
空間座標による制作例
- 71. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
距離の中心で上昇分の座標を加算します
空間座標による制作例
- 72. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
距離から作成したグラデーションを[Power]で
黒い領域を増やすことで放物線移動を作成
空間座標による制作例
- 73. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
各ブロックごとに
同じ動作を繰り返す
空間座標による制作例
- 74. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
結果このように動作します
空間座標による制作例
- 75. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
■画像と空間座標を使った制作例
空間座標による制作例
- 76. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
画像と空間座標を使って
形状変化を表現した例
空間座標による制作例
- 77. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
画像には0~1以上の値を描き込むことができる
ハイダイナミックレンジ方式で座標値を扱う
(以下HDRとして記述させていただきます)
HDR画像にはRGBカラーではなく
XYZの座標として書き込んでいきます
空間座標による制作例
- 78. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
集まるキューブの 最大数をスクリプトで準備
同時にキューブ1個づつのグリッドUVを設定
空間座標による制作例
黄緑色の点はモデルのUV頂点
- 79. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
集まるキューブの 最大数をスクリプトで準備
同時にキューブ1個づつのグリッドUVを設定
空間座標による制作例
黄緑色の点はモデルのUV頂点
- 80. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
集まるキューブの 最大数をスクリプトで準備
同時にキューブ1個づつのグリッドUVを設定
空間座標による制作例
黄緑色の点はモデルのUV頂点合計2304個分
- 81. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
座標群の画像をV方向に9ドット移動させることで
個々のゴールの座標が切り替わる仕組みです
空間座標による制作例
黄緑色の点はモデルのUV頂点
- 82. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
取得する座標値については 変形ベースとなるモデル
を覆うように キューブを配置させるスクリプトを作成し
同時に座標値も記録しました
空間座標による制作例
- 83. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
変化パラメータを ゲーム内で
制御してもらうことで
状況にあった形に変化する
表現が可能になりました
空間座標による制作例
- 84. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
■外部(骨)から情報を取得する制作例
空間座標による制作例
- 85. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
空間座標による制作例
この球体サンプルには
物理で動作する骨を
持たせています
- 86. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
空間座標による制作例
物理骨にはウェイトを
割り振っていません
- 87. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
空間座標による制作例
物理骨の座標を取得して
その方向に延びる動作を
します
- 88. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
空間座標による制作例
仕組みについて
- 89. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
空間座標による制作例
骨に番号を付けておきます
- 90. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
空間座標による制作例
球体の中心骨①の座標から
その下の骨②の座標への
方向をとります
- 91. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
空間座標による制作例
骨からの方向と 法線の方向の
差異を [Distance] を使って
マスクエリアとして作成し
エリア内頂点を 子の骨②の
相対座標分だけ 移動させます
- 92. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
空間座標による制作例
同じように他の2つの骨にも
設定し 少しバランスを取る形
で差異を付けます
- 93. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
空間座標による制作例
キャラクター本体の動きと
関係なく 部分的に液体が
垂れさがったような表現が
可能になります
- 94. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
空間座標による制作例
図のような 透けた状態の
キャラクターを表現
徐々に不透明に戻るという
仕様があった為
半透明のマテリアルでは
表現しませんでした
- 95. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
空間座標による制作例
二つのモデルの表現に違いがあります
- 96. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
空間座標による制作例
処理を行わないと
後ろの髪の毛が顔面を
覆い尽くしてしまいます
- 97. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
骨の情報を複合して使用する制作例
空間座標による制作例
•方向スイッチを作る
•空間にボリュームを作る
•空間にマスクを作る
これらの連携で 表現する仕組みになります
- 98. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
空間座標による制作例
そこで対応した内容は
- 99. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
空間座標による制作例
そこで対応した内容は
カメラの方向と
- 100. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
空間座標による制作例
そこで対応した内容は
カメラの方向と
後頭部の方向が
同一方向に一致しだすと
- 101. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
空間座標による制作例
そこで対応した内容は
カメラ方向と
頭の骨の後頭部方向が
同一方向に一致しだすと
後頭部にボリュームを
発生させる
- 102. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
空間座標による制作例
結果 見た目を改善することができました
- 103. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
空間座標による制作例
空間座標を使った表現は 組み合わせることで
より複雑な表現が可能となり 今後の開発には
欠かせない表現方法だと実感しています
- 104. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
フェイク表現による制作例
- 105. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
フェイク表現による制作例
フェイク表現とは
- 106. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
フェイク表現による制作例
・デファードレンダリングが主流
- 107. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
フェイク表現による制作例
・デファードレンダリングが主流
・半透明マテリアルは 処理コストが掛かる
・不透明マテリアルで 半透明物を表現する
- 108. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
フェイク表現による制作例
不透明マテリアルで 半透明物を表現する
という事は
フェイクなので それらしく見えれば OK!
- 109. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
■フェイク表現による制作例①
フェイク表現による制作例
- 110. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
水
フェイク表現による制作例
- 111. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
フェイク表現による制作例
仕組みについて
法線に変化を持たせる
外郭と中心の仕分けについて
はフレネルを使用して マスク
を生成しています
- 112. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
表面情報(Specular) と
透過情報(OpacityとSSC) が
重なることで透明感が出る
フェイク表現による制作例
- 113. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
■フェイク表現による制作例②
フェイク表現による制作例
- 114. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
眼球
フェイク表現による制作例
- 115. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
仕組みについて
『Bump Offset』
で虹彩をずらす
Bump Offsetとは
UE4の関数で 視差を与える
マテリアルノードの名称です
フェイク表現による制作例
- 116. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
■フェイク表現による制作例③
フェイク表現による制作例
- 117. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
液体の入った瓶
フェイク表現による制作例
- 118. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
仕組みについて
物理骨を原点とした空間と骨の
方向を取得し UE4の関数『Dot』
を使って 2つのベクトルの内積
から グラデーションを抽出し
その動きを使って ビンの中の
液体を表現しました
フェイク表現による制作例
- 119. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
■フェイク表現による制作例④
フェイク表現による制作例
- 120. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
密集した物体
フェイク表現による制作例
- 121. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
中身はローポリゴンの
キューブです
フェイク表現による制作例
- 122. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
フェイク表現による制作例
仕組みについて
UVは図のように 1面を
整数範囲で展開しています
- 123. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
フェイク表現による制作例
面に UVタイリングを生成し
各UVに対し『Bump Offset』
で奥行をアニメーション設定
- 124. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
フェイク表現による制作例
アニメーションの開始を
ノイズを使って ずらすことで
ランダム感を出します
- 125. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
フェイク表現による制作例
できたUVを元に 本来の面と
その側面に対し 法線方向が
変化するように調整
図のように ノーマル表示では
法線方向の 変化がわかります
- 126. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
外郭部分を マスクで抜き
凸凹感を表現しています
フェイク表現による制作例
- 127. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
■フェイク表現による制作例⑤
フェイク表現による制作例
- 128. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
髪の毛
フェイク表現による制作例
- 129. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
髪の毛のキューティクル方向
を意識して 内部的に法線を
歪めて フレネル情報に変換し
質感を表現する スペキュラや
ラフネスに 情報を与えて
髪の毛のつやを表現
フェイク表現による制作例
- 130. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
キューティクルの方向を
一律にするため 髪のUVは
短冊状に整えています
フェイク表現による制作例
- 131. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
実際の法線に対しては
キューティクルの方向は
反映させず 本来の法線のまま
毛の繊維の立体的な素材感を
重視しています
左:法線をゆがめた状態
右:法線を維持した状態
フェイク表現による制作例
- 132. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
フェイク表現とは 正解というものはなく
それぞれ作成方法は違っても 様々なアプローチで
イメージ作りが楽しめる ユニークなマテリアル表現
フェイク表現による制作例
- 133. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
ポストプロセスによる制作例
- 134. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
ポストプロセスによる制作例
ポストプロセスとは
- 135. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
ポストプロセスによる制作例
ポストプロセスマテリアル
として キャラクターの
表現を変える
- 136. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
ポストプロセスによる制作例
- 137. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
ポストプロセスによる制作例
ポストプロセスマテリアルで
ライトを弱める機能を追加
- 138. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
ポストプロセスによる制作例
ライティングの補佐的な
レフ板効果の機能を追加
(わかりやすく色付け)
- 139. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
ポストプロセスによる制作例
アウトラインの対応
- 140. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
ポストプロセスによる制作例
アウトラインに強弱をつけ
ペンの筆圧のような表現
強弱は色の濃さで表現
- 141. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
ポストプロセスによる制作例
仕組みについて
キャラクターマスクから
アウトラインを作成
- 142. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
ポストプロセスによる制作例
抽出のラインは
キャラクターの内側
- 143. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
ポストプロセスによる制作例
ビュースペース方向から
ラインの強弱方向を指定
- 144. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
ポストプロセスによる制作例
強弱エリアを決めた状態
赤が太いライン
青が細いライン
(分りやすく色付けしています)
- 145. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
ポストプロセスによる制作例
最終画像のカラーに
強弱のラインを乗算させ
線の強弱を表現しました
- 146. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
ポストプロセスによる制作例
発表内容は 以上となります
- 147. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
最後に
キャラクターのクオリティについて キャラアセットや
マテリアルの 出来栄えだけでは 担保できません
背景の環境 ライトの付け方で 大きくクオリティに
差が付くことが 今回の開発でとても実感できました
今後の開発において ライトによる演出は 必要不可欠
であり クオリティの根幹を握ることになる と感じます
- 148. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
最後に
キャラクターへのこだわりを持ち 光の在り方を知る
ライティングのエキスパートとなるクリエーターが
より一層 増えてくることを 願っています。
- 149. V F X S T U D Y G R O U P©2019 SQUARE ENIX CO., LTD. All Rights Reserved.
ご清聴ありがとうございました
UNREALはエピック・ゲームズ・インコーポレーテッドの商標または登録商標です。
その他掲載されている会社名、商品名は、各社の商標または登録商標です。