UE4を用いた人間から狼男への変身表現法の解説【UNREAL FEST EAST 2019】

UE4を用いた 人間から狼男の変身表現の解説 #ue4fest

自己紹介 石川陽介 ゼニマックスアジア・株式会社 TangoGameworks ゲームのキャラモデラーやってます Artstation→ ishikawa_cg Twitter→ ishi_maya #ue4fest

自己紹介 UE歴？ 2008年 初UE PC版Gearsのアンリアルエディターから。 以降キャラのレンダラーとして使い始めました。 UDK時代に作った物は ZBrushCentralに上がってます #ue4fest

本日の内容 前半 – 主に人間の顔 ・顔、髪の作成 ・サンプルプロジェクトの活用 後半 – 主に狼男 ・ブレンドシェイプの作成 ・UE4シェーダーの調整 ・おまけ #ue4fest

注意事項 • 本日講演するのは全て私個人の『趣味・自主制作』の内容です。 • テクスチャ容量など、処理負荷の事は考えておりません。 • メインツールはmaya • 切り離して書くのが難しかったので、MayaとUE4の両ツールの話が多く行き来します。 なんとなく、常にインポートをしながら作業してるようなイメージでお願いします。 よろしくお願いします。 #ue4fest

使用したサンプルファイル DigitalHuman(マイクさん) ・眼球モデル ・眼球関連のシェーダーを使用 #ue4fest

使用したサンプルファイル Photorealistic Character ・現在はDigitalhumanに同梱 ・ヘアーシェーダーを使用 #ue4fest

#ue4fest

制作期間 制作期間 ・2018年12月6日～2019年1月20日 平日は少しづつやって、土日でがっつり進めました。 #ue4fest

人間の顔 #ue4fest

人間の顔の作成 Ten24 3D SCAN STORE ・今回は変身過程を見せるのが目的 ・時間の節約のためデータ購入 #ue4fest

人間の顔の作成 • 過去に作ったベースメッシュをインポートし、位置合わせしてProjectAllしました。 #ue4fest

人間の顔の作成 • 過去に作ったベースメッシュをインポートし、位置合わせしてProjectAllしました。 • Zwrapがあれば簡単。 #ue4fest

インポート Import Option ・import Morph Target 今日の内容はブレンドシェイプを使うので モーフターゲットのチェックを忘れないように・・。 #ue4fest

インポート ・インポート #ue4fest

眼球 #ue4fest

眼球の移植 DigitalHuman(マイク) 使用するシェーダー場所 #ue4fest

眼球の移植 眼球を取り出す ・マイクさんのモデルをUEからエクスポート ・mayaに読み込んで眼球以外は削除 #ue4fest

眼球の移植 眼球を取り出す 涙丘ブレンド 眼球 ・眼球本体 ・涙液のメッシュ 涙液 ・涙丘ブレンドメッシュ ・AO・ブラーメッシュ AO・ブラー #ue4fest

眼球の移植 眼球の配置と調整 ・少し補足していきます。 #ue4fest

眼球の移植 眼球の配置の注意点 ・もし眼球を反転コピーしたら UVを反転する。 #ue4fest

眼球の移植 眼球の配置の注意点 ・もし眼球を反転コピーしたら UVを反転する。 反転しないとUE上で視差が崩れます。 #ue4fest

眼球シェーダー Veinsの追加 ・血管の濃さを変えられる ・以前までPhotorealistic Character のシェーダーに存在していたが、 DigitalHumanでは消えている。 #ue4fest

眼球シェーダー Veinsの追加 ・血管の濃さを変えられる ・以前までPhotorealistic Character のシェーダーに存在していたが、 DigitalHumanでは消えている。 #ue4fest

眼球の移植・涙液 × M_TearLine_Bust 〇 M_Lacrimal_fluid #ue4fest

AO・ブラー AO・ブラー ・ぼかし機能が最高に素晴らしい #ue4fest

AO・ブラー AO・ブラー ・眼球影のパラメータ ・上下左右、影の濃さを調整出来る #ue4fest

AO・ブラー マイクさんのAO ・AOシェーダーの影パラメータは 使われていない ・ShortOccポスプロマテリアルで ポストのAOで調整してるから(多分) #ue4fest

眼球の移植完了 #ue4fest

ヘアーの作成 #ue4fest

ヘアーの作成・テクスチャ テクスチャの制作 ・Zbrushに板ポリを読み込み、 FiberMeshを生やし、 各ソフトでベイク ■SubstancePainter ■Xnormal #ue4fest

ヘアーの作成・テクスチャ FiberMeshにした理由 ・Zbrushさえあれば出来る ・毛量や散り具合を簡単に調整出来る ・自宅の古いmayaではxgenは不安定だった #ue4fest

