9

When several objects overlap on the same plane, they start to flicker. How do I tell the renderer to put one of the objects in front?

I tried to use .renderDepth, but it only works partly - see example here:
http://liveweave.com/ahTdFQ
Both boxes have the same size and it works as intended. I can change which of the boxes is visible by setting .renderDepth. But if one of the boxes is a bit smaller (say 40,50,50) the contacting layers are flickering and the render depth doesn't work anymore.

How to fix that issue?

Miiller
  • 1,063
  • 1
  • 10
  • 29

3 Answers3

17

When .renderDepth() doesn't work, you have to set the depths yourself.

Moving whole meshes around is indeed not really efficient.
What you are looking for are offsets bound to materials:

material.polygonOffset = true;
material.polygonOffsetFactor = -0.1;

should solve your issue. See update here: http://liveweave.com/syC0L4
Use negative factors to display and positive factors to hide.

Miiller
  • 1,063
  • 1
  • 10
  • 29
  • 1
    This worked for my case beautifully when nothing else did! The bit about the distinction between negative and positive factors (in particular) does not seem documented anywhere else. – Milind R Jul 14 '20 at 11:42
5

Try for starters to reduce the far range on your camera. Try with 1000. Generally speaking, you shouldn't be having overlapping faces in your 3d scene, unless they are treated in a VERY specific way (look up the term 'decal textures'/'decals'). So basically, you have to create depth offsets, and perhaps even pre sort the objects when doing this, which all requires pretty low-level tinkering.

If the far range reduction helps, then you're experiencing a lack of precision (depending on the device). Also look up 'z fighting'

UPDATE

Don't overlap planes.

How do I tell the renderer to put one of the objects in front?

You put one object in front of the other :)

For example if you have a camera at 0,0,0 looking at an object at 0,0,10, if you want another object to be behind the first object put it at 0,0,11 it should work.

UPDATE2

What is z-buffering:

http://en.wikipedia.org/wiki/Z-buffering http://msdn.microsoft.com/en-us/library/bb976071.aspx

Take note of "floating point in range of 0.0 - 1.0".

What is z-fighting: http://en.wikipedia.org/wiki/Z-fighting

...have similar values in the z-buffer. It is particularly prevalent with coplanar polygons, where two faces occupy essentially the same space, with neither in front. Affected pixels are rendered with fragments from one polygon or the other arbitrarily, in a manner determined by the precision of the z-buffer.

"The renderer cannot reposition anything."

I think that this is completely untrue. The renderer can reposition everything, and probably does if it's not shadertoy, or some video filter or something. Every time you move your camera the renderer repositions everything (the camera is actually the only thing that DOES NOT MOVE).

It seems that you are missing some crucial concepts here, i'd start with this: http://www.opengl-tutorial.org/beginners-tutorials/tutorial-3-matrices/

About the depth offset mentioned:

How this would work, say you want to draw a decal on a surface. You can 'draw' another mesh on this surface - by say, projecting a quad onto it. You want to draw a bullet hole over a concrete wall and end up with two coplanar surfaces - the wall, the bullet hole. You can figure out the depth buffer precision, find the smallest value, and then move the bullet hole mesh by that value towards the camera. The object does not get scaled (you're doing this in NDC which you can visualize as a cube and moving planes back and forth in the smallest possible increment), but does translate in depth direction, ending up in front of the other.

pailhead
  • 5,162
  • 2
  • 25
  • 46
  • Here an updated example with 100 near and 1000 far: http://liveweave.com/ahTdFQ It looks a bit different, but the issue is still there. What do you mean with depth offsets? Changing the position of the objects minimally based on the camera position? That would probably require a lot computing power for larger scenes. – Miiller Aug 07 '14 at 11:04
  • You might be confusing something. I didn't see any artifacts at first, but now i definitely do. What are you trying to achieve? What do you expect to see? – pailhead Aug 07 '14 at 22:33
  • @palihead I want to tell the renderer which of the objects should be rendered in case they overlap on the same plane. Repositioning the objects will most likely be very inefficiant, as I have to detect first if and which objects are overlapping and then reposition them every time the camera or the scene changes. And the camera is moving quite a lot and the scene is pretty big. – Miiller Aug 08 '14 at 12:23
  • dont overlap planes (triangles), its a big NO in 3d graphics. Like i said, there are very few limited scenarios where this happens, and they are very advanced. Do you see the paradox in your comment? You want to tell the renderer to reposition something (one plane in front of the other is called repositioning in tiny village) but then you don't. Ask yourself how and why did you end up with this scenario in the first place? IF you're moving stuff around and they happen to overlap, move the stuff further. If you placed them like that to begin with its just silly. – pailhead Aug 08 '14 at 23:00
  • @palihead The renderer cannot reposition anything. The renderer just handles the logic how and when to render what. Just like he decides to render the objects closer to the camera first, I want to tell which objects have a higher priority if they are on the same position. And that is what `.renderDepth` and sorting is initially for. Sadly it doesn't work if both objects have a different size. And in my case overlapping happens quite a bit, mostly with lines. If a line is right on a polygon, I get the same problem - and I have to fix it in an efficient way. It's not silly at all. – Miiller Aug 09 '14 at 11:11
  • "Just like he decides to render the objects closer to the camera first" He would be mrdoob et al in this particular case. There is a lot in the renderers logic, and you can tweak things yourself... – pailhead Aug 09 '14 at 20:50
  • Increasing the camera's `near` can help a lot: https://github.com/mrdoob/three.js/issues/655 – 1j01 Aug 02 '16 at 23:36
0

I don't see any flicker. The cube movement in 3D seems to be super-smooth. Can you try in a different computer (may be faster one)? I used Chrome on Macbook Pro.

Geocrafter
  • 765
  • 1
  • 6
  • 17
  • My computer is for sure fast enough and it is flickering on any browser. Did you make one of the boxes smaller though? If both have the same size, I don't have any problems either. Would be weird if it is indeed a browser issue... – Miiller Aug 06 '14 at 22:11