!Processing.jsの画像の透過処理を高速化

いつもTwitterのつぶやきを拝見させていただいている[@clockmaker|https://twitter.com/clockmaker]さんがHTML5のグラフィック系JavaScriptライブラリのパフォーマンス検証をされていて、興味深いです。

[HTML5開発者必見、最速のJavaScriptライブラリはどれだ!? パフォーマンスの徹底検証|http://ics-web.jp/lab/archives/201]

しかし、Processing.js（ProcessingのJavaScript版）がやけに遅いのが気になりました。tint()を使わなければ速いようです。

たぶん、ライブラリ側で正直な実装をしているせいなんだろうな…と思いながら、processing.jsのソース見てみるとピクセル単位で色を合成していることが分かりました。tint()は画像を好きな色にフィルタリングできるので、先にそういう画像を作ってからdrawImageしている、と。HTML5のCanvasにはglobalAlphaなるものがあるようなので、透明度だけを変えているときにはこれを使うようにハックしてみると――

* [tint高速化版|http://cafe.eyln.com/p5/p5js_performance/index.html]
* [通常版|http://cafe.eyln.com/p5/p5js_performance/index_normal.html]

6fps→24fpsと4倍ぐらい高速になりました。

ライブラリのソースは[ここに置いてあります|http://cafe.eyln.com/p5/p5js_performance/js/processing-1.4.1.n_hack.js]ので、ご自由にお使いください。

# あとProcessingも初期化時に指定すればWebGL使えるはずですが、パフォーマンスは謎です。

{{tag Processing,HTML5}}
{{itrackback}}