Badass JavaScript

A showcase of awesome JavaScript that pushes the boundaries of what's possible on the web, by @devongovett.

Using WebGL for High Performance JavaScript Heatmaps

February 4th 2013

Florian Boesch has been working on webgl-heatmap.js, a library for rendering heatmaps using JavaScript and WebGL.  As he explains in his blog post about it, he was looking at other heatmap drawing libraries out there and found that they weren’t fast enough.  Most other libraries were just using regular old 2d canvases, but he found that when you have hundreds of thousands of points to draw, keeping performance high is very difficult.  That’s why he turned to WebGL, to let the massively parallelized graphics cards in modern computers do much of that hard work for him.

You can check out a live demo and see for yourself that it is indeed quite smooth.  In his own tests, he says you can draw around 500,000 data points per second with 10,000 per frame without a hitch.  This is pretty impressive and shows the importance of WebGL to the web platform (*cough* Microsoft *cough*).  We’re only just getting started.

One possibility for this libraries usage is some sort of realtime heatmap of a website or app’s user mouse movements.  The user mouse movements would be recorded and sent via Web Sockets to an admin app where they could be rendered on a heat map in real time.  Having good performance is critical when you have lots of users on a site all at once.

Anyway, this looks like a simple to use library that could have some interesting applications.  Check out the demo and the code on Github.