Jump to content

Lagging movement with FreeCamera


Recommended Posts

Hey there,

I've been working on a FPS-like project for a while now and so far it's been a lot of fun, so first of all thanks to all of you who created this great engine! Now there seems to be a little problem with the camera movement and I would be very happy if someone could help me out with it.

I am using FreeCamera combined with collision checking and gravity to create first-person-style controls. Now for some reason the player doesn't always move smoothly but instead sometimes slows down for a few seconds before speeding up again, making the controls feel very jittery and jumpy. My first guess were performance issues but the framerate seems to be stable aroubt 50-60 fps, even during the "jumps" of the camera. Now I noticed that something similar occurs when I switch the browser tab for a few seconds and then return to the tab with my Babylon.js application:  As soon as I hit the forward key, the camera movement gets a massive boost into the according direction for a few seconds, before slowing down again. Could this be some issue with the rendering loop? Because it somehow feels as if the engine is somehow trying to catch up with the frames it "missed" while another tab was active.

Unfortunately my project's structure is very modularized and so I cannot easily reproduce my problem in the playground. But here's the code of my Player class:

import * as BABYLON from 'babylonjs';

export default class Player {

    constructor(startPosition, container, scene) {
        this.startPosition = startPosition;
        this.container = container;
        this.scene = scene;

        this.speed = 1;
        this.angularSensibility = 1000;


    initCamera() {
        const position = BABYLON.Vector3.FromArray(this.startPosition, 0);
        this.camera = new BABYLON.FreeCamera('player', position, this.scene);

    initControls() {
        this.camera.attachControl(this.container, false);

        const width = 1;
        const height = 1;
        this.camera.ellipsoid = new BABYLON.Vector3(width, height, width);
        this.camera.checkCollisions = true;
        this.camera.applyGravity = true;

        this.camera.speed = this.speed;
        this.camera.angularSensibility = this.angularSensibility;

        this.camera.keysUp = [38, 87];
        this.camera.keysDown = [40, 83];
        this.camera.keysLeft = [37, 65];
        this.camera.keysRight = [39, 68];

    initTriggerMesh() {
        this.triggerMesh = new BABYLON.Mesh.CreateBox('box', 2, this.scene);
        this.triggerMesh.parent = this.camera;

And my gravity settings:

this.scene.gravity = new BABYLON.Vector3(0, -10, 0);

Maybe someone of you already knows this issue and how to solve it. If not I'll try to somehow reproduce it in a playground!

Link to comment
Share on other sites

Unfortunately your setup seems fine. So this could come from other sources:

- Can you check that the collision meshes are simple. Do not use the ground mesh for instance but simple planes or boxes.

- The issue when switching tab is because the scene time was updated in background but the render did not occur so babylon.js thinks it is a framedrop and tries to compensate

Link to comment
Share on other sites

Thanks for your quick answer! I've replaced the ground mesh by a simple plane mesh now but unfortunately this didn't solve the problem. Maybe I should remove parts of my scene bit by bit to find out if some certain object is causing the trouble...

Is there some way to solve the tab switching issue, maybe by pausing the game when another tab gets focused? If not, I'll just have to make my game so immersive that nobody will even think about opening another tab while playing it ;)

Link to comment
Share on other sites

Actually, there are some quite complex meshes in my scene, but they don't have collision checking enabled. Instead I am using a simple box around them as a collision mesh, so that shouldn't be the problem. My ground plane is quite big, 1000 units, but making it smaller didn't improve the situation. Well, I'll continue my search for the villain mesh.

EDIT: I replaced the complex meshes (each with about 5000 vertices) by simple boxes and now the camera movement seems to be a bit less laggy. So I probably should reduce the number of vertices, although 5000 per model don't seem that much to me. I already tried mesh.simplify() but it didn't really impact the performance.

About the switching issue: I added the following event listener to my application but the frame skipping issue is still there:

document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'visible') this.engine.deltaTime = 0;


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...