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

98K 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/

シェア

またはPlayer版

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

ダウンロード

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

関連スライド

slide-thumbnail

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

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

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

UE5の最新グラフィクスを使いこなすための4個の勘所 [CEDEC+KYUSHU 2023]
unreal engine 5 ue5 cedec cedec+kyushu
user-img エピック ゲームズ ジャパン 459K
slide-thumbnail

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

UE4で作成するUIと最適化手法 【GAME CREATORS CONFERENCE '20】
ue4 ue-ui ue-optimize
user-img エピック ゲームズ ジャパン 315.3K
各ページのテキスト
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.

109.

ディゾルブマテリアルの基礎 このように組めば０～１の三角波になる Absは絶対値にする / グラフを頭に浮かべて想像してみる ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

110.

ディゾルブマテリアルの基礎 実は標準のマテリアル関数に三角波がある 色々と高機能‥！ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

111.

ディゾルブマテリアルの基礎 どんな挙動か調べたい時に便利なマテリアル関数 「PlotFunctionOnGraph」と「Debug」 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

112.

ディゾルブマテリアルの基礎 チェック用にマテリアル関数を作ると良い Timeの速度調整や０～１よりも広い範囲に調整するパラメータを組んであげると良い ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

113.

ディゾルブマテリアルの基礎 こんな感じで手軽にチェックできるようになる ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

114.

ディゾルブマテリアルの基礎 最終的には Dynamic Parameter に繋いで Particle から制御 サムネイルで内容が分かるようデフォルト値を0.5などちゃんと入れておく ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

115.

ディゾルブマテリアルの基礎 ディゾルブで２つの質感を変えたい場合は‥？ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

116.

ディゾルブマテリアルの基礎 冒頭で触れたが Lerp の Alpha に繋ぐだけ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

117.

ディゾルブマテリアルの基礎 マテリアル関数を作っておくと便利 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

118.

ディゾルブマテリアルの基礎 エッジを光らせたい場合は‥？ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

119.

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

120.

ディゾルブマテリアルの基礎 Step関数のグラフで言えば‥ 入力 出力 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

121.

ディゾルブマテリアルの基礎 光らせたいのはココ！ 入力 出力 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

122.

ディゾルブマテリアルの基礎 つまり発光用にこのようなグラフを作ればOK 入力 出力 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

123.

ディゾルブマテリアルの基礎 マスクの閾値にエッジ幅を足して‥ エッジ幅 Threshold Threshold ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

124.

ディゾルブマテリアルの基礎 OneMinusで反転するだけ Threshold Threshold ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

125.

ディゾルブマテリアルの基礎 実際の構成はこんな感じ 色を与える 反転 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

126.

ディゾルブマテリアルの基礎 ディゾルブのマスクを複雑にしたい場合 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

127.

ディゾルブマテリアルの基礎 この３つのテクスチャをどう掛け合わせる？ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

128.

ディゾルブマテリアルの基礎 例えば掛け算だと全体的に暗くなってしまう ０～１の範囲同士で掛け算するので真っ白じゃない限り暗くなる ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

129.

ディゾルブマテリアルの基礎 そこで３つを足して最後にその分割るのがオススメ つまり平均値にしている ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

130.

ディゾルブマテリアルの基礎 掛け算と足して平均を出す場合の比較 ▲掛け算は緩急がキツい ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

131.

ディゾルブマテリアルの基礎 指向性も欲しい場合 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

132.

ディゾルブマテリアルの基礎 指向性のあるグラデーションを足してやれば良い その分、割る数を増やすのを忘れずに ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

133.

ディゾルブマテリアルの基礎 指向性のあるグラデーションを足した結果 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

134.

ディゾルブマテリアルの基礎 もっと指向性を出したい！ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

135.

ディゾルブマテリアルの基礎 指向性のあるグラデーションの値を大きくしてやれば良い つまり影響度を増やす / その分、割る数を増やすのを忘れずに（０除算対策も） ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

136.

ディゾルブマテリアルの基礎 指向性のあるグラデーションの強さの比較 ▲強さ１ ▲強さ２ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved. ▲強さ３

