What I want to do

Infragram.org is an amazing utility that thanks to some clever JavaScript code can process infrablue image into a NDVI map. Even though JavaScript processing speed is very good on standard PCs, it might not be adequate on mobile devices. I want to use WebGL to speed up NDVI map generation to the point it can be used in real-time on mobile devices.

My attempt and results

Thanks to numerous examples available on the internet I've been able to implement simple WebGL application that achieves satisfactory performance results even on mobile phones. Application got merged to the main git repository and is available in beta version on infragram.org.

How it works

Application draws a rectangle consisting of two triangles on HTML5 canvas element using WebGL calls. The rectangle is textured using an infrablue image provided by user. Graphics card renders NDVI map using fragment shader written specially for that task. The NDVI-calculating fragment shader executes concurrently on multiple pixels at once, effectively providing a massive speed-up in processing time.