VFXアーティストブログ

VFXアーティストが気になったことを好きに書いていくブログ

SubstanceDesignerのHistogramSelectをUE4でやってみる

お久しぶりです
最近はいそがしくなかなか更新できませんでした
SubstanceDesignerをVFXでも使えないかと模索しております
そこでSDにある「HistogramSelect」が結構便利で
シェーダー作成にも使えないかなと考えました

そもそも「HistogramSelect」とはどういうものかといいますと

グラデーションのあるポイントを選択してコントラストなどを調整できます

f:id:kapunn:20180823233151g:plain

グラデーションさえあれば幅やテクスチャーをスクロールしなくても
このような表現ができます
まぁどんなところに役立つかというのは後述します

まずグラデーションについて考えます
普通の上から下にかけてのグラデーションを数値で考えると
白は「1」黒は「0」なので「1-0」のグラデーションになります

f:id:kapunn:20180823233345p:plain


それをどうやってあるポイントを取得し動かせばよいか
動かすには基本数値を足したり引いたりすると下のような動きになります

f:id:kapunn:20180823233541g:plain


次はあるポイントを取得する方法です
真ん中を取得できればコントラストもいじりやすくていいかもしれません

f:id:kapunn:20180823234818g:plain

 

ではさきほどお見せした「1-0」のグラデーションからどうやってこれをつくればいいでしょうか?
中央部分が明るく上下の端が暗いグラデーションをつくるには
向きが逆のグラデーションを組み合わせるとできそうです

f:id:kapunn:20180823235033p:plain

1つのグラデーションを反転させて向きが逆なのものを作成します

その2つを「Min」で合成します
MINとは2つの色を比較して暗いところを取得します

上下の端の部分はそれぞれ「1」と「0」なので暗いほうの「0」が取得されます
中央部分はどちらも「0.5」なので「0.5」になり
結果敵には「0 - 0.5 - 0」の範囲のグラデーションが出来上がります

よく使うMultiplyで2つを組み合わせてしまうと
「0 - 0.25 - 0」ののっぺりしたグラデーションになり使いにくいです

f:id:kapunn:20180823235511p:plain

先ほど作った「0 - 0.5 - 0」のグラデーションを動かしましょう

こういうノードを組みました
MINより左の部分は先ほど作ったグラデーションの作り方をノード化したものです
それに動かす仕組みを組んでいます

f:id:kapunn:20180824000020p:plain

赤枠の部分が動かす仕組みです
なぜAddとSubtractかというとグラデーションの向きがそれぞれ逆向きなので
同じ向きに動かすために足すと引くを行っています
実際に組んでみるとわかると思います
1つのパラメーターで同時に2つのグラデーションの動きを同じ方向に制御できます

f:id:kapunn:20180824000446p:plain

赤枠の部分がなにをしているかというと
できたグラデーションは「0 - 0.5 - 0」の数値で少々扱いにくいです
そこで「0 - 1 - 0」の範囲に正規化して扱いやすくするためです
「0 - 0.5 - 0」に2をかけると「0 - 1 - 0」になります

f:id:kapunn:20180824000928p:plain

うしろのPowerでコントラストを制御して線の太さを変える仕組みになっています

 

最終的にこのように位置とグラデーションの太さを調整できるマテリアルができました

f:id:kapunn:20180824001757g:plain

じゃぁこれがどういうところに使えるかというと

グラデーションを動かしたいけど絵が複雑だからスクロールでは無理な場合とかですね
具体的にはしたの動画をご覧下さい

youtu.be


スクロールではないのでUVに依存することなく
いろんな方向にグラデーションを動かすことができるので
結構面白いマテリアルなんじゃないでしょうか?

ではまた

UE4セミナー

お久しぶりです
先日UE4セミナーに登壇させていただきました
そこでまたMaterialのことについてお話ししました
その時の資料がこちらです

www.slideshare.net

 

ほとんどエディターを見ながらの説明なので資料にはあまり書いていないですが
今回使用したマテリアルを公開します

OverwatchMaterial.zip - Google ドライブ

 

GodofWar4のマテリアルはMokoさんのほうがスマートなのでそちらをぜひご覧ください

フローマップとは_公開版.pptx - Google ドライブ

 

