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

5.2K Views

October 08, 19

スライド概要

講演動画:https://youtu.be/G_q-4Efzf4Y

2019年10月6日に行われた「UNREAL FEST EAST 2019」における「UE4を用いた人間から狼男への変身表現法の解説」の登壇資料です。
●公式サイト
https://unrealengine.jp/unrealfest/
===
自主制作の”人間から狼男”の顔の変身過程をどのように作成したのかメイキングを行います。顔や髪の基本のアセットの作成、変身用のブレンドシェイプの作成、UE4のシェーダー作成・調整等々、全般をお話しする予定です。狼男作品:https://www.artstation.com/artwork/qA0W4a

profile-image

Unreal Engineを開発・提供しているエピック ゲームズ ジャパンによる公式アカウントです。 勉強会や配信などで行った講演資料を公開しています。 公式サイトはこちら https://www.unrealengine.com/ja/

シェア

埋め込む »CMSなどでJSが使えない場合

各ページのテキスト
1.

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

2.

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

3.

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

4.

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

5.

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

6.

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

7.

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

8.

#ue4fest

9.

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

10.

人間の顔 #ue4fest

11.

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

12.

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

13.

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

14.

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

15.

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

16.

眼球 #ue4fest

17.

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

18.

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

19.

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

20.

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

21.

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

22.

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

23.

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

24.

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

25.

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

26.

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

27.

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

28.

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

29.

眼球の移植完了 #ue4fest

30.

ヘアーの作成 #ue4fest

31.

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

32.

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

33.

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

34.

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

35.

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

36.

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

37.

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

38.

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

39.

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

40.

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

41.

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

42.

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

43.

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

44.

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

45.

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

46.

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

47.

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

48.

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

49.

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

50.

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

51.

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

52.

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

53.

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

54.

#ue4fest

55.

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

56.

#ue4fest

57.

人間完成! #ue4fest

58.

狼男の作成 #ue4fest

59.

#ue4fest

60.

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

61.

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

62.

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

63.

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

64.

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

65.

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

66.

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

67.

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

68.

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

69.

狼男の作成 Colorized Spray #ue4fest

70.

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

71.

狼男の作成 Mask PeaksAndValleys #ue4fest

72.

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

73.

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

74.

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

75.

#ue4fest

76.

ブレンドシェイプ #ue4fest

77.

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

78.

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

79.

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

80.

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

81.

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

82.

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

83.

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

84.

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

85.

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

86.

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

87.

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

88.

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

89.

アニメーション・・ #ue4fest

90.

変身用シェーダー #ue4fest

91.

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

92.

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

93.

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

94.

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

95.

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

96.

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

97.

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

98.

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

99.

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

100.

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

101.

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

102.

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

103.

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

104.

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

105.

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

106.

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

107.

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

108.

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

109.

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

110.

変身用シェーダー #ue4fest

111.

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

112.

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

113.

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

114.

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

115.

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

116.

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

117.

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

118.

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

119.

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

120.

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

121.

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

122.

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

123.

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

124.

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

125.

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

126.

シーケンサー #ue4fest

127.

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

128.

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

129.

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

130.

ヘアー完成 #ue4fest

131.

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

132.

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

133.

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

134.

完成 #ue4fest

135.

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

136.

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

137.

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

138.

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

139.

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

140.

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

141.

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

142.

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