Strange model behavior when using InstancedMesh with CameraSync (threebox)

Questions
,
1

I have a mapbox and CameraSync (threebox/CameraSync.js at 6e6a1ae3878c8557c20eb56ada53af843222f390 · peterqliu/threebox · GitHub) to sync the map with the models.

I need to display a large number of similar objects on the map. I want to use InstancedMesh for optimization, but when using it, objects lose polygons (screenshot below)

image
image1090×518 23.7 KB

There are three objects in the scene:

  1. Without using InstancedMesh
  2. Using InstancedMesh
  3. Using InstancedMesh and an increased scale parameter (with an increase in scale, the model becomes more detailed)

Do you know why these artifacts appear when using InstancedMesh?

I created a demo https://jsfiddle.net/mlkf_00/L765f1oa/1/

2

Does this issue also occur without using mapbox and CameraSync?

1 Like
4

Mapbox is only used to get the position of the camera. I think it’s about CameraSync

5

Hello, I have also encountered the same problem. May I ask if the problem has been resolved? If so, thank you

6

The issue was solved by instanced mesh shader customization. In case with instanced mesh, precision should be higher. WebGL only supports float32. And there 2 possible solutions: increase precision in shader by using two float32 variables for coordinates (link); make coordinates calculations in js context (js number has 64 bit)

7

Since I am not good at this field of work, can you share your liberation plan with me for reference. thanks