0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@hachiden888

Kurie　VFX Shaderを読む　その１

0
Posted at

Kurie VFX Shader v1.0を読む

https://x.com/Kurie_vfx/status/2051568491682242670?s=20
こちらのVFXアーティスト　kurie　さんの作成されたUE5用マテリアルパックを読んでいこうという記事です。

Kurie VFX Shaderについて

UE5.7.0で作成されたマテリアルパック
基本的なVFXで使用されそうな機能が網羅されています。

インストール方法

https://zenn.dev/kurie/books/4e27d7a6dc84de
詳しくはこちら。
Gitでダウンロード→ZIPを解答→指定のフォルダにデータを格納

フォルダ構造

image.png
ご提示いただいたフォルダ構造は以下の通りです。テキストとしてコピーしてご利用ください。

VFX_Material_Library
├── FX　　　　　　　　　　　　　サンプルのエフェクト
├── Maps　　　　　　　　　　　　サンプルが置かれているイグザンプルレベル
├── Materials　　　　　　　　　マテリアル関係のデータが格納されているフォルダ
│ 　　 ├── ColorCurve　　　　カラーカーブ
│ 　　 ├── Enum　　　　　　　 パラメータ制御に使用されているEnum
│ 　　 ├── Functions　　　　　マテリアル関数
│ 　　├── Instances　　　　　インスタンス
│ 　　└── Master　　　　　　　大元のマテリアル
├── Meshes　　　　　　　　　　　エフェクトで使用するメッシュ
└── Textures　　　　　　　　　　テクスチャ、種類によってフォルダが分かれている
　　　　├── Gradients
　　　　├── Masks
　　　　├── Noise
　　　　├── Shapes
　　　　└── Utility

PJなどによって差異はあっても、ポピュラーめなフォルダ構でした。
5.7あたりからEnumでパラメーターを設定できるらしいのでマテリアル作りに役立ちそうです。

Materials

image.png
マテリアルは大きく分けて4種類

M_DefaultForMesh

StaticMeshに割り当てる標準用マテリアル
image.png
ＵＥデフォルトの灰色のマテリアルだと、ＵＶの向きがわからないなどビューアー上で見たときの構造がわかりにくいためこういったマテリアルが一つはあったほうがいいでしょう。
image.png
データ構造的にはテクスチャを少し補正をかけている感じ。
わたしはこの手のマテリアルにEyeAdaptationを入れていませんでしたが（特に入れない意味はありません）、簡易でエフェクトとして使うときにあったほうがいいかもしれないと思いました。
エフェクト用途だとVertexAlphaを使うこともあるので、私はblendmodeをTrancelusent系にしています。
また、TwoSideの時に裏面では色を変えるなども行ったりします。（半透明＋TwoSideは描画がおかしくなるのでやるかやらないかは悩むところです。）

M_VFX_Basic_AdditiveとM_VFX_Basic_Translucent

image.png

おそらくこの二つはBlendModeが違うだけ。
UE4の時からあるBlendModeなどの分岐によるマテリアルデータの肥大化を防ぐ運用を参考にしてこの構造なのでしょうか？
この後しっかり読ませていただこうと思います。

M_VFX_Refraction

image.png
リフラクションマテリアルです、UEのリフラクションにも大きく分けて2種類
SceneTextureのUVをゆがめるタイプのものと、今回のように屈折を使用するものがあります
image.png

Texture

image.png
Textureはベーシックなマテリアルやメッシュの確認系
シームレスノイズ系を数個
マスク系を数個
と最低限ながらどれも使い勝手のよさそうなものです、私も汎用を作るときはこういったものは最初に用意するように心がけたいです。
image.png
テクスチャは基本的にすべてDefault（DXT1、BC1）のsRGBのものでした、私の場合は白黒テクスチャはクオリティとデータサイズのバランスからBC4のsRGBではないものを使用しますが　ここについてはマテリアルやデータの運用を考える際に方向性を固めておく必要があるでしょう。（Kurie VFX Shaderはしっかりと方向性が定まっているように感じます。）

Textureから読み解く

マテリアルはDXT1のColorで統一することで、マテリアルの構築のしやすさと運用のしやすさを重視ししたものだと見受けられました。
商業向けでしっかりとチューニングできたり運用ルールを定めてくれるような人がいない場合
「とりあえず触ってみようと思った人が、とりあえず触って良好な結果を得られる」とても良い設計だと思います。

読み込んでいく

image.png
M_VFX_Basic_AdditiveとM_VFX_Basic_Translucentはともにこのようにつながれています。
このMF_VFX_Baseというマテリアル関数がこのマテリアルの根幹をなすものだと思います。

MF_VFX_Base

UV編集部分の設計

