Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

[UE4] Material Effect

3,310 views

Published on

2017/12/16日に行われた
Osaka Creative Meetingの資料です

Published in: Design
  • Be the first to comment

[UE4] Material Effect

  1. 1. UE4 : M a t e r i a l E f f e c t s K a - p u n n 2 0 1 7 - 1 2 - 1 6 O S A K A C R E A T I V E M E E T I N G
  2. 2. O V E R V I E W O S A K A C R E A T I V E M E E T I N G 自己紹介 どういう経緯でゲーム業界の VFX アーティストになったか VFX のお仕事について どんな種類のお仕事があるのか 派手なやつだけが VFX ではない! 本題 マスクでのアニメーション スレッショルドによるアニメーション ゲームの作例を取り上げて見てみよう 最後に 今後やっておくべきこと 
  3. 3. O S A K A C R E A T I V E M E E T I N G 自 己 紹 介 自己紹介 Ka-punn 経緯 大学卒業後テレビ業界でデザインのバイトしつつ デジハリで CG を学ぶ 映像業界で 2 年 3dsMax などを使いシミュレーションなど幅広く携わり その後某ゲーム会社で VFX アーティストとしてエフェクト制作をしています Twitter @PunnKa   ↑ LineStamp あるよ! VFX アーティストブログ http://kapunn-vfx.hatenablog.com/
  4. 4. O S A K A C R E A T I V E M E E T I N G VFX って具体的に何やるの? VFX のお仕事について
  5. 5. O S A K A C R E A T I V E M E E T I N G V F X の お 仕 事 に つ い て キャラエフェクト 環境エフェクト UI に付属するエフェクト タイトルロゴの演出など おおまかに 4 種類あります 僕が好きなゲームである「Transistor」を例に見てみましょう
  6. 6. O S A K A C R E A T I V E M E E T I N G V F X の お 仕 事 に つ い て キャラエフェクト 派手でエフェクトの花形 会社にもよると思いますが用意されたマテリアルとテクスチャーを使ってエフェクトを 作成していことが多く自らマテリアルを作成することはあまりないと思います 環境エフェクト 地味だけれでも雰囲気作りには重要なもの キャラエフェクトと同じように用意されたマテリアルとテクスチャーを組み合わせて作っていきます 自分で作ったとしてもテクスチャーくらいかと思います UI に付属するエフェクト ちょっと特殊な仕事 数人で UI や演出周りで使うエフェクトを付けていくことが多いです タイトルロゴの演出など これも特殊な仕事の部類 トレーラーに使われるタイトルロゴにエフェクトを付けてかっこよくすることが主です インゲームのエフェクトではないので AE を使って作成することが多いと思います
  7. 7. O S A K A C R E A T I V E M E E T I N G V F X の お 仕 事 に つ い て 今回は環境エフェクトよりで話していきます キャラエフェクトのことを話すセミナーが多いと思うので というかマテリアルメインで初心者向け
  8. 8. O S A K A C R E A T I V E M E E T I N G V F X の お 仕 事 に つ い て 環境エフェクトって例えばどんなの? →動画へ Mirrors Edge2 と Torch Light2 などのプレイ動画を御覧ください どんなものが有るか見てみましょう 種類はたくさんあります 雨やモヤ、空気中のチリやケーブルからでる火花など テイストはリアルなものからスタイライズされたものまで ゲームしている上ではとくに注意して見ないことが多いです
  9. 9. O S A K A C R E A T I V E M E E T I N G V F X の お 仕 事 に つ い て 後半の Prey の動画のように マテリアルで表現するエフェクトもあります ということでマテリアルをもうちょっと掘り下げてみましょう
  10. 10. O S A K A C R E A T I V E M E E T I N G マスクアニメーション マテリアルでの表現
  11. 11. O S A K A C R E A T I V E M E E T I N G マ ス ク ア ニ メ ー シ ョ ン 今回解説するのはすべての基礎であり 様々なところへ応用できるマスクアニメーションです 一番良く目にするのは Dissolve Effect
  12. 12. O S A K A C R E A T I V E M E E T I N G マ ス ク ア ニ メ ー シ ョ ン ここで使っているテクニックとして SmoothStep というものがあります どういうものか調べてみると・・・ なるほどわからん状態なので実際にやってみます
  13. 13. O S A K A C R E A T I V E M E E T I N G マ ス ク ア ニ メ ー シ ョ ン ↑こいつ これは 0-1 の範囲限定の Clamp です とその前に・・・ 似たようなものとして「Clamp」というものもあります これは入力された最小と最大の値に強制的に範囲を決めてしまうものです
  14. 14. O S A K A C R E A T I V E M E E T I N G マ ス ク ア ニ メ ー シ ョ ン Clamp 普通のグラデ 画面の上が0 つまり白0% 画面の下が1 つまり白 100% この場合 最低の値を Min の値に制限しています Max:1.0 Min:0.5 の場合 Clamp ←0.5 ←1.0 ←0.0
  15. 15. O S A K A C R E A T I V E M E E T I N G マ ス ク ア ニ メ ー シ ョ ン SmoothStep 普通のグラデ SmoothStep ←0.5 ←1.0 ←0.0 この場合 範囲を白50%の位置を0とし 白 100%の位置を1に制限します その間を滑かなグラデーションにしてくれます Min 以下の値を強制的に白0%にしてしまいます Max も同じように白 100%に制限します Max:1.0 Min:0.5 の場合
  16. 16. O S A K A C R E A T I V E M E E T I N G マ ス ク ア ニ メ ー シ ョ ン おわかりいただけましたでしょうか これをベースに Min,Max の値をアニメーションさせると 面白い動きになります →動画へ ブログで作った動画をご紹介します
  17. 17. O S A K A C R E A T I V E M E E T I N G マ ス ク ア ニ メ ー シ ョ ン マスクアニメーションの応用として 次に作成するのがこちら →動画へ
  18. 18. O S A K A C R E A T I V E M E E T I N G マ ス ク ア ニ メ ー シ ョ ン ※時間の関係で詳しくは割愛します  データは後日アップします 今回は Substance Designer を使って作ってみました まずこれを作るにあたって マスクを用意します 雨の流れのマスク 3 種類 雨粒のマスク 1 種類
  19. 19. O S A K A C R E A T I V E M E E T I N G マ ス ク ア ニ メ ー シ ョ ン Substance Designer 全体図
  20. 20. O S A K A C R E A T I V E M E E T I N G マ ス ク ア ニ メ ー シ ョ ン 流れのマスク
  21. 21. O S A K A C R E A T I V E M E E T I N G マ ス ク ア ニ メ ー シ ョ ン 流れる道筋のマスク
  22. 22. O S A K A C R E A T I V E M E E T I N G マ ス ク ア ニ メ ー シ ョ ン 雨粒
  23. 23. O S A K A C R E A T I V E M E E T I N G マ ス ク ア ニ メ ー シ ョ ン SubstanceDesigner を使うメリットとして 修正が Photoshop や AfterEffect で作るよりかなり楽 バリエーションを作成するのが楽 何よりもプロシージャルなのでテクスチャーなしで様々な ノイズのマスクなどが作れます 逆にデメリットとしては マテリアル作成の知識がないと難しい AE と比べて最終目標に到達するまでに時間がかかってしまう しかしかなり強力なツールなのでぜひ使ってみてください
  24. 24. O S A K A C R E A T I V E M E E T I N G マ ス ク ア ニ メ ー シ ョ ン まずは雨のマスクアニメーションを 作ってみましょう →動画へ
  25. 25. O S A K A C R E A T I V E M E E T I N G マ ス ク ア ニ メ ー シ ョ ン 次は屈折の表現を入れるために Refraction にノードをつなげます (UE4 のドキュメントより画像を引用)
  26. 26. O S A K A C R E A T I V E M E E T I N G マ ス ク ア ニ メ ー シ ョ ン Lerp の Alpha に先程つくった白黒マスクをいれて 屈折のマスクにします
  27. 27. O S A K A C R E A T I V E M E E T I N G マ ス ク ア ニ メ ー シ ョ ン lerp は Photoshp のマスクと同じです
  28. 28. O S A K A C R E A T I V E M E E T I N G マ ス ク ア ニ メ ー シ ョ ン 白黒のマスクアニメーションを ノーマルへ変換します
  29. 29. O S A K A C R E A T I V E M E E T I N G マ ス ク ア ニ メ ー シ ョ ン ノーマルマップの仕組みとして 凹凸を XYZ 方向からライティングしたものを それぞれのチャンネルに格納した画像になります これを UE4 のノードで再現しますR+G+B=NormalMap GreenChannel ライティング方向 (+Y) BlueChannel RedChannel ライティング方向 (-Y) ライティング方向 ( 真正面からのライティング ) ライティング方向 (-X) ライティング方向 (+X) →動画へ
  30. 30. O S A K A C R E A T I V E M E E T I N G マ ス ク ア ニ メ ー シ ョ ン 最後に ・マスクアニメーション ・ノーマルマップへの変換 ・屈折の表現を合体させます (+ キューブマップによる擬似反射 ) →動画へ※時間の関係で動画で説明になります  後日データをアップしますのでみてみてください
  31. 31. O S A K A C R E A T I V E M E E T I N G マ ス ク ア ニ メ ー シ ョ ン キューブマップによる擬似反射
  32. 32. O S A K A C R E A T I V E M E E T I N G マ ス ク ア ニ メ ー シ ョ ン 最後に擬似反射を入れた結果を御覧ください →動画へ 最後に擬似反射を入れた結果を御覧ください →動画へ
  33. 33. O S A K A C R E A T I V E M E E T I N G マ ス ク ア ニ メ ー シ ョ ン かけあしになってしまってすみません 後日データあげるのでチェックしてみてください
  34. 34. O S A K A C R E A T I V E M E E T I N G 最 後 に ・ ・ ・ 今後やっておくべきことなど 最後に・・・
  35. 35. O S A K A C R E A T I V E M E E T I N G 最 後 に ・ ・ ・ エフェクトアーティストになるためには 幅広いスキルがあるとより良いです 手描きやシミュレーション、モデリングなど エフェクトが主に使うソフトとして Maya, 3dsMax, Photoshop, AfterEffect, Houdini, Substance Designer, Substance Painter など 会社に入ったから安心ではない 大手になればなるほど競争相手は多く、仕事を依頼してもらえるようにならなければいけない →つまり自分にしかできないスキルを持ち自分の価値を上げることが大切 そうしなければ誰でもできる仕事ばっかりするになってしまう エフェクト+α 何ができるかを考えてみてください
  36. 36. O S A K A C R E A T I V E M E E T I N G 最 後 に ・ ・ ・ ひきだしが多いこと 引き出しを増やすためには まず SNS をやってみましょう SNS は情報収集にはかなり便利なツールです Twitter、Facebook などで CG はもちろん アニメ、ゲームなどのチャンネルをフォローして常に情報が入るようにして 便利なチュートリアルやサイトを Evetnote などに常にストックしておくようにしましょう これが後の自分の辞典になります 上からの指示でこんなエフェクトをつくってほしいと頼まれた時 リファレンスになるものをどんだけ自分の中に持っているかでかなり違います
  37. 37. O S A K A C R E A T I V E M E E T I N G 最 後 に ・ ・ ・ 学ぶことは真似ること 就活について 第一志望で行きたい会社にはいれなかったとしてもそこで終わりじゃないです 僕自身ゲーム志望でしたが最初は映像系に入りました そこで海外アーティストとの出会いや映像の VFX 技術を手に入れました それはとても大きな強みで他の人と違うスキルとなります 今後ゲームや CG などの会社を目指す人に言えることですが やることすべては絶対に無駄にはなりません いろいろなことにチャレンジして進んでいってください 興味のあるものをいろいろ真似してみて自分の中に取り入れましょう ほんとに好きなものだけが残ってそれが自分のやりたいことになります
  38. 38. O S A K A C R E A T I V E M E E T I N G 最 後 に ・ ・ ・ ご清聴ありがとうございました

×