Search code examples
aframe

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

jagged edge sphere

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?

Solution

  • 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>