Ugly render on clouds

Question

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):

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?

Answer 1

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.

Answer 2

What you're experiencing is z-fighting due to insufficient depth buffer resolution.

You basically have three options to counteract this:

1. Write / use a multi-texture shader that renders all three textures on one sphere.

2. Increase the distance between the sphere faces. / Decrease the distance between your near and far clipping planes.

3. Use polygonOffset and the POLYGON_OFFSET_FILL renderstate to offset depth values written by your outer sphere. Read more about polygonOffset here.