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.
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.
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