question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Adding a second instance of Canvas increases render loop speed

See original GitHub issue

Hey all,

Thanks creating such a useful library.

I’m noticing some odd behavior when instantiating multiple Canvas objects. Any updates happening in useRender are performed twice as fast when the second canvas is added. Possibly the useRender callbacks are being called once for each renderer regardless of the renderer they should be attached to?

https://codesandbox.io/embed/react-three-fiber-multi-render-test-m3h2q

I’ve created a codesandbox reproducing the issue in it’s simplest form. After 5 seconds a second canvas is added and the first cube’s rotation speed increases for some reason.

As far as I can tell this issue started somewhere around v2.0.11, seemed to be working alright before that.

Thanks for all the help

Dex

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

5reactions
drcmdacommented, Jun 21, 2019

that doesn’t make any sense, so weird - looks like for some reason it calls the useRender twice. 🤯 will have to investigate a bit …

2reactions
drcmdacommented, Jun 22, 2019

oh my … you’re right, that was a terrible oversight. the problem goes even deeper now, because it mutates that defaultRef, camera, scene and all. It’s a wonder it’s kind of working.

It should be fixed, but i had to fix the other parts as well (scene, cam, raycaster, etc) which all were equally affected, not just subscriber.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Adding a second instance of Canvas increases render loop ...
I'm noticing some odd behavior when instantiating multiple Canvas objects. Any updates happening in useRender are performed twice as fast when ...
Read more >
Optimize HTML5 canvas rendering with layering
To use the layer technique, you have to identify the HTML5 canvas elements the layering needs by finding the entities' rendering overlap.
Read more >
Optimizing canvas - Web APIs | MDN
The element is one of the most widely used tools for rendering 2D graphics on the ... The following is a collection of...
Read more >
Scaling performance - React Three Fiber Documentation
All you need to do is set the canvas frameloop prop to demand . It will render frames whenever it detects prop changes...
Read more >
Is it asking too much of canvas to redraw everything inside of ...
First off: Yes, altering your code to only paint the sections that are changing may help lots, but you should always be testing...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found