TextMesh Proカスタムシェーダー開発入門

TextMesh Proカスタム シェーダー開発入門 株式会社ディー・エヌ・エー ゲームサービス事業本部 グラフィックスエンジニア 笠原 有真 © DeNA Co., Ltd. 1

自己紹介 笠原有真 ● 2024年 株式会社ディー・エヌ・エー 新卒入社 ○ ゲームサービス事業本部開発運営統括部 第一技術部テクノロジー推進第一グループ © DeNA Co., Ltd. ● グラフィックスエンジニア ● GTTA（Graphics Technology and Technical Artist）所属 ● X(旧Twitter): @kshrdsg 2

• https://x.com/kshrdsg

TMPro使ってますか？ © DeNA Co., Ltd. 3

カスタムしてますか？ © DeNA Co., Ltd. 4

話す内容 1 シェーダー作成のきっかけ 2 TextMesh Proシェーダーの基礎 3 グラデーションの実装 4 CustomEditorの作成 5 まとめ © DeNA Co., Ltd. 5

シェーダー作成の きっかけ 出会いは突然に © DeNA Co., Ltd. 6

ある日 装飾テキストを、 TMPの標準機能で 再現できない… デザイナーさん © DeNA Co., Ltd. シェーダーで解決 できそうですね 先輩 7

笠原さん、 頼んだ！！！ 先輩 © DeNA Co., Ltd. 8

要件整理 シェーダー書いたこと ないし、TMPの仕組み とかも知らんけどまあ なんとかなるか…？ ● 4色グラデーション ● 各色の位置指定 ● 角度調整 ● グラデーションの範囲を文字、行、全体で選択可能 © DeNA Co., Ltd. 9

標準機能で再現 ● Faceにグラデーション画像をいれる ○ グラデーションのパターン分テクスチャを用意するのは嫌… ■ 角度が変わるだけでテクスチャが増える… これらを解決するためのシェーダーを作成する © DeNA Co., Ltd. 10

TextMesh Proシェーダーの基礎 敵を知り己を知れば百戦危うからず © DeNA Co., Ltd. 11

TextMeshProの描画について 0 1 SDFテクスチャ： 文字の輪郭からの距離をデータ化したテクスチャ 参考：https://learning.unity3d.jp/10771/ © DeNA Co., Ltd. 12

• https://learning.unity3d.jp/10771/

TextMeshProの描画について SDFテクスチャ： 文字の輪郭からの距離をデータ化したテクスチャ 「高さ」として、等高線を引くと輪郭が得られる 参考：https://learning.unity3d.jp/10771/ © DeNA Co., Ltd. 13

• https://learning.unity3d.jp/10771/

TextMesh Proのシェーダー © DeNA Co., Ltd. 14

グラデーションの実装 本題 © DeNA Co., Ltd. 15

グラデーションシェーダーの基本 UV（ピクセルの座標）を使って色を混ぜていく ● 1 V 0 © DeNA Co., Ltd. U 1 16

3色のグラデーション 0 0.5 区間 1 © DeNA Co., Ltd. 1 区間 2 17

区間ごとのリマップ ● © DeNA Co., Ltd. 各区間を 0～1 の範囲に変換する関数を定義 ○ Remap(0.1, 0, 0.5) → 0.2 ○ Remap(0.5, 0, 0.5) → 1 ○ Remap(0.5, 0.5, 1) → 0 ○ Remap(0.9, 0.5, 1) → 0.8 18

区間ごとのリマップ 0 0.5 区間 1 1 区間 2 0～0.5 を 0～1 にRemap © DeNA Co., Ltd. 19

区間ごとのリマップ 0 0.5 区間 1 1 区間 2 0.5～1 を 0～1 にRemap © DeNA Co., Ltd. 20

3色のグラデーションシェーダー 0 0.5 1 区間 1 区間 2 結果 © DeNA Co., Ltd. 21

4色グラデーション Point 1 Point 2 区間 1 ● Point 3 区間 2 Point 4 区間 3 それぞれの区間でリマップとlerpを行う © DeNA Co., Ltd. 22

4色グラデーション Point 1 Point 2 区間 1 Point 3 区間 2 Point 4 区間 3 結果 © DeNA Co., Ltd. 23

進捗確認 ● 4色グラデーション ● 各色の位置指定 ● 角度指定 ● グラデーションの範囲を文字、行、全体で選択可能 © DeNA Co., Ltd. 24

Tips: きれいなグラデーションのために 少し濁っている © DeNA Co., Ltd. 25

Tips: きれいなグラデーションのために RGB色空間 RGB(1, 0, 0) RGB(0.5, 0.5, 0) RGB(0, 1, 0) ※リニア色空間での実行結果なので少し明るく見えています © DeNA Co., Ltd. 26

Tips: きれいなグラデーションのために OkLab色空間 lab(0.63, 0.22, 0.13) lab(0.75, 0, 0.15) lab(0.87, -0.23, 0.18) RGB(1, 0, 0) RGB(0.8, 0.6, 0) RGB(0, 1, 0) ※リニア色空間での実行結果なので少し明るく見えています © DeNA Co., Ltd. 27

Tips: きれいなグラデーションのために © DeNA Co., Ltd. 28

角度調整 ● UVを回転させることで、グラデーションの角度を変更 V U © DeNA Co., Ltd. 29

UVの回転 © DeNA Co., Ltd. 30

