文字列描画 - you / WebGL

　テクスチャで描画する（めんどくさい）

等幅フォント

ひとつの画像に複数のテクスチャを押し込む方法で書く
等幅フォントの場合はすべての文字が占めるテクスチャの領域が同じなので、文字コードから簡単にUVが計算できる。
とりあえずテクスチャを作らねばならぬ
1文字あたり32pt×16文字・16行の画像ができるようになっているので、512pt×512ptの画像ができる
72dpiで出力すれば512pxになるが、アンチエイリアスしたいので288dpiで出力
JSONを吐き出すようになっているのでとっておく
gs -r288 -q -sDEVICE=pnggray -o gs.png courier.ps > courier.json
-qを忘れるとJSONにゴミが入るので注意
ImageMagickで1/4縮小する
convert gs.png -resize 25% -unsharp 0x1+0.5+0 courier.png
テクスチャはこんな感じ
白黒が逆になっているが理由はあとで分かる
JSONはこんな感じ（jqで整形済み）、座標は全部PostScript系なので、左下原点、上がプラス。
- fs: 公称フォントサイズ。このテクスチャは各セルが32ピクセルになっていて、上下左右1ピクセルを余らせてその中に目一杯の大きさでグリフを書いている。これを1px＝1ptで出力したとしたら、何ポイントになるかを示している。
- h・w: テクスチャ画像の幅と高さ、テクセル単位
- th・tw: テクスチャセルの幅と高さ、テクセル単位
- x0・y0: フォント描画開始原点オフセット。頂点座標を作る時に使う。基準座標はグリフのベースラインになっているため、欧文の「y」などはベースラインより下にはみ出す。このため、全部のグリフが収まる箱を計算し、その箱の左下をグリフ原点から見た座標を、フォントが1ptだったときの値で示している。この値にフォントサイズを乗じたものを、描画開始位置に加算したものが頂点の左下座標になる。
- x1・y1: 同様に頂点右上座標の計算に使う。
- dx: 現在の位置を基準として次の文字を書き始める位置を、フォントが1ptだったときの値で示している。
描画コードはこんな感じ
幅が100%になっているので、resizeを引っかけて、ウィンドウの幅を変えてもフォントサイズが変わらないように再描画している。
とりあえずJSONとテクスチャを読む
JSONを読めたら頂点バッファを作る。1文字あたりトライアングルが2個出力される。
テクスチャ読めたら設定しておく
両方読めたら描画する。fetchも拙作loadTextureもプロミスを返すので、Promise.allが解決するまで待てばよい（引数になってる配列の中に処理を書いてたりして我ながらちょっとヒドい）。
ところで、フォントサイズの基準て何よ？
- このコードの場合、頂点シェーダーが頂点座標をuAspect.xyで割っており、uAspect.xyにはキャンバスのwidthとheightのそれぞれ半分を設定している。
- したがって、頂点座標がキャンバスサイズだけ増えると、頂点座標出力は2増える（-1から+1まで動く）ことになる。
- フォントメトリクスにはフォントサイズが1だったときの値が書かれており、頂点計算時に単純にフォントサイズを乗じている
- よって、このコードの場合はフォントサイズ＝キャンバスのピクセル単位になる
- この例ではキャンバスのCSS高さが60pxで、フォントサイズは30にデバイスピクセル比をかけたものなので、だいたいキャンバスの半分の高さで描画されている（小さめに見えるが、バーティカルバーが理不尽にデカい）
- $QSとか見えるけどきっと気のせい

ブレンド・アルファ合成で色を付ける

今までgl_FragColorの第4成分は1を出力してきたが1以外のデータを出力したらどうなるのか？
テクスチャをそのまま第4成分に書き込み、RGBは0にしてみる
青くなった
この青はCSSのバックグランドカラーである
つまり、第4成分は不透明度（opacity）を示している
アルファとも呼び、RGBに対してAと呼ばれる
実行結果をよく見るとさっきから文字の後ろが欠けている
文字間隔よりテクスチャの余白の方が広いために、後ろの文字が前の文字の後ろを書きつぶしてしまっている
背景だけではなく、描画結果を直前の描画結果と合成することもでき、これを使うとうまく描画できる
フラグメントシェーダーではRGBは白、Aはテクスチャデータを設定
初期化時にgl.enable(gl.BLEND);でアルファ合成を有効化
gl.blendFuncSeparateで合成方法を指定
gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHAはRGBに対する合成方法で、FS出力のRGBにAを、既に書かれているRGBに(1-A)を乗じて加算し、結果のRGBとする
gl.ZERO, gl.ONEはアルファに対する合成方法で、FS出力のAに0、既に書かれているAに1を乗じて加算し、結果のAとする
FS出力のRGBは1で、Aはテクスチャの値を出力しているので、結局、RGBはテクスチャが白い部分がそのまま残り、黒い部分は既に書かれていた色がそのまま残る
Aは既に書かれていたものがそのまま残る
Aは描画開始時に1で塗りつぶしているので、Aは1のまま変わらない
テクスチャデータで文字を白くしたのはこのため
黒い部分は既に書かれている結果がそのまま残るので、前の文字を書き潰すこともない
$QSはこっそりvanilla.jsに移動
uniformで文字色を指定することもできる

