Model-viewer: Model view is very slow on Firefox in demo

[gregtatum]

Description

Steps to reproduce:

• Open up Firefox on Mac.
• Go to: https://model-viewer-tester.glitch.me/
• Observe the slow frame rate

I took a profile here: https://perfht.ml/31EpEhu

It appears the slowness comes from the following area:

https://github.com/GoogleWebComponents/model-viewer/blob/52b15951165bba67c6ea2f36446ffa780952bc50/src/three-components/Renderer.ts#L209-L218

Specifically the call to context.drawImage:
context.drawImage(this.renderer.domElement, 0, this.canvas.height - heightDPR, widthDPR, heightDPR, 0, 0, widthDPR, heightDPR); is very slow in Firefox making the model viewer not very usable.

I filed https://bugzilla.mozilla.org/show_bug.cgi?id=1590515 in Firefox, but wanted to pass it along to this project, as I'm not sure when that will be prioritized.

Live Demo

Browser Affected

• [ ] Chrome
• [ ] Edge
• [x] Firefox (71-72)
• [ ] Helios
• [ ] IE
• [ ] Safari

OS

• [ ] Android
• [ ] iOS
• [ ] Linux
• [x] MacOS
• [ ] Windows

Versions

Unknown

[cdata]

@gregtatum Yes, unfortunately this is something we have been aware of. We also have plans to fix it for various scenarios (#216, #37). I think ideally this particular use case would be addressed by #216. In that case, we would detect that only one <model-viewer> is being used, so we would not bother with the 2D API.

For context, the reason why we invoke drawImage like that is to get around the browser limitation of number of GL contexts that can be created in one session.