0

Here is my test application inthree.js- http://zheden.elitno.net/

There are 2 cubes - green is the upper one. If you uncheck "Cube 2" (yellow inner cube), it becomes invisible. And when you rotate then camera and after rotating check back "Cube 2", it becomes outer. It reproduces not with all angles of rotation.

Adding "renderer.sortObjects = false" fixed the problem. But could you please explain me the reason of this behavior? Renderer sort objects based on their positions. Why order of rendering is changed when some object is transparent? It's position is not changed.

Is this related to Transparent textures behaviour in WebGL ?

Thanks, Zhenya

Community
  • 1
  • 1
Zheden
  • 583
  • 2
  • 11
  • 36
  • There are no transparent objects in your demo, only opaque ones. You have two cubes of exactly the same size and orientation in exactly the same location. That is never a good idea. What are you trying to achieve? Also see this: http://stackoverflow.com/questions/15994944/transparent-objects-in-threejs/15995475#15995475 – WestLangley Jul 08 '13 at 13:23
  • I want to have same order of displaying objects on scene, even is some of them becomes invisible and then again visible. In link that you give you write that "WegGLRenderer sorts objects based on their position, and renders objects in the sorted order". But why rendering order is changed when I change visibility of object? It's position is still the same. – Zheden Jul 08 '13 at 14:05

1 Answers1

3

There are no transparent objects in your demo, only opaque ones. You are changing the visibility.

WebGLRenderer sorts objects based on their distance from the camera, and renders objects in the sorted order. It renders opaque objects from front to back.

The rendering order can change due to how the sorting algorithm breaks ties when two objects are the same distance from the camera.

However, the render order is not necessarily changing when you toggle the visibility off and then on again. What can be changing is the distance to the depth buffer in the least significant digits due to roundoff when you move the camera. Hence, sometimes the second object renders, and sometimes it does not.

You have two cubes of exactly the same size and orientation in exactly the same location. Do not do that. It can cause you all sorts of rendering problems -- the most common of which, is flickering.

three.js r.58

WestLangley
  • 102,557
  • 10
  • 276
  • 276