Custom ImageryProvider using Canvas composite operators

For many complex reasons, our app needs to render tiles from 5 different tile sets, all of which we provide. The tiles are not simply overlaid; some represent masks. A finalized tile may start with A masked with C and overlaid with D & E. At the moment, all of these operations are performed server-side (custom tile server in C++), which creates a serious scalability problem for us. I am thinking of implementing a custom ImageryProvider which does the same operations client-side. I understand that I will most certainly pay a penalty in network bandwidth, but my main concern is taking server CPU load out of the scalability equation.

I’m wondering if anyone has attempted to write custom tile providers before and whether there are any gotchas to look out for. I believe the HTML5 Canvas is perfectly capable of the operations we are now doing server-side. Is there anything else to watch out for?

Thanks a bunch,


Hi Peter,

Is server-side caching an option? Or are there too many permutations?

Besides the network bandwidth, there will also be a good bit of client-side overhead preparing the tile, but it may still be better. You’ll need CORS or a proxy to be able to read back from Canvas, but I assume you already have it.

This could also be done on the GPU similar to how we reproject Mercator (well, Canvas may already use the GPU, but I bet there is still a CPU read back on most implementations to share with WebGL). Kevin can advise on how hard this would be, but we are both heads down getting ready for SIGGRAPH next week so bare with us.



Hi Patrick,

Yes, permutations would be in the billions.

I like the idea of doing it on the GPU if possible. We don’t make use of the Mercator re-projection code (Mac Intel HD3000 driver bug workaround), so we serve Cesium EPSG:4326 tiles only. That means we have quite a bit of GPU bandwidth to take advantage of :slight_smile:



Writing an ImageryProvider that uses a canvas to composite your tiles should be no problem. Despite its name, the requestImage function in an ImageryProvider can return a canvas, or any other type that works with Context.createTexture2D to create the WebGL texture (typed array, video, etc).

Check out TileCoordinatesImageryProvider.js for an example of a provider that produces canvases with debugging information drawn onto the tiles.