TextureCoord[0]-UVのフリップ-UVのオフセット-UVの回転-UVのスケール処理

となっています、スケール処理には2種類、単純なスケール処理0.0,0.0が中心になるもの、と0.5,0.5が中心になるものの2種類が用意されている。

オフセット処理はDynamicParameterを使用したものと、Time*Parameterしたものを加算する方式。
Timeでリニアに動かせるし、Timeに乗算されるParameterを０にすればDynamicのみで動かすこともできる。

オフセット、回転、スケール処理は　同じ値を与えても順番しだいで結果が変わるのでこのあたりの設計は重要。

今回の設計だとオフセット、回転、スケールを同時に制御しようとすると結構難しいかも？

これら同様のUV制御がEmissiveMap2種、Opacityに2種ある。

UV Distortionの設計

image.png
UVDistortionは独立したUV編集ができる、ただしMapごとのDistortionは機能を使用するかしないかのみ。
テクスチャがsRGBのテクスチャを前提としているので、それをLinearに変換する処理がある、しっかりと考えられている。
image.png
コントラストを調整できるようになっている。強度調整は入れたことがあるけど、distortionのテクスチャにpowerをかけようと思ったことがなかったので「確かにあってもいいのかも」と思いました。
power周りは式を間違えたり値を間違えるとシェーダーのエラーにつながるので、そのあたりのケアもされていました。
image.png

テクスチャサンプラー周り

image.png
Flipbookを使用するか否か
SpriteでのFlipBookを使用する場合はこのようにSubUV用のサンプラーを使うのが最も手軽。
NiagaraのSubUVはメッシュやリボンで使えたかな…？
FlipBookは機能はONにすると結構大きくインスタンスが変わるみたい
これが
image.png

こう
image.png

いろいろな機能と両立させるのは難しい機能ではあるので割り切ってこうやって設計するのもよさそう。

色調整

image.png
色調整を行い、その結果をブレンドする

image.png

power→乗算→色乗算　この手の計算は先にpowerをしないと変なことになる。　乗算と色乗算は機能としては割とかぶるので一つにまとめてもいいかもしれないし、輝度だけの調整の時に独立していると作業が楽というところもあってちょと悩む。

ブレンド部分

image.png
UEのマテリアルを触っていると、「機能の分岐がTrueとFaulseしかなくて不便」と感じることはよくありました
Enumを使うと
image.png
image.png

このようにパラメーターの数値にラベルを振れるので
簡易的なブレンドの変更などに使えそうです。
とはいえ、計算処理自体は走っているはずなので（UEがシェーダーコンパイル時などのいい感じにしてくれないのであれば）もしプロジェクトで実際に運用するとなった時はエンジニアさんと相談が必要かも。

いつになったらStaticSwitchで複数の静的分岐を作れるのか…

その他の機能部分

フレネル-ParticleColor-Dissolve-VertexColor　ここまではEmissiveColorもOpacityも同じ

フレネル

オーソドックスなフレネルを使う機能　EmissiveColorであれば基本はフチを光らせることがほとんど
image.png

反面、OpacityではCameraVectorとPixelNMormalを使い、さらに補正をかけたものを使用している
image.png
補正なし　
image.png
補正あり
image.png
さらにそれをSmoothStepで調整できるようにしている。　
image.png
この手法であれば数値しだいで反転もできるので応用もきく
image.png
image.png
Lerpでブレンドできるのもリッチだ（自分だとこのあたりは数値の乗算だけのシンプル設計にしそう）
image.png

ParticleColor

特に凝ったことはしてない普通の乗算ですが、こういった機能系はMFでwrapしておくと後で何かあった時にこのMFだけを編集すればよくなるのでMF化しておくことが大事だったりします。
image.png

Dissolve

DissolveはParticleColorのAlphaとは共存しないみたいです。
「消す処理なんだから2種類もいらなくない？」VS「DissolveかけながらAlphaでフェードさせたいときもある」のバトルが起きたりします。
image.png

DissolveのParticleColorのAphaが共存していない場合
image.png
だいたいこのようにAlphaがDissolveの値として使われています。

Dissolveのテクスチャも
UV-Distortion-texture-補正　と他のテクスチャと同じ流れを汲んでいるので扱いやすいです。
image.png
Dissolveの機能は、数年前スクウェア・エニックスの林様がUE4 VFX Art Dive 2020でご登壇された時からよく見かけるようになったSmoothStepを使用したdissolve法が採用されているようです

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

image.png
パラメータ制御を用いた手法ではこの方法が調整と負荷のバランスが取れているのかと思います。

途中で分岐させ、消えるフチの発光処理も作成しています。
image.png
簡易的に組み合わせるとこんな感じ、領域をちょっとずらして反転しているので　フチだけが光るようになります
image.png

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?