# Using View from drei decreases performance

**URL:** <https://discourse.threejs.org/t/using-view-from-drei-decreases-performance/67831>\
**Category:** Questions\
**Created:** [July 8, 2024, 6:12am UTC](https://discourse.threejs.org/t/using-view-from-drei-decreases-performance/67831 "2024-07-08T06:12:23Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Askkattor](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/askkattor/32/49451_2.png) [@Askkattor](https://discourse.threejs.org/u/Askkattor)\
**Post date:** [July 8, 2024, 6:12am UTC](https://discourse.threejs.org/t/using-view-from-drei-decreases-performance/67831/1 "2024-07-08T06:12:23Z")

</div>

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

```javascript
<Canvas>
 <Scene/>
</Canvas>

```

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

```javascript
<View>
<Scene/>
</View>

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

```

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

---

<div class="post-metadata">

**Author:** ![AshhadDevLab](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ashhaddevlab/32/44111_2.png) [@AshhadDevLab](https://discourse.threejs.org/u/AshhadDevLab)\
**Post date:** [July 8, 2024, 7:39am UTC](https://discourse.threejs.org/t/using-view-from-drei-decreases-performance/67831/2 "2024-07-08T07:39:34Z")

</div>

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

> [@Askkattor](#):
>
> it runs at 144fps. But when I use the View to render the same scene like

Are you rendering multiple scenes?

---

<div class="post-metadata">

**Author:** ![Askkattor](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/askkattor/32/49451_2.png) [@Askkattor](https://discourse.threejs.org/u/Askkattor)\
**Post date:** [July 8, 2024, 7:45am UTC](https://discourse.threejs.org/t/using-view-from-drei-decreases-performance/67831/3 "2024-07-08T07:45:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![AshhadDevLab](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ashhaddevlab/32/44111_2.png) [@AshhadDevLab](https://discourse.threejs.org/u/AshhadDevLab)\
**Post date:** [July 8, 2024, 7:51am UTC](https://discourse.threejs.org/t/using-view-from-drei-decreases-performance/67831/4 "2024-07-08T07:51:25Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Askkattor](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/askkattor/32/49451_2.png) [@Askkattor](https://discourse.threejs.org/u/Askkattor)\
**Post date:** [July 8, 2024, 8:30am UTC](https://discourse.threejs.org/t/using-view-from-drei-decreases-performance/67831/5 "2024-07-08T08:30:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![AshhadDevLab](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ashhaddevlab/32/44111_2.png) [@AshhadDevLab](https://discourse.threejs.org/u/AshhadDevLab)\
**Post date:** [July 8, 2024, 8:31am UTC](https://discourse.threejs.org/t/using-view-from-drei-decreases-performance/67831/6 "2024-07-08T08:31:41Z")

</div>

IC then you have to go with it 👍

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [July 8, 2024, 8:56am UTC](https://discourse.threejs.org/t/using-view-from-drei-decreases-performance/67831/7 "2024-07-08T08:56:23Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Askkattor](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/askkattor/32/49451_2.png) [@Askkattor](https://discourse.threejs.org/u/Askkattor)\
**Post date:** [July 8, 2024, 10:44am UTC](https://discourse.threejs.org/t/using-view-from-drei-decreases-performance/67831/8 "2024-07-08T10:44:00Z")

</div>

[Sandbox](https://codesandbox.io/p/sandbox/drei-view-demo-3y6m78?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clycs0a160006356suicploit%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clycs0a150002356s8l76hn9g%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clycs0a150003356srqd22d1h%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clycs0a150005356s6fvga3be%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B44.85027875165239%252C55.14972124834761%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clycs0a150002356s8l76hn9g%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clycs0a150001356sp3rct4ga%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clycs0a150002356s8l76hn9g%2522%252C%2522activeTabId%2522%253A%2522clycs0a150001356sp3rct4ga%2522%257D%252C%2522clycs0a150005356s6fvga3be%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clycs0a150004356siz4sidnc%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252Fhome%2522%257D%255D%252C%2522id%2522%253A%2522clycs0a150005356s6fvga3be%2522%252C%2522activeTabId%2522%253A%2522clycs0a150004356siz4sidnc%2522%257D%252C%2522clycs0a150003356srqd22d1h%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clycs0a150003356srqd22d1h%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D) 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?

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [July 8, 2024, 10:47am UTC](https://discourse.threejs.org/t/using-view-from-drei-decreases-performance/67831/9 "2024-07-08T10:47:39Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Askkattor](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/askkattor/32/49451_2.png) [@Askkattor](https://discourse.threejs.org/u/Askkattor)\
**Post date:** [July 8, 2024, 10:49am UTC](https://discourse.threejs.org/t/using-view-from-drei-decreases-performance/67831/10 "2024-07-08T10:49:17Z")

</div>

I tried that, but no improvement.

---

<div class="post-metadata">

**Author:** ![Askkattor](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/askkattor/32/49451_2.png) [@Askkattor](https://discourse.threejs.org/u/Askkattor)\
**Post date:** [July 8, 2024, 12:16pm UTC](https://discourse.threejs.org/t/using-view-from-drei-decreases-performance/67831/11 "2024-07-08T12:16:59Z")

</div>

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