経緯

これまで go-gl を使って頑張っていたが、いつのまにか go-gl の構成が変更され、ビルドができなくなってしまった。

go には依存パッケージのバージョン指定を行う方法がないので (ないよね？) 最新に追従する以外の選択がないのだが、いきなりビルドが通らなくなるみたいな事態がおこるともうやる気がしない。

継続的にメンテするほどの変更は入れてないが「ときどき実用しているアプリケーション」が割とどうでもいい理由で壊れるととにかくやる気が失せる。なので、できるだけ壊れなそうなものに依存するようにしたい。

その点ウェブ技術に依存しておけば、あまりひどい非互換は入らないことが期待できるし、最悪壊れてもググれば非互換情報が見つかりやすく、対処しやすい。そしてそもそも JS で書くのでビルドできないような事態にはならない。

構成の変更

前のバージョンでは go-gl を使い、go で書いたプロセスで直接ウィンドウを作ってレンダリングしていたが、構成の変更により、go で書く部分は portaudio を使って任意のサンプリング周波数で信号のFFTを行い、WebSocket からストリームで投げ続けるというシンプルな動作を行うようになった。(44.1kHz 固定なら WebAudio + WebWorker でできそうだが、すくなくとも 96kHz サンプリングはしたいので WebAudio はつかってない)

ブラウザ側のJavaScriptでgoプロセスへ WebSocket の接続を行い、データを受信し次第 WebGL を使ってレンダリングを行う。

これにより go の部分の cgo 依存は portaudio のみになった。portaudio は非常に薄いラッパーなので将来非互換が入るような余地がほぼないと思われる。安心

備考

別に go に限ったはなしではなく、ビルドができるできないとか依存がどうとか、とにかくダルイ。やらなくてすむことはやらないようにしよう。

毎回 canvas の内容を全部描く

http://cho45.stfuawsc.com/spectrum-performance/canvas-redraw-whole/

		ctx.putImageData(
			ctx.getImageData(0, 1, canvas.width, canvas.height - 1),
			0, 0
		);

上のようなコードで canvas 全体を 1px ずらして、最後の一行に新しいデータによる putImageData() をさらに行う。

ピクセルデータを直接シフトさせるやりかただと、一番ナイーブで実装が簡単だが実際のところかなり遅い。

35ms/render ぐらい。

2枚の canvas とっかえひっかえ追記で塗りつつ、DOM 的にエレメントを移動する

http://cho45.stfuawsc.com/spectrum-performance/canvas-double-dom/

canvas の 描画自体は1px * width だけを常に上書きする形で行い、全体のスクロールは DOM でずらす (ブラウザに再描画をやらせる)

わかりにくいので動画にするとこんな感じで、2枚の canvas 要素を margin で使って動かして、親要素で表示領域を制限 (overflow: hidden) してる。

4ms/render

WebGL でテクスチャ2枚をとっかえひっかえし、シェーダーでスクロールする

http://cho45.stfuawsc.com/spectrum-performance/webgl-double-textures/

2枚 canvas とやっていることはほぼ同じだが、canvas の代わりに WebGL のテクスチャを2枚定義し、DOM の代わりにシェーダーを使う。

0.6ms/render

毎回 canvas の内容を全部描く (drawImage)

@cho45 デバイスがなくてコードを試せてないのですが、putImageData+getImageDataではなくてdrawImageにcanvas自身を渡してずらして一行描くのだと速くなりそうですがどうでしょう。

— Mayuki Sawatari (@mayuki) October 5, 2015

と言われて、drawImage! そういえばそんなのも! という感じだったので試したらこれは十分高速だった。

• http://cho45.stfuawsc.com/spectrum-performance/canvas-redraw-whole-drawImage/

0.6ms/render で WebGL でやるのと変わらないぐらい。

肌感覚

canvas へ広範囲に putImageData の繰替えしをするより DOM で移動させたほうが圧倒的に早いのがおもしろかった。

WebGL は面倒くさい分たしかに高速で、2D でも可能な限り使ったほうがよさそうだけど、直接文字のレンダリングができないとか (canvas に書いてからテクスチャとして転送する必要がある)、API 的に面倒とか、GLSL というシェーダー言語を覚える必要があるとか、難点もある。

とはいえ、面倒なぶん自力でチューニング可能なポイントが多いのでおもしろい。

備考

もっと早くなる方法がありそうなら是非お知らせください。

https://github.com/cho45/spectrum-performance