マテリアルラーニング第3回 UI Material Lab SDF Morphing

本記事は Unreal Engine (UE) Advent Calendar 2024 シリーズ3 12/16 の記事です。

UI Material Lab

Unreal Engine の公式には、 UI Material Lab という、UIで使えるマテリアルテクニックをまとめたプロジェクトが存在する。

https://www.unrealengine.com/marketplace/ja/product/ui-material-lab

マテリアルファンクションも多数含まれており、どれも実用的。

今回は、SDF Moprhing について見ていきます。

 

概要

異なる形の図形を滑らかに遷移して表示します。

以下のようなテクスチャを用意します。

RGBAの各チャンネルに各図形が格納されています。

RGBAに各図形を格納

各チャンネルには、[0,255]の値が格納されています。

SDF (Signed Distance Function ) という名前ですが、ここでは負の値を格納していません。ですが、SDFの手法で扱うことが可能です。

 

マテリアルファンクション Lerp_Multiple_Float3 

Lerp_Multiple_Float3 は、複数のVector3入力を補間するノードです。

補間アルファ値として時間を用いることで、時間的に滑らかに遷移する図形を表現できます。

まとめ

SDFといえば、プリミティブな図形(円や三角形)を描画したり、それぞれの図形を滑らかに遷移させたり、論理演算したりできるというイメージでした。

テクスチャをあらかじめ用意しておき、SDFの入力のように使用すれば、あらゆる図形をSDFの手法で扱えることが分かりました。