Very low FPS with Vue

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. :slight_smile: 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

2 Likes

Source address: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

Could you repro the issue in the playground as it would be easier for anybody to jump in ?

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

1 Like

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 ()

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.

2 Likes

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! :wink:

3 Likes

How do you do it? Can you share with me the optimized places?

@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.

1 Like

I have to admit the number of meshes or vertices looks quite extreme !!!

1 Like

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…

@roland seems amazing at this part :slight_smile:

1 Like

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

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

1 Like

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!

1 Like

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.

1 Like

Hello,
If somebody is struggling to setup Vue with BJS feel free to use this basic template:

4 Likes

Maybe you could add a quick page to the documentation similar to the react one ?

Hi, I could, but I am not sure what page are you referring to? Would you please send me the link?
Thank you!

I think @sebavan is referring to this page for a quick start guide:
Babylon.js and React | Babylon.js Documentation (babylonjs.com)

1 Like