Custom layer with renderWorldCopies

[zakjan]

mapbox-gl-js version: 1.10.0

Question

Custom layer receives the transformation matrix in prerender/render functions for a single world only. When renderWorldCopies is true, how do I get the transformation matrix for all rendered world copies? So that I could render the copies of the custom layer as well.

Links to related documentation

https://docs.mapbox.com/mapbox-gl-js/api/properties/#customlayerinterface
https://docs.mapbox.com/mapbox-gl-js/example/custom-style-layer/
https://docs.mapbox.com/mapbox-gl-js/example/add-3d-model/

[arindam1993]

@zakjan , we don't have a good way of doing this currently. We currently achieve the renderWorldCopies behaviour by duplicating the zoom level 0 tile multiple times.

The analogy for a custom layer would be having multiple model matrices for your custom layer object. However since we don't provide separated model, view and projection matrices from the custom layer interface, this is tricky to achieve.

[zakjan]

I have found an undocumented way how to do it currently, without any more matrices.

In prerender/render, I get the world offsets with:

const worldOffsets = map.transform.getVisibleUnwrappedCoordinates({z: 0, x: 0, y: 0}).map(x => x.wrap).sort((a, b) => a - b);
return worldOffsets.slice(1, worldOffsets.length - 1);

This returns for example [-1, 0, 1].

Then I render my shaders multiple times for each world offset, pass it as a uniform, and add vec2(uWorldOffset, 0) to every Mercator position before multiplying with the matrix. It works!

Is this a good solution, or would you recommend anything better? I'm worried about the way to get the world offsets, because map.transform is private.

It seems that it would be helpful if a function to get the world offsets is provided as a public method officially on its own, unrelated to custom layers.

[zakjan]

Closing, I have switched to simple map.getBounds. It returns the entire bounds, including world copies. The bounds can be transformed to Mercator, and used as shader input vertices, rendering the custom layer in a single draw call.

[GarrettCannon]

@zakjan Any chance you could throw an example into a codepen/jsfiddle? I would like to be able to do the same thing. Much appreciated!

[m9dfukc]

@zakjan I would also be interested in how to apply the map.getBounds. Currently I do it with multiple render passes but that seems not very elegant. Any code example would be very welcome even a very simple one just to get the rough picture.

Thanks!

[tangzijun]

Here is my solution：maplibre/maplibre-gl-js#4614 (comment)