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 rend

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.