Performance Optimization

Next to Performance Rating, you will see the vertices per second, counter. Low FPS is a real sign. Generally speaking, you want to shoot for 60 FPS. If you get below 40 FPS, you will probably start to notice some jankiness.

There are lots of things that can cause the FPS to be low: Too many textures (images, videos, 3D models with textures), too much geometry (too many vertices in your 3D models), too many draw calls, too much JavaScript causing your performance to take a hit, and it isn't clear if you're wearing Frame on an old/slow device.

Help Myself, which roughly counts the complexity of the 3D models in your current view. The more 3D models with high texture and vertex count, the higher this number is going to be. This is only updating about once 10 seconds and 3D environments is not included in this count.

Texture resolution tracks how much texture memory is being loaded into your Frame. These could be textures from images, videos, or the textures on 3D models. We also check the average resolution of your textures. Lower resolution textures can boost performance, but may impact the quality of your Frame.

Just put ?debug=true at the end of your Frame url, and then you will have a new button at the top center of your Frame that will let you open up the Babylon Inspector.

You will need to close the Frame sidebar to see the Babylon Inspector. Once you open the inspector, you'll see a row of horizontal icons about halfway down. Click the one in the middle that looks like a little graph and you will get a faster, more comprehensive look at some counts and stats that all play a role in how well your Frame performs.

The FPS counter here updates in real time instead of once every three seconds, and there are a lot more details you can dive into. Those who have experience with 3D geometry or performance debugging will be familiar with many of these terms. You can also look into any single item in your Frame by popping open the "Nodes" section up at the top of the Inspector. This will include everything in the scene, including avatars, and you can click on each item and then see information about it by clicking the page icon that is the first one in the row of horizontal icons.

This tool is handy because you can click the eyeball icon next to an item to hide it, and you can even click the "dispose" button down below in the general menu to remove the item from the scene entirely. This does not permanently delete the asset from your Frame. It just gives you the opportunity to temporarily see how removing it might impact your performance/FPS. If you dispose of the item altogether instead of just hiding it, you will need to refresh the Frame to bring it back into the scene. If you just hide it with the eyeball icon on the right, you can bring it right back by clicking the eyeball again.

Of course you can experiment with anything you'd like to in the Babylon Inspector, and while it might "break" things temporarily in your Frame, just keep in mind that changes that you make from the Inspector are not permanent and you can always bring things back to the way they were simply by refreshing your Frame.