# Very low FPS with Vue

**URL:** <https://forum.babylonjs.com/t/very-low-fps-with-vue/21095>\
**Category:** Tutorials and tips\
**Tags:** tutorial\
**Created:** [May 25, 2021, 5:45am UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095 "2021-05-25T05:45:57Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [May 25, 2021, 5:45am UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/1 "2021-05-25T05:45:57Z")

</div>

Hi guys!

I was experiencing very low FPS (5-10) when using Vue instead of steady 60 FPS on the same scene using a plain HTML page. I was passing the engine object to the parent component to get the fps, that was the issue.

**The solution is not to Ref and/or emit the BabylonJS engine and/or scene object.** (in other words, do not make them reactive)

I didn’t dig deeper, but I think it causes multiple calls of the renderLoop or something similar.

R.

EDIT: repo demonstrating the issue: [GitHub - RolandCsibrei/quasar-vue-bjs-low-fps: Demonstrates low FPS in Quasar combined with BabylonJS.](https://github.com/RolandCsibrei/quasar-vue-bjs-low-fps)

EDIT2: [Official BabylonJS + Vue documentation](https://doc.babylonjs.com/extensions/Babylon.js+ExternalLibraries/BabylonJS_and_Vue/BabylonJS_and_Vue_1)

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [May 25, 2021, 3:11pm UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/2 "2021-05-25T15:11:03Z")

</div>

Hey, unfortunately we simply cannot help without a clear repro

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [May 25, 2021, 4:36pm UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/3 "2021-05-25T16:36:49Z")

</div>

You have to disconnect BJS from the VUE state and not let Vue touch any of the BJS objects or it will chain and try to make everything reactive every frame.

You have to make a communication bus that separates the BJS data from the react elements.

Just output the BJS object after you pass a param to make something on it reactive and look at the listeners its binding, you will see its toxic AF and its doing that every frame.

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [May 26, 2021, 7:49am UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/5 "2021-05-26T07:49:39Z")

</div>

Hello,  
my post is an advice for others, as you can read, I already solved the issue by not making the BJS Engine object reactive.

Thank you!

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [May 26, 2021, 7:59am UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/6 "2021-05-26T07:59:13Z")

</div>

Hi there!  
Yes, I did exactly the same. The GUI is based on Quasar/Vue2 and I introduced a Puppeteer class which serves as an interface between BJS and Quasar and simply translates method calls from the GUI to messages sent/received to/from the BJS part of the application. The GUI doesn’t know anything about BJS, and BJS doesn’t know anything about the GUI part, the Puppeteer is the bridge. The cool thing about this is, that I could move the BJS scene into a web worker.

Thanks for your response!

---

<div class="post-metadata">

**Author:** ![babylonjs197s](https://avatars.discourse-cdn.com/v4/letter/b/eb9ed0/32.png) [@babylonjs197s](https://forum.babylonjs.com/u/babylonjs197s)\
**Post date:** [June 14, 2021, 6:42am UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/7 "2021-06-14T06:42:57Z")

</div>

How can I understand this (you must disconnect BJS from Vue state, and Vue is not allowed to touch any BJS object). Now I define all BJS objects in methods. I use Vue, and I don’t bind any this, but FPS is still very low. I can keep FPS stable at 60 with H5. Can you give me some guidance.  
This is my code, from initialization to rendering are completed in this method, without binding any this  
inittest () {  
let canvas = document.getElementById(‘renderCanvas’)  
let engine = new BABYLON.Engine(canvas, true, {  
preserveDrawingBuffer: true,  
stencil: true,  
disableWebGL2Support: false  
})

```
  let target = new BABYLON.Vector3.Zero()
  let position = new BABYLON.Vector3(0, 260, 300)

  let scene1 = new BABYLON.Scene(engine)
  scene1.useRightHandedSystem = true

  // This creates and positions a free camera1 (non-mesh)
  let arcCamera1 = new BABYLON.ArcRotateCamera('arcCamera1', 0, 2, 10, target, scene1)
  // This positions the camera1
  arcCamera1.setPosition(position)

  // This targets the camera1 to scene1 origin
  // arcCamera1.setTarget(BABYLON.Vector3.Zero());

  // This attaches the camera1 to the canvas
  arcCamera1.attachControl(canvas, true)
  arcCamera1.allowUpsideDown = false
  // arcCamera1.upperRadiusLimit = 400
  // arcCamera1.lowerRadiusLimit = 5
  // arcCamera1.maxCameraSpeed = 10

  arcCamera1.panningSensibility = 50 
  arcCamera1.panningInertia = 0 

  // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
  let light1 = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0, 1, 0), scene1)
  // let light2 = new BABYLON.HemisphericLight('hemi', new BABYLON.Vector3(0, 1, 0), _that.scene2);

  // Default intensity is 1. Let's dim the light a small amount
  // light1.intensity = 0.7;

  let importMeshs = []

  let gltfArr = [
    'https://models.babylonjs.com/seagulf.glb'
  ]
  // _that.createCameraSprite()
  gltfArr.forEach(item => {
    importMeshs.push(
      BABYLON.SceneLoader.ImportMeshAsync(null, item, '', scene1).then(res => {
          item.freezeWorldMatrix()
        })
      }))
  })
  Promise.all(importMeshs).then(res => {
    scene1.freezeActiveMeshes()
  })
  scene1.debugLayer.show({
    embedMode: true
  })
  const spriteManagerTrees = new BABYLON.SpriteManager('camerasManager', '/static/gltf/image/camera.png', 100, {
    width: 1024,
    height: 1024
  }, scene1)
  spriteManagerTrees.isPickable = true
  for (let i = 0; i < 20; i++) {
    // Mutliple trees
    const myCamera = new BABYLON.Sprite('cameras', spriteManagerTrees)
    myCamera.isPickable = true
    myCamera.useAlphaForPicking = true
    myCamera.position.x = i
    myCamera.position.y = 0
    myCamera.position.z = i
    myCamera.actionManager = new BABYLON.ActionManager(scene1)
  }
  engine.runRenderLoop(function (res) {
      scene1.render()
  })

}
```

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [June 14, 2021, 7:13am UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/8 "2021-06-14T07:13:49Z")

</div>

Hi!  
The important part of the code is the Vue part, so the snippet you provided is no help at all. Can you provide a github repo? I will gladly have a look at it.

---

<div class="post-metadata">

**Author:** ![babylonjs197s](https://avatars.discourse-cdn.com/v4/letter/b/eb9ed0/32.png) [@babylonjs197s](https://forum.babylonjs.com/u/babylonjs197s)\
**Post date:** [June 15, 2021, 1:25am UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/9 "2021-06-15T01:25:35Z")

</div>

If I don’t go to my GitHub, can I use gitee? This is the demo address  
I can’t go to GitHub. Is it OK to use gitee? This is the demo address of gitee

> **[码云197/babylonjs](https://gitee.com/mrbing197/babylonjs/blob/master/babylonjsDemo1)**
>
> Gitee.com（码云） 是 OSCHINA.NET 推出的代码托管平台，支持 Git 和 SVN，提供免费的私有仓库托管。目前已有超过 600 万的开发者选择 Gitee。

If I only load the model, I only draw once

 ![1623721035(1)](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/e/a/eacc52ec0add882f7b63c780fc8b513946ae9bc0.jpeg)

When I added the sprites, the number of times I drew kept rising

 ![1623721219(1)](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/5/1/5184b711417f6b46c8719d08bf9521c305b63a72.png)

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [June 15, 2021, 2:13am UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/10 "2021-06-15T02:13:39Z")

</div>

Hello, the problem is not VUE, but your code:

Comment out line 99, 100 amd 101 and you will en up with 3 draw calls.

```auto
      // Promise.all(importMeshs).then(res => {
      // scene1.freezeActiveMeshes();
      // });

```

You can freeze the mesh when iterating the loaded meshes, add this at line 80:  
`item.freezeWorldMatrix()`

I didn’t dig deep, but you have a cyclic condition somewhere.

R.

---

<div class="post-metadata">

**Author:** ![babylonjs197s](https://avatars.discourse-cdn.com/v4/letter/b/eb9ed0/32.png) [@babylonjs197s](https://forum.babylonjs.com/u/babylonjs197s)\
**Post date:** [June 15, 2021, 3:12am UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/11 "2021-06-15T03:12:32Z")

</div>

It doesn’t seem to be the problem  
// Promise.all(importMeshs).then(res =\> {  
// scene1.freezeActiveMeshes();  
// });  
I have created 300 new spheres, and the number of drawing times does not increase all the time. The number of frames remains at about 50. I don’t know if it’s the problem of sprites, but it’s not very similar. Because I draw 200000 sprites alone, and the number of frames can reach 60. As long as the sprites and the imported gltf are used together, the number of drawing times will increase all the time, and the number of frames will drop slowly, Until 0 to 1 frames per second

 ![1623726834(1)](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/6/7/67835954671961ed762136fbf63ce00fe599bd74.png)

---

<div class="post-metadata">

**Author:** ![babylonjs197s](https://avatars.discourse-cdn.com/v4/letter/b/eb9ed0/32.png) [@babylonjs197s](https://forum.babylonjs.com/u/babylonjs197s)\
**Post date:** [June 15, 2021, 10:45am UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/12 "2021-06-15T10:45:29Z")

</div>

> [@roland](#):
>
> `scene1.freezeActiveMeshes();`

You’re right. It’s really that the rendering times have been rising. Now I have a new problem. After I add Scene1. Freezeactivemeshes(), my FPS has been improved. I don’t add Scene1. Freezeactivemeshes(); My FPS has only 12 frames. I don’t know how to optimize it now. Can you help me?

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [June 16, 2021, 3:17am UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/13 "2021-06-16T03:17:16Z")

</div>

Post your code.

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [June 16, 2021, 3:17am UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/14 "2021-06-16T03:17:36Z")

</div>

Post your code / Playground.

---

<div class="post-metadata">

**Author:** ![babylonjs197s](https://avatars.discourse-cdn.com/v4/letter/b/eb9ed0/32.png) [@babylonjs197s](https://forum.babylonjs.com/u/babylonjs197s)\
**Post date:** [June 16, 2021, 3:31am UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/15 "2021-06-16T03:31:44Z")

</div>

I don’t know how to upload the model, and it’s very big. I found someone else’s model. You see, the genie is rendering all the time. If you don’t add scene. Freezeactivemeshes(), it won’t render all the time  
[https://playground.babylonjs.com/#IQJ1BZ#1](https://playground.babylonjs.com/#IQJ1BZ#1)

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [June 16, 2021, 3:53am UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/16 "2021-06-16T03:53:26Z")

</div>

Sorry, I am not sure I understand what is the issue here. What exactly do you want to achieve?

---

<div class="post-metadata">

**Author:** ![babylonjs197s](https://avatars.discourse-cdn.com/v4/letter/b/eb9ed0/32.png) [@babylonjs197s](https://forum.babylonjs.com/u/babylonjs197s)\
**Post date:** [June 16, 2021, 4:28am UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/17 "2021-06-16T04:28:28Z")

</div>

First of all, I import the gltf file. I have to use scene. Freezeactivemeshes() to increase my frame count. Then I use sprites. However, when using gltf and sprites together, the rendering times keep increasing, and then the frames will drop slowly. I can’t find a better way to improve my frame count except through scene. Freezeactivemeshes()

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/2/5/259d9bafab41c80c460dc87567cdae7c7f750a65.png)

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [June 16, 2021, 6:17am UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/18 "2021-06-16T06:17:52Z")

</div>

What is the playground URL?

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [June 16, 2021, 6:35am UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/19 "2021-06-16T06:35:11Z")

</div>

You can optimize you scene (as far as I know) tweaking these:

 ![Screenshot_17](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/5/0/50f1f4d09451e14685f392630ed4e4922a20f317.png)

If you a have a lot of meshes, you can use Instances or ThinInstances to juice more out of your GPU. Just check out the BJS documentation.

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [June 17, 2021, 3:53am UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/20 "2021-06-17T03:53:04Z")

</div>

One more thing, you have low fps on this playground or in your Vue app? This is a very basic scene and there should be no performance problems so I assume there is a problem elsewhere.

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [June 18, 2021, 10:42pm UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/21 "2021-06-18T22:42:26Z")

</div>

@babylonjs197s it would be great to see a repro in the playground as I would like to preserve as much as I can our perfs ?

[Next page](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095.md?page=2)