Unityエフェクトレシピ01 - SFテイストのバリア

はじめに

SFテイストなバリアエフェクトを作ってみました。

今回の記事では、このエフェクトの作り方を紹介したいと思います。

www.youtube.com

 

サンプル(GitHub)

今回のエフェクトはGitHubにて公開しています。

github.com

環境

Unity 2020.1.0b2.33333

Universal RP(Version 9.0)

ShaderGraph (Version 9.0)

Substance Designer 2019

Houdini Version 18.0.287

エフェクトの構成

今回のエフェクトは3つの要素から構成されています。

• オーラ
• ベース
• リング

使用ツール

• Houdini (モデリング)
• Substance Designer (テクスチャ)
• Particle System (Unity)
• Shader Graph (Unity)

エフェクト要素01 - バリアのベース

ノイズテクスチャをUVスクロールさせつつ、ノーマルマップでUVディストーションをかけています。

また、地面に近い部分や、シルエット部分を発光させています(フレネル)

 

発光の作り方

地面付近の発光やフレネルの作り方はUnity道場で丁寧に解説されているので、

そちらをご覧になると良いでしょう。

youtu.be

ShaderGraph

オーラ用に作成したShaderGraphを紹介します。

このShaderGraphは以下のような特徴を持っています

• 地面の付近で発光する
• フレネル(CustomDataで強度をコントロールできる)
• UVディストーション・UVスクロール
• マスクテクスチャあり

 

Unlit Masterノードは以下のように設定しています。

シェーダーパラメータ

シェーダーのパラメータは以下を定義しています。 

シェーダーパラメータ

パラメータ名	説明	タイプ
Fresnel Color	フレネルの色	Color
Power(Fresnel)	フレネルのPowerの指数値	Vector1
Color1	グレースケールが0に近いところにつける色	Color
Color2	グレースケールが1に近いところにつける色	Color
ColorMap	カラーテクスチャ	Texture2D
Power(ColorMap)	カラーテクスチャに対して演算するPowerの指数値	Vector1
UVScroll(ColorMap)	1秒ごとにカラーテクスチャのUVが移動する量	Vector2
MaskMap	カラーテクスチャに乗算するマスクテクスチャ	Texture2D
DistortionMap	カラーテクスチャのUVディストーションに使用するNormalマップ	Texture2D
UVScroll(DistortionMap)	1秒ごとにディストーションマップのUVが移動する量	Vector2
DistortionStrength	UVディストーションの強度	Vector1
GroundLightSize	地面付近の発光の長さ	Vector1
GroundLightStrength	地面付近の発光の強度	Vector1

 

 

マテリアル設定

上記のシェーダーからマテリアルを作成し、パラメータは以下のように設定しました。

 

ColorMap(カラーテクスチャ)

テクスチャは以下のようなものを使用しました。

以下のようなSubstanceGraphで作成しています。

MaskMap(マスク用テクスチャ)

マスク用のテクスチャもほぼ同じものを使用しています。

Distorionmap(ディストーション用テクスチャ) 

ディストーションには以下のようなテクスチャを使用しています。

 

 モデリング(Houdini)

モデルの上側が透けているような半球メッシュをHoudiniで作成します。

これにより、モデルの上部は透けていて、側面はモデルに貼り付けたテクスチャが見えるような表現にすることができます。

アルファの設定部分

vector min, max;
getbbox(min, max);
float t = fit(@P.y, min.y, max.y, 0, 1);
f@Alpha = chramp("alpha_control", t);

ParticleSystemにマテリアルと半球メッシュを適用すると以下のようになります。

エフェクト要素02 - 地面の発光

バリアの球をただ地面に置いただけでは、浮いて見えてしまうので、

発光しているように見えるリング素材を入れておきます。

モデルの作成(Houdini)

Labs Disc Generatorを使って円盤メッシュを作成します。

テクスチャ

発光素材に使用したテクスチャは以下になります。

マテリアル

上記のテクスチャをAdditiveのマテリアルへ登録します。

 

 
マテリアルと円盤メッシュをParticleSystemに設定すると、以下のようになります。

エフェクト要素03 - オーラ

オーラの作り方を紹介します。

作り方

メインのテクスチャをUVスクロールさせつつ、ディストーションマップ(NormalMap)でUVディストーションをかけます。

これを球体のメッシュに貼り付けると以下のようになります。

シェーダーのPower関数を適用し、Powerのパラメータを変化させて形状を削ります。

オーラをたくさん発生させ、回転させると以下のようになります。

今回はUVスクロールの速さ・初期値・ParticleのLifetimeにランダム値を加えることで動きに複雑さを持たせています。

