WebGL Lib 2019/09/18

## 立体音響 [ストリーミング + 立体音響再生サンプル](sample1/index.html) `HTMLAudioElement` + `Web Audio API` でストリーミング再生をする場合、 直接サーバからファイルを読まずに、 fetch API (または XHR) でファイルを Blob として取得してから `URL.createObjectURL` で読むようにした方が良い。 通信もストリーミング、デコードもストリーミングだと、 全体的に反応が遅い+要らんところで途切れるのでひたすら扱いにくかった。 立体音響に関しては、Web Audio API にまさにそのための機能があるので、 それを使っているだけ。 品質は環境に依存する。 ## スプライトアトラスの改善 スプライトアトラス、というのは、 複数の画像を一枚のテクスチャにまとめてしまって、 そこから部分的に切り出して画面に描画する方法のこと。 テクスチャアトラス、あるいは単にアトラス、とか、 呼び方は色々。 で、この方法は、補間やアンチエイリアスで境界付近にゴミが出やすいことでも知られている。 よく知られた対処法としては、 - 各スプライト周辺にマージンを設ける - 補間・アンチエイリアスを切る などがあるが、色々と気に入らない点があったので、 シェーダ側でサンプリング空間を絞る方法で改善できないか試してみた。  左下がアトラス。そのうち青の部分だけを、回転拡大して並べて表示したのが中央の二つ。 下が、通常のスプライト描画、青に隣接した赤や黄色が境界付近に見えてしまっている。 上が改善版。上手くいっているように思える。 とはいえこの方法だと、 元々キレイにつながっていた画像をあえて二回に分けて描画する、 ようなケースでは逆に切れてしまうことになるので、 API 上では ON/OFF できるようにした。 そんなケースがあるのかは知らないけれど。 調べた範囲だと、2D描画でこれができるライブラリはあまり無いようだ。 ## SVG 挫折 SVG も描画できるようにしようかなあと手を出してみたものの、 色々と大変だったので、多角形描画でひとまず妥協。 ベクター画像の描画は、基本的にはベジェカーブ+ステンシルバッファを用いるのが正攻法。 ベクター画像の描画"だけ"を考えるなら速い。 [参考: 続：WebGLでベジェ曲線を描いてみた](https://lab.sonicmoov.com/development/programming/webgl-bezier-shader-2/) なのだけれど、これはスプライトバッチ(一括描画)と相性が悪い(頻繁にパイプラインが詰まる) ので、別な方法(三角形分割して描画)にしたかった。 そのためには、ベクター画像のパスを三角形群に変換する必要が出てくるのだけれど、 「穴のない図形」(要は多角形)と「穴のある図形」で、 処理量もめんどくささもかなり段違いに変わってくることが実際作ってみてわかったので、 とりあえず穴のない図形だけできるようにした。 実装したのは耳刈り取り法。 [参考: 多角形の三角形分割](https://ja.wikipedia.org/wiki/%E5%A4%9A%E8%A7%92%E5%BD%A2%E3%81%AE%E4%B8%89%E8%A7%92%E5%BD%A2%E5%88%86%E5%89%B2) 実際のところ、穴のある図形に対応しても、実行時に変換するのに結構なコストがかかるので、 事前に2Dメッシュに変換しておいたほうが良い気がする。 一応、JavaScript 製の穴のある図形にも対応したライブラリなどはある。 [cdt2d](https://github.com/mikolalysenko/cdt2d) 取り込む予定はない。 とりあえず自分で作ってみたい、と言うのもあるけれど、 依存ライブラリ多すぎで、(主に今後の管理の面で)色々と手に負えなさそう。 ## TODO テキスト描画の拡充。 色々とサンプルを作っていてわかったことは、 単に位置を指定してテキストを描画するメソッドはかなり使い勝手が悪いということ。 位置を指定して描画するのではなくて、 テキストを描画する"枠"と、枠内での上下左右の"揃え"を指定して描画する方針にしたい。