Incorrect rendering of model geometry after changing the position on the map (mapbox + babylon.js)

Questions
1

Hi! I faced with some issue that can’t solve.
The aim - add 3d models to the map by it’s coordinates.
I make it in several steps:
the first one is to add a layer to the map, in onAdd method i initialize scene, engine, matrix.
I pass the initial coordinates to the matrix (the coordinates on which map is loaded).
After that i need to add models to the existing layer, i do it dynamically after receive a data from BD
I calculate the location of the models of the map taking into account the initial coordinates that i passed to the matrix in onAdd method.
The question is that the models that located near the initial coordinates look great, but the further the model is from these coordinates, the more broken it is:

exapmple_broken
exapmple_broken755×643 168 KB

I prepared the simplified example (link below this post). Here a use setTimeOut method inside the onAdd just to reproduce the behavior. The map is loading in initial coordinates [-118.3851, 34.0223], also i have an array from 4 items with coordinates

const dronesArray = [
  { x: 51.409782245926316, y: 5.456434410227905, z: 0 }, // Netherlands
  { x: 34.02383270026034, y: -118.37519963081964, z: 0 }, // LA
  { x: 34.022482149490365, y: -118.38511801360747, z: 0 }, // LA
  { x: 44.63058800723914, y: 10.42298214926346, z: 0 } // Italy
];

, where i need to place my models, and in 7 seconds i replace my models with a new coordinates, on each place i put a pin, so that it will be easy to find a location (just zoom out the map and zoom in to any pin to see the model).
In the result we see the situation, that the model that are located near the initial coordinated look good, but models that are located in Netherlands and Italy look broken.

map
map1587×579 261 KB

I can’t figure out the problem, please help if you have some idea how to fix it and why it is happenning

Codesanbox example: babylon-mapbox (forked) - CodeSandbox

2

It looks like a precision issue by relying on big number in your Babylon Scene.

Basically the numbers are so big they lose precision when rendered :frowning:

I would advice to work in a relative coordinate system in babylon for instance lets consider your camera the center of the scene so your model position would always be at a reasonable position ?

3

Maybe that can help:

There are other posts in the forum regarding mapbox integration (seach for mapbox).

Also, try to create the engine with useHighPrecisionFloats:true and useHighPrecisionMatrix:true. See EngineOptions | Babylon.js Documentation

1 Like
4

Thanks for your reply! I’m not really sure how i can reduce these numbers, because it is a real world coordinates.
I convert geo coordinates into the projected mercator coordinate with
mapboxgl.MercatorCoordinate.fromLngLat and then calculate the position of each 3D model relative to the original coordinates. The same i did using Three js and didn’t face with such issue…

Anyway, i found other solution that fixed this issue for me.
I recalculate projection matrix and position for drone on each “onMove” event on the map, just neet to optimize it with debouce function…
So when user scrolls the map to Italy, for instance, he sees the whole model, without broken geometry

2 Likes
5

Thank you for your reply!
I used these examples as a base when created mine.
But i didn’t find any example similar to my case, when we need to load models after setting the initial layer with some initial coordinates for projection matrix and model can be added at any moment dynamically, not only during the initial initialization of the map.
The issue that all models are placed correctly, but geometry is broken…

As I answered above, I found other solution that fixed this issue for me.
I recalculate projection matrix and position for drone on each “onMove” event on the map.
That’s why when user scrolls the map to Italy, he sees the model without broken geometry