# Laggy playground

**URL:** <https://forum.babylonjs.com/t/laggy-playground/41135>\
**Category:** Questions\
**Tags:** playground\
**Created:** [May 25, 2023, 4:14pm UTC](https://forum.babylonjs.com/t/laggy-playground/41135 "2023-05-25T16:14:12Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nini\_Desmond](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nini_desmond/32/31505_2.png) [@Nini\_Desmond](https://forum.babylonjs.com/u/Nini_Desmond)\
**Post date:** [May 25, 2023, 4:14pm UTC](https://forum.babylonjs.com/t/laggy-playground/41135/1 "2023-05-25T16:14:12Z")

</div>

Hi  
So I have a 4 G Ram, 2 G dedicated memory. 17.3 inch screen  
When I entire some playgrounds I get a super slow reaction.  
Example: [This Playground](https://playground.babylonjs.com/#8562J8#1) lags forever  
The lags affects other applications and slows up my Notebook. it lags only when I am on the browser tab. If I switch to other tabs, machine works normally. Please help

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [May 25, 2023, 5:07pm UTC](https://forum.babylonjs.com/t/laggy-playground/41135/2 "2023-05-25T17:07:52Z")

</div>

What do you mean exactly by “lag forever”? Do you mean the frame rate is low? If you open the task manager, what is the memory/cpu usage you see when it’s open? The PG example you linked doesn’t do anything special so it’s quite strange that it has such an effect 🙂

---

<div class="post-metadata">

**Author:** ![Nini\_Desmond](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nini_desmond/32/31505_2.png) [@Nini\_Desmond](https://forum.babylonjs.com/u/Nini_Desmond)\
**Post date:** [May 25, 2023, 5:15pm UTC](https://forum.babylonjs.com/t/laggy-playground/41135/3 "2023-05-25T17:15:25Z")

</div>

Thanks for the reply. lags forever means the frame rate low  
The PG I shared has buttons. I can’t use them because the tab freezes. Processor 88  
CPU usage 100  
memory 75

The CPU usage auto climbs to 100 immediately I open the tab and do nothing

---

<div class="post-metadata">

**Author:** ![CodingCrusader](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/codingcrusader/32/29857_2.png) [@CodingCrusader](https://forum.babylonjs.com/u/CodingCrusader)\
**Post date:** [May 25, 2023, 5:34pm UTC](https://forum.babylonjs.com/t/laggy-playground/41135/4 "2023-05-25T17:34:44Z")

</div>

I asked the bing chat bot what the hardware prerequisits are to run babylon.js code in the browser.

> The current web page context is about Babylon.js prerequisites. According to the web page, you will need a computer with a **modern graphics card** that supports WebGL 1.0 or higher. You can check if your graphics card supports WebGL by visiting this website: [get.webgl.org](https://get.webgl.org/).

---

<div class="post-metadata">

**Author:** ![Nini\_Desmond](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nini_desmond/32/31505_2.png) [@Nini\_Desmond](https://forum.babylonjs.com/u/Nini_Desmond)\
**Post date:** [May 25, 2023, 5:42pm UTC](https://forum.babylonjs.com/t/laggy-playground/41135/5 "2023-05-25T17:42:04Z")

</div>

I think my specifications are good. I might just be missing something. I use a lowered class and even way older model of Dell Laptop it runs heavy PG models just fines. Not sure what going on

 ![Capture](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/4/4/446b247fa1c7f60ebbeda7cf289cf861556a18ff.png)  
Also, my card is Of Radeon

---

<div class="post-metadata">

**Author:** ![CodingCrusader](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/codingcrusader/32/29857_2.png) [@CodingCrusader](https://forum.babylonjs.com/u/CodingCrusader)\
**Post date:** [May 25, 2023, 6:03pm UTC](https://forum.babylonjs.com/t/laggy-playground/41135/6 "2023-05-25T18:03:14Z")

</div>

I am using the Edge Browser which has a performance tool

This is my performance graph during run your example. Is there a difference to yours?

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/d/d/ddb19a18594560f7ec449aebc126e5fa6fe20215.jpeg)

Any error logs in the the console?

---

<div class="post-metadata">

**Author:** ![Nini\_Desmond](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nini_desmond/32/31505_2.png) [@Nini\_Desmond](https://forum.babylonjs.com/u/Nini_Desmond)\
**Post date:** [May 25, 2023, 6:16pm UTC](https://forum.babylonjs.com/t/laggy-playground/41135/7 "2023-05-25T18:16:37Z")

</div>

I can barely navigate to the tab. It just freezes my system. Not sure why… I just hope it get’s better

---

<div class="post-metadata">

**Author:** ![CodingCrusader](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/codingcrusader/32/29857_2.png) [@CodingCrusader](https://forum.babylonjs.com/u/CodingCrusader)\
**Post date:** [May 25, 2023, 6:22pm UTC](https://forum.babylonjs.com/t/laggy-playground/41135/8 "2023-05-25T18:22:13Z")

</div>

I would first comment out all the code, except for camera and lights, and then reinsert them piece by piece until I find the point where my system freezes.

I assume you can’t edit the code either…

```auto
var delayCreateScene = function () {

    // Model by Mixamo

    engine.enableOfflineSupport = false;
    
    // This is really important to tell Babylon.js to use decomposeLerp and matrix interpolation
    BABYLON.Animation.AllowMatricesInterpolation = true;

    var scene = new BABYLON.Scene(engine);

    var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 4, 3, new BABYLON.Vector3(0, 1, 0), scene);
    camera.attachControl(canvas, true);

    camera.lowerRadiusLimit = 2;
    camera.upperRadiusLimit = 10;
    camera.wheelDeltaPercentage = 0.01;

	var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
	light.intensity = 0.6;
	light.specular = BABYLON.Color3.Black();

    var light2 = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(0, -0.5, -1.0), scene);
    light2.position = new BABYLON.Vector3(0, 5, 5);

    // Shadows
    var shadowGenerator = new BABYLON.ShadowGenerator(1024, light2);
    shadowGenerator.useBlurExponentialShadowMap = true;
    shadowGenerator.blurKernel = 32;
	
    engine.displayLoadingUI();

	BABYLON.SceneLoader.ImportMesh("", "./scenes/", "dummy3.babylon", scene, function (newMeshes, particleSystems, skeletons) {
        var skeleton = skeletons[0];

        shadowGenerator.addShadowCaster(scene.meshes[0], true);
        for (var index = 0; index < newMeshes.length; index++) {
            newMeshes[index].receiveShadows = false;;
        }

        var helper = scene.createDefaultEnvironment({
            enableGroundShadow: true,
        });
        helper.setMainColor(BABYLON.Color3.Gray());

        // ROBOT
        skeleton.animationPropertiesOverride = new BABYLON.AnimationPropertiesOverride();
        skeleton.animationPropertiesOverride.enableBlending = true;
        skeleton.animationPropertiesOverride.blendingSpeed = 0.05;
        skeleton.animationPropertiesOverride.loopMode = 1;
    
        var idleRange = skeleton.getAnimationRange("YBot_Idle");
        var walkRange = skeleton.getAnimationRange("YBot_Walk");
        var runRange = skeleton.getAnimationRange("YBot_Run");
        var leftRange = skeleton.getAnimationRange("YBot_LeftStrafeWalk");
        var rightRange = skeleton.getAnimationRange("YBot_RightStrafeWalk");
        
        // IDLE
        if (idleRange) scene.beginAnimation(skeleton, idleRange.from, idleRange.to, true);

        // GRID
        var extend = scene.getWorldExtends();
        var width = (extend.max.x - extend.min.x) * 5;
        var depth = (extend.max.z - extend.min.z) * 5;

        var gridMesh = BABYLON.Mesh.CreateGround("grid", 1.0, 0.0, 1, scene);
        gridMesh.scaling.x = Math.max(width, depth);
        gridMesh.scaling.z = gridMesh.scaling.x;
        gridMesh.isPickable = false;

        var gridmaterial = new BABYLON.GridMaterial("GridMaterial", scene);
        gridmaterial.majorUnitFrequency = 10;
        gridmaterial.minorUnitVisibility = 0.3;
        gridmaterial.gridRatio = 0.01;
        gridmaterial.backFaceCulling = false;
        gridmaterial.mainColor = new BABYLON.Color3(1, 1, 1);
        gridmaterial.lineColor = new BABYLON.Color3(1.0, 1.0, 1.0);
        gridmaterial.opacity = 0.8;
        gridmaterial.zOffset = 1.0;

        gridMesh.material = gridmaterial;

        // Set alpha index manually for ground objects
        gridMesh.alphaIndex = 2;
        scene.meshes.find(m => m.name === 'BackgroundPlane').alphaIndex = 1;

        // UI
        var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
        var UiPanel = new BABYLON.GUI.StackPanel();
        UiPanel.width = "220px";
        UiPanel.fontSize = "14px";
        UiPanel.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
        UiPanel.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
        advancedTexture.addControl(UiPanel);
        // ..
        var button = BABYLON.GUI.Button.CreateSimpleButton("but1", "Play Idle");
        button.paddingTop = "10px";
        button.width = "100px";
        button.height = "50px";
        button.color = "white";
        button.background = "green";
        button.onPointerDownObservable.add(()=> {
            if (idleRange) scene.beginAnimation(skeleton, idleRange.from, idleRange.to, true);
        });
        UiPanel.addControl(button);
        // ..
        var button1 = BABYLON.GUI.Button.CreateSimpleButton("but2", "Play Walk");
        button1.paddingTop = "10px";
        button1.width = "100px";
        button1.height = "50px";
        button1.color = "white";
        button1.background = "green";
        button1.onPointerDownObservable.add(()=> {
            if (walkRange) scene.beginAnimation(skeleton, walkRange.from, walkRange.to, true);
        });
        UiPanel.addControl(button1);
        // ..
        var button1 = BABYLON.GUI.Button.CreateSimpleButton("but3", "Play Run");
        button1.paddingTop = "10px";
        button1.width = "100px";
        button1.height = "50px";
        button1.color = "white";
        button1.background = "green";
        button1.onPointerDownObservable.add(()=> {
            if (runRange) scene.beginAnimation(skeleton, runRange.from, runRange.to, true);
        });
        UiPanel.addControl(button1);
        // ..
        var button1 = BABYLON.GUI.Button.CreateSimpleButton("but4", "Play Left");
        button1.paddingTop = "10px";
        button1.width = "100px";
        button1.height = "50px";
        button1.color = "white";
        button1.background = "green";
        button1.onPointerDownObservable.add(()=> {
            if (leftRange) scene.beginAnimation(skeleton, leftRange.from, leftRange.to, true);
        });
        UiPanel.addControl(button1);
        // ..
        var button1 = BABYLON.GUI.Button.CreateSimpleButton("but5", "Play Right");
        button1.paddingTop = "10px";
        button1.width = "100px";
        button1.height = "50px";
        button1.color = "white";
        button1.background = "green";
        button1.onPointerDownObservable.add(()=> {
            if (rightRange) scene.beginAnimation(skeleton, rightRange.from, rightRange.to, true);
        });
        UiPanel.addControl(button1);
        // ..
        var button1 = BABYLON.GUI.Button.CreateSimpleButton("but6", "Play Blend");
        button1.paddingTop = "10px";
        button1.width = "100px";
        button1.height = "50px";
        button1.color = "white";
        button1.background = "green";
        button1.onPointerDownObservable.add(()=> {
            if (walkRange && leftRange) {
                scene.stopAnimation(skeleton);
                var walkAnim = scene.beginWeightedAnimation(skeleton, walkRange.from, walkRange.to, 0.5, true);
                var leftAnim = scene.beginWeightedAnimation(skeleton, leftRange.from, leftRange.to, 0.5, true);

                // Note: Sync Speed Ratio With Master Walk Animation
                walkAnim.syncWith(null);
                leftAnim.syncWith(walkAnim);
            }
        });
        UiPanel.addControl(button1);

        engine.hideLoadingUI();
    });	

    return scene;
};

```

---

<div class="post-metadata">

**Author:** ![Nini\_Desmond](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nini_desmond/32/31505_2.png) [@Nini\_Desmond](https://forum.babylonjs.com/u/Nini_Desmond)\
**Post date:** [May 25, 2023, 6:34pm UTC](https://forum.babylonjs.com/t/laggy-playground/41135/9 "2023-05-25T18:34:09Z")

</div>

I am doing that now. But you should know this is not a problem of this PG. The PG is just an example. I have this laggy/ freezing thing on most animated PGs

---

<div class="post-metadata">

**Author:** ![CodingCrusader](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/codingcrusader/32/29857_2.png) [@CodingCrusader](https://forum.babylonjs.com/u/CodingCrusader)\
**Post date:** [May 25, 2023, 6:36pm UTC](https://forum.babylonjs.com/t/laggy-playground/41135/10 "2023-05-25T18:36:08Z")

</div>

Can you download the dummy3.babylon and run the animation in the [Babylon.js Sandbox - View glTF, glb, obj and babylon files (babylonjs.com)](https://sandbox.babylonjs.com/) ?

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/f/4/f4664bc544c49f2542b337280cecac0e64f7dacb.png)

[https://www.babylonjs-playground.com/scenes/dummy3.babylon](https://www.babylonjs-playground.com/scenes/dummy3.babylon)

---

<div class="post-metadata">

**Author:** ![Nini\_Desmond](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nini_desmond/32/31505_2.png) [@Nini\_Desmond](https://forum.babylonjs.com/u/Nini_Desmond)\
**Post date:** [May 25, 2023, 7:00pm UTC](https://forum.babylonjs.com/t/laggy-playground/41135/11 "2023-05-25T19:00:09Z")

</div>

I am not sure I quite understand your last message.  
But Here is what I noticed from debugging the script  
This line begins the freezing process. ` engine.displayLoadingUI();`  
just after the lights

---

<div class="post-metadata">

**Author:** ![CodingCrusader](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/codingcrusader/32/29857_2.png) [@CodingCrusader](https://forum.babylonjs.com/u/CodingCrusader)\
**Post date:** [May 25, 2023, 7:08pm UTC](https://forum.babylonjs.com/t/laggy-playground/41135/12 "2023-05-25T19:08:09Z")

</div>

ok, if you want you can put the directive “debugger;” in front of this function and go deeper into the functions step by step with the debug tools of the browser until you find the real reason…

It’s a lot of work, so I hope someone can help you eliminate the problem. But I think it’s great that you found the point where the problems start. That’s a huge step forward.

---

<div class="post-metadata">

**Author:** ![CodingCrusader](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/codingcrusader/32/29857_2.png) [@CodingCrusader](https://forum.babylonjs.com/u/CodingCrusader)\
**Post date:** [May 25, 2023, 7:11pm UTC](https://forum.babylonjs.com/t/laggy-playground/41135/13 "2023-05-25T19:11:00Z")

</div>

> [@Nini\_Desmond](#):
>
> I am not sure I quite understand your last message.

click on the link with the “dummy3.babylon” and save the file on your local folder.

then start the sandbox of babylon and drag this downloaded file on to this site. it will load the file and display its content.

On the left side click on “skeltons” and you will see on the right side the animation which can be run.

if you can animate without freeze your system then the problem is not the animation itself.

---

<div class="post-metadata">

**Author:** ![Nini\_Desmond](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nini_desmond/32/31505_2.png) [@Nini\_Desmond](https://forum.babylonjs.com/u/Nini_Desmond)\
**Post date:** [May 25, 2023, 7:17pm UTC](https://forum.babylonjs.com/t/laggy-playground/41135/14 "2023-05-25T19:17:05Z")

</div>

The problem is my system because so many PG are freezing. I told you this PG was just an Example. I open this thread because I thought you might have a clue of why my system lags on certain animated PG

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [May 25, 2023, 7:26pm UTC](https://forum.babylonjs.com/t/laggy-playground/41135/15 "2023-05-25T19:26:52Z")

</div>

Does this playground load fine? [Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/#8562J8#7)

---

<div class="post-metadata">

**Author:** ![Nini\_Desmond](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nini_desmond/32/31505_2.png) [@Nini\_Desmond](https://forum.babylonjs.com/u/Nini_Desmond)\
**Post date:** [May 25, 2023, 7:33pm UTC](https://forum.babylonjs.com/t/laggy-playground/41135/16 "2023-05-25T19:33:28Z")

</div>

It does load the model. But still slow.  
Not as slow as the original full PG thou

---

<div class="post-metadata">

**Author:** ![jeremy-coleman](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jeremy-coleman/32/15493_2.png) [@jeremy-coleman](https://forum.babylonjs.com/u/jeremy-coleman)\
**Post date:** [May 25, 2023, 8:27pm UTC](https://forum.babylonjs.com/t/laggy-playground/41135/17 "2023-05-25T20:27:46Z")

</div>

Could be from browser update not doing so good with old drivers. Have you updated drivers recently/ever? But, even the beastliest of desktops can lag on some playgrounds