ディゾブルマテリアルで表現する立体魔法陣 (UE4 VFX Art Dive)

©2020 SQUARE ENIX CO., LTD. All Rights Reserved.
株式会社スクウェア・エニックス林武尊
ディゾルブマテリアルで表現する立体魔法陣

略称について
・『Unreal Engine 4』をスライド内では『UE4』と記載しています

SlideShareでは動画が再生されないため
なるべくPowerPointでご覧ください
P o w e r P o i n t ファイルのアップ先は S l i d e S h a r e の説明欄に記載されています

今回のテーマ

• シンプルなモデル
• シンプルなテクスチャ
• シンプルな質感
＋
• ディゾルブを使って見栄え良いエフェクトを手軽に作る

このテーマで作ってみたもの

※業務とは全く関係ありません

こんな人向け
• エフェクト関係の人
• マテリアルを触っている人
• キャラ・背景・UIなどでディゾルブ表現したい人

独学かつ感覚的にやってるので‥
「こんなやり方あるよ」などあればコメントお願いします

実際に開発で作る場合はプログラマさんに相談を
本スライドでは処理量やデータ量は気にせず解説

• アジェンダ
アジェンダ

• 自己紹介
• ディゾルブマテリアルの基礎
• Houdiniと頂点カラーを使った応用例
• シンプルで手軽な質感表現
• 魔法陣作例のメイキング
アジェンダ

• アジェンダ
自己紹介

• 林武尊
• 株式会社スクウェア・エニックス
• エフェクトアーティスト
• KINGDOM HEARTS III など
自己紹介

• アジェンダ
ディゾルブマテリアルの基礎

そもそもディゾルブって何？

dissolve 溶かす, 分解する, 消失する

削ったり

フチに色を付けたり

質感を遷移させたり

どういう時に使うのか？

• キャラクターや武器が出現したり消失する
• 紙が焦げていく際にフチに炎の色を付ける
• 背景物の表面が凍り付いていく

ディゾルブの考え方

絵を削る
少しずつ透明の領域を増やす

こんなアニメーションをOpacityやOpacity Maskに繋げる

またはLerpに繋げて遷移させる

基本的にはこれだけ
あとは創意工夫次第！

ではどうやってこんなアニメーションを作るのか？

まずは絵をマスクするためのテクスチャを用意
▲ E n g i n e C o n t e n t や E x a m p l e 内に色々あります

ただし使い勝手の良いテクスチャにするためには
注意がいくつかある

注意 ①
真っ黒から真っ白まで含まれていること

そうしないと削るタイミングが不自然になる

Photoshopのレベル補正でチェック

注意 ②
全ての階調がバランス良く含まれていること

バランスが良くないと削る際に不自然な緩急が入る

またエッジ発光の幅も均一にならない

Photoshopのレベル補正やトーンカーブでチェック
▲ 大袈裟に言えばこんな感じが理想▲ バラツキが激しい

Powerで明暗を調整するのもあり

注意 ③
テクスチャをリニアな状態で使うこと

sRGBだとアニメーションに緩急が入る
sRGBLinear

そろそろ非圧縮のグレースケールが使いたい ‥
圧縮を「Alpha (BC4)」にするのがオススメ

リニアにできない場合はPowerで打ち消す方法もある

さて、テクスチャを用意したは良いが‥
ここからどうするのか？

アプローチは色々あると思うが‥
最初に思い付くものの１つとしては引き算

テクスチャに１を足して真っ白にしておき、徐々に引く
▲ 赤いのはテクスチャを A l p h a ( B C 4 ) にして R を利用しているから
０～１１～２

いけてそう？

Maskedなら良いがTranslucentだと全体的に薄くなっていく
Masked Translucent

なぜか？
ここからはグラフをイメージすると良い

Photoshopのトーンカーブは横軸が入力・縦軸が出力

明るさを補正するカーブがリニアなら元の絵と結果は同じ
入力出力

テクスチャに対して何かの加工をすると結果が変わる
入力出力加工