137.

ディゾルブマテリアルの基礎 幾何学模様でディゾルブ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

138.

ディゾルブマテリアルの基礎 例えばこんなテクスチャをマスクに使えば‥ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

139.

ディゾルブマテリアルの基礎 規則的な形で削ることができる ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

140.

ディゾルブマテリアルの基礎 タイリング数を増やした場合 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

141.

ディゾルブマテリアルの基礎 こういったテクスチャを作る方法としては‥ • Photoshopでグラデーションツールを使う • MayaやHoudiniで頂点カラーを使う • Substance DesignerでShapeノードを使う • etc... ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

142.

ディゾルブマテリアルの基礎 Photoshopのグラデーションを使う場合は滑らかさを０に 緩急の無いリニアなグラデーションで塗るため ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

143.

ディゾルブマテリアルの基礎 グラデーションとパターンとノイズをミックスした場合 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

144.

ディゾルブマテリアルの基礎 ディゾルブマテリアルの基礎は以上 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

145.

• アジェンダ Houdiniと頂点カラーを使った応用例 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

146.

Houdiniと頂点カラーを使った応用例 みんな大好きなメッシュが集まってくる表現 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 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

147.

Houdiniと頂点カラーを使った応用例 試してみた ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

148.

Houdiniと頂点カラーを使った応用例 悩むのは２点 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

149.

Houdiniと頂点カラーを使った応用例 六角形パーツごとの「拡大縮小」と「エッジ発光」 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

150.

Houdiniと頂点カラーを使った応用例 Vertex Animation Texture？ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

151.

Houdiniと頂点カラーを使った応用例 ここではどちらも頂点カラーで解決 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

152.

Houdiniと頂点カラーを使った応用例 かもそばさんがツイートされた 手法で解決できる！ https://twitter.com/rn49rn49/status/1269629754371534849 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

153.

Houdiniと頂点カラーを使った応用例 Houdiniでモデルを用意 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

154.

Houdiniと頂点カラーを使った応用例 ざっと解説 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

155.

Houdiniと頂点カラーを使った応用例 Sphereを作成、TypeをPolygonにする ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

156.

Houdiniと頂点カラーを使った応用例 Divideノードに繋げてCompute DualをONにする ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

157.

Houdiniと頂点カラーを使った応用例 Attribute Wrangle で面ごとにIDを振る ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

158.

Houdiniと頂点カラーを使った応用例 Foreach で六角形ごとに処理をする ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

159.

Houdiniと頂点カラーを使った応用例 PolyExtrude で内側に押し出し ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

160.

Houdiniと頂点カラーを使った応用例 Color で中心を黒く塗る ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

161.

Houdiniと頂点カラーを使った応用例 GroupPromote で中心点をPointグループに ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

162.

Houdiniと頂点カラーを使った応用例 Fuse で中心点を１つに結合 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

163.

Houdiniと頂点カラーを使った応用例 Normal で法線を再計算 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

164.

Houdiniと頂点カラーを使った応用例 これでほぼ完成 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

165.

Houdiniと頂点カラーを使った応用例 一応UVも‥ UV TextureのFaceで六角形ごとに開く ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

166.

Houdiniと頂点カラーを使った応用例 UV Layout（デフォルト設定）で敷き詰める ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

167.

Houdiniと頂点カラーを使った応用例 Attribute Transfer で開いたUVをForeachの結果に適用 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

168.

Houdiniと頂点カラーを使った応用例 ExplodedView で面が分離されているか確認 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

169.

Houdiniと頂点カラーを使った応用例 FBXで出力してUE4へインポート ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

170.

Houdiniと頂点カラーを使った応用例 次にマテリアルを作成していく まずは六角形パーツごとの拡大縮小 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

171.

Houdiniと頂点カラーを使った応用例 頂点カラーに対してStep関数を使うだけ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

172.

Houdiniと頂点カラーを使った応用例 そしてエッジの発光 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

173.

