Three.js: Multiple mirrors in a scene kills performance

[Sphinxxxx]

TL;DR: After v85, having more than a handful of mirrors in a scene seriously reduces rendering performance.

Copy of https://stackoverflow.com/questions/45990275/multiple-mirrors-in-a-three-js-scene-kills-performance:

Based on the mirror example, I have recreated a good old praxinoscope "movie projector", where a column of mirrors reflect a short sequence of images to create the illusion of movement.

In version 84, this works quite well.

Example using v84: https://codepen.io/Sphinxxxx/pen/eEbjba

In version 85 however, there were some changes to Mirror.js, and in later versions all the mirrors (8 mirrors in this case) make the praxinoscope really slow (low FPS).

Example using v87: https://codepen.io/Sphinxxxx/pen/vJvozR

I suspect the slow performance has to do with a lot of recursive calls and unneeded rendering starting with calls to a onBeforeRender() function from Mirror.js. Stacktrace:

If you look at the code, mirrors are created and added in the addMirrorAndImage() function. Is there a better way to add mirrors, or some other trick that will give the same performance as the older (pre v85) version?

• v84: https://codepen.io/Sphinxxxx/pen/eEbjba
• v87: https://codepen.io/Sphinxxxx/pen/vJvozR

[mrdoob]

I'll look into this. Many thanks for the examples!

[mrdoob]

Okay... I think the issue is that, somehow, the older code didn't render when the mirror was facing away the camera.

Fixed! 7dc8fa56f5106b51248f30115c7e884a3f8f6c91

[mrdoob]

Using dev. https://codepen.io/anon/pen/brPRGz

[Sphinxxxx]

Thanks, but sadly it's still not close to the same performance as v84. For these eight mirrors, the dev version runs well, but if you increase the number of mirrors, things slow down fast.

For example, change FRAMES_X to 6 in the JS code - this gives us 24 mirrors (the animation won't make sense anymore, but that's irrelevant). v84 will still run smoothly, but dev slows to a crawl. Even at 16 mirrors (FRAMES_X = 4), dev is noticeably slower.

[mrdoob]

I'll look into it 💪

[mrdoob]

I think it's because when FRAMES_X = 4 the mirrors see each other, so it produces 1 level of recursivity, which r84 didn't do.

Can you modify your code so there are more mirrors but that they don't see each other?

[Sphinxxxx]

The outer ring (orange) shouldn't reflect anything, so I don't think the mirrors can see each other no matter how many there are. Here is a sketch of the scene from above. The mirrors are blue, and what the camera sees is pink:

And here is a fork that may make it easier to see how the mirrors are placed. I also added a little space between each mirror, to make sure there are no overlapping edges;

https://codepen.io/Sphinxxxx/pen/KvjLaB?editors=0010

[mrdoob]

Working on it.

[mrdoob]

I guess I needed a weekend "off".

https://codepen.io/anon/pen/brPRGz
https://codepen.io/Sphinxxxx/pen/KvjLaB?editors=0010

In your particular case (half of the mirrors looking away) the latest version should actually be ~2x faster than r84 😊

[Sphinxxxx]

Looking really good, thanks a lot!

If I read the code correctly, the fix was to add a "levels of rendering recursion" parameter. Does that mean there's no way to detect whether two mirrors see each other, and thus actually need recursion?

[mrdoob]

Well... If two mirrors see each other the level of recursion would be infinite. We can't do infinite renders and stay at 60fps 😉

So, for the time being, I think the best option is to add a parameter for the user to adjust for their use case.

[Sphinxxxx]

Sure, there needs to be a max level, but I was wondering if it was possible to detect that no recursion was necessary (like in this case). I was just asking out of curiosity though, having a parameter should work for most cases.

[mrdoob]

I bet there is a way to detect it, but I have to move to other things unfortunately. With your example I noticed texture.offset/texture.repeat are broken on dev 🙁

[mrdoob]

Alright. #12063 fixed it.

[Sphinxxxx]

Great! However, I haven't noticed anything wrong with the praxinoscope. Was that issue unrelated to how I use offset/repeat here?

[mrdoob]

No. It was only in dev. You can ignore it now 😊