Custom WebGL particle/flow layer #16196

kingkong-cmd · 2024-09-15T01:53:44Z

kingkong-cmd
Sep 15, 2024

So, I have been building a very crude version of a custom flowlayer for wind illustration, and it's starting to come together, ref img below. Hoping to get some advice on how to proceed.

So far I have a background WebGLTileLayer that creates a continuous heatmap showing wind strength, using OL styling options. This works perfectly. Then I have used a TileLayer on top for the particle animation, drawing it onto a canvas in the loader function, and return the canvas to the TileLayer. Both layers are based on data encoded in RGBA in png files.

I am now looking for advice on how to implement more properly with suitable layers, sources, renderers etc (I find it really hard to understand how all the parts work together from reading OL source):

What would be the best Layer to use/extend for this usecase?
The actual animation is now happening through a framestate.animate = true in a forever postrender event loop. Is this a correct way of telling WebGL to keep drawing? Feels like it requires some compute, but might be the WebGL process itself, and not the framestate.animate = true loop.
How should I split data preparation vs WebGL stuff between source/layer? Do i prepare data in a source, return it to a layer, and then do all the WebGL and rendering there? WebGL functions need access to the map bounds so that i can resize the canvas/layer on zoom&scroll. This is not available in the source/loader function, but is available via framestate from render function in layer.

