Game Creators Conference 2019 Takashi Itai

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

SNS

・スライド内では開発エンジンである『Unreal Engine 4』
で使用されている用語が含まれています
・略称について『Unreal Engine 4』をスライド内では
『UE4』と記載しています

自己紹介

• 株式会社スクウェア・エニックス
• 板井崇
• ３Dキャラクターアーティスト
• キャラクターマテリアルの基礎構築と仕様決め
• ユニークマテリアルの構築
• キャラクター制作の効率化スクリプト作成
自己紹介

•過去の経験
• モーション制作
• CGムービー制作
自己紹介

発表テーマ

◆ＵＶの多様性による制作例
◆空間座標による制作例
◆フェイク表現による制作例
◆ポストプロセスによる制作例
発表テーマ

発表の内容について

初歩的な内容も含まれています
暖かく見守ってください
発表の内容について

ＵＶの多様性による制作例

UVといえば？

UVエリアに画像を貼る

UVをタイリングする

UVをスライドさせて
アニメーション

UVのイメージ

UVを表現する
絵？アイコン？

横と縦を表すもの

座標数値で表すと
黒０白１
数値情報なので
計算式で扱えます

画像として利用できます
UV で作られた画像は
テクスチャの枚数制限
などには換算されない

UVを使って
色々な形が形成できる

UVを使って
色々な形が形成できる
マスクとして利用できる
模様作り是非チャレンジしてみてください！

■ UVを使った計算式による制作例

パターンを集めた画像を使用して
複数のタイルパターンを生成し
マテリアル内で使用することができます

ひとつのマテリアル内で複数のマスクエリアを生成し
それぞれの素材パターンを管理することができます

■画像とUVの組み合わせによる制作例

・ビジュアルの方向性を決めるルックデブ

・ベースカラー

・スペキュラーカラー

・影カラー１

・影カラー１
・影カラー２

・影カラー１
・影カラー２
・オクルージョンカラー
他合計13枚のテクスチャ

マテリアルに使用できるテクスチャには上限があり
とても 13枚をカラー表現に充てることができません

画像とUVを組み合わせることで複数のカラーを生成する

ルックアップテーブルという仕組みを使用する
カラー調整コントラスト調整

画像（絵）をルックアップテーブルに通すことで
登録されているカラー情報に従い色を変化させます

ルックアップテーブルを
１枚のテクスチャに複数登録
ルックデブで必要だった
複数のカラー情報を一つの
ベースカラーで生成することが
可能になります

オリジナルの画像から複数のルックアップカラーを出力
カラー情報についてはオリジナル画像と
テーブルデータ画像の２枚で済みました

■UVの位置をタイムラインとして使用する制作例

円柱のUV位置を縦位置のみ加減を付けます

V方向にスライドアニメーションさせてみます
UVがタイムラインの役割をしている事がわかります

横方向のラインにも変化を与えてみます

ワールドポジションオフセット
とタイムラインの組み合わせで
物体の出現を表現しています
出現前の頂点を一ヶ所に集め見えなくしておき
タイムラインUVのスクロールが出現タイミング
に到達した時から頂点を元の位置に戻すよう設定
されています

テクスチャ用のUVも必要なので
別UV としてタイムラインUVを
準備し対応しています
UV1：テクスチャUV
UV2：タイムラインUV

■スクリーンスペースUVを使用した制作例

スクリーンスペースUVとは

スクリーンスペースUVを
使用したデジタル表現

RGBカラーの粒と
その隙間のマスクを
スクリーンスペースUV
を使って作成

UVは情報を組み合わせることで
多様な表現が可能となり
ユニークなマテリアルを構築する為の
重要なアイテムであることがわかります

空間座標による制作例

空間って？

・UVの縦横と奥行がある

・UVの縦横と奥行がある
・マイナス方向にも
空間は続いている

