Canvas texture update cause performance issue in Firefox and Safari

I’m using three.js with fabric.js. I’m applying fabric as canvas texture in three.js and updating texture every frame using = true. My canvas texture size is 2K. In chrome, it works well but in firefox and safari there is a significant frame drop. So is there any we can do to increase the performance.
Thank you.

Any chances to demonstrate the performance issue with a live example? I’ve never heard of something similar but I can verify the problem on my iMac.

Below is the link to the Jsfiddel
Here is the file index.html (4.8 KB)
which you can run locally. When profiling in the chrome, fps is almost 60.
While in firefox, its around 28 fps.

Thank you.

This seems to be a browser limitation. I get the same result by setting the canvas resolution to 2048x2048 in the fiddle from this post: Three.js + Fabric.js. The performance of Firefox and Safari is bad, Chrome runs smooth at 60 FPS.

I suggest you file a bug at the browser’s issue tracker (e.g. since this seems to be no three.js issue.

/cc @prisoner849

1 Like

Thank you.