例えば、カーブがこの状態なら出力は真っ白
入力出力

入力出力
カーブがこの状態なら出力は真っ黒

入力出力
カーブがこの状態なら出力は0.5を境に真っ黒と真っ白に

そして、こんなアニメーションを作るには‥

入力出力

グラフが横にスライドするイメージ

さっきの引き算だとグラフはどうなる？

グラフが縦にスライドして全体が暗くなっていく

他に方法は？

If を使う方法がある

マーケットプレイスのマテリアルを見たり
ググって調べたりすると If がよく使われてる印象

注意点としては
If だと境目にグラデーションは付けられない

そして
If の代わりに Step関数を使う方法がある

Customノードに一行のコードを書くだけ
r e t u r n s t e p ( t h r e s h o l d , m a s k ) ; ※ 変数名はご自由に

Step関数のグラフはこんな感じ
Threshold

結果は If と同じ
３つのノードだけでディゾルブ構成になる

カスタムノードデビューにも良いのでは
（実際にはメンテナンス性を考えてマテリアル関数化した方が良いと思う）

０or１ではなく
境界にグラデーションが欲しい場合

Smoothstep関数を使う方法がある

Step と Smoothstep の違いはこんな感じ
Threshold Min Max

Min と Max の２つの値を制御してディゾルブさせる
Min Max

Min の位置とグラデ幅で制御すると分かりやすい
M i n が 0 . 4 、グラデ幅が 0 . 3 なら M a x は 0 . 4 + 0 . 3 ＝ 0 . 7 になる
MaxMin

こちらも Customノードに一行のコードを書くだけ
r e t u r n s m o o t h s t e p ( m i n , m a x , m a s k ) ; ※ 変数名はご自由に

Smoothstepはマテリアル関数が用意されている

Threshold と Edge Width で制御する形で組んだもの

しかしThresholdに０を入れたとき少し削れた状態になる
Min Max

Thresholdにマイナスの値を入れて制御しても良いが‥
Min Max

グラデ幅が変わっても常に０～１で制御できた方が良い
Min MaxMin Max
▼ T h r e s h o l d = ０のとき ▼ T h r e s h o l d = １のとき

Min が移動するのは「グラデ幅＋１」の距離になる
また、グラデ幅が 0 . 3 なら M i n は - 0 . 3 から開始して 1 で終わる
MinMin

こんな感じに組めばOK

うまくいった！

パラメータ名を分かりやすいようDissolveにしたり

直感的になるようOneMinusを入れてあげたり
※ D i s s o l v e が０なら完全に消える

意図しない値が入らないよう０-１Clampを入れてあげたり
※ 入れない方が使い勝手が良い場面があるので臨機応変に

できるだけ使う人が快適になるように考える

さて‥
ここで軽くBlend Modeについておさらい

Masked と Translucent / Addtive それぞれ特徴がある

Masked と Translucent / Addtive それぞれ特徴がある
• ライティング ◎
• ０or１でのみ削れる △
• 屈折は使えない ×
Masked Translucent / Addtive
• 不完全なライティング △
• グラデーションで削れる ◎
• 屈折が使える〇

うまく使い分けましょう
• ライティング ◎
• ０or１でのみ削れる △
• 屈折は使えない ×
Masked Translucent / Addtive
• 不完全なライティング △
• グラデーションで削れる ◎
• 屈折が使える〇
剣・岩など炎・液体など

マテリアル作成中に
ディゾルブのチェックを楽にする方法

ディゾルブを延々と繰り返して欲しいので
作業中はTimeノードを使う

一番お手軽なのはTimeにPeriodを設定する方法
P e r i o d に指定した秒数で T i m e が０にリセットされる

Timeの速度をスケールする場合はPeriodの値に注意
T i m e の速度を 1 / 2 にするなら P e r i o d は２倍にする

Periodは使わずTimeをスケールしてからFracしてもOK
F r a c は小数点だけ取り出すので 0 ～ 0 . 9 9 9 9 9 . . . を繰り返す

グラフにすると‥

Timeのみ
10 32

