WebGL + Three.jsをいじる - テキストとプログレスバー表示 - Web Audio API

公開:2013-09-14 09:00
更新:2020-02-15 04:37
カテゴリ:webgl,three.js,web audio api,javascript,html5,audio

テキスト表示

スコアやTOP10スコアなどの情報表示用にテキスト表示オブジェクトを作成した。これはレトロなゲームでよく使われていそうな8×8キャラクタービットマップを使い文字列を表示するものである。点滅とフォントの切り換えができるようになっている。

仕組みとしてはcanvasに文字列を描きそれをテクスチャーにしてthree.jsで表示している。描画時のスムージングはOFFにしてドットをあえてくっきり表示するようにしている。CRT表示は少しぼんやりしているのでちょっと「くっきり」すぎなような気もするけども、スムージングのぼんやり感ともまた違う。こういうのってシェーダーでエミュレートできそうだけれども、まだよくわかっていないので今のところそこまではできない。とりあえずこれで良しとする。

このテキスト表示オブジェクトはテキストVRAMをエミュレーションしているので、いったん表示すると消去(cls)するまでテキストを表示し続ける。

今はcanvasで描画しているけれどもこれはthree.jsのテクスチャーのUV座標指定方法がよくわからなかったため。昨日ようやくわかった。なのでジオメトリとUV座標指定をうまく使えばすべてthree.jsで描画できると思う。

プログレスバーの表示

データロード時のためのプログレスバー表示オブジェクトも作った。これもcanvasに描画したものをテクスチャにしてthree.jsで描画している。なんでこうしたかというと2D描画メソッドはcanvasのほうが充実しているため。つまりテキスト表示と同様実装を端折りたかったから。

Web Audio API

グラフィックはとりあえずここで一段落としておいて、続いてWeb Audio APIを使って波形メモリ音源をエミュレーションするコードを書いていくことにする。

Web Audio APIはモジュラー志向のオーディオAPIである。低レベルな部分から高レベルなところまでカバーしている。モジュラー好きな私にとっては非常に興味をそそられるが、大規模なAPIなので標準化が完了するまではまだかなり時間がかかりそうな気がする。MozillaのAudio Data APIは低レベルなAPI(WASAPIやASIOみたいな感じ) で、単純なので標準化は早くできそうなのだが、世の中の流れはWeb Audio APIに向かっている。個人的にはは低レベルなAPIと高レベルなAPIを分けて、低レベルなAPIを先に標準化してほしいと思うのだが、そうはいかないようだ。低レベルなオーディオAPIというのはサウンド・ドライバ(OS)からコールバックされ、バッファにオーディオデータを書き込む・読み込むという実装になる。この実装は古くからあんまり変わっていなくて、レイテンシが短くなったとかパフォーマンス面での改良くらいなので、もうかなり枯れている。だから標準化も簡単だと思うのだけれどもね。エフェクトまで標準化しようとするといろいろな嗜好が入ってくるのでなかなかまとまらないように思うのだけれども、どうなのだろう。

それはさておき、g2ookgさんの「Web Audio API解説」を読んで音の出し方を勉強している。やっぱりなんか癖のあるAPIだなー。