プロポーショナルフォント

グリフごとに大きさが違うので、それぞれのグリフに対するUVを表にしておく
フォントメトリクスは文字をキーとしたJSONオブジェクトになるが、"と\はエスケープする必要がある
UVをグリフごとに指定するので、グリフを格子状に配置する必要はない
高さ順に並び替えてしまえば効率がよくなるが、PostScriptにはsortがないので自力で書く必要がある
最適なフォントサイズを計算してくれるわけではないので人力で探す
こういうのはさすがにPostScriptが向いているが、SVGのgetBBoxや、2DコンテキストのmeasureTextを使えばJavaScriptだけでできるはず（知らないけどきっとそう）
- fs: 公称フォントサイズ
- w・h: テクスチャ画像の幅と高さ、ピクセル単位
- x0・y0・x1・y1: フォント描画開始・終了位置の原点オフセット、フォントサイズが1ptの場合の値、頂点座標系
- dx: 次の描画開始位置、フォントサイズが1ptの場合の値、頂点座標系
- u0・v0・u1・v1: テクスチャ上の文字開始・終了位置、PostScript座標系でテクセル単位
意外とコードの変更点は少ない
同じテクスチャサイズで文字を大きくできるので、等幅フォントでも同じように扱った方が有利

ギリシャ文字も出してみる

Symbolフォントを使う
Symbolフォントではギリシャ文字に対応する通常のラテン文字をshowすることでギリシャ文字のグリフが出る
一方、JSON以降はUTF-8で書いておく必要があるので適当な変換表を持っておく
PostScript側は文字列のバイトシーケンスはそのまま出力されるし、それをそのままJavaScript側でも読めるので、ギリシャ文字の部分はエスケープしてもいいし、UTF-8でそのまま書いてもいい
JSONの仕様上は「A string is a sequence of Unicode code points wrapped with quotation marks (U+0022). All code points may be placed within the quotation marks except for the code points that must be escaped」（ECMA-404）で、オブジェクトのキーは文字列ならなんでもいいので、エンコーディングがUTF-8ならUTF-8でそのまま出しておいて問題ない

複数のフォントを同時に表示

やり方はいろいろ
ひとつの大きなテクスチャに全部のフォントを押し込む
- 性能は一番出そう
- それぞれのフォントの文字種が多いとキツイ
- フォントテクスチャとメトリクスの管理が煩雑になる
フォントを切り替えるたびにバッファも切り替えて描画する
- 直感的で分かりやすいが、drawArraysの呼び出し回数が増える
フォントごとにまとめて頂点バッファを作る
- 頂点バッファの管理が少しややこしくなるが、drawArraysの呼び出し回数はフォントテクスチャの数だけで済む
頂点バッファにフォントの情報も載せてフラグメントシェーダーで切り替える
- drawArraysは1回で済む
- フラグメントシェーダーでのテクスチャ選択が性能のネックになりそう
フォントごとにまとめて頂点バッファを作る方法の実装例、クラスを作った方が都合がよさそうなので作った（作り方は突っ込まんといて）
まずglFontMap.create(gl)する
テクスチャの数だけfont.load()する
プロミスが返ってくるので全てのプロミスが解決するまで待つ
できあがったフォント情報をglFontBuffer.create()に渡す
fontbuf.appendString()で好きなだけ文字を書く
fontbuf.prepare()するとGLのバッファができる
fontbuf.draw()で描画
- 引数はシェーダープログラム、バッファ仕様、テクスチャ設定のためのuniform変数の名前、テクスチャユニット番号、テクスチャ描画モード
- ここに載ってるシェーダーならシェーダープログラム以外は省略できる
- 各フォントに専用のテクスチャユニットを割り当てるようなことはしていない
- テクスチャユニットの切り替えってどのくらいのコストなのかなぁ
prepareとdrawが分かれているのは、フォントと文字列が変わらない限り、バッファを再生成する必要がないから
状況によって描画内容が変わるなら、初期化時点で状況ごとにglFontBufferを用意しておけばよい
せっかくなのでresizeイベントで色が変わるようにしてみた
「ローマン体のラテン・ギリシャ文字を一体化したフォント」を作って一度に描画できるようにしたが、「ゴシック体のラテン・ギリシャ文字を一体化したフォント」も同時に描画するようにはなっていない
glFontBuffer側はそこまで対応すると応用範囲が拡がる

07 Jul 2024: 初稿