Timeを1/2にした場合
10 32

TimeにFracで小数点だけ取り出した場合
10 32

Timeを1/2にしてからFracした場合
10 32

０から１を往復させたい場合は‥？

Sineを使うと余計な緩急が入る
T i m e ＞ S i n e だけだと - 1 ～ 1 を行き来するので下図では 0 ～ 1 に補正している

リニアに行き来する三角波にしたい

このように組めば０～１の三角波になる
A b s は絶対値にする / グラフを頭に浮かべて想像してみる

実は標準のマテリアル関数に三角波がある
色々と高機能 ‥ ！

どんな挙動か調べたい時に便利なマテリアル関数
「 P l o t F u n c t i o n O n G r a p h 」と「 D e b u g 」

チェック用にマテリアル関数を作ると良い
T i m e の速度調整や０～１よりも広い範囲に調整するパラメータを組んであげると良い

こんな感じで手軽にチェックできるようになる

最終的には Dynamic Parameter に繋いで Particle から制御
サムネイルで内容が分かるようデフォルト値を 0 . 5 などちゃんと入れておく

ディゾルブで２つの質感を変えたい場合は‥？

冒頭で触れたが Lerp の Alpha に繋ぐだけ

マテリアル関数を作っておくと便利

エッジを光らせたい場合は‥？

こんな感じに

入力出力
Step関数のグラフで言えば‥

入力出力
光らせたいのはココ！

入力出力
つまり発光用にこのようなグラフを作ればOK

エッジ幅
Threshold Threshold
マスクの閾値にエッジ幅を足して‥

OneMinusで反転するだけ
Threshold Threshold

実際の構成はこんな感じ
反転
色を与える

ディゾルブのマスクを複雑にしたい場合

この３つのテクスチャをどう掛け合わせる？

例えば掛け算だと全体的に暗くなってしまう
０～１の範囲同士で掛け算するので真っ白じゃない限り暗くなる

そこで３つを足して最後にその分割るのがオススメ
つまり平均値にしている

掛け算と足して平均を出す場合の比較
▲ 掛け算は緩急がキツい

指向性も欲しい場合

指向性のあるグラデーションを足してやれば良い
その分、割る数を増やすのを忘れずに

指向性のあるグラデーションを足した結果

もっと指向性を出したい！

指向性のあるグラデーションの値を大きくしてやれば良い
つまり影響度を増やす / その分、割る数を増やすのを忘れずに（０除算対策も）

指向性のあるグラデーションの強さの比較
▲ 強さ１ ▲ 強さ２ ▲ 強さ３

幾何学模様でディゾルブ

例えばこんなテクスチャをマスクに使えば‥

規則的な形で削ることができる

タイリング数を増やした場合

こういったテクスチャを作る方法としては‥
• Photoshopでグラデーションツールを使う
• MayaやHoudiniで頂点カラーを使う
• Substance DesignerでShapeノードを使う
• etc...

Photoshopのグラデーションを使う場合は滑らかさを０に
緩急の無いリニアなグラデーションで塗るため

グラデーションとパターンとノイズをミックスした場合

ディゾルブマテリアルの基礎は以上

• アジェンダ
Houdiniと頂点カラーを使った応用例

H o u d i n i と頂点カラーを使った応用例
みんな大好きなメッシュが集まってくる表現
Shader by @orangedkeys
https://twitter.com/orangedkeys/status/1217100668181340161
Shapes FX Pack | VFX Shaders | Unity Asset Store
https://assetstore.unity.com/packages/vfx/shaders/shapes-fx-pack-156638

試してみた

悩むのは２点

六角形パーツごとの「拡大縮小」と「エッジ発光」

Vertex Animation Texture？

ここではどちらも頂点カラーで解決

かもそばさんがツイートされた
手法で解決できる！
https://twitter.com/rn49rn49/status/1269629754371534849

Houdiniでモデルを用意

ざっと解説

Sphereを作成、TypeをPolygonにする

Divideノードに繋げてCompute DualをONにする

Attribute Wrangle で面ごとにIDを振る