マテリアルで扱う空間は？
・ワールドポジション（ワールド空間）
・ローカルポジション（ローカル空間）
・バーテックスノーマルワールドスペース
・ビュースペース

空間座標の情報とは？
・空間の中の1点を指すもの
・X軸 Y軸 Z軸３つの位置座標情報

空間座標をどうやって取得する？
・直接パラメータとして座標値を入力
・画像に座標値を埋め込む
・外部から座標情報をもらう
骨から情報取得ができるとマテリアル制作において
とても強力なアプローチが可能になります

■直接座標を使用した制作例

座標パラメータとして直接入力する例①

内部発光の表現です

1点の指定座標と空間の
距離をとる『Distance』
を使うことでボリューム
を作り出します

開始座標に近い部分が
より強い発光になり
離れると減衰していく

座標パラメータとして直接入力する例②

野菜のカット表現

カットUVを含んだモデルを
スクリプトで自動生成
一緒に動かしたい
頂点ごとにブロック化

マテリアルでカットUVを使用して

ローカル原点から

ローカル原点からゴール地点の座標に向けて

0から１へワールドポジションオフセット
を通して移動させます

[Distance]を使って距離のグラデーションを
生成し半分に分けます

距離の中心で上昇分の座標を加算します

距離から作成したグラデーションを[Power]で
黒い領域を増やすことで放物線移動を作成

各ブロックごとに
同じ動作を繰り返す

結果このように動作します

■画像と空間座標を使った制作例

画像と空間座標を使って
形状変化を表現した例

画像には０～１以上の値を描き込むことができる
ハイダイナミックレンジ方式で座標値を扱う
（以下HDRとして記述させていただきます）
HDR画像にはRGBカラーではなく
XYZの座標として書き込んでいきます

集まるキューブの最大数をスクリプトで準備
同時にキューブ１個づつのグリッドUVを設定
黄緑色の点はモデルのUV頂点

集まるキューブの最大数をスクリプトで準備
同時にキューブ１個づつのグリッドUVを設定
黄緑色の点はモデルのUV頂点合計2304個分

座標群の画像をV方向に9ドット移動させることで
個々のゴールの座標が切り替わる仕組みです
黄緑色の点はモデルのUV頂点

取得する座標値については変形ベースとなるモデル
を覆うようにキューブを配置させるスクリプトを作成し
同時に座標値も記録しました

変化パラメータをゲーム内で
制御してもらうことで
状況にあった形に変化する
表現が可能になりました

■外部（骨）から情報を取得する制作例

この球体サンプルには
物理で動作する骨を
持たせています

物理骨にはウェイトを
割り振っていません

物理骨の座標を取得して
その方向に延びる動作を
します

仕組みについて

骨に番号を付けておきます

球体の中心骨①の座標から
その下の骨②の座標への
方向をとります

骨からの方向と法線の方向の
差異を [Distance] を使って
マスクエリアとして作成し
エリア内頂点を子の骨②の
相対座標分だけ移動させます

同じように他の２つの骨にも
設定し少しバランスを取る形
で差異を付けます

キャラクター本体の動きと
関係なく部分的に液体が
垂れさがったような表現が
可能になります

図のような透けた状態の
キャラクターを表現
徐々に不透明に戻るという
仕様があった為
半透明のマテリアルでは
表現しませんでした

二つのモデルの表現に違いがあります

処理を行わないと
後ろの髪の毛が顔面を
覆い尽くしてしまいます

骨の情報を複合して使用する制作例
•方向スイッチを作る
•空間にボリュームを作る
•空間にマスクを作る
これらの連携で表現する仕組みになります

そこで対応した内容は

カメラの方向と

カメラの方向と
後頭部の方向が
同一方向に一致しだすと

カメラ方向と
頭の骨の後頭部方向が
同一方向に一致しだすと
後頭部にボリュームを
発生させる

結果見た目を改善することができました

空間座標を使った表現は組み合わせることで
より複雑な表現が可能となり今後の開発には
欠かせない表現方法だと実感しています

