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. 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. 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. O S A K A C R E A T I V E M E E T I N G
VFX って具体的に何やるの?
VFX のお仕事について
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. 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. O S A K A C R E A T I V E M E E T I N G
V F X の お 仕 事 に つ い て
今回は環境エフェクトよりで話していきます
キャラエフェクトのことを話すセミナーが多いと思うので
というかマテリアルメインで初心者向け
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. 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. O S A K A C R E A T I V E M E E T I N G
マスクアニメーション
マテリアルでの表現
11. O S A K A C R E A T I V E M E E T I N G
マ ス ク ア ニ メ ー シ ョ ン
今回解説するのはすべての基礎であり
様々なところへ応用できるマスクアニメーションです
一番良く目にするのは Dissolve Effect
12. O S A K A C R E A T I V E M E E T I N G
マ ス ク ア ニ メ ー シ ョ ン
ここで使っているテクニックとして SmoothStep というものがあります
どういうものか調べてみると・・・
なるほどわからん状態なので実際にやってみます
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. 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. 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. O S A K A C R E A T I V E M E E T I N G
マ ス ク ア ニ メ ー シ ョ ン
おわかりいただけましたでしょうか
これをベースに Min,Max の値をアニメーションさせると
面白い動きになります
→動画へ
ブログで作った動画をご紹介します
17. O S A K A C R E A T I V E M E E T I N G
マ ス ク ア ニ メ ー シ ョ ン
マスクアニメーションの応用として
次に作成するのがこちら
→動画へ
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. O S A K A C R E A T I V E M E E T I N G
マ ス ク ア ニ メ ー シ ョ ン
Substance Designer 全体図
20. O S A K A C R E A T I V E M E E T I N G
マ ス ク ア ニ メ ー シ ョ ン
流れのマスク
21. O S A K A C R E A T I V E M E E T I N G
マ ス ク ア ニ メ ー シ ョ ン
流れる道筋のマスク
22. O S A K A C R E A T I V E M E E T I N G
マ ス ク ア ニ メ ー シ ョ ン
雨粒
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. O S A K A C R E A T I V E M E E T I N G
マ ス ク ア ニ メ ー シ ョ ン
まずは雨のマスクアニメーションを
作ってみましょう
→動画へ
25. O S A K A C R E A T I V E M E E T I N G
マ ス ク ア ニ メ ー シ ョ ン
次は屈折の表現を入れるために
Refraction にノードをつなげます
(UE4 のドキュメントより画像を引用)
26. O S A K A C R E A T I V E M E E T I N G
マ ス ク ア ニ メ ー シ ョ ン
Lerp の Alpha に先程つくった白黒マスクをいれて
屈折のマスクにします
27. O S A K A C R E A T I V E M E E T I N G
マ ス ク ア ニ メ ー シ ョ ン
lerp は Photoshp のマスクと同じです
28. O S A K A C R E A T I V E M E E T I N G
マ ス ク ア ニ メ ー シ ョ ン
白黒のマスクアニメーションを
ノーマルへ変換します
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. O S A K A C R E A T I V E M E E T I N G
マ ス ク ア ニ メ ー シ ョ ン
最後に
・マスクアニメーション
・ノーマルマップへの変換
・屈折の表現を合体させます
(+ キューブマップによる擬似反射 )
→動画へ※時間の関係で動画で説明になります
後日データをアップしますのでみてみてください
31. O S A K A C R E A T I V E M E E T I N G
マ ス ク ア ニ メ ー シ ョ ン
キューブマップによる擬似反射
32. O S A K A C R E A T I V E M E E T I N G
マ ス ク ア ニ メ ー シ ョ ン
最後に擬似反射を入れた結果を御覧ください
→動画へ
最後に擬似反射を入れた結果を御覧ください
→動画へ
33. O S A K A C R E A T I V E M E E T I N G
マ ス ク ア ニ メ ー シ ョ ン
かけあしになってしまってすみません
後日データあげるのでチェックしてみてください
34. O S A K A C R E A T I V E M E E T I N G
最 後 に ・ ・ ・
今後やっておくべきことなど
最後に・・・
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. 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. O S A K A C R E A T I V E M E E T I N G
最 後 に ・ ・ ・
学ぶことは真似ること
就活について
第一志望で行きたい会社にはいれなかったとしてもそこで終わりじゃないです
僕自身ゲーム志望でしたが最初は映像系に入りました
そこで海外アーティストとの出会いや映像の VFX 技術を手に入れました
それはとても大きな強みで他の人と違うスキルとなります
今後ゲームや CG などの会社を目指す人に言えることですが
やることすべては絶対に無駄にはなりません
いろいろなことにチャレンジして進んでいってください
興味のあるものをいろいろ真似してみて自分の中に取り入れましょう
ほんとに好きなものだけが残ってそれが自分のやりたいことになります
38. O S A K A C R E A T I V E M E E T I N G
最 後 に ・ ・ ・
ご清聴ありがとうございました