環境：UE5.4
作成マテリアル：M_Lerp_Basics, M_Lerp_Numbers, M_Lerp_GradientMask

前書き

Lerp（Linear Interpolate)は線形補間のことです。UIのシェーダーではほぼ毎日使用しますのでしっかりと解説し、覚えていただければこれから非常に役に立つノードになると思います。

Lerpのご紹介

Lerpノードにはこのように「A」と「B」と「Alpha」のインプットがあります。

「A」と「B」が始点と終点、「Alpha」値が「現在地」だと思ってください。「Alpha」の値は「A」と「B」の間に動かせるスライダーのようなもので、「Alpha」値が「A」か「B」と同様な数値になると、同じ位置にあることを示します。

少し分かりづらいので以下の図を用意しました。
「A」以下、「B」以降の数値はありません。必ず「A」と「B」の間に「Alpha」がスライダーのように左右に移動します。

デフォルト値は「A」が「0」、「B」が「1」ですが、任意の数値に設定することが可能です。
数値だけではなく、テクスチャも「Lerp」に接続できます。

Lerpの初使用

無料素材の猫を用意しました。プロジェクトにおいておきましたので、使っていただいても構いません。

「A」に犬のRGB値を、「B」に猫のRGB値をつなげます。

「Alpha」の値はデフォルトで「0.5」に設定されているため、AとBのちょうど中間の値になります
気がついたかもしれませんが、LerpがAとBの表示をブレンドします。

Photoshopでの解説

私はLerpを理解するのに時間がかかり、当時ある同僚がPhotoshopの例を挙げてくれたことで、スムーズに理解でき、使いこなせるようになりました。そのため、数学や理論が苦手な方におすすめです。

「A」と「B」のレイヤーを作成します。「B」のレイヤーの透明度を「50％」にします。
上記の実例と完全に同様の結果が得られます。

デザイナーの視点からみると、**「「Alpha」値は「B」の透明度である」**と言えます。これでLerpの「Alpha」という概念も理解しやすいのでしょう。

では、UE5に戻り「Alpha」の数値を調整してみます。「0.0」にしたら犬（A）が「100%」の透明度で表示され、猫（B）が「0%」の透明度になるため、表示されなくなりました。（Alpha値 = A値の場合です）
「1.0」に変更してみると、猫の透明度が「100%」になり、今回は犬が表示されなくなりました。

Timeノードを追加

「Time」と「Sine」を追加すれば、「0」と「1」の間に行ってきたりするアニメーションを作成することができます。
「ConstantBias」は「Sine」の動きを調整します。以下のように設定してください。
（Sineに関する解説はこちらに）

「ConstantBias」の「Bias」を「1.0」に設定し、「Scale」を「0.5」に設定します。

実例

これまでテクスチャを使用して解説してきましたが、数値を使用する頻度も高いです。点滅アニメーションや、色と色のトランジションもLerpを使用します。

たとえば、色パラメーターを2つ作成し、このようにつなげることで、色が徐々に変化するアニメーションを作成できます。

色の代わりに、デフォルト値である「0」と「1」にTimeノードを適用すれば、白と黒のトランジションができて「点滅効果」を得られます。

グラデーションの作成法

アニメーションの他に、「Lerp」の「Alpha」値にマスクを適用すると、「B」の内容がマスクされます。マスクの黒い部分は「A」を表示し、白い部分は「B」を表示します。（白=1, 黒=0)

シンプルな「グラデーションマスク」を作ってみましょう。
UVTexCoordノードを使用すれば、マスクのテクスチャは不要です。UVの「U」（赤いチャンネル）の抽出することで、マスクを作成できます。
そのため、「ComponentMask」ノードを再び使用します。

ノードを追加してから選択した後、Detailsパネル内で「G」のチェックを外します。

「Lerp」の「Alpha」に「ComponentMask」の出力値を繋げればこのようになります。

「A」と「B」は既に「0」と「1」でしたので何がマスクされたかは確認しにくいです。
「A」と「B」に色やテクスチャを設定すれば、マスクが正しく適用されることを確かめられます。

色のの場合

テクスチャの場合

これでLerpが使いこなせるはずですので、色々試して納得するまでたくさん試行錯誤してみてください。