Canvas texture update cause performance issue in Firefox and Safari

Questions
1

Hi,
I’m using three.js with fabric.js. I’m applying fabric as canvas texture in three.js and updating texture every frame using material.map.needsUpdate = 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.

2

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.

3

Hi
Below is the link to the Jsfiddel
https://jsfiddle.net/97qoxu8p/
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.

4

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. https://bugzilla.mozilla.org/home) since this seems to be no three.js issue.

/cc @prisoner849

1 Like
5

Thank you.