ヘアーの作成・テクスチャ SubstancePainterでベイク ・ID アルファとUniqueHairValue ・AO Diffuse用 #ue4fest

ヘアーの作成・テクスチャ XnormalでDepthをベイク ・Depthはxnormalのheightを使用した ・ベイク時に明暗の調整も出来て便利 #ue4fest

ヘアーの作成・テクスチャ テクスチャ完成 #ue4fest

ヘアーの作成・配置 配置 ・配置は手置き 微調整にHairGrabber2 #ue4fest

ヘアーの作成・配置 HairGrabber2 sizov氏 ※Gumroadで検索 ・板ポリの割りの変更や、スムーズが可能 ・板の根本だけなど選択が容易に。色々機能あり #ue4fest

ヘアーの作成・配置 髪の色分け ・同じ色が重なりすぎないよう バランスを考えて配置 #ue4fest

ヘアーの作成・配置 髪の色分け ・同じ色が重なりすぎないよう バランスを考えて配置 #ue4fest

ヘアーの作成・配置 法線を編集 ・シンプル法線をコピー #ue4fest

ヘアーの作成・配置 完成 #ue4fest

ヘアーの作成・シェーダー HairShader ・PhotorealisticCharacter のヘアーを使用する #ue4fest

ヘアーの作成・シェーダー パラメータの中から ・EdgeMaskMin ・PixelDepthOffset ・Roughness を軽く説明します。 #ue4fest

ヘアーの作成・シェーダー EdgeMaskMin カメラに対して板ポリが平面に近づくと、 ディザ半透明でフェードしていく機能 #ue4fest

ヘアーの作成・シェーダー EdgeMaskMin ・良い点 平面感を無くす ・悪い点 場合によってはスカスカに。 #ue4fest

ヘアーの作成・シェーダー EdgeMaskMin ・良い点 平面感を無くす ・悪い点 場合によってはスカスカに。 #ue4fest

ヘアーの作成・シェーダー PixelDepthOffset ・頭皮との境界や、毛の重なりを Ditherでなじませてくれる。 #ue4fest

ヘアーの作成・シェーダー PixelDepthOffset ・生え際に注目 ・奥行、陰影が増す #ue4fest

ヘアーの作成・シェーダー PixelDepthOffset ・DepthMap On #ue4fest

ヘアーの作成・シェーダー PixelDepthOffset ・DepthMap Off #ue4fest

ヘアーの作成・シェーダー Roughness ・UE4のHairshaderではラフネスと バックスキャッター(っぽい効果)の二つのパラメータが共通 ・バックスキャッター単体を強度を弄ったり、 柔らかくしたりという事は出来ない。 #ue4fest

ヘアーの作成・シェーダー #ue4fest

ヘアーの作成・シェーダー Specular追加 ・標準ではスペキュラスロットに何も無いので パラメータを指しておくと スペキュラの強度が調整出来るので便利 #ue4fest

#ue4fest

ジョイント ジョイント入れ ・表情作りのためではない ・変形過程を想像しながら 絶対動かすだろうという箇所想定して入れた #ue4fest

#ue4fest

人間完成！ #ue4fest

狼男の作成 #ue4fest

#ue4fest

狼男の作成 Zbrushでスカルプト ・トポロジは変えない ・人との差を大きく出しつつ 無理な変形には気を付ける #ue4fest

狼男の作成 Zbrushでスカルプト ・トポロジは変えない ・人との差を大きく出しつつ 無理な変形には気を付ける #ue4fest

狼男の作成 無理な変形には気を付ける × ・極端ですがダメな例 #ue4fest

狼男の作成 無理な変形には気を付ける ・耳は歪みやすい ・Divideが低い状態でポリゴン密度を 気にしながらスカルプトする #ue4fest

狼男の作成 × 無理な変形には気を付ける ・没にした変身途中のモデル ・皮膚が削れる表現をよく見せるのは 難易度が高めだった #ue4fest

狼男の作成 無理な変形には気を付ける ・没にした変身途中のモデル ・皮膚が削れる表現をよく見せるのは 難易度が高めだった #ue4fest

狼男の作成 Polypaint ・作り始めの早い段階で塗る ・早い段階で変化のテスト #ue4fest

狼男の作成 Polypaint ・作り始めの早い段階で塗る ・早い段階で変化のテスト #ue4fest

狼男の作成 よく使うアルファ ・EFFECTS 23 #ue4fest

狼男の作成 Colorized Spray #ue4fest

狼男の作成 DragRect ・サクっと斑点を作る時 #ue4fest

