My A-frame Spheres have jagged edges when viewed from a distance - why

I want to stand above a VR sphere at various different heights but my sphere gets ugly jagged edges when I get 500m above a 2000m radius sphere.

glitch page showing the issue

I am a complete novice in A-frame and VR web design.

I would expect the edge of the sphere to look smooth. I have tried changing the segmentsHeight and segmentsWidth but that does not seem to help.

I have also tried <a-scene renderer="antialias: true"> and that also does not seem to help.

Known issue ? Any Ideas?

Looks like z-buffer issues (check out this example), where faraway points have trouble sorting out the distance while using a linear buffer.

From the docs:
>A logarithmic depth buffer may provide better sorting and rendering in scenes containing very large differences of scale and distance.

You can enable it like this:

<a-scene renderer="logarithmicDepthBuffer: true"> </a-scene>

So Piotr's answer to use logarithmicDepthBuffer is defintely the answer

<a-scene renderer="logarithmicDepthBuffer: true"> </a-scene>

But I want also leave a trail here for A-frame newbies trying to have very large objects - like earth size spheres!

You will want to change the value for the far parameter of your camera.
Objects beyond the far plane of the camera are not drawn and the far value defaults to 10,000. An earth sized sphere is 6,300,000m so you want to set your far value to the same sort of ball park as that. 1,000,000 worked for me because I am flying fairly close to the surface of my sphere.

     <a-camera far="1000000">
      </a-camera>

Also - if you have a sky set - that will default to a sphere of 500m radius and if you draw a large sphere a long way away - a portion of it will poke out through the sky and you will only see a portion of your sphere. So make your sky have a large radius

<a-sky color="lightblue" radius="7000000"></a-sky>