Search code examples
javascriptthree.jsorthographicocclusion

How to correct sort order for opaque objects in orthographic rendering

In THREE.js, When viewing a grid of cubes through an off-axis OrthographicCamera, once the camera rotates enough that the objects ought to occlude one another, it appears that the rendering order of the objects is not based on their position in space, but rather the order in which they were created.

I have attemnpted to set THREE.WebGLRenderer( { antialias: true, sortObjects: false } ); but that doesn't appear to address the issue.

Here's an animated fiddle to see this bizarre Escher-esque effect: http://jsfiddle.net/rfbvdmxn/2/

Here's the scene just before the objects overlap: off-axis orthographic rendering

As I continue to rotate the camera in the same direction and the objects overlap, you can see that the backmost objects (from the camera's perspective) end up occluding the frontmost objects:

enter image description here

What's going on here, and more importantly how do I correct this?

Solution

  • The problem is that you've mixed the constructor parameters top and bottom of OrthographicCamera. If I change the sign of both arguments, sorting looks okay. Besides, the MeshNormalMaterial now produces a correct visual output.

    var camera = new THREE.OrthographicCamera(window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -1000, 2000);

    Demo: http://jsfiddle.net/rfbvdmxn/42/