テクスチャ不要のテキストレンダリング技術

• テクスチャ不要のテキストレンダリング

  • 従来、テキストをレンダリングするには、フォントのすべてのグリフをアトラスにレンダリングし、それをテクスチャとしてバインドしたうえで、画面に三角形を描画してグリフを1つずつレンダリングする必要がある。
  • デバッグメッセージを高速に出力するためのシンプルな方法を紹介する。
  • すべてのテキストを単一のドローコールで描画できる技術を説明する。

• フォント: テクスチャ不要のピクセル

  • フォントアトラステクスチャを取り除くために、フラグメントシェーダ内部にフォントアトラスに似たものを格納する必要がある。
  • 整数定数を使ってビットマップを格納でき、これによってグリフをレンダリングできる。
  • 8ビット整数をビットマップとして使い、GLSLフラグメントシェーダで画面に描画できる。

• 単一ドローコール

  • インスタンスドローコールを使って、繰り返しの描画命令を回避できる。
  • 各インスタンスごとに、位置オフセットと出力するテキストを含むデータを使用する。
  • メッセージを4文字単位に分割して uint32_t に変換し、word_data 構造体に格納する。

• バーテックスシェーダ

  • バーテックスシェーダは3つの出力を生成する。
  • gl_Position に三角形の頂点を画面上へ配置する。
  • 出力する単語をフラグメントシェーダへ渡す。
  • テクスチャ座標を生成して uv 座標を計算する。

• フラグメントシェーダ

  • フラグメントシェーダはテキストをレンダリングするために3つの情報を必要とする。
  • uv 座標をグリフビットマップの正しいビットにマッピングしてグリフをレンダリングする。
  • ビットが設定されている場合は前景色で、設定されていない場合は背景色でレンダリングする。

• 全体実装とソースコード

  • この技術の実装は、le_print_debug_print_text モジュールのソースコードで確認できる。
  • このモジュールにより、デバッグメッセージを画面に簡単に出力できる。

[GN⁺]

Hacker Newsの意見

• ShaderToyでは、単純な算術でコードを書くのが楽しくて簡単。さまざまなテキストハックの例が多い
  • 例: 300文字未満のMatrix、緑色のCRTディスプレイ効果など
• この方法は創造的だが、仕上がりは美しいとは言えない。よりよい結果のためにビット数を増やすこともできるが、効率的な方法は白黒ピクセルを使ってテクスチャとして保存すること
• 現代の3Dレンダリングエンジンでテキストを描画する一般的な方法は、SDFテキストを使うこと。これは従来のテクスチャアトラスを使って署名付き距離場のアトラスを生成する
• テキストレンダリングアルゴリズムを自分で試したことはないが、いくつか実装した経験はある。解像度非依存性とアンチエイリアシングが必要だったため、この方法は役に立たなかった
• この方法はWill Dobbieの手法と概念的には似ているが、より単純。ピクセルデータを配列に保存する方式
• テキストをメッシュとしてレンダリングする選択肢もある。TextMeshProは署名付き距離場を使って任意のスケールに対応する
• 従来のテクスチャ方式との性能比較をすると面白そう。現代GPUの単純な処理では、性能面の答えは「イエス」になる可能性が高い
• Sebastian Lagueの動画では、さまざまなフォントレンダリング手法が扱われている
• フォントデータをフラグメントシェーダーのソースコードに含める類似の技法を使ったことがある。snprintfを使ってGPUバッファに直接出力した
• この方法はBBC Basicで小さな8x8スプライトを描いていたのに似ている。35年前の記憶を呼び起こす
• GPUはテクスチャからのレンダリングには効率的だが、ビット操作は相対的に遅い。メモリは節約できるが、実際にアトラスを使うより速いかは疑問
• 小さなテクスチャをGPUにアップロードすることが性能に大きく影響するのかという疑問がある。2Dでテクスチャに文字列をレンダリングし、2枚の三角形にそのテクスチャを表示できるのか気になる