Slow performance in Mobile for my project

How can I debug or know what is the cause for a site made with Babylon that run sooo slow in mobile?

I am working in this personal project, it is a analog gif animator, for a real word steampunk lamp. It extracts 24 frame from a gif or a video portion, and create a virtual version of the final product, so users can see how it will looks like.

The Babylon side works well in Chrome desktop, but when I move to the mobile world it is so slow, not sure how I can optimize it, any suggestion?

This is the URL for the project:

You can use on the website to test it a gif from ghiphy or use a local video and cut it, here there is a video example so you can test it easily

You have a glow layer but it looks like there is nothing glowing, so you should delete that layer. This will avoid an additional rendering of the whole scene and will reduce the draw count by half.

It looks like you are drawing a cube which is immediately replaced by a cube with a background material:

You should delete this cube.

Another thing is that your object is composed of several distinct parts: you should try to make one object instead of several small objects.

The biggest performance constraint, however, is probably enabling OIT: you really shouldn’t do this on a mobile, OIT is very GPU heavy! Even on a desktop computer, given your scene, OIT is probably not necessary: normal transparency should work.


Thanks a lot for your suggestions Evgeni, not sure if the HDRI is also causing the problem, bc it is kind of big

I think the Cube you mention is how Babylon handle the light and the reflections with the hdri file, its not me doing that.

If you are using scene.createDefaultEnvironment(), it may be related to the parameters you pass to this function (or you don’t pass, in which case they will have some default values).

1 Like

Did you see all of these only from Spector?

Indeed :slight_smile:

We have shader names that Spector can display, so that’s quite easy:

1 Like

Sorry arekucr for stealing your topic but I was …amazed :astonished:

I’m using Spector from time to time, but to be honest I’m using it only when I’m out of solutions because I don’t understand too much from there, only basic things.
I saw glowShader, but I had no idea that is nothing glowing
I saw the cubes, but I suposed that there are 2 cubes, different cubes, nut the same with different materials
And the thing with multiple parts, it comes from nowhere :upside_down_face:

What I’m trying to say is that I feel like I’ve underestimated this tool. And I would like to learn more about it but I don’t know, …maybe I need a more detailed tutorial. I already saw all the tutorials from Davros :sweat_smile:
Anyway, thank you! l already earned something new.

1 Like

It does not come from nowhere, simply from the fact that there are a lot of draw calls to draw the object :slight_smile:

That’s the best tool you can use for debugging when you don’t understand what’s going on in a PG! Also, being able to update the shader code and see the changes in live is invaluable.

1 Like

No problem at all marian, I am also amazed with this tool, I didn’t know it and I am trying to understand better how it works and the information that can show and say us what is happening with a 3d scene with Babylon.

Thanks @Evgeni_Popov for your help