mapbox-gl-js icon indicating copy to clipboard operation
mapbox-gl-js copied to clipboard

Custom style layers for raster sources

Open karantza opened this issue 5 years ago • 6 comments

Hi, I'm interested in using the new Custom Style Layers to apply a custom pixel shader to raster tiles. It seems like this should be possible by essentially recreating the regular raster shader in a custom style layer, but I can't seem to find much documentation on how to set up the uniforms appropriately, how to get the raster textures, or how to generate the quads. I can see that the built in layer types have a whole pipeline for getting their uniforms set that I'd need to replicate, but it's kinda dense, and I wanted to check that there wasn't a simpler way before digging into all that.

Is there any example of applying these custom style layers to raster tiles, or somewhere I should look to start figuring it out?

For reference, here is an article that accomplishes the same goal I'm trying to achieve, though they forked the code and modified the existing raster pixel shader in place. I'd rather go the custom layer route if possible!

Thanks!

karantza avatar Nov 19 '18 17:11 karantza

Unfortunately there's currently no elegant way to reuse existing source code with custom layers, but we want to look into exposing some kind of an API for this. Previously I experimented with this too, although with the help of some nasty hacks: https://gist.github.com/mourner/e24fab0dd579402b0a6a3bbeaf916a02

mourner avatar Nov 21 '18 17:11 mourner

Thanks for the update, I'll press on with the hacky solution then and see what I can come up with. Having an easy way to extend the built in layers would open up a ton of possibilities for data visualization, so I hope this feature gets some attention!

Edit: I've had some success! Your shadow example got me on the right track, and I can now render raster tilesets using my own shader. I had to copy a lot of code out of the draw_raster file, as well as remove dependencies on other classes in the mapbox source that I didn't want to deal with compiling in (I stole VertexArrayObject outright), but the end result works in about 500 lines. The key was realizing that I could access tile textures through the sourceCache, and other values through the painter.

My example, though be warned it's not pretty: https://gist.github.com/karantza/15d67e3add6f5e1418a3eeb2be0a6efb

karantza avatar Nov 26 '18 16:11 karantza

I've managed to find a very simple hack to achieve this using the standard mapbox-gl api. I have a working example here

maeneak avatar Jun 24 '19 14:06 maeneak

@maeneak thank you for sharing the example. Would you be able to share more about your use case for custom rendering of raster tiles? The demo in your link shows a simple color invert. That could likely be achieved using the raster-colorize proposed in https://github.com/mapbox/mapbox-gl-js/issues/3889.

asheemmamoowala avatar Aug 21 '19 23:08 asheemmamoowala

@asheemmamoowala I'm generating wind maps, contour maps and isolines from encoded RGBA textures served from a wms. Insperation has come from @mourner webgl-wind and the work at windgl. I'd need to look a bit deeper at #3889 and see if it suits my needs. I do like having direct access to the GLSL though.

maeneak avatar Sep 09 '19 11:09 maeneak

@maeneak I have the same use case as you, with a further detail. I need to generate custom layer for zoom levels from a raster images of zoom 2.Do you have any idea about how to acheive this ? Thanks in advance

leneon314 avatar Jul 23 '22 13:07 leneon314