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

69.5K Views

July 07, 20

ue4 ue4 vfx art dive 2020 ue-effect ue-rendering

スライド概要

講演動画はこちら
https://youtu.be/yMuDva2Vh9I

スライドデータはこちらからダウンロード可能です
https://epicgames.box.com/s/mgbkc0q59h05ge8ajjgb6xrqu6r14ltg

発表者：林 武尊さま（株式会社スクウェア・エニックス）
本スライドは2020年7月5日に行われた勉強会「 UE4 VFX Art Dive Online」の講演資料となります。

profile-image
スライド一覧

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

シェア

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

ダウンロード

ダウンロード(pdf - 12.1MB)

関連スライド

slide-thumbnail

Unreal Engine5 Lumenの仕組みと肝心なところ
ue5 ue-rendering ue-lumen
user-img エピック ゲームズ ジャパン 603.6K
slide-thumbnail

猫でも分かるUnreal Engineの学び方 - 超初心者向け編 - 2023 v1.0
ue4 ue5 ue-beginner
user-img エピック ゲームズ ジャパン 459.8K
slide-thumbnail

猫でも分かる UE5.0, 5.1 におけるアニメーションの新機能について【CEDEC+KYUSHU 2022】
ue5 cedec+kyushu ue-animation ue-optimize ue-bp ue-physics ue-sequencer
user-img エピック ゲームズ ジャパン 404.8K
slide-thumbnail

マンガで使う！初めての Unreal Engine【UE4 Manga Anime Illustration Dive Online】
ue4 ueart2d ue-beginner
user-img エピック ゲームズ ジャパン 276K
slide-thumbnail

UE4で作成するUIと最適化手法 【GAME CREATORS CONFERENCE '20】
ue4 ue-ui ue-optimize
user-img エピック ゲームズ ジャパン 213.1K
slide-thumbnail

UE5でのアニメーションの流用方法について【Compatible Skeletons, IK Retargeter】
ue5 ue-animation ue-beginner
user-img エピック ゲームズ ジャパン 167.2K
各ページのテキスト
1.

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

2.

略称について ・『Unreal Engine 4』をスライド内では『UE4』と記載しています ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

3.

SlideShareでは動画が再生されないため なるべくPowerPointでご覧ください PowerPointファイルのアップ先はSlideShareの説明欄に記載されています ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

4.

今回のテーマ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

5.

• シンプルなモデル • シンプルなテクスチャ • シンプルな質感 ＋ • ディゾルブを使って見栄え良いエフェクトを手軽に作る ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

6.

このテーマで作ってみたもの ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

7.

※業務とは全く関係ありません ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

8.

こんな人向け • エフェクト関係の人 • マテリアルを触っている人 • キャラ・背景・UIなどでディゾルブ表現したい人 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

9.

独学かつ感覚的にやってるので‥ 「こんなやり方あるよ」などあればコメントお願いします ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

10.

実際に開発で作る場合はプログラマさんに相談を 本スライドでは処理量やデータ量は気にせず解説 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

11.

• アジェンダ アジェンダ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

12.

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

13.

• アジェンダ 自己紹介 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

14.

自己紹介 •林 武尊 • 株式会社スクウェア・エニックス • エフェクトアーティスト • KINGDOM HEARTS III など ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

15.

• アジェンダ ディゾルブマテリアルの基礎 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

16.

ディゾルブマテリアルの基礎 そもそもディゾルブって何？ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

17.

ディゾルブマテリアルの基礎 dissolve 溶かす, 分解する, 消失する ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

18.

ディゾルブマテリアルの基礎 削ったり ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

19.

ディゾルブマテリアルの基礎 フチに色を付けたり ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

20.

ディゾルブマテリアルの基礎 質感を遷移させたり ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

21.

ディゾルブマテリアルの基礎 どういう時に使うのか？ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

22.

ディゾルブマテリアルの基礎 • キャラクターや武器が出現したり消失する • 紙が焦げていく際にフチに炎の色を付ける • 背景物の表面が凍り付いていく ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

23.

ディゾルブマテリアルの基礎 ディゾルブの考え方 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

24.

ディゾルブマテリアルの基礎 絵を削る 少しずつ透明の領域を増やす ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

25.

ディゾルブマテリアルの基礎 こんなアニメーションをOpacityやOpacity Maskに繋げる ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

26.

ディゾルブマテリアルの基礎 またはLerpに繋げて遷移させる ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

27.

ディゾルブマテリアルの基礎 基本的にはこれだけ あとは創意工夫次第！ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

28.

ディゾルブマテリアルの基礎 ではどうやってこんなアニメーションを作るのか？ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

29.

ディゾルブマテリアルの基礎 まずは絵をマスクするためのテクスチャを用意 ▲ EngineContentやExample内に色々あります ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

30.

ディゾルブマテリアルの基礎 ただし使い勝手の良いテクスチャにするためには 注意がいくつかある ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

31.

ディゾルブマテリアルの基礎 注意 ① 真っ黒から真っ白まで含まれていること ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

