2018の19日目の記事です。Demoの優勝作品『WORMHOLE』のオープニング部分です。タイトルの文字をパラパラと出現させたり消失させたりする演出は、TextMeshProとカスタムシェーダーを組み合わせて実装しました。この記事では3つの演出例を通して、TextMeshProの文字描画に独創的な演出を加えるためのカスタムシェーダーの実装方法を紹介します。実装環境は次の通りです。文字の輪郭までの距離を画素値にした画像)をつかって高品質にフォントをレンダリングできるアセットです。ManagerやAssetStoreから無料で入手可能です。TextMeshProの描画の仕組み本題に入る前に、TextMeshProの描画の仕組みについて触れておきます。TextMeshProのシェーダー挙動は一般的なシェーダーのものとはやや異なります。描画の仕組みを把握しておくと、後ほど解説するカスタムシェーダーの実装の理解が進むはずです。TextMeshProの描画は2つのステップで行われます。SDFフォントのアトラステクスチャを生成できます。TextMeshProではフォントの中心が1.0、フォントの外側が0.0になるようなSDFのテクスチャアトラスを生成します。SDFというと、フォントの内側が負、外側が正というのを思い浮かべてしまいますが、テクスチャは0~1の範囲であることを考えると納得できる仕様です。シェーダーによるテキストの描画フレームデバッガーやワイヤフレーム表示で挙動を確認すると、TextMeshProがフォントをレンダリングする仕組みを把握できます。1文字ずつ四角形のメッシュが割り当てられており、SDFテクスチャのUV座標は頂点データとしてメッシュに埋め込まれています。内部ならシェーディングを行い、外側ならピクセルを破棄して描画をキャンセルすることで、フォントをレンダリングします。0.001);TextMeshProは高機能であるため、シェーダーの実装量は多いですが、フォントの描画だけに着目すれば大して複雑なことはしていません。中身は気にしなくても問題ないので、読み飛ばしてください。斜体はメッシュを傾けて実装されているので、シェーダー側では特に意識する必要はありません。シェーダー側で何も実装せずとも勝手に斜体になります。太字はSDFからのテキストの内外判定をする閾値を制御することで実装されています。演出別の実装解説カスタムシェーダーはTMP_SDF-Mobile.shaderをベースに実装しました。TMP_SDF-Mobile.shaderに限らず、Mobile向けのシェーダーの実装は単純で短いため改変しやすいです。※説明を簡単にするために、ここではコードの差分のうち一部を抜粋します。d2をlerpで線形補間すればモーフィングできます。SDFをつかうとモーフィーングを非常にお手軽に実装できます。SDFを採用したTextMeshProの強みを活かした良い応用例だと思います。_Time.y)));さらに、次のコードでSDFテクスチャのUVに応じてUVグラデーションで色を塗りました。適当なシェーダーを適用する実験。用のシェーダーの書き方が分かってきた気がする。ENDCGスクリーンスペースに模様を計算したり揺らしたりする例です。スクリーンスペースに模様を計算する前には頂点シェーダーでスクリーンスペースの座標を取得する必要があります。スクリーンスペースの座標をsposという名前で頂点シェーダーからフラグメントシェーダーに渡し、フラグメントシェーダでsposに応じて動きや色を処理すれば動画のようになります。「時間による減衰」を組み合わせました。「スクリーン座標に応じた細かい波」と「時間に応じた波」を掛け算で組み合わせて縞模様をつくりました。出現と消失アニメーション最後にご紹介するのが『WORMHOLE』でも利用したエフェクトです。OUTLINE_ON今回紹介する中では、一番実装が短くて実質的な差分はわずか3行です。SDFテクスチャをフェッチするUVをclampすることで、フォントの一部を引き伸ばしたような効果を加えました。テクスチャ上では文字同士がばらばらに配置されていて、文字ごとにUVが異なっています。そこで、経過時間に応じてUVを一様にclampすると、文字ごとに表示されるまでの時間を変えることができます。処理としてはUVを一様に変化させているだけなのですが、文字ごとのUVが異なるために結果としてランダムに出現するかのように見せられるということです。jewel、@shutosgさんのこの作品からインスピレーションを得ました。おわりにTextMeshProを含めUnityの描画系Componentの多くはシェーダーを適用可能です。カスタムシェーダーを利用して、Unity標準ではできない独創的な演出を加えてみましょう!シェーダー最高!最後に『WORMHOLE』について解説した記事を紹介します。TextMeshPro以外にもUnity3Dの新機能を活用しています。