進捗確認 ● 4色グラデーション ● 各色の位置指定 ● 角度指定 ● グラデーションの範囲を文字、行、全体で選択可能 © DeNA Co., Ltd. 31

文字にグラデーションをかける © DeNA Co., Ltd. 32

グラデーションの範囲 ● © DeNA Co., Ltd. 文字ごとにグラデーションがかかっている 33

グラデーションの範囲 ● 文字ごとにグラデーションがかかっている ● 行、全体など範囲を変更したい © DeNA Co., Ltd. 34

範囲の変更 ● Textコンポーネントから変更 ○ Horizontal Mapping: 横方向の範囲 ○ Vertical Mapping: 縦方向の範囲 Line © DeNA Co., Ltd. Paragraph 35

進捗確認 よし！いい感じ！ ● 4色グラデーション ● 各色の位置指定 ● 角度指定 ● グラデーションの範囲を文字、行、全体で選択可能 © DeNA Co., Ltd. 36

パフォーマンス © DeNA Co., Ltd. 37

頂点シェーダーとピクセルシェーダー 頂点シェーダー ピクセルシェーダー ● 頂点の数分実行される ● ピクセルの数分実行される ● 4頂点 ● 1,000,000px 1000px 1000px © DeNA Co., Ltd. 38

頂点シェーダーへの移行 : 回転 © DeNA Co., Ltd. 39

頂点シェーダーへの移行 : 色空間の変換 © DeNA Co., Ltd. 40

頂点シェーダーへの移行 移行前 © DeNA Co., Ltd. 移行後 41

CustomEditorの作成 使いやすくしよう © DeNA Co., Ltd. 42

プロパティを見てみると … ● プロパティが多く複雑 ● 元のTMPとUIが異なる © DeNA Co., Ltd. 43

TMPのインスペクタを見ると プロパティは多いが、 ● 見やすくまとまっている ● パネルの開閉ができ見通しが良い ● 機能のON/OFFなどもわかりやすい グラデーション用プロパティも 同じ感じで表示したい © DeNA Co., Ltd. 44

Custom Editorの作り方 ● ShaderGUI を継承したクラスを作成 ● シェーダー側で指定 © DeNA Co., Ltd. 45

TMP_SDFShaderGUI © DeNA Co., Ltd. 46

TMP_SDFShaderGUI © DeNA Co., Ltd. 47

TMP_BaseShaderGUI ● TMPのShaderGUI用Utility群 ● これを使ってグラデーション用 UIを追加 © DeNA Co., Ltd. 48

グラデーション用Custom Editor © DeNA Co., Ltd. 49

完成！ 動いている様子→ https://www.youtube.com/watch?v=tjXiDZBN7oY&t=790s © DeNA Co., Ltd. 50

• https://www.youtube.com/watch?v=tjXiDZBN7oY&t=790s

まとめ いかがでしたか？ © DeNA Co., Ltd. 51

まとめ 今回やったこと ● TextMesh Proのカスタマイズ ○ 4色グラデーションシェーダーの実装 ○ CustomEditorの実装 興味が出たら… ● 放射グラデーション、アニメーションなども実装可能 ● シェーダー実装の入口としてTMPは良い題材 みんなTextMesh Proをカスタムしよう！ © DeNA Co., Ltd. 52

Appendix © DeNA Co., Ltd. 53

Appendix①: Gradientクラスを使わなかった理由について ● 直感的に操作ができるというのは良いのですが、マテリアルに直接Gradientとして値を送ることが できなかったため採用しませんでした ○ ColorKeyをそれぞれ渡すこともできますが、Keyが4つであることを暗黙的にすることはリス クがあると考えました ○ また、テクスチャ化して参照するということも可能ですが、どのタイミングでどこにテクス チャを置くのかといったことを考えなければならず、プロジェクト横断的に利用する際に障 壁となりうるというのも理由の一つです ● 当時調べた限りでは上記の結論になったのですが、もしかしたら見逃しているだけで良い活用法が あるかもしれません © DeNA Co., Ltd. 54

Appendix②: TextMesh ProのUV取得(Unity 2022.x) ● Mobile版のShaderを基にする場合、Text表示領域のUVを取得する処理も追加する必要があります ● 頂点のtexcoord1.xに以下の処理でPackされたUVが格納されています TMP_Text.cs © DeNA Co., Ltd. 55

Appendix②: TextMesh ProのUV取得(Unity 2022.x) そのため、Shader側でUnpackしてあげる必要があります ● Unpackの関数 TMPro.cginc Shader側の処理（頂点シェーダー） © DeNA Co., Ltd. 56

Appendix③: UnpackUVの修正 ● UnpackUVでUVを復元した際、baseline以下に描画される文字だとうまくいかないことがあります （Unity 2022.3.58f1） ○ ● © DeNA Co., Ltd. gやqなど UnpackUVを修正することで正常に描画させることができます 57

Appendix③: UnpackUVの修正 ● 修正案は以下の通りです ○ © DeNA Co., Ltd. 他にももっと効率の良い方法があるかもしれません 58

Appendix④: TextMesh ProのUV取得(Unity6以降) ● Unity6ではUnpackする必要はありません ● input.texcoord1.xy にUVがそのまま入っています ● ただ、Mobileの場合ピクセルシェーダーには渡されていないのでその処理だけ書く必要があります ○ © DeNA Co., Ltd. TMP_SDF.shader では textures.xy に入っています 59