登壇した側もとても勉強になったセミナーでした

主催のalweiさんも本当にお疲れ様でした

ありがとうございました

 

Osaka Creative Meeting

お久しぶりです
何と先日セミナーに登壇させていただきました

セミナーではUE4を使ったマテリアルエフェクトのお話をさせていただきました

みんなに楽しんでもらえるかとっても不安でしたが

意外とエフェクトっておもしろいという意見を頂いて

やってよかったなと思えた一日でした

 

当日のスライドをアップしておきます

www.slideshare.net

 

Substance Designerのデータも上げておきます

Rain.sbs - Google ドライブ

 

動画の方はまた後日アップしますね

 

そしてチュートリアルのリクエストを頂いたので

作りますー

これ↓

www.youtube.com

 

 

では

メッシュにアルファ情報を付けてUE4に出す方法

ご無沙汰しています
仕事が忙しくてなかなか書けていませんでした

 

前回のUVスクロールの記事にコメントで質問を頂いていたので書いてみます

 

Mayaとかでメッシュに適当にアルファ情報を書いてみました

f:id:kapunn:20171119014339j:plain

 

そしてUE4にインポートするときの注意点ですが
Vertex Color Importのところ

最初はIgnoreになっているのでReplaceにします

f:id:kapunn:20171119013948j:plain

 

まぁ後からでもMeshの詳細で変えられますf:id:kapunn:20171119014801j:plain

 

あとはマテリアルでTranslucentにして

VertexColorをオパシティにつなげるだけです

f:id:kapunn:20171119014212j:plain

 

こんな感じになります

f:id:kapunn:20171119014154j:plain

 

マスクをグラデーションにしたりするときれいにフェードアウトした感じで消えてくれますよ

 

簡単な記事でもうしわけないですが

これでできるはずです

 

ではー

遊戯王のカード演出真似してみた

お久しぶりです

なかなか時間が取れずやっと10月の更新ができました

最近会社で1人で遊戯王のアプリで遊んでいたら周りの人も始めて

一気に社内で流行りだしました
カード演出がきれいで好きなので

今回それを真似して作ってみました

ゲーム内の演出は下のGIFです

f:id:kapunn:20171030000413g:plain

 

今回作ったのがこれ

youtu.be

カード周りに入っているエッジの光り方

周りの光彩のフェクトなど

まぁまぁ真似出来ているでしょうか

 

 

メッシュはこんな感じ

カード自体のメッシュ

f:id:kapunn:20171029222048p:plain

カード周りの光彩のメッシュ

UVを長方形にすることでテクスチャーをスクロールしたとき

カードの周りを光彩が回転しているようになります

f:id:kapunn:20171029222042p:plain

エッジのメッシュ

これも上と同じようにUVを長方形にすることで
テクスチャーをスクロールするとカードのエッジに沿って動いてくれます

f:id:kapunn:20171029222046p:plain

 

エッジのマテリアル

f:id:kapunn:20171029230354p:plain

f:id:kapunn:20171029230510p:plain

最後にSmoothStepでDissolveEffectのように使っているTextureによって

設定しているMaxとMinの範囲内でグラデーションをつくり

エッジが欠けているている感じを出しています

f:id:kapunn:20171029222810j:plain

 

光彩のエッジはただ単に2枚のテクスチャーをそれぞれ反対方向にスクロールさせているだけです

そしてPowerなどでコントラストを調整できるようにしています

またDynamicParameterを接続することによって

Cascade上でスクロールの調整をおこなっています

f:id:kapunn:20171029225944p:plain

f:id:kapunn:20171029225946p:plain

最後にCascade上でそれぞれの要素を配置して完成です

f:id:kapunn:20171029230043p:plain

 

今回使ったテクスチャーはこんな感じです

f:id:kapunn:20171029225315j:plain

f:id:kapunn:20171029225317j:plain

 意外と光彩をきれいに出すのが難しかったです

 

ではまた

 

 

 

 

UV Scroll Mesh Effect シュルッと解けるようなエフェクト

どうも

以前ある方に初心者向けにやってほしいと言われまして

今回はUVスクロールを使ったエフェクト作りを紹介しようと思います

制作したのはこれ↓

ブレイクダウンすでに入れてますが

youtu.be

 

細かく紹介します

