膨大なデータを瞬時に描画。WebGLをつかったヒートマップ「WebGL Heatmap」
WebGL HeatmapはWebGLを使って高速に動作するヒートマップライブラリです。
ヒートマップを描こうと思うとまず必要なのがポイントの膨大なデータで、それらを集計してサマライズして中央を濃く、周辺にいくに従って薄くなるように計算して…と結構複雑な感じがします。しかしWebGL Heatmapを使うと高速に、かつ滑らかな描画が可能です。
[](http://images.moongift.jp/2013/02/Screenshot 2013-02-13 22.17.57.1360764181.png)
デモです。
[](http://images.moongift.jp/2013/02/Screenshot 2013-02-13 22.18.10.1360764186.png)
Webページ全体にオーバーレイさせた場合。
WebGL Heatmapでは一秒間に50万のデータを描画可能としています。そのお陰もあって、かなりぬるぬると滑らかな描画が可能です。ただしWebGLをサポートしたブラウザやCanvasに対応していなければ使えませんのでご注意を。
WebGL HeatmapはHTML5/JavaScript製、MIT License/GPL/BSD Licenseのオープンソース・ソフトウェアです。
MOONGIFTはこう見る
WebGLの使い道というと、ゲームのグラフィックスを描いたり、3Dをレンダリングするような使われ方が多いためあまり普通のWebで使われる技術ではないのかと思っていたのですが、ヒートマップであれば解析系サービスなどで使えるのではないでしょうか。
そう考えるとグラフや膨大なデータからのトレンド解析などを行うアナリティクス系の業務においてWebGLが活用される可能性は大いにあります。見た目のインパクトもさることながら、従来のデータ描画を高速化し、さらに役立つ物にしてくれる可能性がありそうです。