# Objects render multiple times

**URL:** <https://discourse.threejs.org/t/objects-render-multiple-times/38319>\
**Category:** Questions\
**Tags:** loaders\
**Created:** [May 20, 2022, 8:02am UTC](https://discourse.threejs.org/t/objects-render-multiple-times/38319 "2022-05-20T08:02:55Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![vincentbosch7](https://avatars.discourse-cdn.com/v4/letter/v/f4b2a3/32.png) [@vincentbosch7](https://discourse.threejs.org/u/vincentbosch7)\
**Post date:** [May 20, 2022, 8:02am UTC](https://discourse.threejs.org/t/objects-render-multiple-times/38319/1 "2022-05-20T08:02:55Z")

</div>

I’m working on an interactive map: [https://test.xtrahost.nl/](https://test.xtrahost.nl/)

It al seems to be working fine, but if I visit it on a mobile device (an iPhone 12 in this example), the models seem to load multiple times, yet only the ‘main’ model is interactive.

 ![WhatsApp Image 2022-05-20 at 9.53.11 AM](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/0/80af451baf41b78a95ca7658291edecee74e72fc.jpeg)

Is there anything known to cause this?

---

<div class="post-metadata">

**Author:** ![Fluqz](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fluqz/32/6279_2.png) [@Fluqz](https://discourse.threejs.org/u/Fluqz)\
**Post date:** [May 20, 2022, 9:26am UTC](https://discourse.threejs.org/t/objects-render-multiple-times/38319/2 "2022-05-20T09:26:45Z")

</div>

Can you post your code where models are loaded?

---

<div class="post-metadata">

**Author:** ![vincentbosch7](https://avatars.discourse-cdn.com/v4/letter/v/f4b2a3/32.png) [@vincentbosch7](https://discourse.threejs.org/u/vincentbosch7)\
**Post date:** [May 20, 2022, 9:30am UTC](https://discourse.threejs.org/t/objects-render-multiple-times/38319/3 "2022-05-20T09:30:17Z")

</div>

Thanks for your response. Yes I can, the regions are al loaded as separate objects because they are going to be interactive, this is one of them, the others are all similar to this:

```
var alkmaar;
new GLTFLoader().load('assets/regios_textures/Alkmaar.gltf', function ( object ) {
    alkmaar = object.scene; // THREE.Group
    alkmaar.scale.set(10, 10, 10 );
    alkmaar.position.y = 0;
    alkmaar.traverse(function(child) { if (child instanceof THREE.Mesh) {
            child.castShadow = true;
            child.receiveShadow = true;
            child.callback = clickalkmaar;
            child.material.metalness = 0;
    }});
    scene.add( alkmaar );
    objects.push(alkmaar);
    }, function ( xhr ) {
        console.log( 'Alkmaar ' + ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
    }, function ( error ) {
        console.log( 'An error happened' );
});
```

---

<div class="post-metadata">

**Author:** ![vielzutun.ch](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vielzutun.ch/32/21366_2.png) [@vielzutun.ch](https://discourse.threejs.org/u/vielzutun.ch)\
**Post date:** [May 20, 2022, 12:56pm UTC](https://discourse.threejs.org/t/objects-render-multiple-times/38319/4 "2022-05-20T12:56:01Z")

</div>

> [@vincentbosch7](#):
>
> Is there anything known to cause this?

I can confirm I see this bug on an iPhone 13 , running iOS 15.4.1, too. Both in Safari and Firefox, btw.  
The problem does not occur in macOS 10.15.7. Neither in Safari, Firefox, Chrome nor Opera.

It looks to me like you have two (2!) cameras, and only one of them is OrbitControlled, while the other one seems to remain at a fixed position and orientation.

When you move the cursor up or down, once you move the cursor from a flat-on view **further up** , the **lower** half of the island comes forward (being clipped at the far end btw.),

 ![IMG_0373.PNG](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/e/3e0068867916e49d52458fbefb4afb335b97e202.jpeg)

and if you move the cursor from a flat-on view **further down** , the **upper** half of the island comes forward (being clipped at the far end also.)

 ![IMG_0374.PNG](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/a/2aa9c2ea22421441cfeb0d03de55c8287f3f6229.jpeg)

.  
**On a completely unrelated note:**

if you want to unleash the full 60 fps on your iPhone, all you have to do is _ **turn off** _ the Settings/Battery/Powersavings mode:

 ![IMG_0375](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/5/f5bca0ac829d05876c941d78a1e2aca8a71b2234.png)

---

<div class="post-metadata">

**Author:** ![vincentbosch7](https://avatars.discourse-cdn.com/v4/letter/v/f4b2a3/32.png) [@vincentbosch7](https://discourse.threejs.org/u/vincentbosch7)\
**Post date:** [May 20, 2022, 1:13pm UTC](https://discourse.threejs.org/t/objects-render-multiple-times/38319/5 "2022-05-20T13:13:26Z")

</div>

Thanks for taking your time to respond!

Yes, it seems to be happening only on iPhones and on every browser on them. I even checked it on an iPad and it didn’t seem to happen there strangely enough.

I checked my code for errors in my renderer of camera, but there didn’t seem to be any error that could make this happen.

Thank you for the note about the powersavings mode by the way.

---

<div class="post-metadata">

**Author:** ![vielzutun.ch](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vielzutun.ch/32/21366_2.png) [@vielzutun.ch](https://discourse.threejs.org/u/vielzutun.ch)\
**Post date:** [May 21, 2022, 6:37am UTC](https://discourse.threejs.org/t/objects-render-multiple-times/38319/6 "2022-05-21T06:37:15Z")

</div>

> [@vincentbosch7](#):
>
> Yes, it seems to be happening only on iPhones and on every browser on them.

I looked a little more into this. It appears that ALL browsers on iOS **must use** WebKit as their base, as per the Apple App Store rules. See section 2.5.6 on this:

> **[App Store Review Guidelines - Apple Developer](https://developer.apple.com/app-store/review/guidelines/#performance)**
>
> The App Store Review Guidelines provide guidance and examples across a range of development topics, including user interface design, functionality, content, and the use of specific technologies. These guidelines are designed to help you prepare your...

Or, as [some other user](https://news.ycombinator.com/item?id=25850091) paraphrased this:

> On iOS there are no web browsers other than Safari, per the app store rules. “Chrome” / “Firefox” / etc on iOS are just basically _ **skins on top of Webkit** _.
> 
> This is why you don’t get any of the features / extensions / etc of Chrome or Firefox on iOS.

So your problem seems to be boiling down to being a Webkit bug.

---

<div class="post-metadata">

**Author:** ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)\
**Post date:** [May 21, 2022, 7:06am UTC](https://discourse.threejs.org/t/objects-render-multiple-times/38319/7 "2022-05-21T07:06:42Z")

</div>

I’ve seen this before as well on other WebGL demos. Like this one: [Cosmic Platform](https://lab.john-beresford.com/experiments/CosmicPlatform)

It feels like the first frame of the depth&color buffer gets stored, and then the subsequent renders are fighting with that first one. Definitely a WebKit bug because it started happening on my iPhone 11 since I upgraded to iOS 15. Anything in front of the depth of the first frame renders, but anything further behind it doesn’t:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/8/e8eaee67ee2635fbaa55f5481bcf1058874c9030.jpeg)

However, opening a new tab, or rotating the phone, then returning to the original view fixes it:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/d/bdeb579d1f85bb9cd931f14a6a1c863df70aa9a2.jpeg)

Are you using any RenderTargets or post-processing passes, by any chance? I’m asking because it seems to happen also on the official [Unreal bloom pass example](https://threejs.org/examples/#webgl_postprocessing_unreal_bloom)

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/2/125f9fd7854d863a81a7299a0ab98fb8a04de627.jpeg)

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [May 21, 2022, 8:11am UTC](https://discourse.threejs.org/t/objects-render-multiple-times/38319/8 "2022-05-21T08:11:31Z")

</div>

> [@marquizzo](#):
>
> I’ve seen this before as well on other WebGL demos. Like this one: [Cosmic Platform](https://lab.john-beresford.com/experiments/CosmicPlatform)
> 
> It feels like the first frame of the depth&color buffer gets stored, and then the subsequent renders are fighting with that first one. Definitely a WebKit bug because it started happening on my iPhone 11 since I upgraded to iOS 15

@marquizzo experiencing this too, is there a fix for this?

---

<div class="post-metadata">

**Author:** ![vielzutun.ch](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/vielzutun.ch/32/21366_2.png) [@vielzutun.ch](https://discourse.threejs.org/u/vielzutun.ch)\
**Post date:** [May 21, 2022, 9:26am UTC](https://discourse.threejs.org/t/objects-render-multiple-times/38319/9 "2022-05-21T09:26:30Z")

</div>

> [@marquizzo](#):
>
> However, opening a new tab, or rotating the phone, then returning to the original view fixes it:

That’s an interesting workaround. 👍

Putting it all together, it looks like a double-buffering initialisation bug. Which then, through your workaround, is forced into a proper re-initialization.

Maybe @vincentbosch7 could experiment with getting (forcing) a different rendering context through variations of the renderer options. The [`.autoClear`](https://threejs.org/docs/#api/en/renderers/WebGLRenderer.autoClear) option should be a good starting point.

---

<div class="post-metadata">

**Author:** ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)\
**Post date:** [May 21, 2022, 3:08pm UTC](https://discourse.threejs.org/t/objects-render-multiple-times/38319/10 "2022-05-21T15:08:05Z")

</div>

I haven’t found a way to fix it. I need to find out when exactly it’s happening in the first place. My suspicion is to resize the culprit rendertarget by 1px, but I cannot confirm that would work.

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [May 21, 2022, 3:44pm UTC](https://discourse.threejs.org/t/objects-render-multiple-times/38319/11 "2022-05-21T15:44:40Z")

</div>

OK yes a resize down then back up by one pixel sounds feasible, if not what’s your opinion on something like “if ios” completely drop and reassigning render target?

---

<div class="post-metadata">

**Author:** ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)\
**Post date:** [May 21, 2022, 6:31pm UTC](https://discourse.threejs.org/t/objects-render-multiple-times/38319/12 "2022-05-21T18:31:36Z")

</div>

Try it out and, see if it works, then let us know!

---

<div class="post-metadata">

**Author:** ![vincentbosch7](https://avatars.discourse-cdn.com/v4/letter/v/f4b2a3/32.png) [@vincentbosch7](https://discourse.threejs.org/u/vincentbosch7)\
**Post date:** [May 23, 2022, 7:35am UTC](https://discourse.threejs.org/t/objects-render-multiple-times/38319/13 "2022-05-23T07:35:03Z")

</div>

Thank you all for taking your time to reply!

> [@vielzutun.ch](#):
>
> The [`.autoClear`](https://threejs.org/docs/#api/en/renderers/WebGLRenderer.autoClear) option should be a good starting point.

This sadly didn’t do anything for me.

> [@marquizzo](#):
>
> However, opening a new tab, or rotating the phone, then returning to the original view fixes it:

This seems to work, I execute the following function on orientationchange and resize:

```
function screenchange() {
    var width = $('.tourwrap').width(); //declare width
    var height = $('.tourwrap').height(); //declare height

    camera.aspect = width / height;
    camera.updateProjectionMatrix();
    raycaster.setFromCamera( mouse, camera );
    renderer.clear();
    renderer.setSize( width, height );
    controls.update();
}

```

However if I just execute this function after everything is completely loaded, it doesn’t fix it.

So I tried to combine it with this:

> [@marquizzo](#):
>
> My suspicion is to resize the culprit rendertarget by 1px, but I cannot confirm that would work.

Now after every 3D model is loaded, I resize the canvas to 100% - 1px and after that I execute that same function I mentioned before. This seems to fix it! It’s not the most beautiful way but it seems to do the job. Thank you all for your help.

---

<div class="post-metadata">

**Author:** ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)\
**Post date:** [May 23, 2022, 2:55pm UTC](https://discourse.threejs.org/t/objects-render-multiple-times/38319/14 "2022-05-23T14:55:34Z")

</div>

Sad that such an inelegant solution was needed, but I’m glad that something worked!

What was your setup? Are you using a post-processing effect, or using your own Rendertarget setup? Could you share more info here? I’m trying to figure out when exactly it happens to hopefully file a bug report with the WebKit team.

---

<div class="post-metadata">

**Author:** ![vincentbosch7](https://avatars.discourse-cdn.com/v4/letter/v/f4b2a3/32.png) [@vincentbosch7](https://discourse.threejs.org/u/vincentbosch7)\
**Post date:** [May 23, 2022, 4:01pm UTC](https://discourse.threejs.org/t/objects-render-multiple-times/38319/15 "2022-05-23T16:01:06Z")

</div>

To be honest I wouldn’t know. I’ve tested a lot to find out if I could get rid of this bug, but nothing seemed to fix it (except for this inelegant solution). I’ve done many similar projects to these, and this is the first time this happened. The only big difference between those projects and this one, is the fact that I tried working with importmaps and a polyfill

```
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.5.5/dist/es-module-shims.js"></script>

<script type="importmap">
    {
        "imports": {
            "three": "./three/build/three.module.js"
        }
    }
</script>

```

I saw that the [Unreal bloom pass example](https://threejs.org/examples/#webgl_postprocessing_unreal_bloom) also uses this, but I could be completely wrong about the fact that this even matters for the current bug.

If you find anything related I would be very interested to know!