Empty scene and abnormal gpu usage in "react"

Questions
#1

it is simply example code
create canvas (react canvas)
then create scene and scene render. that’s all

11111
11111982×781 28.2 KB

but
two browser usage gpu 20%!!!
222222
222222708×31 2.65 KB

my gpu is 2060gtx and other webpack based projects are empty space 0.1~0,5 usage gpu
why react taking too much empty usage?
Am I the only one?

#2

2 small tests to do:

  • what happens when console.log(“any”); is removed
  • what’s gpu usage when scene.render(); is commented?

21% is a lot, indeed. can you check vsync is on?

1 Like
#3

I removed the console and commented out the render (no render in this case 1.5~2.6 usage → maybe Common usage of react) and
I tried to turn vsysnc on and off, but no noticeable change.

#4

wrap testScene in memo and add an empty array to the dependency array of the useEffect hook. Hooks rerun every render unless you tell them not to, so you’re recreating the engine a bunch of times.

you could also just create the canvas and babylon engine outside of react, no real reason to have it inside a react component there, its not like you’re disposing the canvas/engine on unmount (that would be a good use case to put it in react)

#5

Hello, just checking in, was your question answered? @11128

#6

hello @carolhmj @jeremy-coleman
First of all, sorry for the very late reply because I was too busy to solve the project
so, The problem was about the creation of too many engines and canvases and the enigne not being disposed.
The reason was that there was an iteration in the step before creating the corresponding babylon and did not block the case for it.
In the end everything was resolved and I had normal gpu use

2 Likes