フェイク表現による制作例

フェイク表現とは

・デファードレンダリングが主流

・デファードレンダリングが主流
・半透明マテリアルは処理コストが掛かる
・不透明マテリアルで半透明物を表現する

不透明マテリアルで半透明物を表現する
という事は
フェイクなのでそれらしく見えれば OK！

■フェイク表現による制作例①

水

法線に変化を持たせる
外郭と中心の仕分けについて
はフレネルを使用してマスク
を生成しています

表面情報(Specular) と
透過情報(OpacityとSSC) が
重なることで透明感が出る

■フェイク表現による制作例②

眼球

『Bump Offset』
で虹彩をずらす
Bump Offsetとは
UE4の関数で視差を与える
マテリアルノードの名称です

■フェイク表現による制作例③

液体の入った瓶

物理骨を原点とした空間と骨の
方向を取得し UE4の関数『Dot』
を使って２つのベクトルの内積
からグラデーションを抽出し
その動きを使ってビンの中の
液体を表現しました

■フェイク表現による制作例④

密集した物体

中身はローポリゴンの
キューブです

UVは図のように 1面を
整数範囲で展開しています

面に UVタイリングを生成し
各UVに対し『Bump Offset』
で奥行をアニメーション設定

アニメーションの開始を
ノイズを使ってずらすことで
ランダム感を出します

できたUVを元に本来の面と
その側面に対し法線方向が
変化するように調整
図のようにノーマル表示では
法線方向の変化がわかります

外郭部分をマスクで抜き
凸凹感を表現しています

■フェイク表現による制作例⑤

髪の毛

髪の毛のキューティクル方向
を意識して内部的に法線を
歪めてフレネル情報に変換し
質感を表現するスペキュラや
ラフネスに情報を与えて
髪の毛のつやを表現

キューティクルの方向を
一律にするため髪のUVは
短冊状に整えています

実際の法線に対しては
キューティクルの方向は
反映させず本来の法線のまま
毛の繊維の立体的な素材感を
重視しています
左：法線をゆがめた状態
右：法線を維持した状態

フェイク表現とは正解というものはなく
それぞれ作成方法は違っても様々なアプローチで
イメージ作りが楽しめるユニークなマテリアル表現

ポストプロセスによる制作例

ポストプロセスとは

ポストプロセスマテリアル
としてキャラクターの
表現を変える

ポストプロセスマテリアルで
ライトを弱める機能を追加

ライティングの補佐的な
レフ板効果の機能を追加
（わかりやすく色付け）

アウトラインの対応

アウトラインに強弱をつけ
ペンの筆圧のような表現
強弱は色の濃さで表現

キャラクターマスクから
アウトラインを作成

抽出のラインは
キャラクターの内側

ビュースペース方向から
ラインの強弱方向を指定

強弱エリアを決めた状態
赤が太いライン
青が細いライン
（分りやすく色付けしています）

最終画像のカラーに
強弱のラインを乗算させ
線の強弱を表現しました

発表内容は以上となります

最後に
キャラクターのクオリティについてキャラアセットや
マテリアルの出来栄えだけでは担保できません
背景の環境ライトの付け方で大きくクオリティに
差が付くことが今回の開発でとても実感できました
今後の開発においてライトによる演出は必要不可欠
でありクオリティの根幹を握ることになると感じます

最後に
キャラクターへのこだわりを持ち光の在り方を知る
ライティングのエキスパートとなるクリエーターが
より一層増えてくることを願っています。

ご清聴ありがとうございました
UNREALはエピック・ゲームズ・インコーポレーテッドの商標または登録商標です。
その他掲載されている会社名、商品名は、各社の商標または登録商標です。

Game Creators Conference 2019 Takashi Itai

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Game Creators Conference 2019 Takashi Itai

Similar to Game Creators Conference 2019 Takashi Itai (9)

Game Creators Conference 2019 Takashi Itai