環境：UE5.4
作成マテリアル：M_Step_Gauge, M_SmoothStep_Gauge, M_Step_Texture

前書き

「Step」と「SmoothStep」はマスクや明度の調整などに使用します。UIでは、使用頻度が非常に高いので「Lerp」ほどに大切にしましょう。たとえば、ゲージのマスクの作成に「Step」が必要になります。

Photoshopで言うと、「Step」の効果は「色域指定」ツールに近い挙動をします。
ピックアップした領域の色域が選択されます。そして、「許容量」スライダーは指定した値の前後を許容するパラメーターです。これは「SmoothStep」の効果に近いです。

Photoshopの色域指定ツール

セオリー

「Step」のセオリーを見ていきましょう。
「Step」のインプットには「Y」と「X」があります。
「Y」には入力する関数もしくはテクスチャで、「X」には比べる値（閾値）です。

「Y」が「X」より以下もしくは同様な数値になると1.0結果になります（白）
「Y」が「X」より以上な数値になると0.0結果になります（黒）

このように条件が書けます

トッグルボタンのように、ON/OFFができる強い仕組みです。

下記は入力値と出力値を表す図です。「Y」が「X」を超えない限り、出力値が「1.0」のままです。超えた瞬間に「0.0」になります。

「Y」は負の数であっても、「ｘ」を超えない限り、出力値がずっと「1.0」です。

出力値の挙動

閾値「X」を動かし、出力値「Y」が異なります

「X」を動かしてみると、Y軸とX値の間の幅はゲージのように見えますね。その情報を使い、ゲージを作成できます。
「Step」の図は「階段」のような形状をしています。名前の由来になったかもしれません。

---

実例としては「Step」ノードを置いて「Y」と「X」に様々な値を入力し、結果を確認しましょう。

「Y」が「X」を超えるとプレビューが黒くなります（結果値が「0.0」になるため）

ゲージを作成してみよう

[使用マテリアル：M_Step_Gauge]

本編に入ります。

「Lerp」の章で作成したグラデーションマスクのマテリアルのノードを持ってきます。「Step」の「Y」にComponentMask（R）をインプットし、「X」に「0.5」を入力します。

この「0.5」がゲージの進捗具合を示します。ゲージの進捗は丁度半分の位置にあります。「0.5」以下では白い部分が減り、「0.5」以上で白い部分は増えます。

GPUは各ピックセルの色を決めるために、マテリアルのノードを読み込み、計算により出力された色でピックセルを一つずつ塗っていきます。
ComponentMask(R）のグラデーションのすべての座標の色を読み込み、出力された色で塗り直します。そうすることで、グリッドの左側が白く、右側が黒くなります。

GIFでのグリッドはあくまでイメージです。本来は処理範囲がもっと細かいです。

上記の例では「X」の数値が固定でした。今回は「X」値を「Time」ノードで動かしてみます（Lerpの章で説明した方法と同じです）。

そうすると、ゲージが「0～1」の間で動くようになりました。

テクスチャを使用した場合

[使用マテリアル：M_Step_Texture]

猫のテクスチャを「Desaturation」ノードを通して「Step」につなげます。「X」にはいくつかの数値を試してます。

プレビューでは、猫の最も明るい部分は「X」を超えていれば黒く塗られます。
猫に含まれる灰色の部分がかなり暗いため、「X」が低ければ低いほど、より多くの灰色の部分が「X」を超えて黒くなり、猫の輪郭がはっきり見えるようになります。

先程の「Time」ノードを使ったアニメーションを「X」値に戻すと、猫の輪郭が変化するアニメーションを作成できます。
今回は猫のテクスチャを使用していますが、このようなアニメーションは「ディゾルブエフェクト」によく使用されます。

まとめると、このように「X」の調整幅によって、画像内の白黒の領域が変化します。

「Step」はこれで以上です。

SmoothStep

[使用マテリアル：M_SmoothStep_Gauge]

「SmoothStep」は「Step」とほぼ同じ挙動をしますが、白か黒しか出力しない「Step」と違い、SmoothStepには「許容量」が存在します。つまり、0と1の間のグラデーションの灰色を出力できます。（高いコントラストを滑らかにするように）

「X」の代わりに「Min」と「Max」があり、数値の範囲を定義できます。
この範囲内ではさまざまな灰色が存在し、閾値が滑らかになります。
「Min」と「Max」の間の範囲が狭ければ狭いほど、「Step」の結果に近づきます。

前回と同様に、ComponentMask(R)に「SmoothStep」を適用してみます。「Min」と「Max」を同じ値にすると「Step」と完全に同じ結果になります。
逆に、範囲を広くすると（「Min」を「0」、「Max」を「1」に設定した場合）、Step/SmoothStepを適用しなかった場合と同じように、出力結果には変化がありません。

「SmoothStep」はPhotoshopのレベル補正ツールに非常に似ています。
左の矢印が「Min」、右の矢印が「Max」、そして中央の矢印は「Step」の「X」値に近いイメージです。
あくまでイメージをしやすくするために挙げた例に過ぎません。

「SmoothStep」を使ってゲージも動かせます。閾値を変動させるためには、「Min」と「Max」を同時に調整する必要があります。しかし、閾値のグラデーションの具合を固定したいです。その場合は、「Max」を「Min+α値」に設定します。このように、「Max」が「Min」に依存することで、変数を一つにまとめ、ゲージの進捗調整が容易になります。
また、グラデーションの幅を変更したい場合は、「α値」を調整することで可能です。

α値には「0」を入力すると、「Min」と「Max」が同様になり、「Step」とまったく同じ結果ことだ確認できます。（＝最大のコントラスト）

注意点

「SmoothStep」の出力結果は「Step」と反転になっています。白と黒の部分が真逆になっています。「Step」のゲージと同じようにしたい場合は、処理の最後にOneMinus(1-x)ノードを追加すると、色が反転され、ゲージの動く方向が変わります。

「SmoothStep」はこれで以上です。

「Step/SmoothStep」はUIシェーダー制作で日常的に使用されるので、使いこなせるようにたくさん練習してみてください。