TextMeshPro を常に最前面に表示させる

TextMeshPro の埋め込み問題

テキストを表示させるのによく利用される TextMeshPro ですが,
オブジェクトと被ると埋め込まれて見えなくなる問題が発生します.

f:id:xrdnk:20220226055956p:plain

要件によっては常に最前面に表示させたい場合があります.

Distance Field Overlay

この問題の解決方法としては TextMeshPro 標準アセットに搭載されている TextMeshPro/Distance Field Overlay または
TextMeshPro/Mobile/Distance Field Overlay を利用することで解決できます.

TextMeshPro に標準で割り当てられている Shader は Distance Field の Queue は Transparent ですが,
Distance Field Overlay はその名の通り,Queue が Overlay になっているためです.

f:id:xrdnk:20220226060739p:plain

LiberationSans SDF フォントアセットを複製し,複製物のマテリアルの Shader を
TextMeshPro/Mobile/Distance Field Overlay に変更して比較してみます.

f:id:xrdnk:20220226060806p:plain

上が Distance Field を用いた場合で,下が Distance Field Overlay を用いたテキストです.
描画順が調整され,埋め込み問題が解決されました.

Mobile

Mobile がついているものとついていない Distance Field Overlay があります(Overlay に限らずですが).
Shader の中身を見てみると,Mobile 側では以下のコメントがあります.

// Simplified SDF shader:
// - No Shading Option (bevel / bump / env map)
// - No Glow Option
// - Softness is applied on both side of the outline

// 簡易版のSDFシェーダ。
// Bevel / Bump / EnvMap の Option 設定なし
// Glow の Option 設定なし
// Softness を Outline の両側で適用

f:id:xrdnk:20220226063405p:plain

Inspector で表示されるプロパティの数で比較するとわかりやすいと思います.
Shader のプロパティをデフォルトのままの適用であれば Mobile でよいかもしれません.
Shader の中身が気になった方は各々読んでいただければと思います.

注意点としては,Overlay の Queue は 4000 なので,4001 以上のオブジェクトに対しては埋め込みが発生します.

f:id:xrdnk:20220226062441p:plain

上記の例は Cube の Material の Custom Render Queue が 4001 になったサンプルです.

参考文献

SDF Shaders の一つとして公式ドキュメントに紹介されています.

docs.unity3d.com

SDF とは Signed Distance Field (符号付距離場) の略です.Unreal Engine 側で分かりやすい解説があったので紹介します.
docs.unrealengine.com