Default SkyBox and Ground Babylon js viewer

I want to “copy” default Babylon JS viewer (Skybox and Ground) with babylon javascript. It’s possible?

Try this:

    // Create a Default Playground Environment
    var hdrTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("", scene);
    hdrTexture.rotationY = BABYLON.Tools.ToRadians(0);
    hdrSkybox = BABYLON.MeshBuilder.CreateBox("skybox", {size: 1024}, scene);
    var hdrSkyboxMaterial = new BABYLON.PBRMaterial("skybox", scene);
    hdrSkyboxMaterial.backFaceCulling = false;
    hdrSkyboxMaterial.reflectionTexture = hdrTexture.clone();
    hdrSkyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
    hdrSkyboxMaterial.microSurface = 0.6;
    hdrSkyboxMaterial.disableLighting = true;
    hdrSkybox.material = hdrSkyboxMaterial;
    hdrSkybox.infiniteDistance = true;

And here you´ve a Playground:

Also If you look at the Babylon Sandbox properties you can check it


I want like this

html page

<!DOCTYPE html>
<html lang="en">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
		<script src=""></script>
        <title>BabylonJS Viewer - Basic usage</title>
            babylon {
                width: 100%;
                height: 100%;
            babylon div.logo-button {display:none}

        <babylon id="babylon-viewer" model="marino.glb">
                    <params hide-vr="true" hide-animations="true" logo-image="" logo-text="" logo-link="#"></params>


In that case you´ll need to recreate it.
It´s easy.
If you look at the viewer code:

You´ve here this lines:

 * Default ground texture URL.
EnvironmentHelper._GroundTextureCDNUrl = "";
 * Default skybox texture URL.
EnvironmentHelper._SkyboxTextureCDNUrl = "";
 * Default environment texture URL.
EnvironmentHelper._EnvironmentTextureCDNUrl = "";

So, you´ve the assets to build it.
Create a base plane with a Material usign "_GroundTextureCDNUrl " file

For the environment you can use the _SkyboxTextureCDNUrl

Hope it helps


Can you help me with ?

Hi @Luca_Scida

Here it is…

Hope it helps

Thanks so much.

I update playground with my .glb object.

Can help me with the light? Because it’s too dark as compared to

Hi @Luca_Scida!

Here it is…

Check Shadows, if you want more quality you can use PCSS (Contact Hardering Shadows) used in the Playground, but this reduces the performance and it´s only supported in WebGL2 Devices:

shadowGenerator.useContactHardeningShadow = true;

The other option more viable but with not so softer shadows is PCF (Percentage Close Filtering)

shadowGenerator.usePercentageCloserFiltering = true;

Also check the code, as you can see you need to apply your reflections and environment after your model is imported.

I´ve also write you some lines of code for you to play with Post-Processing, of course check the performance on different devices.

Take a look at the DebugLayer, you can check and modify your scene, when you got it you can write the parameters in your code:;

And also take a look through the BabylonJS documentation, it is very well organized and you will learn a lot.

Hope it helps

1 Like