Multiple mirrors in a three.js scene kills performance

Question

Based on the mirror example in three.js, 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 of three.js, 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

Answer 1

Fixed in v88 (Mirror renamed to Reflector): https://codepen.io/Sphinxxxx/pen/dZYKwP