# Very low FPS with Vue **URL:** \ **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:** 2
**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 19, 2021, 11:40am UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/22 "2021-06-19T11:40:49Z")
Guys, here is a repo demonstrating what NOT TO do to avoid low FPS with Vue. When you click the EMIT ENGINE button, Vue emits the Engine object from the page to the layout, where the FPS information is rendered. After the emmit FPS drops from stable 144 FPS to 25-30 FPS. The repo uses Quasar for the frontend. I use it on daily basis, that’s why it is used here too. 🙂 However you can setup a simple Vue app without Quasar and the result will be the same. [https://github.com/RolandCsibrei/quasar-vue-bjs-low-fps](https://github.com/RolandCsibrei/quasar-vue-bjs-low-fps) ---
**Author:** ![babylonjs197s](https://avatars.discourse-cdn.com/v4/letter/b/eb9ed0/32.png) [@babylonjs197s](https://forum.babylonjs.com/u/babylonjs197s)\ **Post date:** [June 22, 2021, 9:48am UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/23 "2021-06-22T09:48:51Z")
Source address：[https://gitee.com/mrbing197/babylonjs.git](https://gitee.com/mrbing197/babylonjs.git) Hello, I uploaded my source code. Can you take a look at it for me? I use Scene1. Freezeactivemeshes() to freeze the grid, which helps me improve my frame count. However, after adding sprites, the rendering times will continue to increase, and then FPS will continue to drop. But if I use particles, I won’t increase the rendering times. I don’t know why. I can’t get rid of Scene1. Freezeactivemeshes () because my model is too big. I want to use it to improve my frame count. Don’t cut it. It’s really useful. The only pity is that it can’t be combined with sprites. I hope it can be ban ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/d/6/d6225b5497a2574f05d8122578a48d06bd745f07.png) ---
**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 22, 2021, 1:07pm UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/24 "2021-06-22T13:07:27Z")
Could you repro the issue in the playground as it would be easier for anybody to jump in ? ---
**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 23, 2021, 7:48am UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/25 "2021-06-23T07:48:16Z")
Hello! I’ve cloned your repository. As I previosly said, you have to remove lines 108, 109 110. With those lines I get 23 FPS, without them I get 51 (running on a notebook on battery). So it is actually slowing the rendering process. So, I am sorry, but I don’t get why do you want to stick to freezing active meshes. Is it behaving differently on your browser? I tried it in Chrome. What browser do you use? R. EDIT: typos ---
**Author:** ![babylonjs197s](https://avatars.discourse-cdn.com/v4/letter/b/eb9ed0/32.png) [@babylonjs197s](https://forum.babylonjs.com/u/babylonjs197s)\ **Post date:** [June 24, 2021, 2:50am UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/26 "2021-06-24T02:50:34Z")
Because my actual model is about 200m, it has been compressed to the limit. After I freeze the grid, FPX can reach more than 40 frames. If I don’t freeze the grid, FPS only has about 10 frames, so I want to use Scene1. Freezeactivemeshes () ---
**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 24, 2021, 6:43am UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/27 "2021-06-24T06:43:25Z")
It doesn’t really matter what are the dimensions of your model. The number of vertices and faces is important. I am working on a building with 9 floors and the base dimension is 50x75m. The building is full of office stuff, like tables, chairs, PCs, etc. Normally it renders at 18 FPS on my RTX3080 GPU. The model is exported directly from Autodesk, so it is not low poly at all. I used thin instances to render all the objects in the building, I mean the tables, chairs, … A lot of these objects are exactly the same, so I could use thin instances (or we can call it gpu cloning). Using this technique it renders at 144 FPS. If this is your situation as well, I can help you. Otherwise I (or anyone else who will try to help you) need to see your model. If you are not allowed or don’t want to share it, it will be very hard to track down your issue. R. EDIT: Make a screenshot of the Statistics tab from the Inspector so I can see what are the numbers. ---
**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 25, 2021, 9:05am UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/28 "2021-06-25T09:05:47Z")
Look at this scene, quite a lot indices and faces and I put some sprites on the scene, the same scenario you are looking for with a complex model and sprites. It is running at 60 FPS on my notebook on battery on the discrete Radeon GPU. BJS is awesome! 😉 ![Screenshot 2021-06-25 110119](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/2/0/20b63af58e58420e82164784baf59157034254ee.jpeg) ---
**Author:** ![babylonjs197s](https://avatars.discourse-cdn.com/v4/letter/b/eb9ed0/32.png) [@babylonjs197s](https://forum.babylonjs.com/u/babylonjs197s)\ **Post date:** [June 28, 2021, 10:47am UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/29 "2021-06-28T10:47:45Z")
How do you do it? Can you share with me the optimized places? ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/0/6/069af71db30e65dff926d0af7015e21316650714.png) ---
**Author:** ![DarraghBurke](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/darraghburke/32/10621_2.png) [@DarraghBurke](https://forum.babylonjs.com/u/DarraghBurke)\ **Post date:** [June 28, 2021, 4:58pm UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/30 "2021-06-28T16:58:37Z")
@roland mentioned using thin instances for objects which have multiple copies earlier. This could be a huge performance boost for you. In order to give you optimization advice, though, we would really need to see the particular model. How large is the file size when compressed? Google Drive lets you share files up to 10GB for free. ---
**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 28, 2021, 5:54pm UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/31 "2021-06-28T17:54:00Z")
I have to admit the number of meshes or vertices looks quite extreme !!! ---
**Author:** ![VisionsMind](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/visionsmind/32/14244_2.png) [@VisionsMind](https://forum.babylonjs.com/u/VisionsMind)\ **Post date:** [June 28, 2021, 7:01pm UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/32 "2021-06-28T19:01:53Z")
Could you clarify, give some pointers or resources on how to do this? I can’t find a way for BabylonJS to work without the reactive objects in VueJS…I did notice it’s quite slow though… ---
**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 28, 2021, 7:37pm UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/33 "2021-06-28T19:37:22Z")
@roland seems amazing at this part 🙂 ---
**Author:** ![babylonjs197s](https://avatars.discourse-cdn.com/v4/letter/b/eb9ed0/32.png) [@babylonjs197s](https://forum.babylonjs.com/u/babylonjs197s)\ **Post date:** [June 29, 2021, 12:54am UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/34 "2021-06-29T00:54:56Z")
But I use Scene1. Freezeactivemeshes (), my FPS can be increased to nearly 60 frames per second, and it is very stable, but as long as I add a sprite, the FPS will drop to 1 frame bit by bit, no matter how many models I use ---
**Author:** ![babylonjs197s](https://avatars.discourse-cdn.com/v4/letter/b/eb9ed0/32.png) [@babylonjs197s](https://forum.babylonjs.com/u/babylonjs197s)\ **Post date:** [June 29, 2021, 12:58am UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/35 "2021-06-29T00:58:49Z")
As long as you don’t put BJS objects into data, it’s generally not a problem with vuejs. If you’re still not sure if you have a reaction with vuejs, you can pull it out and test it in HTML. Mine is not a problem with using vuejs ---
**Author:** ![VisionsMind](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/visionsmind/32/14244_2.png) [@VisionsMind](https://forum.babylonjs.com/u/VisionsMind)\ **Post date:** [June 29, 2021, 11:00am UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/36 "2021-06-29T11:00:44Z")
Hah! Got it! So it’s just a matter of not using any reactive data property of the page? I think I’ve tried that before and wasn’t able to render the Babylon scene, but I’ll give that a more thorough try! Thanks for the tip! ---
**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 30, 2021, 10:14am UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/37 "2021-06-30T10:14:37Z")
Hello! You can use reactive variables of yours, but don’t make reactive any BJS object. EDIT: I am using a message bus (Vue bus for now) for decoupling the BJS scene from the Vue based GUI. This allows to run the BJS scene in a WebWorker and every message is JSON stringfied, so there is no reactivity at all. ---
**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 30, 2021, 9:48pm UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/38 "2021-06-30T21:48:34Z")
Hello, If somebody is struggling to setup Vue with BJS feel free to use this basic template: > **[RolandCsibrei/babylonjs-vue3-javascript](https://github.com/RolandCsibrei/babylonjs-vue3-javascript)** > > BabylonJS with VUE3 (javascript) basic template. Contribute to RolandCsibrei/babylonjs-vue3-javascript development by creating an account on GitHub. ---
**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 30, 2021, 10:08pm UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/39 "2021-06-30T22:08:12Z")
Maybe you could add a quick page to the documentation similar to the react one ? ---
**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 30, 2021, 10:43pm UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/40 "2021-06-30T22:43:44Z")
Hi, I could, but I am not sure what page are you referring to? Would you please send me the link? Thank you! ---
**Author:** ![brianzinn](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brianzinn/32/28013_2.png) [@brianzinn](https://forum.babylonjs.com/u/brianzinn)\ **Post date:** [June 30, 2021, 10:56pm UTC](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095/41 "2021-06-30T22:56:01Z")
> [@roland](#): > > Would you please send me the link? I think @sebavan is referring to this page for a quick start guide: [Babylon.js and React | Babylon.js Documentation (babylonjs.com)](https://doc.babylonjs.com/extensions/Babylon.js+ExternalLibraries/BabylonJS_and_ReactJS) [Previous page](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095.md?page=1) [Next page](https://forum.babylonjs.com/t/very-low-fps-with-vue/21095.md?page=3)