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 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
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 
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
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.
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
Also, my card is Of Radeon
1 Like
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?
Any error logs in the the console?
1 Like
I can barely navigate to the tab. It just freezes my system. Not sure why… I just hope it get’s better
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…
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;
};
1 Like
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
Can you download the dummy3.babylon and run the animation in the Babylon.js Sandbox - View glTF, glb, obj and babylon files (babylonjs.com) ?
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
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.
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.
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
Does this playground load fine? Babylon.js Playground (babylonjs.com)
It does load the model. But still slow.
Not as slow as the original full PG thou
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
1 Like