wind_source = new DataTileSource({
    interpolate: true,
    maxZoom: 0,
    loader: async function (z, x, y) {

        // PSEUDOCODE:
        // Create a canvas with hard-coded witdth and height (cannot access framestate in loader function)
        // Functions for getting all the wind data from png (probably belongs in the loader function)
        // Functions for WebGL to draw on the canvas with shaders, textures, framebuffers and the whole shabang (Should be moved to layer render function?)

         function render() {
	      drawScreen()
	      updateParticlesPositions();
	      requestAnimationFrame(render);
        }
	          
        // Start the animation loop
        render();
        return canvas
}

testlayer = new TileLayer({
    source: wind_source,
})

map.addLayer(testlayer);

testlayer.on('postrender', function (event) {
	event.frameState = true
})

kingkong-cmd · 2024-09-18T00:06:54Z

kingkong-cmd
Sep 18, 2024
Author

Ok, I finally managed to make something. I used a custom canvaslayer and rewrote the render function to do all the webgl stuff, and then the animation runs by calling requestAnimationFrame() which again calls map.render(). I have no idea what I am doing, so if anybody is reading I would like to know if this is an anti-pattern.

Also, still haven't figured out how to attach the layer to a Source - now i'm just reading the png directly from the render function.

A feature, different than the Flowlayer, which reprojects the image into webmercator prior to putting it into the texture, I made the shader calculate the lat/lon for the particle, so that it can look up the vectors directly from the un-reprojected png just using the lat/lon. I think this may be better. Not sure.

Also, I have separated the color into a separate layer. I thing this works better than combining color and flow, especially when moving and zooming the map. Ideally I want to clear the whole flow layer when moving the map, and redraw when it stops, but not sure how.

Screencast.from.18.sep.2024.kl.01.50.+0200.webm

1 reply

kingkong-cmd Sep 18, 2024
Author

Managed to figure out how to change the underlying data for the flowlayer by adding some code to the subclassed layer where it fetches new pngs from urls, so now I can use an input slider thing to select underlying data. Problem now is that the flow layer renders behinds all the other layers, but over the graticule overlay, so that means transitions are ugly as hell, and no graticule. Tried playing with z-indexes but doesn't seem to work.

Screencast.from.19.sep.2024.kl.00.43.+0200.webm

kingkong-cmd · 2024-09-19T02:05:30Z

kingkong-cmd
Sep 19, 2024
Author

Figured it out. Since I am creating my own canvas in the custom Layer class I need to set some css for it not to mess up all the layers. Now, the graticule becomes visible again, and I can change the color of the wind particles in the fragment shader since it is not hidden behind the color layer anymore. Though the slightly grayish particles looked better.

this.canvas = document.createElement('canvas');
this.canvas.classList.add("ol-layer")
this.canvas.setAttribute("style", "position: absolute; left: 0px;")

Screencast.from.19.sep.2024.kl.03.59.+0200.webm

0 replies

robitaillej · 2024-11-12T20:56:22Z

robitaillej
Nov 12, 2024

Hi! The streams look great! I'm really interested on how you managed to do this. Do you have a wokring code sample?
I am perticularly interested in what kind of source data is needed to do that. I am usually rendering raster data with geoserver through wms calls. So I'm not sure how I could adapt from this. I was curious on how you did it.
Thanks for any information!

6 replies

rasa2k Jan 8, 2025

Hi kingkong-cmd,
Thanks for sharing. I'm impressed how far you managed to come. I'm not planning on switching away from Openlayers and I'm very keen on seeing more of your code if possible?

robitaillej Jan 8, 2025

Hello,
Thanks kingkong-cmd for you reply.
I got some time this week to work on this and I managed to arrive to a somewhat ok result with the experimental Flow layer from Openlayers. I still have a lot of work to do to make it better, but its still something.
The thing I wanted to do is to use one of our GeoServer layer as data source. This codepen example is a somewhat derived version of the OL example.

kingkong-cmd Jan 8, 2025
Author

Hello, Thanks kingkong-cmd for you reply. I got some time this week to work on this and I managed to arrive to a somewhat ok result with the experimental Flow layer from Openlayers. I still have a lot of work to do to make it better, but its still something. The thing I wanted to do is to use one of our GeoServer layer as data source. This codepen example is a somewhat derived version of the OL example.

Wow, great work.

I did not quite like the Flowlayer, hence why I built my own. Still WIP, but I put it here while I work on it, in case you want to have a look. Not possible to read code though since minified.

Suddenly people are showing up to discuss, so maybe won't migrate to Mapbox after all. Have been looking into ways to optimize size of wind data going from server to client lately, but seems almost impossible to compress more than encoding data into pngs => meaning wind strength only, is apprx 0.5 MB for whole world with 0.25 degr resolution, and strength + direction is 1 MB for the same. Tiling the data acted weirdly on the tile edges.

kingkong-cmd Jan 8, 2025
Author

Hi kingkong-cmd, Thanks for sharing. I'm impressed how far you managed to come. I'm not planning on switching away from Openlayers and I'm very keen on seeing more of your code if possible?

Hi,

Unfortunately don't have code to share right now. May share something at a later stage. @robitaillej 's example combined with my description to him can give you some pointers on how to approach, but he uses the Flowlayer, hence doesn't show the webGL stuff which is the tricky part.

robitaillej Jan 8, 2025

Hello, Thanks kingkong-cmd for you reply. I got some time this week to work on this and I managed to arrive to a somewhat ok result with the experimental Flow layer from Openlayers. I still have a lot of work to do to make it better, but its still something. The thing I wanted to do is to use one of our GeoServer layer as data source. This codepen example is a somewhat derived version of the OL example.

Wow, great work.

I did not quite like the Flowlayer, hence why I built my own. Still WIP, but I put it here while I work on it, in case you want to have a look. Not possible to read code though since minified.

Suddenly people are showing up to discuss, so maybe won't migrate to Mapbox after all. Have been looking into ways to optimize size of wind data going from server to client lately, but seems almost impossible to compress more than encoding data into pngs => meaning wind strength only, is apprx 0.5 MB for whole world with 0.25 degr resolution, and strength + direction is 1 MB for the same. Tiling the data acted weirdly on the tile edges.

The result is quite nice! The OL community seems a little bit active on the subject. I found some interesting info on this pull request discussion. The Flow layer seems to be still in development.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Custom WebGL particle/flow layer #16196

{{title}}

Replies: 3 comments 7 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Custom WebGL particle/flow layer #16196

kingkong-cmd Sep 15, 2024

Replies: 3 comments · 7 replies

kingkong-cmd Sep 18, 2024 Author

kingkong-cmd Sep 18, 2024 Author

kingkong-cmd Sep 19, 2024 Author

robitaillej Nov 12, 2024

rasa2k Jan 8, 2025

robitaillej Jan 8, 2025

kingkong-cmd Jan 8, 2025 Author

kingkong-cmd Jan 8, 2025 Author

robitaillej Jan 8, 2025

kingkong-cmd
Sep 15, 2024

Replies: 3 comments 7 replies

kingkong-cmd
Sep 18, 2024
Author

kingkong-cmd Sep 18, 2024
Author

kingkong-cmd
Sep 19, 2024
Author

robitaillej
Nov 12, 2024

kingkong-cmd Jan 8, 2025
Author

kingkong-cmd Jan 8, 2025
Author