Using View from drei decreases performance

Questions
1

I have a problem with View from drei. So when I render my scene directly onto the canvas like

<Canvas>
 <Scene/>
</Canvas>

it runs at 144fps. But when I use the View to render the same scene like

<View>
<Scene/>
</View>

<Canvas>
<View.Port/>
</Canvas>

It runs at max 95 fps. I do not understand why is that… any help is appreciated

2

The View component from drei is particularly used for rendering multiple scenes at once, so when you are saying

Are you rendering multiple scenes?

3

On some pages - yes, on others - no. The main problem I am trying to solve with the Views, is to have only one Canvas mounted all the time, because unmounting a Canvas in Safari leaves some garbage behind that Safari does not know how to collect properly, and switching between 2D and 3D view (mounting and unmounting the canvas) a couple of times, crashes the app. No such problem in chrome. It turned out that the View introduces some complexity and reduces the FPS, so I will have to implement a custom light version of the View component

4

Were you rendering the multiple canvas before using View. Because if you were not then its totally clear that the frame drop you are experiencing is due to the rendering of multiple scenes.

Also I would suggest to change to a different browser that uses Chromium as its source, cause I have also faced many issue while creating R3F and three.js projects in Safari.

5

Unfortunately, I cannot ignore Safari, because a lot of the clients use iPads and iPhones

6

IC then you have to go with it :+1:

7

it might be getclientboundingrect, view needs to call that in order to figure where the container is located. but gcbr causes paint+calc on the dom, depending on how complex dom layout is it can be expensive. on the threejs side view just renders into a fbo, this isn’t what should cause the overhead.

can you make a simplified codesandbox for profiling?

8

Sandbox Sorry if the sandbox is not very helpful, im not really sure what to include as the 3d map consumes a lot of data from the mobx store, and there are also some models being loaded. Is there anyway to disable this getclientboundingrect?

9

you can try frames=1 or sth slightly larger, it will now call gcbr only when browser size changes. if that’s really the issue.

1 Like
10

I tried that, but no improvement.

11

Its me again. It turns out frames=1 actually did improve the performance on almost all maps and i reach 144fps, except one which probably needs to be optimised

1 Like