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!

12 replies

kingkong-cmd Feb 20, 2025
Author

Hello again kingkong-cmd, I'm starting digging this thing again, and also trying to figure out if I should move towards mapbox or not. Just so I understand your example correctly, is the code made with custom openlayers functions while the data is stored on mapbox? If the code is with openlayers, i'd really like to see how you managed to do something like that, and if you think you'll want to share your code at some point. Because, as you said it, the Flowlayer from openlayers is still in development and does not really fit every scenarios. And I'd really like to stick with openlayers!

First, I think it's the same complexity with both OL and mapbox. Only difference is with mapbox you will be able to ask questions underways because there are people there who will help.

I haven't stored any data on mapbox, everything is on my server. I download wind data, then encode the wind data into png for compression (using python), then those pngs are fetched by the client when the website is used, and on the client I use a regular OL WebGLTileLayer for the colors, and then a OL CanvasLayer for all the webgl drawing of the wind particles. The CanvasLayer is almost fully customised. The webGL stuff was complicated on its own, but what bugged me tho most was figuring out how to make the CanvasLayer interact with OL. This is what is difficult when there is no community.

I can probably share something someday, but don't wait for it. If you decide to try yourself, I can try to assist, but I am no expert.

Windsurfice Feb 21, 2025

First, I think it's the same complexity with both OL and mapbox. Only difference is with mapbox you will be able to ask questions underways because there are people there who will help.

I haven't stored any data on mapbox, everything is on my server. I download wind data, then encode the wind data into png for compression (using python), then those pngs are fetched by the client when the website is used, and on the client I use a regular OL WebGLTileLayer for the colors, and then a OL CanvasLayer for all the webgl drawing of the wind particles. The CanvasLayer is almost fully customised. The webGL stuff was complicated on its own, but what bugged me tho most was figuring out how to make the CanvasLayer interact with OL. This is what is difficult when there is no community.

I can probably share something someday, but don't wait for it. If you decide to try yourself, I can try to assist, but I am no expert.

Have you tested you flow setup on Mali GPU's?
With the Openlayer version I have this strange pattern: #16432

I'm building my website on the Openlayers version and this is what I got so far. https://windsurfice.com/nl/flow-map
But the Mali GPU is killing it at the moment. Here in the Netherlands most Samsung mobile phones have an Mali GPU so they can't see the website correct.

kingkong-cmd Feb 21, 2025
Author

Have you tested you flow setup on Mali GPU's?

I have not, but if you go to the website I linked to with a Mali GPU device I guess you will quickly see if it works or not. I believe my particles require use of webgl2 though.

With the Openlayer version I have this strange pattern: #16432

These issues are way above my pay grade, but I noticed my wind particles became all wonky tonky on mobile when I used precision mediump float; instead of precision highp float; in my shaders. I see there is some code in the flowlayer (ref link below) dealing with this, but the code is close to unreadable for me, so not sure what is being used in the end. Not sure how, but might be worth trying to force use of highp float.

https://github.com/search?q=repo%3Aopenlayers%2Fopenlayers+precision+highp+float&type=code

jahow Feb 21, 2025
Maintainer

I see there is some code in the flowlayer (ref link below) dealing with this, but the code is close to unreadable for me, so not sure what is being used in the end. Not sure how, but might be worth trying to force use of highp float.

Shaders in OpenLayers will use precision highp float; if available, and fallback to mediump otherwise. If you force highp you might get compilation errors on some mobile devices; falling back to mediump gives the opportunity to still render something, even though it might be a bit degraded.

kingkong-cmd Feb 21, 2025
Author

I see there is some code in the flowlayer (ref link below) dealing with this, but the code is close to unreadable for me, so not sure what is being used in the end. Not sure how, but might be worth trying to force use of highp float.

Shaders in OpenLayers will use precision highp float; if available, and fallback to mediump otherwise. If you force highp you might get compilation errors on some mobile devices; falling back to mediump gives the opportunity to still render something, even though it might be a bit degraded.

Ok, that's good to know. I just googled to find out that #ifdef GL_FRAGMENT_PRECISION_HIGH is actually checking this exact thing. Then it probably has nothing to do with this, unless maybe these Mali devices only support mediump, and then it just renders nonsense like it did for me when I tried forcing mediump on an Adreno device.

Windsurfice · 2025-02-21T14:05:03Z

Windsurfice
Feb 21, 2025

Your example doesn't load the particles and color layer on my Samsung mobile. I will try to debug later. As for highp I checked this on my phone and it does support it but still it renders the wrong pattern.

0 replies

Uh oh!

Custom WebGL particle/flow layer #16196

Uh oh!

kingkong-cmd Sep 15, 2024

Replies: 4 comments · 13 replies

Uh oh!

Uh oh!

kingkong-cmd Sep 18, 2024 Author

Uh oh!

kingkong-cmd Sep 18, 2024 Author

Uh oh!

kingkong-cmd Sep 19, 2024 Author

Uh oh!

robitaillej Nov 12, 2024

Uh oh!

Uh oh!

kingkong-cmd Feb 20, 2025 Author

Uh oh!

Windsurfice Feb 21, 2025

Uh oh!

kingkong-cmd Feb 21, 2025 Author

Uh oh!

jahow Feb 21, 2025 Maintainer

Uh oh!

kingkong-cmd Feb 21, 2025 Author

Uh oh!

Uh oh!

Windsurfice Feb 21, 2025

kingkong-cmd
Sep 15, 2024

Replies: 4 comments 13 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 Feb 20, 2025
Author

kingkong-cmd Feb 21, 2025
Author

jahow Feb 21, 2025
Maintainer

kingkong-cmd Feb 21, 2025
Author

Windsurfice
Feb 21, 2025