狼男の作成 Mask PeaksAndValleys #ue4fest

狼男の作成 Mask PeaksAndValleys ・モデリングでも使用 ・今回は主に中間の皮膚 #ue4fest

狼男の作成 Substance Painter ・少しノイズを足したり 色見の調整したり程度 #ue4fest

狼男の作成 UVsetの用意 ・形状変化でUVが伸びるので UVsetを用意してベイク ・UE4ではCoordinate Index でUVsetを指定する #ue4fest

#ue4fest

ブレンドシェイプ #ue4fest

ブレンドシェイプ作成補助ツール braverabbitというサイトで販売・配布されているプラグイン • SHAPES 有料 • extractDeltas 無料 #ue4fest

ブレンドシェイプ 通常通りのブレンドシェイプ ・当然そのままブレンドシェイプをかけると ジョイントの位置が大幅にズレる #ue4fest

ブレンドシェイプ ジョイントの移動 ・ローモデル(今回はSdiv2) をmayaに読み込む ・人間パートで入れておいた ジョイントを移動 #ue4fest

ジョイントの移動 ジョイントの移動 ・狼男のメッシュに合わせる ・目の位置は出来るだけ正確に。 それ以外は大雑把でOK #ue4fest

SHAPESでブレンドシェイプ抽出 #ue4fest

SHAPESでブレンドシェイプ抽出 抽出したシェイプ ・ジョイント移動を考慮したシェイプ #ue4fest

シェイプを部位毎に分離 シェイプを分割 ・白黒マップを塗り分け #ue4fest

シェイプを部位毎に分離 シェイプを分割 ・白黒マップを塗り分け #ue4fest

シェイプを部位毎に分離 シェイプを分割 ・ブレンドシェイプウェイト ペイントツールで分割 #ue4fest

シェイプを部位毎に分離 #ue4fest

他パーツのブレンドシェイプ Wrap deform ・眉毛や産毛など、 追従が必要なパーツをラップして複製 ・Wrapで壊れた箇所を直して ブレンドシェイプのターゲットにする #ue4fest

全てのブレンドシェイプ完成 #ue4fest

アニメーション・・ #ue4fest

変身用シェーダー #ue4fest

変身用シェーダー シェーダー作成とはいえ・・ ・基本は知人から教えてもらったり ググったら出てくるものを参考にしているのが基本です。 協力してくれた方や、参考資料あげている方々、ありがとうございます。 #ue4fest

変身用シェーダー テクスチャを切り替えていく 1, ベース 2, 血管 3, 中間 4, 狼男(UV2) #ue4fest

変身用シェーダー 肌の切り替え ・一見複雑ですが、ひたすらLerpで テクスチャ変えを繰り返してるだけ #ue4fest

変身用シェーダー 肌の切り替え 3パターン比較 ・リニア変化 ・マスク変化 ・テクスチャ歪み変化 #ue4fest

変身用シェーダー リニア ・単純な切り替え #ue4fest

変身用シェーダー マスクを用意 ・マスクは血管や、 肌の変化が始まりやすい箇所 ブツブツしてそうな箇所など。 #ue4fest

変身用シェーダー マスクを用意 ・マスクは血管や、 肌の変化が始まりやすい箇所 ブツブツしてそうな箇所など。 #ue4fest

変身用シェーダー マスクの制作 ・ベースは、大体Zbrushで描いときます #ue4fest

変身用シェーダー マスクの制作 ・photoshopのレベル補正で 真ん中をスライドさせたイメージ #ue4fest

変身用シェーダー マスクを用意 ・clampとマスクをつなげて lerpにさす #ue4fest

変身用シェーダー マスクを用意 ・血管が下から濃くなっていく #ue4fest

変身用シェーダー マスクを用意 ・最終的には複数のマスクを Lerpで重ねていくだけ #ue4fest

変身用シェーダー コントラスト ・浸食のぼけ感をクッキリさせる #ue4fest

変身用シェーダー コントラスト ・浸食のぼけ感をクッキリさせる #ue4fest

変身用シェーダー ノーマルマップのスクロール ・血管部分に、スクロールノーマルを追加 ・参考にした動画 https://www.youtube.com/watch?v=i2LCO6Lr2YE #ue4fest

変身用シェーダー ノーマルマップのスクロール ・血管だけドクドクさせた #ue4fest

変身用シェーダー マスクブレンド ・コントラスト ・血管のノーマル #ue4fest

変身用シェーダー テクスチャを歪ませたい ・テクスチャのUVのスロットに スクロールテクスチャを追加 #ue4fest

