Map overlays with WebGL: affine, polynomial, TPS transformations in JavaScript with GLSL

CesiumJS
1

http://blog.klokantech.com/2013/04/map-overlays-with-webgl-affine.html

A new approach on how to overlay high-resolution images on top of online slippy maps (such as Google Maps, OpenLayers or Leaflet) has been introduced by Petr Pridal from Klokan Technologies at ETH Zurich (one of the world’s top technical universities) during the conference The Graphical Web 2012 / SVGOpen 2012.
The HTML5 and WebGL technology enables on demand calculation of various overlay transformations (affine, polynomial, TPS) for high resolution zoomable maps or large raster data (such as aerial photos) directly in a web browser - immediately, with instant response for an user interaction, as demonstrated in http://vimeo.com/50144414.

2

Hey Christian,

Thanks for sharing, this looks really interesting.

Cesium currently does reprojection of Mercator imagery (such as Bing Maps) to geographic on the GPU. Cesium’s approach is nearly identical to the one used on this sample page linked in the presentation (http://www.klokantech.com/labs/gpu-map-projection-warping-webgl/). Our code is here: https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Scene/ImageryLayer.js#L651

In general, it works pretty well. We had to take steps to avoid the precision problems inherent in WebGL’s single-precision fragment shaders, however. Specifically, we stop applying the transformation when the distance between pixels goes below 1e-5 radians. At that resolution, the reprojection is effectively a no-op, anyway, and going through with it would start to cause texture smearing due to precision lost.

This works great on desktop GPUs, but we have problems on mobile devices because the fragment shaders on most mobile devices support much less floating-point precision. You can see this by running any Cesium demo on a relatively recent Android device with Firefox or Chrome (with WebGL enabled). When zoomed out, things look pretty good. When zoomed in very close, things look good as well because the reprojection is disabled. But at medium zooms the textures look smeared due to loss of precision. One possible solution is to cut off the reprojection earlier on mobile devices, but that might noticeably affected the georeferencing. More likely, we’ll need to fall back on CPU reprojection at medium zoom levels.

I’m still watching the presentation to see if they present any clever solutions to these precision problems.

Kevin