Houdiniと頂点カラーを使った応用例 頂点カラーに対してStep関数を使うだけ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

174.

Houdiniと頂点カラーを使った応用例 ２つの構成を合体、エッジの太さを調整可能に ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

175.

Houdiniと頂点カラーを使った応用例 今は全体が一律で拡縮してしまうので 右から左へ流れるようにしたい ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

176.

Houdiniと頂点カラーを使った応用例 World座標からX軸で０-１グラデを作って利用してみる ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

177.

Houdiniと頂点カラーを使った応用例 ０or１のマスクではダメ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

178.

Houdiniと頂点カラーを使った応用例 境界をぼかすためにSmoothstep関数に変更 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

179.

Houdiniと頂点カラーを使った応用例 うまくいった！ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

180.

Houdiniと頂点カラーを使った応用例 X軸方向へ流れ続けるように改造 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

181.

Houdiniと頂点カラーを使った応用例 グラデ幅を自由に変えられるよう改造 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

182.

Houdiniと頂点カラーを使った応用例 ３つの幅を考慮して２つのSmoothstepを掛け合わせた Min Max Max Min ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

183.

Houdiniと頂点カラーを使った応用例 ３つの幅を考慮して２つのSmoothstepを掛け合わせた Min Max Max Min ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

184.

Houdiniと頂点カラーを使った応用例 これで一旦やりたかったことはできた ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

185.

Houdiniと頂点カラーを使った応用例 両面に設定して 外側から集まってくる ようにWPOも追加 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

186.

Houdiniと頂点カラーを使った応用例 これでとりあえず完成（あとは用途に合わせて） ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

187.

Houdiniと頂点カラーを使った応用例 Houdiniと頂点カラーを使った応用例は以上 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

188.

• アジェンダ シンプルで手軽な質感表現 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

189.

シンプルで手軽な質感表現 Masked で質感を与えてみる ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

190.

シンプルで手軽な質感表現 Metalic や Roughness をマスクテクスチャで少し変えるだけ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

191.

シンプルで手軽な質感表現 これだけでも案外リッチに見えたりもする ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

192.

シンプルで手軽な質感表現 ノーマルマップも使いたいが 試作時に用意が面倒な場合‥ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

193.

シンプルで手軽な質感表現 適当なテクスチャを TextureObject に変換して NormalFromHeightmap を使うのもあり ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

194.

シンプルで手軽な質感表現 NormalFromHeightmapのみ接続したもの ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

195.

シンプルで手軽な質感表現 NormalFromHeightmapを参考にディゾルブに厚みを追加 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

196.

シンプルで手軽な質感表現 余談 ノーマルマップ同士のブレンド ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

197.

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

198.

シンプルで手軽な質感表現 ディゾルブでノーマルを遷移させたり ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

199.

シンプルで手軽な質感表現 ノーマルが浮き出てくるような見た目に ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

200.

シンプルで手軽な質感表現 Translucent で質感を与えてみる ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

201.

シンプルで手軽な質感表現 ノーマルを使った屈折にディゾルブを入れたり ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

202.

シンプルで手軽な質感表現 屈折が浮き出てくるような見た目に ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

203.

シンプルで手軽な質感表現 複雑なマスクを組んでディゾルブを入れたり ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

204.

シンプルで手軽な質感表現 Step と Smoothstep の比較 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

205.

シンプルで手軽な質感表現 環境マップを入れてみたり ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

206.

シンプルで手軽な質感表現 環境マップをフレネルでマスクしてみたり ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

207.

シンプルで手軽な質感表現 フレネルあり無しの比較 ▲疑似環境マップをFresnelでマスク ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

208.

シンプルで手軽な質感表現 Cubemap が手元に無ければ EngineContent にもある ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

209.

シンプルで手軽な質感表現 Translucent でもフェイク表現も含め 色々と質感を与えることはできる ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

210.

シンプルで手軽な質感表現 質感表現については以上 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

211.

• アジェンダ 魔法陣作例のメイキング ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

212.

魔法陣作例のメイキング 制作過程ベースでお話する ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

213.