モデリング(Houdini)

Houdiniで球メッシュを作成します。

ShaderGraph

次にオーラエフェクト用にシェーダーを作成します。

シェーダーの特徴は以下になります。

• メインテクスチャのUVディストーション
• フレネル
• メインテクスチャはUVスクロール
• アルファマスク用テクスチャ(UV固定)
• ParticleSystemのStableRandomをテクスチャUVに足してばらつきを持たせる
• ParticleSystemのCustomDataでフレネルの強度をコントロールできる
• テクスチャカラーにPowerをかけて形状を変化させる(PowerのパラメータはCustomDataでコントロールできる)

 

Unlit Masterノードは以下のように設定しています。

シェーダーパラメータ 

シェーダーパラメータは以下のようなものを定義しました。

シェーダーパラメータ

パラメータ名	説明	タイプ
Fresnel Color	フレネルの色	Color
Power(Fresnel)	フレネルのPowerの指数値	Vector1
Color1	グレースケールが0に近いところにつける色	Color
Color2	グレースケールが1に近いところにつける色	Color
ColorMap	カラーテクスチャ	Texture2D
Power(ColorMap)	カラーテクスチャに対して演算するPowerの指数値	Vector1
Tiling(ColorMap)	カラーテクスチャのタイリング数	Vector2
UVScroll(ColorMap)	1秒ごとにカラーテクスチャのUVが移動する量	Vector2
MaskMap	カラーテクスチャに乗算するマスクテクスチャ	Texture2D
DistortionMap	カラーテクスチャのUVディストーションに使用するNormalマップ	Texture2D
UVScroll(DistortionMap)	1秒ごとにディストーションマップのUVが移動する量	Vector2
DistortionStrength	UVディストーションの強度	Vector1

上記のシェーダーから作成したマテリアルのパラメータを以下のように設定しました。

上記のマテリアルでは三つのテクスチャ(ColorMap, MaskMap, DistortionMap)を使用しています。

ColorMap(カラーテクスチャ)

今回は以下のようなオーラ風テクスチャを使用しました。

上記のテクスチャはSubstanceDesignerで以下のようなノード構成で作成しています。

上記では以下の３つのカスタムノードを使用しています。無料です。

• Flow Map Generator https://share.substance3d.com/libraries/2916
• Median Filter Grayscale https://share.substance3d.com/libraries/202
• Refine Noise https://share.substance3d.com/libraries/862

MaskMap(マスク用テクスチャ)

アルファマスク用のテクスチャは以下のようなものを使用しました。

こちらのテクスチャの作りはシンプルで、

Clouds 2 ノードをHistgram Scanで加工し、アルファチャンネルに格納しています。

DistortionMap(UVディストーション用テクスチャ)

ディストーション用のテクスチャは以下を使用しました。

PerlinNoiseをSlope Blur Grayscaleで加工し、ノーマルマップへ変換したものを使っています。

 

Particle System

最後に、オーラのParticleSystemの設定値を載せます。

Mainモジュール

Emissionモジュール

Color over Lifetime モジュール

Rotation over Lifetime モジュール

Custom Dataモジュール

シェーダー側のPowerの指数の係数としてPower Rateを定義しています。

Power Rateの値を増やすとテクスチャの形状が削れていきます。

Renderer モジュール

VertexStreamsでは以下を渡しています。

• AgePercent(パーティクル発生時 : 0 , パーティクルが寿命を迎えるとき : 1)
• StableRandom.x (パーティクルごとに0~1のランダムな値)
• Custom1.xyzw (CustomData1)

マテリアルと円盤メッシュをParticleSystemに設定すると、以下のようなオーラになります。

エフェクト要素04 - リング状のオーラ

モデリング(Houdini)

Labs Disc Generatorノードを使い、リング状のメッシュを作成します。

今回は半径1の球メッシュに少しだけめり込ませる形で使用したかったので、

内半径(Inner Radius)を0.95に設定しています。

マテリアル

エフェクト要素03のオーラで使用したシェーダーからマテリアルを作成します。

マテリアルのパラメータは以下のように設定しました。

Color Map(カラーテクスチャ)

カラーテクスチャには以下のようなテクスチャを使用しました。

上記のテクスチャは、エフェクト要素03に使用した

SubstanceGraphのパラメータを変更することで作成しています。

Mask Map(マスク用テクスチャ)

Distortion Map(ディストーションテクスチャ)

ParticleSystemにマテリアルと円盤メッシュを設定すると、以下のようになります。

完成

要素01 ~ 04を合わせることで、バリアエフェクトの完成となります。