まずメッシュはこういう感じのものです

板ポリをベンドで少し膨らみをつけてカーブに沿って変形させただけです

f:id:kapunn:20170926233557j:plain

これがUV

f:id:kapunn:20170926233629j:plain

 

これでメッシュの用意は完了

次はマテリアルです

全体図

f:id:kapunn:20170927004003j:plain

上のグループ

ここではテクスチャーの角度を変えられるようにしていますがなくてもいけます

スクロールさせるにはいろいろ方法がありますが今回はカスケードで速度をいじれるようにDynamicParameterを使っています

f:id:kapunn:20170927003651j:plain

下のグループ

ここでは上のグループのテクスチャーに表情に変化をつけるために組んでいます

f:id:kapunn:20170927003729j:plain

最後のつなぐところ

ここではカラーをCascadeでいじれるようにParticleColorをカラーとオパシティの部分をmultiplyでかけています

これでエフェクトのColor Over Lifeなどで変えられます

f:id:kapunn:20170927003830j:plain

 

Cascadeでの設定です

ますはMeshDataの設定

Roll Pitch Yaw Rangeにこのように数値を入れると

傾きながらローカル軸で回転させられます

どういうことかはこれを見てください

youtu.be

f:id:kapunn:20170927004742j:plain

Lifeは好きな感じに設定してください

Initial Sizeの設定

Uniformにすることで

MaxとMinの数値の幅からランダムに取ってくれます

Use Extremesにチェックを入れるとMaxかMinの数値どちらかだけになります

f:id:kapunn:20170927005012j:plain

Color Over Life

カラーではAlphaのところで

フェードインしながら最後フェードアウトするようにしています

f:id:kapunn:20170927005025j:plain

Size by Lifeの設定

最初は高さを持って出現し

最後はぺったんこになりつつ円の半径がじわっと広がって行くように設定しています

f:id:kapunn:20170927004950j:plain

Inital Mesh Rotationの設定

ここではある程度の角度の範囲で角度をつけて出現するようにしています

マイナスの値をMinに入れることで反転して出現するようになり

よりランダム性が増します

f:id:kapunn:20170927004852j:plain

Inital Mesh Rotation Rateの設定

傾きを保ったままローカル軸で回転させています

f:id:kapunn:20170927004909j:plain

DynamicParameterの設定

Y方向のみスクロールさせています

ポイントはDynamicParameter使う時

InValが1.0のとき(アニメーション終わりのとき)

1にせず0.99にしたほうがいいみたいです

f:id:kapunn:20170927004935j:plain

 

これで今回作ったようなエフェクトになります

メッシュの形状を今回のような形にすることで紐がシュルシュルっとほどけたような面白いエフェクトになります

Size by Lifeで高さを持った状態からすぐにぺったんこにして

円が広がるように半径をじわっと大きくしていくと

メリハリがついた見てて気持ちのいいアニメーションになります

いろんなメッシュを作って試してみてください

もちろんテクスチャーを変えることでもっと表現の幅が広がります

 

 今回は以上ですー

では

ハーフトーンのグラデーションの作り方

ハーフトーングラデーションってジャンルで合ってるのかわからないですが

普通のグラデーションというわけではなく

ドットでできたグラデーションをイメージしてもらったわかると思います

まぁこういうやつです↓

f:id:kapunn:20170923005915j:plain

これをパラメーターで調整かけられるようにして

アニメーションさせようというものです

 

今回作成したのがこれ

youtu.be

 

マテリアルはすごいシンプルです

はてなブログはなんか画像が圧縮されるのか

少し小さくなって表示されてしまうみたいで

もし見にくかったらYoutubeの方をみてください

f:id:kapunn:20170923010449j:plain

 

ポイントは「Floor」ノードです

これは最小の整数へ切り捨てするもので

例えば2.6なら2.0になります

これを利用することでドットのグラデならドットのサイズを変化させながらグラデを作ることができますし

前回の記事のラインがだんだん太くなって現れるアニメーションも作れます

その際テクスチャーを1-0の完全な白黒じゃなく

すこしブラーがかかったというか中間トーンが入っていると面白い表現になります

f:id:kapunn:20170923011044j:plain

 

いろいろテクスチャーを変えて遊んでみてくださいー