変身用シェーダー テクスチャを歪ませたい Muterikuさんの ゲームCG勉強の部屋 Uvdistortionについて 分かりやすく解説されています。 gamecgben.blogspot.com/2017/12/ue4tips-uv-distortion.html #ue4fest

変身用シェーダー #ue4fest

変身用シェーダー テクスチャを歪ませたい ・注意点 テクスチャが歪むので UVの切れ目が出る #ue4fest

変身用シェーダー 境界のマスクを忘れずに。 境界のマスクを追加 #ue4fest

変身用シェーダー 歪みを追加したブレンド ・少しやりすぎくらいが丁度良い ・UVの切れ目に注意。 #ue4fest

変身用シェーダー 皮膚のラフネス差 ・極端に変えておいた方が 歪みも相まって、 より変化が強調されます。 #ue4fest

変身用シェーダー 歪みブレンド #ue4fest

ヘアー 生え変わり ・髪メッシュはモーフではなく、 単純に2つ置いてるだけ #ue4fest

ヘアーシェーダー 生え変わりを表現するには ・ヘアーテクスチャを列ごとに、上下に移動したい ・更にその列毎にズレて上下するようにし、一括制御したい。 #ue4fest

ヘアーシェーダー UV上下に移動したい 歪み ・ヘアーを列毎動かす用にマスクを追加 ・一番最後に歪み用のマスクも追加 列分けマスク #ue4fest

ヘアーシェーダー 歪み #ue4fest

ヘアーシェーダー 8列分をつなげる #ue4fest

ヘアーシェーダー 16列の移動 ・シーケンサーで打ち込んだところ とてもめんどくさい・・・ #ue4fest

ヘアーシェーダー 友人に相談 ・サクっと作ってくれました ・最後のパラメータコレクションを シーケンサーで使います。 SpecialThanks 林 力丸 #ue4fest

ヘアーシェーダー パラメータコレクション ・8列分の数値 ・このノードで一括制御 #ue4fest

ヘアーシェーダー パラメータコレクション ・8列のパラメータに、適当に入れた 数値に応じてズレて移動 #ue4fest

ヘアーシェーダー ・作っていただいた解説 SpecialThanks 林 力丸 #ue4fest

シーケンサー #ue4fest

シーケンサー シーケンサーに追加 ・アニメーションや、 マテリアルのパラメータを追加 ・髪のコレクションパラメータも追加 #ue4fest

シーケンサー またPixelDepthOffset ・髪の毛の生え変わりの瞬間に、PDOの数値を調整。 これをやらないと、毛の生え変わりが自然に見えない。 #ue4fest

ヘアーシェーダー スクロール時にPDO未調整 PDO 0.3 スクロール時にPDO調整あり PDO 1.5 #ue4fest

ヘアー完成 #ue4fest

影 Shadow Bias ・ライティングする上で重要なパラメータ ・口の中が明るい、鼻横の影が出ないなど 大体このパラメータを調整していない ・低くしすぎるとノイズになるので注意 Bias0.5 #ue4fest

影 Shadow Bias ・ライティングする上で重要なパラメータ ・口の中が明るい、鼻横の影が出ないなど 大体このパラメータを調整していない ・低くしすぎるとノイズになるので注意 Bias0.02 #ue4fest

バックスキャッター Transmission ・UE4.20からSSprofileのSSSで バックスキャッターが可能に。 ・Lightのオプションから Transmissionのチェックを入れる #ue4fest

完成 #ue4fest

参考にさせていただいた変形資料 • Real-Time Transformations in The Order: 1886 SIGGRAPH2015の資料、この資料以外も素晴らしいです。 • Andy Serkis Digital Human & Osiris Black Blended Performance アンディサーキスさんがフェイシャルアニメしながらクリーチャに変形する動画 • Wolfman VFX Technical Breakdown MPCによる映画のメイキング #ue4fest

おまけ・狼男の腕の再生 念のためですが、 グロテスクな物が苦手な方は ご注意ください。 #ue4fest

おまけ・狼男の腕の再生 腕の再生 #ue4fest

おまけ・狼男の腕の再生 腕の再生 #ue4fest

おまけ・データ配布 注意事項 ・講演の参考データとして配布 ・造形・テクスチャは“超”適当です ・二次配布禁止です #ue4fest

おまけ・データ配布 ダウンロードしたら ・UE4.22.3以降 ・シーケンサーファイルをクリック ・多分再生されます。 #ue4fest

おまけ・データ配布 10/7日まで https://www.dropbox.com/s/6v0s14p69b4iue6 ※このファイルは明日消します。 このURLは共有禁止です。 SNS投稿しないでください。 #ue4fest

ご清聴 ありがとうございました #ue4fest