環境:UE5.4
作成マテリアル:M_Abs_CurtainMask, M_Abs_DiamondMask, M_Abs_LineThickness
前書き
「Abs」ノードは、マスク作成や形状の輪郭を抽出する際に便利です。数学的には「絶対値関数」と呼ばれています。簡単にいうと、数値の前にある符号を取り除くだけです。
線形関数(y=x)を絶対関数に変えると、「Y」軸上の「負の数→正の数」に変わっていることが確認できます。
「Y」軸が左右対称のカーブを描いています。
例えば、「X」軸の「-0.2」が絶対関数を通すと出力値は「0.2」になり、「5」はそのまま「5」となります。
DESMOSのリンクはこちらです。
実例1:カーテンのようなマスク作成
[使用マテリアル:M_Abs_CurtainMask]
中心からカーテンのように左右にマスクが縮んだり広がったりするアニメーションです。
解説
最初に、UVの原点を中心に移動させる必要があるため、UVから「0.5」を引きます。中心の座標は(0.5,0.5)から(0,0)に変更されます。
プレビューすると緑、赤、黒と黄色が均等に分かれてることがわかります。
以下の図は各座標の計算を確認しました。(-0.2,-0.2)が(0.2,0.2)になり、左右上下に対称となるため、(0.2,0.2)は4箇所に出現しました。
それからComponentMask(R)をかけると中心の縦線を抽出ができます。今まで見てきた「Step」や「Sine」や「Lerp」などを使ってアニメーションを作成します。
実例2:菱形のマスク作成
[使用マテリアル:M_Abs_DiamondMask]
ComponentMask(R)にComponentMask(G)を「Add」ノードで加えると、菱形が作れます。この実例では、「Sine」の移動範囲を調整する必要がなかったため、「Lerp」の処理を取り除きました。
実例3:アウトライン作成
[使用マテリアル:M_Abs_LineThickness]
この実例のために、グレースケールのテクスチャをサクッと作りました。
テクスチャセッティングの圧縮式を「GrayScale」、「sRGB」にする必要はないため、チェックを外します。
実例1で解説した「Abs」と同様にUVから「0.5」を引いて「Abs」をかけます。
「Step」に接続されているパラメーターは、アウトラインの太さに対応しています。
インスタンスマテリアルを作ってパラメーターをいじればこんな感じになります。
アウトラインのエッジが荒いのは、「Step」を使用しているからです。代わりに、「SmoothStep」を使用すればもう少し滑らかなアウトラインに仕上げられると思います。
「Abs」の解説はこれで以上です。