Freeze on the first click on mobile

Hi,

I’m developping a game with Babylon and I want to run it on a mobile phone.

How it works:
When the game starts, an object mesh is ready to be thrown.
As soon as the player taps on the mobile screen, the object is thrown (by a Y axis movement and has to hit a fixed object to continue the game with another object to thrown).

The problem that I have:
However, when the player taps the screen (with the pointerdown event) for the first time to throw the first object, there is a little freeze that makes some frames jump (my framerate is very low at this moment).
As a result, the thrown object does not detect the collision with the fixed object (due to its high speed value when it is thrown) and continues to move along the Y axis indefinitely.

My current patch:
If the thrown object has passed a certain Y position, I replace it at its initial position to have the expected initial movement and be able to detect the collision with a normal framerate. Problem: the player sees the object being replaced before continuing its movement.

My questions:
Is there a way to fix the little freeze that lowers the framerate and makes the frames jump (and thus avoid some collisions)?
If it is not possible, how can I patch it without being too visible to the player ?

Note: even if I wait few seconds (time to be sure that the game is getting fully start), the little freeze is nevertheless present. It occures much more on my mobile (which has a lower framerate) than on my PC. It is only the first tap of the player that is concerned.

Thank you for your help :wink:

I guess it is due to the shader compiling or the object loading. You should try to have the object rendered behind a loading screen at least once to be sure it does not “glitch” later on.

2 Likes

I noticed the exact same issue for my game. Even if everything is loaded correctly and that I added some kind of timer, the first event always cause a lag. I was looking around and I found out that it also occurred on Unity Engine :

However, I did not find any answer for Babylon Right now.

the easiest tbh is usually to check in the dev tools perf recorder what is the cause of the lag. You could also share a repro with us to validate.

I tried to simulate a pointerdown event programatically to cause this freeze intentionally when the game starts but it does not change anything. The problem occures only with the first player interaction.

could you share the capture ? I d be glad to have a look

What do you mean by capture? The Json file ?

yep the json :smiley:

@carolhmj @sebavan

Sorry for the delay!
Here you have the Json file:

Profile-20221220T102952.zip (929.8 KB)

Hey! The thing that caught my attention immediately was this notifyObservers that is calling your game code. It takes 37 ms, meaning you have some kind of callback that takes 37 ms, and since this is on a render observable, the render loop has to stop and wait for that much before being able to complete the render, which would cause a freeze.

image

I created a very simple example in the Playground to demonstrate what I wanted to show: Choke render loop example | Babylon.js Playground (babylonjs.com)

In it, I added a fake long operation on a scene observable (in this case, the “ready”), and you see a stutter on the animation, the ball goes from top to bottom really fast, and the frame capture looks like the top one, but more exagerated:

So I would examine what the checkForNextState function in your game logic does, I see there are some logs there, maybe something like a file access or network access is taking long? And I would keep logic in scene callbacks as light as possible.

2 Likes