概要

連番かつタイリング可能なテクスチャをUE5で再生するときに発生する、切れ目のようなアーティファクトを解決します。

こちらの記事を参考に実装しましたので、本記事は要約した日本語訳程度のものとなります。
https://shaderbits.com/blog/tiling-within-subuv-or-volume-textures

エンジンバージョンはUE5.1を使用しました。

問題点

連番タイリングテクスチャをUE5のFlipBookノードなどで再生すると、タイリングされているにもかかわらず端の方に切れ目が発生します。

テクスチャ上では隣にある次のフレームとのフィルタリングが行われてしまうのが原因のようです。

解決方法

これを回避するため、あらかじめ各フレームの端にタイリングされたピクセルを追加します。
要はフレームごとに少しだけ縮小させればいいだけです。

以下は解像度64x64の4フレームあるテクスチャの例です。

フレームごとにスケールして、余分なピクセルを持たせます。

テクスチャの作り方によって変化しますが、以下のような計算で縮小します。

スケール = (パディングテクセル + フレームテクセル) / フレームテクセル

解像度64x64Pixelの4フレーム(1フレーム16Pixel)であれば以下のようになります。

スケール = (パディングテクセル + 16) / 16

パディングに追加するテクセル数次第で綺麗にタイリングできるMip数が変わります。
片側のパディングテクセルが1の場合、1つ目のMipまで
片側のパディングテクセルが2の場合、2つ目のMipまで
片側のパディングテクセルが4の場合、3つ目のMipまで
といった感じで綺麗に処理できるMip数が増えていきますが、パディングテクセルに面積を奪われることになるため、増やすほど解像度が犠牲になっていきます。

この辺はお好みですが、3つ目のMipまでにしておくのが無難なようです。

UE5でのセットアップ

テクスチャ作成の際に縮小した分を、今度は拡大してあげる必要があります。
つまり先ほどとは逆の計算を行います。
スケール = フレームテクセル / (フレームテクセル + パディングテクセル)

更に中心からスケールを行うためにオフセット値をAddします。
オフセット = 0.5 * パディングテクセル * (1 / フレームテクセル )

Mipはこのままだと正しく計算されない場合があるため、Texture SampleのMipValueModeをDerivativeモードに変更し、元のUVからDDX DDYで計算してあげます。

これでシームレスな連番再生が可能となりました。

最終的なマテリアルグラフのサンプルを以下にアップしてあります。
4096x4096Pixel 8x8アニメーションの例です。
https://blueprintue.com/blueprint/3c1r7uwc/

参考

Tiling within subUV or pseudo-volume textures
https://shaderbits.com/blog/tiling-within-subuv-or-volume-textures