Foreach で六角形ごとに処理をする

PolyExtrude で内側に押し出し

Color で中心を黒く塗る

GroupPromote で中心点をPointグループに

Fuse で中心点を１つに結合

Normal で法線を再計算

これでほぼ完成

一応UVも‥ UV TextureのFaceで六角形ごとに開く

UV Layout（デフォルト設定）で敷き詰める

Attribute Transfer で開いたUVをForeachの結果に適用

ExplodedView で面が分離されているか確認

FBXで出力してUE4へインポート

次にマテリアルを作成していく
まずは六角形パーツごとの拡大縮小

頂点カラーに対してStep関数を使うだけ

そしてエッジの発光

２つの構成を合体、エッジの太さを調整可能に

今は全体が一律で拡縮してしまうので
右から左へ流れるようにしたい

World座標からX軸で０-１グラデを作って利用してみる

０or１のマスクではダメ

境界をぼかすためにSmoothstep関数に変更

うまくいった！

X軸方向へ流れ続けるように改造

グラデ幅を自由に変えられるよう改造

３つの幅を考慮して２つのSmoothstepを掛け合わせた
Max MinMin Max

これで一旦やりたかったことはできた

両面に設定して
外側から集まってくる
ようにWPOも追加

これでとりあえず完成（あとは用途に合わせて）

Houdiniと頂点カラーを使った応用例は以上

• アジェンダ
シンプルで手軽な質感表現

Masked で質感を与えてみる

Metalic や Roughness をマスクテクスチャで少し変えるだけ

これだけでも案外リッチに見えたりもする

ノーマルマップも使いたいが
試作時に用意が面倒な場合‥

適当なテクスチャを TextureObject に変換して
NormalFromHeightmap を使うのもあり

NormalFromHeightmapのみ接続したもの

NormalFromHeightmapを参考にディゾルブに厚みを追加

余談
ノーマルマップ同士のブレンド

定番となる色んなブレンド方法がある模様
https://blog.selfshadow.com/publications/blending-in-detail/
ここで登場する「Whiteout blending」がシンプルで計算も軽くて結果も悪くない感じ
UE4で比較している記事もある
http://www.jackcaron.com/techart/2014/11/14/ue4-normal-blending
UE4標準のブレンド用の関数「BlendAngleCorrectedNormals」についても言及

ディゾルブでノーマルを遷移させたり

ノーマルが浮き出てくるような見た目に

Translucent で質感を与えてみる

ノーマルを使った屈折にディゾルブを入れたり

屈折が浮き出てくるような見た目に

複雑なマスクを組んでディゾルブを入れたり

Step と Smoothstep の比較

環境マップを入れてみたり

環境マップをフレネルでマスクしてみたり

フレネルあり無しの比較
▲ 疑似環境マップを F r e s n e l でマスク

Cubemap が手元に無ければ EngineContent にもある

Translucent でもフェイク表現も含め
色々と質感を与えることはできる

質感表現については以上

• アジェンダ
魔法陣作例のメイキング

制作過程ベースでお話する

マテリアルでの制作TIPSとしては
ほとんどすでにお話した内容の合わせ技

最初に VFX Art Dive のお話をいただいて‥
何となくディゾルブをテーマに考え始めた

手元でディゾルブマテリアルを軽くテストしつつ
ディゾルブが映えるエフェクトを検討

Houdini・ZBrush・SubstanceDesigner
などは不要で誰でも簡単に真似できるもの
もちろん使えると表現の幅が増えるが、無しで大丈夫というのがコンセプト

立体形状で質感のある魔法陣に決める
立体であればライティングによりお手軽に見栄えが上がる

１. よく見かける魔法陣とはデザインを変えたい
２. 和風の要素を入れたい
‥という漠然とした状態でスタート

資料をPinterestでピンしていきつつ
Vimeoなど色々漁りつつ‥
特に刺激を受けたものをピンしたり、モーショングラフィックス系の動画を観たり

素晴らしい作品に少しでも近づけるよう
理想は高く・目を肥やすことを意識して資料を閲覧

