Skybox lagging Big scenes

Questions
1

I am creating a solar system and there are huge distances between planets and the star. although I scaled it down, some planets still extend to more than 3000 in the x and z-direction. I am using a skybox to provide a background to the scene and give it a more space-like look, Although as the planet gets farther from the centre, it begins to lag the scene while without the skybox it works quite smoothly. is there any way to minimize this lag? or can I use some different method to apply the background?
the code for the skybox is -

class Background {

    constructor (scene) {

        this.skybox = BABYLON.Mesh.CreateBox("skyBox", 10000.0, scene);

        this.skyboxMaterial = new BABYLON.BackgroundMaterial("skyBox", scene);

        this.skyboxMaterial.backFaceCulling = false;

        this.skyboxMaterial.disableLighting = true;

        this.skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("static/Images/Textrues/Background/galaxybg", scene);

        this.skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;

        this.skybox.material = this.skyboxMaterial;

        this.skybox.infiniteDistance = true;

    }

}
2

Welcome @Hasnain_Koser!

I canā€™t explain the lag youā€™re experiencing with skybox as Iā€™ve not seen that myself, but have you taken a look at optimizing your scene, specifically ā€œreducing calls to gl.clear()ā€?

You may not need both a huge 10000 size and infiniteDistance. Try smaller skybox size plus infiniteDistance maybe.

Are you needing to see all planets & their orbits at once i.e. unrealistic scale, or travelling from one body to another i.e. realistic scale? If the latter, Iā€™d try empty LODs at distance for bodies and a stationary camera at world origin but the entire solar system frame of reference changes. That might minimise scale / precision issues but I doubt will do anything to fix your skybox lag.

3

Thank you for your response! I tried gl.clear() but it had little to no effect on the lag. Also with a smaller skybox size, the planets and their orbits disappear because I am going for the unrealistic scale as I want to view the whole solar system at once. I have scaled down the distance while scaling up the radii of the system so the system is still scaled properly. And the lag only occurs when I use the skybox, If I remove the code for the skybox there is no lag. I am also using a particle system for the sun, could it possibly be because of that?

4

Iā€™m not sure. Itā€™s difficult to advise without seeing the problem replicated in the playground. Would it be possible for you to do it there so the community can help?

It might be because of the cube texture youā€™re applying to the skybox. What texture resolution are you using?

1 Like
5

I will try to put it into the playground, and the texture resolution I am using is 1204 X 1204 pixels.

1 Like
6

Here is the playground mode simulation for the solar system I am creating, I have not used the real texture as I facing difficulty uploading it so I have used an existing skybox texture of the playground - Babylon.js Playground

7

The trailmesh is updating a vertex buffer that can be quite big each frame, and thereā€™s a conversion taking place at each draw call.

Hereā€™s a PR that will help performances by not performing this conversion each time (went from 23/24 fps to 60fps on my computer):

Note that you could also improve the fps a bit by limiting the GC by not performing all the new BABYLON.Vector3(...) each frame (in calc_gravity / move).

8

I am sorry but I am a beginner at babylon and Javascript, So I was unable to understand how I could implement the dynamic vertex update, It would be great if you could explain how I could implement it in my code. Thanks A lot

9

You canā€™t do it yourself, itā€™s an update of the Babylon engine itself: once the PR is merged (probably toaday) you will be able to get the change by getting the latest Babylon.js files.

10

How can I get the latest Babylon.js files, and is there any way I can get notified when this update occurs?

11

You get those files from the dist/preview release/ directory of the repo: Babylon.js/dist/preview release at master Ā· BabylonJS/Babylon.js Ā· GitHub

Thereā€™s no notifications but you can track the PR I have linked above.