魔法陣作例のメイキング マテリアルでの制作TIPSとしては ほとんどすでにお話した内容の合わせ技 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

214.

魔法陣作例のメイキング 最初に VFX Art Dive のお話をいただいて‥ 何となくディゾルブをテーマに考え始めた ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

215.

魔法陣作例のメイキング 手元でディゾルブマテリアルを軽くテストしつつ ディゾルブが映えるエフェクトを検討 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

216.

魔法陣作例のメイキング Houdini・ZBrush・SubstanceDesigner などは不要で誰でも簡単に真似できるもの もちろん使えると表現の幅が増えるが、無しで大丈夫というのがコンセプト ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

217.

魔法陣作例のメイキング 立体形状で質感のある魔法陣に決める 立体であればライティングによりお手軽に見栄えが上がる ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

218.

魔法陣作例のメイキング １. よく見かける魔法陣とはデザインを変えたい ２. 和風の要素を入れたい ‥という漠然とした状態でスタート ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

219.

魔法陣作例のメイキング 資料をPinterestでピンしていきつつ Vimeoなど色々漁りつつ‥ 特に刺激を受けたものをピンしたり、モーショングラフィックス系の動画を観たり ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

220.

魔法陣作例のメイキング 素晴らしい作品に少しでも近づけるよう 理想は高く・目を肥やすことを意識して資料を閲覧 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

221.

魔法陣作例のメイキング ラフスケッチしながらアイデアを練りつつ‥ ４つの柱が四季を表し‥など色々考えたが制作時間重視でシンプルに‥ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

222.

魔法陣作例のメイキング 質感とディゾルブをテストしつつ‥ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

223.

魔法陣作例のメイキング シンプルなモデルだけで大まかな形を決めて ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

224.

魔法陣作例のメイキング 白・黒・金・赤ベースでマテリアルを作成してざっと適用 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

225.

魔法陣作例のメイキング 形状を整えたモデルを改めて用意してシーンに配置 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

226.

魔法陣作例のメイキング 床のデザインを起こして ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

227.

魔法陣作例のメイキング 全体的に色と形状を整えて完成イメージとした ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

228.

魔法陣作例のメイキング 制作したモデルはたったこれだけ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

229.

魔法陣作例のメイキング ここから出現演出に ディゾルブをふんだんに入れ込んでいく ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

230.

魔法陣作例のメイキング とりあえず床の拡大アニメーションを入れてみつつ‥ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

231.

魔法陣作例のメイキング 床モデルを使ってディゾルブを色々とテスト ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

232.

魔法陣作例のメイキング UV座標のUとVを足して斜め方向のグラデーションを利用 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

233.

魔法陣作例のメイキング さらにピラミッド状のマスクテクスチャを追加 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

234.

魔法陣作例のメイキング エッジ発光側のStep関数にはテクスチャを反転して入力 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

235.

魔法陣作例のメイキング エッジ発光側はSmoothstep関数でグラデ幅を持たせる ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

236.

魔法陣作例のメイキング SmoothstepをOneMinusで反転させてグラデーションに Opacity Mask用 Threshold ©2020 SQUARE ENIX CO., LTD. All Rights Reserved. Emissive用 Min Max

237.

魔法陣作例のメイキング 模様のマスクテクスチャを使って緑に光らせる ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

238.

魔法陣作例のメイキング ピラミッド状のテクスチャのタイリング数を極端にしてみる ▲タイリング UV=１ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved. ▲タイリング U=１, V=10

239.

魔法陣作例のメイキング 別のマスクテクスチャで黄色く発光させるモデルを併用 拡大しながら黄色く発光するモデル ＞ 赤く発光しながらディゾルブで出現するモデル ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

240.

魔法陣作例のメイキング マテリアルのワイヤーフレーム描画を試してみたり 一瞬見せるくらいならアリかも / こちらを使っている事例をほとんど知らない‥ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

241.

魔法陣作例のメイキング WireframeをONにするだけ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

242.

魔法陣作例のメイキング １ドットのワイヤーフレーム部分のみ描画される？ Opaqueでも使える模様 ▲両面ON ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

