9

I'm learing three.js and I faced a z-fighting problem.

z-fighting

There are two plane object, one is blue and the other is pink. And I set the positions using the flowing codes:

plane1.position.set(0,0,0.0001);
plane2.position.set(0,0,0);

Is there any solution in three.js to fix all the z-fighting problem in a big scene?

I ask this problem because I'm working on render a BIM(Building Information Model, which is .ifc format) on the web. And the model itself have so much faces which are so closed to each other. And it cause so much z-fighting problems as you can see:

z-fighting-2

Is three.js provide this kind of method to solve this problem so that I can handle this z-fighting problem just using a couple of code?

HT XU
  • 137
  • 1
  • 3
  • 8
  • Few of simple solutions: (0) Don't put your objects that close to each other AND/OR (1) Increase [precision of depth buffer](https://www.opengl.org/wiki/Depth_Buffer_Precision) AND/OR (2) Scale your entire world so you can move planes further apart numerically while keeping distances the same visually – Ivan Aksamentov - Drop Oct 30 '16 at 11:55
  • In fact the first question would be: why are trying to put these planes so close? What do you expect to see as a result? – Ivan Aksamentov - Drop Oct 30 '16 at 11:58
  • For huge worlds: (3) use (1-2) + for very distant objects (beyond some threshold position value), instead of increasing position further, just scale objects down. You will get feeling of distance without problems with depth. – Ivan Aksamentov - Drop Oct 30 '16 at 12:01
  • I'm trying to load a big and complex building model using three.js, but when I render the model finally, there are many z-fighting problem because the building model itself have many faces which are so closed to each other. So I'm trying to write demo to make my problem more clear – HT XU Oct 30 '16 at 12:10
  • Is three.js provide this kind of method to solve this problem so that I can handle this z-fighting problem just using a couple of code? Thanks so much. – HT XU Oct 30 '16 at 12:15
  • What camera do you use? Try greater distance between near and far planes of view frustum. For example, for [PerspectiveCamera](https://threejs.org/docs/api/cameras/PerspectiveCamera.html) try near=1, far=100000. Anyway, I think that it is a model's defect. You shouldn't have planes that close to each other. Problem might be fixed by removing those double walls. – Ivan Aksamentov - Drop Oct 30 '16 at 12:31

4 Answers4

10

Three.js has given a general solution like this: var renderer = new THREE.WebGLRenderer({ logarithmicDepthBuffer: true }); The demo is provided also here: https://threejs.org/examples/webgl_camera_logarithmicdepthbuffer.html It changes the precision of depth buffer, Which generally could resolve the z-fighting problem in a distance.

Tethys Zhang
  • 427
  • 5
  • 10
6

At least for the planes on your screenshot, you can solve that problem without switching to the logarithmicDepthBuffer. Try to set depthWrite on the material to false for the planes. Sometimes you also have to override renderOrder for meshes.

There is an example

.depthWrite Whether rendering this material has any effect on the depth buffer. Default is true. When drawing 2D overlays it can be useful to disable the depth writing in order to layer several things together without creating z-index artifacts.

.renderOrder This value allows the default rendering order of scene graph objects to be overridden although opaque and transparent objects remain sorted independently. When this property is set for an instance of Group, all descendants objects will be sorted and rendered together. Sorting is from lowest to highest renderOrder. Default value is 0.

EddiG
  • 172
  • 2
  • 4
  • 2
    The depthWrite tip worked for me, where logarithmicDepthBuffer and zNear and zFar didn't work for my scenario! Thanks – Almer Dec 30 '20 at 20:43
3

What is your PerspectiveCamera's zNear and zFar set to. Try a smaller range. Like if you currently have 0.1, 100000 use 1, 1000 or something. See this answer

https://stackoverflow.com/a/21106656/128511

Or consider using a different type of depth buffer

Community
  • 1
  • 1
gman
  • 100,619
  • 31
  • 269
  • 393
0

I just stumbled across z-fighting using multiple curved planes with front and backside textures placed along the z-axis of the scene. Even though depthWrite would remove the artifacts, I kinda lost the correct visual placements of my objects in space. Flatshading did the trick for me. With enough segments, the light bouncing is perfectly fine and z-fighting is gone.

kilian
  • 166
  • 1
  • 9