javascriptthree.jswebglzbuffer

Ugly render on clouds


I'm trying to implement the code from this tutorial, but in much greater proportions (radius = 100000 units).

I don't know if the size matters but on my earth render the clouds have a strange render. As the tutorial does, I'm using two spheres and three textures (earth map, bump map, clouds).

Here the result (that's worse if the clouds are closer): Earth

More the clouds are closer of the planet surface, more this glitch is visible. If the clouds are sufficiently far (but that's not realistic) the problem disappears completely.

What can I do?


Solution

  • Use logarithmic depth buffer instead of the linear one. This is a very simple change, just enable logarithmicDepthBuffer when you create your THREE.WebGLRenderer like so:

    var renderer = new THREE.WebGLRenderer({ antialias: true, logarithmicDepthBuffer: true});
    

    Here's an example you can have a look at: http://threejs.org/examples/#webgl_camera_logarithmicdepthbuffer

    Using polygonOffset as suggested by LJ_1102 is a possibility, but it shouldn't be necessary.