Describe the bug
When the zoom gets at a certain distance, countries strokes/edges appear jagged. I haven't touched the rendererConfig arguments (antialias and alpha are still true). It's not too obvious on Desktop but the jagged strokes appear very clearly on real mobile devices. I have tried it on xiaomi note 7 pro on android chrome and Iphone 6+ on safari.
As you can see, I have to rely on polygons colors to mark countries borders for now.
Smartphone (please complete the following information):
Device: [Xiaomi Note 7 pro]
OS: [MIUI 12.5.1]
Browser [android chrome]
Version [106.0.5249.79]
Additional contextI suspect it comes from the polygon strokes overlapping each other on common borders from two countries. So what appears as one stroke is actually 2 strokes and, for some reason, smartphones don't know which to display? Edit: It seems that thin lines appear jagged anyway. See below video where only one coutries has polygonStrokeColor enabled :
I guess that the problem comes from src/layers/polygons.js. Sadly, I'm very new to three.js and I'm not sure I can fix this myself at the moment. Otherwise I'd love to make a PR.
Describe the bug When the zoom gets at a certain distance, countries strokes/edges appear jagged. I haven't touched the rendererConfig arguments (antialias and alpha are still true). It's not too obvious on Desktop but the jagged strokes appear very clearly on real mobile devices. I have tried it on xiaomi note 7 pro on android chrome and Iphone 6+ on safari.
To Reproduce Steps to reproduce the behavior: Just go to https://vasturiano.github.io/react-globe.gl/example/choropleth-countries/ on your smartphone.
Expected behavior Strokes shouldn't appear jagged.
Screenshots
With
polygonStrokeColorenabled, which displays the strokes to 1px each, countries borders appear jagged. https://user-images.githubusercontent.com/45822175/194642033-31d98a6b-d9eb-4fa0-9e07-73b6a438483b.mp4Without
polygonStrokeColorenabled but with different colors for each country, everything's fine. https://user-images.githubusercontent.com/45822175/194640549-2b4eb141-3530-4132-9ff6-caeb205d189b.mp4As you can see, I have to rely on polygons colors to mark countries borders for now.
Smartphone (please complete the following information):
Additional context
I suspect it comes from the polygon strokes overlapping each other on common borders from two countries. So what appears as one stroke is actually 2 strokes and, for some reason, smartphones don't know which to display?Edit: It seems that thin lines appear jagged anyway. See below video where only one coutries haspolygonStrokeColorenabled :https://user-images.githubusercontent.com/45822175/194695643-0fab28ce-7f1b-48d6-ab02-270fbce0a939.mp4
I guess that the problem comes from src/layers/polygons.js. Sadly, I'm very new to three.js and I'm not sure I can fix this myself at the moment. Otherwise I'd love to make a PR.