WebGL Vector Tile rendering

[jahow]

Here is a WIP PR as basis for this discussion: #14445

The approach in this PR is motivated by 1/ capitalizing as much as possible on the work done for the webgl vector layer and 2/ staying as close as possible to the logic and implementation the webgl raster tile renderer. My experience with tiled layers is actually quite limited but I feel like with the right architecture choice we could have most of the tile handling logic shared between several paths (raster & vector).

Same with the concept of tile representation, which I hope is a good idea for abstracting both raster and vector tiles, each of them having very different needs in terms of preparing and uploading data.

Then, looking a bit further, this is what I noticed in terms of performance: the webgl VT renderer in its current state doesn't offer such a big improvement to the canvas one; there are still some very long frames when reading the features from a tile, most of it being spent on ingesting features in a MixedGeometryBatch. This is not a big surprise, this code contains a lot of new XxxGeometry stuff and the garbage collector is definitely getting a lot of work.

I keep thinking about how we could shortcut all this object creation stuff and simply go from numerical arrays to numerical arrays all the way from MVT to GPU; I think this would give huge perf improvements! But that would also be quite the refactoring.

Please share ideas & opinions, I will keep working on this topic consistently in the coming weeks and am looking forward to cooperation!

[jahow]

Add some optimization for putting the features in the geometry batch and it's now doing less allocation and only working with flat coordinates!

[karussell]

This is a really exciting direction - thank you :) !

When I want labels (cities, street names etc), should I add them with a canvas on top somehow or is this possible in the WebGL vector tile layer?

[jahow]

Thanks for the kind words! Currently none of the vector webgl renderers have text support. This is planned and will probably be done by leveraging the existing text rendering logic in OL as much as possible.

[karussell]

Nice, looking forward to this :) !

[karussell]

And are the examples on the public website already using the latest version? I notice there is a small flickering/stuttering while zooming with a white color under Linux (firefox and chrome). For firefox it is much more pronounced than it is for chrome.

[jahow]

There's indeed much room for improvement, interim tiles should be used while new tiles are being loaded which is sometimes not the case in this example.

[vprint]

Very interesting !
Is there any documentation for ol/renderer/webgl/VectorTileLayer and ol/webgl/styleparser ?

[jahow]

Not much documentation yet unfortunately, the API of this renderer is still changing regularly. But you can look at the examples on the main branch and see it in action! As for the style parser, I don't think it will become part of the API.

[karussell]

Somehow the water is no longer painted for the WebGL vector tiles example

btw: the example is still fine after this PR in September. Thanks for the flickering fix :) !

[jahow]

thanks! indeed something was broken in #15121 (it renders OK in chrome, and somehow the rendering tests passed), I'm working on a fix right now

[karussell]

Oh, wow. Thanks for the fast reply and ongoing fix! Amazing :)

[jahow]

see #15340

[karussell]

Works for me, thank you!

[Ghostbird]

I'm using MAUI's Android WebView to render an openlayers 9.0.0 map.

We've got two layers:

1. OSM tiles layer
2. VectorLayer containing a single point

Something like the flickering while zooming mentioned above happens.

I've found these things:

• The affected layer is the tiles layer. The vector layer and map controls stay in view at all times, and do not flicker.
• It seems a specific (fractional) zoom level is either white, or working. When you pan, it stays in the current state (except for the next point)
• The point feature of the vector layer must be rendered. As soon as we pan the point far enough off screen + renderBuffer the tiles layer has no problems at any zoom level.
• It only happens when the map has north on top. Any rotation at all means the issue doesn't happen. I've tried with a view rotation of 90 and 0.5 * Math.PI, and then it doesn't happen either (I suspected it might be a Moiré effect, but then it would probably happen perpendicularly too.)
• The problem is not caused by the presence of the rendered vector point during the zoom. E.g. if I pan the point off screen, then zoom a random amount, then pan the point back in view, the tiles layer may turn white.

I've tried tweaking things to the source and layers settings, but to no avail. Do you have any idea how to solve/work around this?

Things I've tried changing:

• layer.Tile.opaque
• layer.Vector.zIndex
• layer.Vector.declutter
• source.Vector.overlaps
• source.Tile.zIndex
• View.constrainResolution
• Style colours changed from RGBA to RGB and back, (though all involved colours are opaque)
• Style moved from Vector layer to Feature and back.

[Ghostbird]

Interesting. In our case the Map targeted the only div in the body. When I noticed that was redundant, I removed the div and targeted the body directly, and everything works smoothly. Very unexpected. I didn't even do that to try to solve the issue, it was just a refactoring.

[karussell]

Have a look into this issue: #15644

[Ghostbird]

Fixed three hours ago! That's really cool!
I hadn't yet realised it was related to the draw interaction. But indeed, in that view I always have the draw interaction enabled. No idea why attaching the Map to the body didn't trigger the bug.