5

Material shines through when zooming out (three.js r78)

When zooming out to a certain extend the material of objects behind other objects starts to shine through. It looks very similar to the effect when faces are overlapping (faces are in the same plane).

To demonstrate this I made a fiddle.

In this example I draw two thin boxes (thickness 1 and there is a empty space between the boxes of also 1) so the boxes are not touching eachother but the material shines through anyway.

// geometry with thickness 1
var geometry = new THREE.BoxGeometry(20000, 20000, 1);

This screenshot demonstrates the effect: image

This screenshot shows there is a space between the two geometries. image

When zooming the effect sometimes appears and sometimes disappears (it is also depending on zoom distance and the size of the screen).

I tried to play around with different material properties, but I seem to be unable to find any material setting that prevents this from happening.

Is this a bug? Or a WebGL limitation? Or a general limitation in 3D graphics? Or am I missing something and is this actually a material or renderer configuration mistake?

In my models this effect is really disturbing and ugly. Can I somehow prevent this from happening?

Community
  • 1
  • 1
Wilt
  • 41,477
  • 12
  • 152
  • 203
  • 1
    is this ok https://jsfiddle.net/8rv8cguL/5/ .taken from http://stackoverflow.com/questions/26747759/ugly-render-on-clouds – Madhawa Priyashantha Jun 16 '16 at 12:58
  • @FastSnail Seems like a great solution. Can you elaborate on the working of this parameter in an answer then I will accept it. I also got another suggestion [on GitHub](https://github.com/mrdoob/three.js/issues/9148#issuecomment-226457745) but maybe your suggestion is even better. – Wilt Jun 16 '16 at 13:00
  • 1
    i really don't know the answer but tried above answer and got it work.according to it setting `logarithmicDepthBuffer: true` works.but i think it's better if you write a answer with both solution because you know it well. – Madhawa Priyashantha Jun 16 '16 at 13:05
  • @FastSnail Sure! Thanks for the suggestion anyway, just wanted to give you the credits for it. I will see what else I get and then I will answer the question myself a bit later... – Wilt Jun 16 '16 at 13:07
  • 1
    i remember this video from udacity https://www.youtube.com/watch?v=CjckWVwd2ek. it may also help – Madhawa Priyashantha Jun 16 '16 at 13:21
  • I never had this problem zooming in or out, for me it is whenever the angle of the camera ceases to be DIRECTLY at the object in question. 15 degrees of freedom is all I ever seem to get. – Ronk Apr 30 '17 at 01:52

1 Answers1

7

This problem is caused by a faulty configuration that severely limits the depth buffer precision.
On OpenGL.org it is described as follows:

You may have configured your zNear and zFar clipping planes in a way that severely limits your depth buffer precision. Generally, this is caused by a zNear clipping plane value that's too close to 0.0. As the zNear clipping plane is set increasingly closer to 0.0, the effective precision of the depth buffer decreases dramatically. Moving the zFar clipping plane further away from the eye always has a negative impact on depth buffer precision, but it's not one as dramatic as moving the zNear clipping plane.

True, since in the example the near clipping plane value was set to 1.
So far I know two solutions to this problem.

1) Simply increase the camera near value:

// camera
camera = new THREE.PerspectiveCamera(
    45, window.innerWidth / window.innerHeight, 
    500, // <-- Increased near from 1 to 500
    150000
);

This solution is demonstrated in this fiddle

2) Configure the WebGL renderer to use a logarithmic depth buffer:

// renderer
renderer = new THREE.WebGLRenderer({
    antialias: true,
    logarithmicDepthBuffer: true // <-- Set render to use logarithmic depth buffer
});

This solution is demonstrated in this fiddle

Please post another answer in case you know any other solutions.

Community
  • 1
  • 1
Wilt
  • 41,477
  • 12
  • 152
  • 203
  • Wilt - You need to explain why increasing the near plane works. : - ) – WestLangley Jun 16 '16 at 15:14
  • 1
    @WestLangley I actually have no idea, please feel free to edit or answer... I also have no clue why setting `logarithmicDepthBuffer` works. What is even more interesting to know is how all this influences performance. – Wilt Jun 16 '16 at 15:19
  • If you can provide a link with some background I can also add this info myself (I am not lazy, I simply don't know). – Wilt Jun 16 '16 at 15:22
  • Wilt - Google "depth buffer precision". – WestLangley Jun 16 '16 at 15:50
  • Will it work for all model?I have tested it,with most of the model this condition helps but with some model it fails.Can anyone please guide me to a generic solution. – Aasha joney Jan 04 '17 at 04:22
  • logarithmicDepthBuffer not working in three_70.can anyone guide me in this? – Aasha joney Jan 04 '17 at 07:30
  • @Aashajoney can you be more specific on the type of model for which it doesn't work. Logaritmic depth buffer should work. It has been moved to a `WebGLCapabilities` class, but it still exists. Check the class [here](https://github.com/mrdoob/three.js/blob/dev/src/renderers/webgl/WebGLCapabilities.js#L69) for reference – Wilt Jan 05 '17 at 17:31
  • @Wilt I am trying to load a CAD/CAM model of a car with huge count of vertices and faces. – Aasha joney Jan 06 '17 at 03:46
  • http://stackoverflow.com/questions/41462145/three-js-z-fighting?noredirect=1#comment70135459_41462145 .Can you take your time to look at this link. – Aasha joney Jan 06 '17 at 07:41