ラフスケッチしながらアイデアを練りつつ‥
４つの柱が四季を表し ‥ など色々考えたが制作時間重視でシンプルに ‥

質感とディゾルブをテストしつつ‥

シンプルなモデルだけで大まかな形を決めて

白・黒・金・赤ベースでマテリアルを作成してざっと適用

形状を整えたモデルを改めて用意してシーンに配置

床のデザインを起こして

全体的に色と形状を整えて完成イメージとした

制作したモデルはたったこれだけ

ここから出現演出に
ディゾルブをふんだんに入れ込んでいく

とりあえず床の拡大アニメーションを入れてみつつ‥

床モデルを使ってディゾルブを色々とテスト

UV座標のUとVを足して斜め方向のグラデーションを利用

さらにピラミッド状のマスクテクスチャを追加

エッジ発光側のStep関数にはテクスチャを反転して入力

エッジ発光側はSmoothstep関数でグラデ幅を持たせる

SmoothstepをOneMinusで反転させてグラデーションに
Opacity
Mask用
Threshold Min Max
Emissive用

模様のマスクテクスチャを使って緑に光らせる

ピラミッド状のテクスチャのタイリング数を極端にしてみる
▲タイリング UV=１ ▲タイリング U=１, V=10

別のマスクテクスチャで黄色く発光させるモデルを併用
拡大しながら黄色く発光するモデル＞赤く発光しながらディゾルブで出現するモデル

マテリアルのワイヤーフレーム描画を試してみたり
一瞬見せるくらいならアリかも / こちらを使っている事例をほとんど知らない ‥

WireframeをONにするだけ

１ドットのワイヤーフレーム部分のみ描画される？
▲ 両面 O N
O p a q u e でも使える模様

４つの柱のモデルでもディゾルブをテスト
Tr a n s l u c e n t + 両面

マテリアルの内容はこのような感じ

マスクを作成

５つの絵柄を掛け合わせているだけ

メインの模様を作成

テクスチャのUVを別のテクスチャで歪ませている

エッジの発光を作成

ディゾルブ基礎での説明通り（特に工夫は無し）

Opacity用の削りを作成

ここでディゾルブのテストは一旦終えて
４つの柱の出現を正式に作ることに

モデルのUVを正式に展開

発光演出の作成
特筆することは特になし

リング出現の作成
スペキュラが入ってくれている

柱のリングに使用しているマテリアル

実際のモデルに適用したもの

柱本体出現の作成

柱本体に使用しているマテリアル

タイリングをU・Vどちらも細かくした場合

タイリングを U=20, V=1 にした場合

それから中央のオブジェクトの出現を作成

２つの細いリングに使用しているマテリアル

太いカップ状のモデルに使用しているマテリアル

実際のモデルに適用したもの
SP 1 Elevator Corridor | Substance Share
https://share.substance3d.com/libraries/1806

屈折による模様を追加している

使用しているマテリアル

４つの柱と中央のオブジェクト出現の流れ

床の出現演出を追加

ディゾルブ無しの床に使用しているマテリアル

ディゾルブありの床に使用しているマテリアル

柱の質感変化の作成

質感変化で使用しているマテリアル

完成！

作ったマテリアル

ご清聴ありがとうございました！
UNREAL ENGINEはエピック・ゲームズ・インコーポレーテッド商標または登録商標です。
PHOTOSHOPはアドビインコーポレイテッドの商標または登録商標です。
MAYAはオートデスクインコーポレイテッドの商標または登録商標です。
その他掲載されている会社名、商品名は、各社の商標または登録商標です。

ディゾブルマテリアルで表現する立体魔法陣 (UE4 VFX Art Dive)

More Related Content

What's hot (20)

Similar to ディゾブルマテリアルで表現する立体魔法陣 (UE4 VFX Art Dive) (20)

More from エピック・ゲームズ・ジャパン Epic Games Japan (20)

ディゾブルマテリアルで表現する立体魔法陣 (UE4 VFX Art Dive)