243.

魔法陣作例のメイキング ４つの柱のモデルでもディゾルブをテスト Tr a n s l u c e n t + 両 面 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

244.

魔法陣作例のメイキング マテリアルの内容はこのような感じ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

245.

魔法陣作例のメイキング マスクを作成 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

246.

魔法陣作例のメイキング ５つの絵柄を掛け合わせているだけ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

247.

魔法陣作例のメイキング メインの模様を作成 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

248.

魔法陣作例のメイキング テクスチャのUVを別のテクスチャで歪ませている ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

249.

魔法陣作例のメイキング エッジの発光を作成 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

250.

魔法陣作例のメイキング ディゾルブ基礎での説明通り（特に工夫は無し） ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

251.

魔法陣作例のメイキング Opacity用の削りを作成 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

252.

魔法陣作例のメイキング ディゾルブ基礎での説明通り（特に工夫は無し） ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

253.

魔法陣作例のメイキング ここでディゾルブのテストは一旦終えて ４つの柱の出現を正式に作ることに ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

254.

魔法陣作例のメイキング モデルのUVを正式に展開 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

255.

魔法陣作例のメイキング 発光演出の作成 特筆することは特になし ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

256.

魔法陣作例のメイキング リング出現の作成 スペキュラが入ってくれている ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

257.

魔法陣作例のメイキング 柱のリングに使用しているマテリアル ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

258.

魔法陣作例のメイキング ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

259.

魔法陣作例のメイキング 実際のモデルに適用したもの ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

260.

魔法陣作例のメイキング 柱本体出現の作成 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

261.

魔法陣作例のメイキング 柱本体に使用しているマテリアル ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

262.

魔法陣作例のメイキング ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

263.

魔法陣作例のメイキング タイリングをU・Vどちらも細かくした場合 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

264.

魔法陣作例のメイキング タイリングを U=20, V=1 にした場合 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

265.

魔法陣作例のメイキング それから中央のオブジェクトの出現を作成 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

266.

魔法陣作例のメイキング ２つの細いリングに使用しているマテリアル ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

267.

魔法陣作例のメイキング ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

268.

魔法陣作例のメイキング 実際のモデルに適用したもの ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

269.

魔法陣作例のメイキング 太いカップ状のモデルに使用しているマテリアル ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

270.

魔法陣作例のメイキング ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

271.

魔法陣作例のメイキング 実際のモデルに適用したもの SP 1 Elevator Corridor | Substance Share https://share.substance3d.com/libraries/1806 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

272.

魔法陣作例のメイキング 屈折による模様を追加している ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

273.

魔法陣作例のメイキング 使用しているマテリアル ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

274.

魔法陣作例のメイキング ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

275.

魔法陣作例のメイキング 実際のモデルに適用したもの ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

276.

魔法陣作例のメイキング ４つの柱と中央のオブジェクト出現の流れ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

277.

魔法陣作例のメイキング 床の出現演出を追加 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

278.

魔法陣作例のメイキング ディゾルブ無しの床に使用しているマテリアル ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

279.

魔法陣作例のメイキング ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

280.

魔法陣作例のメイキング 実際のモデルに適用したもの ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

281.

魔法陣作例のメイキング ディゾルブありの床に使用しているマテリアル ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

282.

魔法陣作例のメイキング ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

283.

魔法陣作例のメイキング ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

284.

魔法陣作例のメイキング 実際のモデルに適用したもの ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

285.

魔法陣作例のメイキング 実際のモデルに適用したもの ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

286.

魔法陣作例のメイキング 柱の質感変化の作成 ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

287.

魔法陣作例のメイキング 質感変化で使用しているマテリアル ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

288.

魔法陣作例のメイキング ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

289.

魔法陣作例のメイキング 実際のモデルに適用したもの ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

290.

魔法陣作例のメイキング 完成！ ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

291.

魔法陣作例のメイキング 作ったマテリアル ©2020 SQUARE ENIX CO., LTD. All Rights Reserved.

292.

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