Chapter 15無料公開

🔰Absノード

Yukiya
Yukiya
2024.10.20に更新

環境:UE5.4
作成マテリアル:M_Abs_CurtainMask, M_Abs_DiamondMask, M_Abs_LineThickness

前書き

「Abs」ノードは、マスク作成や形状の輪郭を抽出する際に便利です。数学的には「絶対値関数」と呼ばれています。簡単にいうと、数値の前にある符号を取り除くだけです。

AbsIntroduction.png::Absノード

線形関数(y=x)を絶対関数に変えると、「Y」軸上の「負の数→正の数」に変わっていることが確認できます。
「Y」軸が左右対称のカーブを描いています。
例えば、「X」軸の「-0.2」が絶対関数を通すと出力値は「0.2」になり、「5」はそのまま「5」となります。
AbsFunction.gif::Absのセオリー

DESMOSのリンクはこちらです。
https://www.desmos.com/calculator/lc8xl9p82c?lang=ja

実例1:カーテンのようなマスク作成

[使用マテリアル:M_Abs_CurtainMask]

中心からカーテンのように左右にマスクが縮んだり広がったりするアニメーションです。
20241013_Abs_CurtainMask.gif::開くマスクの動作

解説

最初に、UVの原点を中心に移動させる必要があるため、UVから「0.5」を引きます。中心の座標は(0.5,0.5)から(0,0)に変更されます。
プレビューすると緑、赤、黒と黄色が均等に分かれてることがわかります。
以下の図は各座標の計算を確認しました。(-0.2,-0.2)が(0.2,0.2)になり、左右上下に対称となるため、(0.2,0.2)は4箇所に出現しました。
ExplainAbsSample.png::UV処理の解説

それからComponentMask(R)をかけると中心の縦線を抽出ができます。今まで見てきた「Step」や「Sine」や「Lerp」などを使ってアニメーションを作成します。

実例2:菱形のマスク作成

[使用マテリアル:M_Abs_DiamondMask]

ComponentMask(R)にComponentMask(G)を「Add」ノードで加えると、菱形が作れます。この実例では、「Sine」の移動範囲を調整する必要がなかったため、「Lerp」の処理を取り除きました。
20241013_Abs_DiamonMask.gif::ダイアモンドマスクの動作

実例3:アウトライン作成

[使用マテリアル:M_Abs_LineThickness]

この実例のために、グレースケールのテクスチャをサクッと作りました。
AbsNewTexture.png::新テクスチャ

テクスチャセッティングの圧縮式を「GrayScale」、「sRGB」にする必要はないため、チェックを外します。
Abs_TextureSettings.png::テクスチャセッティング

実例1で解説した「Abs」と同様にUVから「0.5」を引いて「Abs」をかけます。
「Step」に接続されているパラメーターは、アウトラインの太さに対応しています。
Abs_LineThicknessBreakDown.png::アウトラインマテリアル

インスタンスマテリアルを作ってパラメーターをいじればこんな感じになります。

20241013_Abs_LineThickness.gif::アウトラインの太さを調整
アウトラインのエッジが荒いのは、「Step」を使用しているからです。代わりに、「SmoothStep」を使用すればもう少し滑らかなアウトラインに仕上げられると思います。

「Abs」の解説はこれで以上です。