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

スライド概要

講演動画: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

エピック ゲームズ ジャパン

@EpicGamesJapan

作者について:

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

スライド一覧
シェア
埋め込む»CMSなどでJSが使えない場合

公開日

2019-10-08 04:52:32

各ページのテキスト

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