# How can I sove the render anomaly?(two obejct could interfere each other when camera move)

**URL:** <https://discourse.threejs.org/t/how-can-i-sove-the-render-anomaly-two-obejct-could-interfere-each-other-when-camera-move/11608>\
**Category:** Questions\
**Tags:** z-fighting\
**Created:** [December 17, 2019, 9:17am UTC](https://discourse.threejs.org/t/how-can-i-sove-the-render-anomaly-two-obejct-could-interfere-each-other-when-camera-move/11608 "2019-12-17T09:17:03Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![alwxkxk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alwxkxk/32/6221_2.png) [@alwxkxk](https://discourse.threejs.org/u/alwxkxk)\
**Post date:** [December 17, 2019, 9:17am UTC](https://discourse.threejs.org/t/how-can-i-sove-the-render-anomaly-two-obejct-could-interfere-each-other-when-camera-move/11608/1 "2019-12-17T09:17:03Z")

</div>

I make a 3d model which have two objects.I find that they interfere each other , I think the problem is about render depth,but I can slove this.

 ![two object interfere each other](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/9/93c3aedf4828e8fcf420e4143c5529d33837eabc.gif)  
3d model file : [door.fbx](https://discourse.threejs.org/uploads/short-url/cHLuE76ZZrVJFpP65eLx4mYZmI6.fbx) (422.1 KB)

How can I sove this problem?  
which key world should I sreach in google to find the Solution？

---

<div class="post-metadata">

**Author:** ![felixmariotto](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/felixmariotto/32/5928_2.png) [@felixmariotto](https://discourse.threejs.org/u/felixmariotto)\
**Post date:** [December 17, 2019, 9:51am UTC](https://discourse.threejs.org/t/how-can-i-sove-the-render-anomaly-two-obejct-could-interfere-each-other-when-camera-move/11608/2 "2019-12-17T09:51:43Z")

</div>

Hi !

Why do you want to render two objects overlapping ?  
Is is because you want the outer part to be another material ?

---

<div class="post-metadata">

**Author:** ![alwxkxk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alwxkxk/32/6221_2.png) [@alwxkxk](https://discourse.threejs.org/u/alwxkxk)\
**Post date:** [December 17, 2019, 9:56am UTC](https://discourse.threejs.org/t/how-can-i-sove-the-render-anomaly-two-obejct-could-interfere-each-other-when-camera-move/11608/3 "2019-12-17T09:56:49Z")

</div>

Hi, thank at first.  
Actally, two object has a few distance ,they also interface each other:

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/c/cf9c892e5fff1f216184a6500460ebf79d10dd96.mp4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/c/cf9c892e5fff1f216184a6500460ebf79d10dd96.mp4)

---

<div class="post-metadata">

**Author:** ![felixmariotto](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/felixmariotto/32/5928_2.png) [@felixmariotto](https://discourse.threejs.org/u/felixmariotto)\
**Post date:** [December 17, 2019, 10:02am UTC](https://discourse.threejs.org/t/how-can-i-sove-the-render-anomaly-two-obejct-could-interfere-each-other-when-camera-move/11608/4 "2019-12-17T10:02:27Z")

</div>

Does the front object have a depth ? Or is it just a plane ?  
If this is a box with a very short depth, your issue is probably that the two opposite faces of the box are interfering, try to increase the depth.

---

<div class="post-metadata">

**Author:** ![alwxkxk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alwxkxk/32/6221_2.png) [@alwxkxk](https://discourse.threejs.org/u/alwxkxk)\
**Post date:** [December 17, 2019, 10:20am UTC](https://discourse.threejs.org/t/how-can-i-sove-the-render-anomaly-two-obejct-could-interfere-each-other-when-camera-move/11608/5 "2019-12-17T10:20:05Z")

</div>

They have a depth. If I increase the depth , they don’t interfere each other until camera move very far.  
I make two new box,and they will interfere each other if camera move very far.

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/2/26f49266ffc287097d7b0bdc9be5d5a96acc2513.mp4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/2/26f49266ffc287097d7b0bdc9be5d5a96acc2513.mp4)

I think that object depth,scale , camera position are the influence factor.  
I want to find the principle or the keyword to study it , and try to slove or avoiding such problem.

---

<div class="post-metadata">

**Author:** ![felixmariotto](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/felixmariotto/32/5928_2.png) [@felixmariotto](https://discourse.threejs.org/u/felixmariotto)\
**Post date:** [December 17, 2019, 10:29am UTC](https://discourse.threejs.org/t/how-can-i-sove-the-render-anomaly-two-obejct-could-interfere-each-other-when-camera-move/11608/6 "2019-12-17T10:29:34Z")

</div>

I can’t help you more sorry…  
I don’t know why the faces interfere again when the camera is farther. I guess it comes from how the renderer sorts the faces, it looks like depth sorting becomes imprecise with the distance.  
I will let a more experienced user answer.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [December 17, 2019, 10:43am UTC](https://discourse.threejs.org/t/how-can-i-sove-the-render-anomaly-two-obejct-could-interfere-each-other-when-camera-move/11608/7 "2019-12-17T10:43:21Z")

</div>

What you see is so called _z-fighting_ which is a precision related issue of the depth buffer. The following fiddle demonstrates this effect very noticeable (just move the camera around):

[https://jsfiddle.net/5s7evdgk/](https://jsfiddle.net/5s7evdgk/)

A 3D engine can’t solve such issue automatically for you. You can try the following things to mitigate it:

- Avoid overlapping faces which can be achieved during the design phase
- Keep your view frustum as tight as possible (avoid large deltas between `near` and `far`)
- Try to disable `depthWrite` for certain materials like in this fiddle: [https://jsfiddle.net/5s7evdgk/1/](https://jsfiddle.net/5s7evdgk/1/)
- Usage of logarithmic depth buffer might also help

---

<div class="post-metadata">

**Author:** ![alwxkxk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alwxkxk/32/6221_2.png) [@alwxkxk](https://discourse.threejs.org/u/alwxkxk)\
**Post date:** [December 17, 2019, 10:55am UTC](https://discourse.threejs.org/t/how-can-i-sove-the-render-anomaly-two-obejct-could-interfere-each-other-when-camera-move/11608/8 "2019-12-17T10:55:09Z")

</div>

Thank you very much.

---

<div class="post-metadata">

**Author:** ![felixmariotto](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/felixmariotto/32/5928_2.png) [@felixmariotto](https://discourse.threejs.org/u/felixmariotto)\
**Post date:** [December 17, 2019, 11:46am UTC](https://discourse.threejs.org/t/how-can-i-sove-the-render-anomaly-two-obejct-could-interfere-each-other-when-camera-move/11608/9 "2019-12-17T11:46:32Z")

</div>

@Mugen87 Why within the same scene with the same camera frustum, z-fighting occurs only when the mesh is far from the camera ? ( as shown in OP’s last video )

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [December 17, 2019, 11:58am UTC](https://discourse.threejs.org/t/how-can-i-sove-the-render-anomaly-two-obejct-could-interfere-each-other-when-camera-move/11608/10 "2019-12-17T11:58:37Z")

</div>

The precision in the depth buffer is higher at the `near` plane and worse towards the `far` plane. One can also say the precision is non-linear due to the perspective projection.