Public Lab Research note

WebGL flavored

by pfoltyn | June 10, 2014 19:41 10 Jun 19:41 | #10549 | #10549

pfoltyn was awarded the Basic Barnstar by warren for their work in this research note.

What I want to do 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

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.


Login to comment.