32.

ディゾルブマテリアルの基礎 そうしないと削るタイミングが不自然になる ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

33.

ディゾルブマテリアルの基礎 Photoshopのレベル補正でチェック ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

34.

ディゾルブマテリアルの基礎 注意 ② 全ての階調がバランス良く含まれていること ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

35.

ディゾルブマテリアルの基礎 バランスが良くないと削る際に不自然な緩急が入る ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

36.

ディゾルブマテリアルの基礎 またエッジ発光の幅も均一にならない ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

37.

ディゾルブマテリアルの基礎 Photoshopのレベル補正やトーンカーブでチェック ▲バラツキが激しい ▲大袈裟に言えばこんな感じが理想 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

38.

ディゾルブマテリアルの基礎 Powerで明暗を調整するのもあり ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

39.

ディゾルブマテリアルの基礎 注意 ③ テクスチャをリニアな状態で使うこと ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

40.

ディゾルブマテリアルの基礎 sRGBだとアニメーションに緩急が入る Linear sRGB ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

41.

ディゾルブマテリアルの基礎 圧縮を「Alpha (BC4)」にするのがオススメ そろそろ非圧縮のグレースケールが使いたい‥ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

42.

ディゾルブマテリアルの基礎 リニアにできない場合はPowerで打ち消す方法もある ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

43.

ディゾルブマテリアルの基礎 さて、テクスチャを用意したは良いが‥ ここからどうするのか？ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

44.

ディゾルブマテリアルの基礎 アプローチは色々あると思うが‥ 最初に思い付くものの１つとしては引き算 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

45.

ディゾルブマテリアルの基礎 テクスチャに１を足して真っ白にしておき、徐々に引く ０～１ １～２ ▲赤いのはテクスチャをAlpha(BC4)にしてRを利用しているから ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

46.

ディゾルブマテリアルの基礎 いけてそう？ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

47.

ディゾルブマテリアルの基礎 Maskedなら良いがTranslucentだと全体的に薄くなっていく Masked Translucent ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

48.

ディゾルブマテリアルの基礎 なぜか？ ここからはグラフをイメージすると良い ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

49.

ディゾルブマテリアルの基礎 Photoshopのトーンカーブは横軸が入力・縦軸が出力 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

50.

ディゾルブマテリアルの基礎 明るさを補正するカーブがリニアなら元の絵と結果は同じ 入力 出力 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

51.

ディゾルブマテリアルの基礎 テクスチャに対して何かの加工をすると結果が変わる 入力 加工 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved. 出力

52.

ディゾルブマテリアルの基礎 例えば、カーブがこの状態なら出力は真っ白 入力 出力 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

53.

ディゾルブマテリアルの基礎 カーブがこの状態なら出力は真っ黒 入力 出力 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

54.

ディゾルブマテリアルの基礎 カーブがこの状態なら出力は0.5を境に真っ黒と真っ白に 入力 出力 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

55.

ディゾルブマテリアルの基礎 そして、こんなアニメーションを作るには‥ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

56.

ディゾルブマテリアルの基礎 入力 出力 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

57.

ディゾルブマテリアルの基礎 入力 出力 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

58.

ディゾルブマテリアルの基礎 入力 出力 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

59.

ディゾルブマテリアルの基礎 グラフが横にスライドするイメージ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

60.

ディゾルブマテリアルの基礎 さっきの引き算だとグラフはどうなる？ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

61.

ディゾルブマテリアルの基礎 入力 出力 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

62.

ディゾルブマテリアルの基礎 入力 出力 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

63.

ディゾルブマテリアルの基礎 入力 出力 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

64.

ディゾルブマテリアルの基礎 グラフが縦にスライドして全体が暗くなっていく ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

65.

ディゾルブマテリアルの基礎 他に方法は？ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

66.

ディゾルブマテリアルの基礎 If を使う方法がある ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

67.

ディゾルブマテリアルの基礎 マーケットプレイスのマテリアルを見たり ググって調べたりすると If がよく使われてる印象 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

68.

ディゾルブマテリアルの基礎 注意点としては If だと境目にグラデーションは付けられない ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

69.

ディゾルブマテリアルの基礎 そして If の代わりに Step関数 を使う方法がある ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

70.

ディゾルブマテリアルの基礎 Customノードに一行のコードを書くだけ return step(threshold, mask); ※変数名はご自由に ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

71.

ディゾルブマテリアルの基礎 Step関数のグラフはこんな感じ Threshold ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

72.

ディゾルブマテリアルの基礎 結果は If と同じ ３つのノードだけでディゾルブ構成になる ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

73.

ディゾルブマテリアルの基礎 カスタムノードデビューにも良いのでは （実際にはメンテナンス性を考えてマテリアル関数化した方が良いと思う） ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

74.

ディゾルブマテリアルの基礎 ０or１ではなく 境界にグラデーションが欲しい場合 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

75.

ディゾルブマテリアルの基礎 Smoothstep関数 を使う方法がある ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

76.

