Three.js/WebGL: Large spheres appear broken at intersection

Question

Let me preface this with saying I\'m very inexperienced with 3D graphics.

Problem

I\'m using Three.js. I have two spheres which (deliberately) collide in m

Answer 1

You're suffering from a precision issue in the depth buffer. The larger the scale of your scene the more pronounced this becomes -- especially for objects that span a large distance. The depth buffer has only 32bits (floating point I believe) to work with. As you increase the Z-Range of your camera the precision drops. A standard camera tends to have increased precision near the "near" plane, and reduces to the distance (though I'm not positive on what matrix three.js is actually using).

Either you reduce your scene size, or move the near plane further away from the camera. If you search the topic of depth buffers and precision you can find a lot of information on this topic. Refer to the generic OpenGL info as well, not just three.js or WebGL.

Note: To clarify, the reason the two scenes are different is because you haven't scaled the camera's settings the same. In the scene that works simple set the near plane to "0.00001" and you'll see the same problem.