ディゾルブマテリアルの基礎 Step と Smoothstep の違いはこんな感じ Threshold Min ©2020 SQUARE ENIX CO., LTD. All Rights Reserved. Max

77.

ディゾルブマテリアルの基礎 Min と Max の２つの値を制御してディゾルブさせる Min Max ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

78.

ディゾルブマテリアルの基礎 Min の位置と グラデ幅 で制御すると分かりやすい Minが0.4、グラデ幅が0.3ならMaxは0.4+0.3＝0.7になる Min Max ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

79.

ディゾルブマテリアルの基礎 こちらも Customノードに一行のコードを書くだけ return smoothstep(min, max, mask); ©2020 SQUARE ENIX CO., LTD. All Rights Reserved. ※変数名はご自由に

80.

ディゾルブマテリアルの基礎 Smoothstepはマテリアル関数が用意されている ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

81.

ディゾルブマテリアルの基礎 Threshold と Edge Width で制御する形で組んだもの ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

82.

ディゾルブマテリアルの基礎 しかしThresholdに０を入れたとき少し削れた状態になる Min ©2020 SQUARE ENIX CO., LTD. All Rights Reserved. Max

83.

ディゾルブマテリアルの基礎 Thresholdにマイナスの値を入れて制御しても良いが‥ Min Max ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

84.

ディゾルブマテリアルの基礎 グラデ幅が変わっても常に０～１で制御できた方が良い ▼Threshold=０のとき Min ▼Threshold=１のとき Max Min ©2020 SQUARE ENIX CO., LTD. All Rights Reserved. Max

85.

ディゾルブマテリアルの基礎 Min が移動するのは「グラデ幅＋１」の距離になる また、グラデ幅が0.3ならMinは-0.3から開始して1で終わる Min Min ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

86.

ディゾルブマテリアルの基礎 こんな感じに組めばOK ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

87.

ディゾルブマテリアルの基礎 うまくいった！ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

88.

ディゾルブマテリアルの基礎 パラメータ名を分かりやすいようDissolveにしたり ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

89.

ディゾルブマテリアルの基礎 直感的になるようOneMinusを入れてあげたり ※Dissolveが０なら完全に消える ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

90.

ディゾルブマテリアルの基礎 意図しない値が入らないよう０-１Clampを入れてあげたり ※入れない方が使い勝手が良い場面があるので臨機応変に ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

91.

ディゾルブマテリアルの基礎 できるだけ使う人が快適になるように考える ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

92.

ディゾルブマテリアルの基礎 さて‥ ここで軽くBlend Modeについておさらい ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

93.

ディゾルブマテリアルの基礎 Masked と Translucent / Addtive それぞれ特徴がある ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

94.

ディゾルブマテリアルの基礎 Masked と Translucent / Addtive それぞれ特徴がある Masked Translucent / Addtive • ライティング ◎ • 不完全なライティング △ • ０or１でのみ削れる △ • グラデーションで削れる ◎ • 屈折は使えない × • 屈折が使える 〇 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

95.

ディゾルブマテリアルの基礎 うまく使い分けましょう Masked 剣・岩など 炎・液体など Translucent / Addtive • ライティング ◎ • 不完全なライティング △ • ０or１でのみ削れる △ • グラデーションで削れる ◎ • 屈折は使えない × • 屈折が使える 〇 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

96.

ディゾルブマテリアルの基礎 マテリアル作成中に ディゾルブのチェックを楽にする方法 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

97.

ディゾルブマテリアルの基礎 ディゾルブを延々と繰り返して欲しいので 作業中はTimeノードを使う ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

98.

ディゾルブマテリアルの基礎 一番お手軽なのはTimeにPeriodを設定する方法 Periodに指定した秒数でTimeが０にリセットされる ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

99.

ディゾルブマテリアルの基礎 Timeの速度をスケールする場合はPeriodの値に注意 Timeの速度を1/2にするならPeriodは２倍にする ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

100.

ディゾルブマテリアルの基礎 Periodは使わずTimeをスケールしてからFracしてもOK Fracは小数点だけ取り出すので0～0.99999...を繰り返す ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

101.

ディゾルブマテリアルの基礎 グラフにすると‥ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

102.

ディゾルブマテリアルの基礎 Timeのみ 0 1 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved. 2 3

103.

ディゾルブマテリアルの基礎 Timeを1/2にした場合 0 1 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved. 2 3

104.

ディゾルブマテリアルの基礎 TimeにFracで小数点だけ取り出した場合 0 1 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved. 2 3

105.

ディゾルブマテリアルの基礎 Timeを1/2にしてからFracした場合 0 1 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved. 2 3

106.

ディゾルブマテリアルの基礎 ０から１を往復させたい場合は‥？ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

107.

ディゾルブマテリアルの基礎 Sineを使うと余計な緩急が入る Time＞Sineだけだと-1～1を行き来するので下図では0～1に補正している ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

108.

ディゾルブマテリアルの基礎 リニアに行き来する三角波にしたい ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.