# Default SkyBox and Ground Babylon js viewer

**URL:** <https://forum.babylonjs.com/t/default-skybox-and-ground-babylon-js-viewer/40872>\
**Category:** Questions\
**Created:** [May 16, 2023, 5:53pm UTC](https://forum.babylonjs.com/t/default-skybox-and-ground-babylon-js-viewer/40872 "2023-05-16T17:53:38Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Luca\_Scida](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/luca_scida/32/30906_2.png) [@Luca\_Scida](https://forum.babylonjs.com/u/Luca_Scida)\
**Post date:** [May 16, 2023, 5:53pm UTC](https://forum.babylonjs.com/t/default-skybox-and-ground-babylon-js-viewer/40872/1 "2023-05-16T17:53:38Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![DRLeria](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/drleria/32/50928_2.png) [@DRLeria](https://forum.babylonjs.com/u/DRLeria)\
**Post date:** [May 16, 2023, 6:20pm UTC](https://forum.babylonjs.com/t/default-skybox-and-ground-babylon-js-viewer/40872/2 "2023-05-16T18:20:04Z")

</div>

Try this:

```auto
    // Create a Default Playground Environment
    var hdrTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("https://assets.babylonjs.com/environments/environmentSpecular.env", 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:

> **[Babylon.js Playground](https://playground.babylonjs.com/#L0IXA2%231)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

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

 ![Captura de pantalla (48)](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/e/0/e04934941385febd9c3dc6f147d9ab4278578bd9.jpeg)

---

<div class="post-metadata">

**Author:** ![Luca\_Scida](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/luca_scida/32/30906_2.png) [@Luca\_Scida](https://forum.babylonjs.com/u/Luca_Scida)\
**Post date:** [May 17, 2023, 7:36pm UTC](https://forum.babylonjs.com/t/default-skybox-and-ground-babylon-js-viewer/40872/3 "2023-05-17T19:36:34Z")

</div>

I want like this [https://mcengineering.eu/vrtest/\_test.html](https://mcengineering.eu/vrtest/_test.html)

html page

```auto
<!DOCTYPE html>
<html lang="en">
    <head>
        <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="https://cdn.babylonjs.com/viewer/babylon.viewer.js"></script>
        <title>BabylonJS Viewer - Basic usage</title>
        <style>
            babylon {
                width: 100%;
                height: 100%;
            }
            babylon div.logo-button {display:none}
        </style>
    </head>

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

```

---

<div class="post-metadata">

**Author:** ![DRLeria](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/drleria/32/50928_2.png) [@DRLeria](https://forum.babylonjs.com/u/DRLeria)\
**Post date:** [May 18, 2023, 12:34am UTC](https://forum.babylonjs.com/t/default-skybox-and-ground-babylon-js-viewer/40872/4 "2023-05-18T00:34:58Z")

</div>

OK!

In that case you´ll need to recreate it.  
It´s easy.  
If you look at the viewer code:  
[https://cdn.babylonjs.com/viewer/babylon.viewer.max.js](https://cdn.babylonjs.com/viewer/babylon.viewer.max.js)

You´ve here this lines:

```auto
/**
 * Default ground texture URL.
 */
EnvironmentHelper._GroundTextureCDNUrl = "https://assets.babylonjs.com/environments/backgroundGround.png";
/**
 * Default skybox texture URL.
 */
EnvironmentHelper._SkyboxTextureCDNUrl = "https://assets.babylonjs.com/environments/backgroundSkybox.dds";
/**
 * Default environment texture URL.
 */
EnvironmentHelper._EnvironmentTextureCDNUrl = "https://assets.babylonjs.com/environments/environmentSpecular.env";

```

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

---

<div class="post-metadata">

**Author:** ![Luca\_Scida](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/luca_scida/32/30906_2.png) [@Luca\_Scida](https://forum.babylonjs.com/u/Luca_Scida)\
**Post date:** [May 18, 2023, 8:47am UTC](https://forum.babylonjs.com/t/default-skybox-and-ground-babylon-js-viewer/40872/5 "2023-05-18T08:47:14Z")

</div>

Can you help me with [https://playground.babylonjs.com](https://playground.babylonjs.com) ?

---

<div class="post-metadata">

**Author:** ![DRLeria](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/drleria/32/50928_2.png) [@DRLeria](https://forum.babylonjs.com/u/DRLeria)\
**Post date:** [May 18, 2023, 10:51am UTC](https://forum.babylonjs.com/t/default-skybox-and-ground-babylon-js-viewer/40872/6 "2023-05-18T10:51:28Z")

</div>

Hi @Luca_Scida

Here it is…

> **[Babylon.js Playground](https://playground.babylonjs.com/#BRDY23)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

Hope it helps

---

<div class="post-metadata">

**Author:** ![Luca\_Scida](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/luca_scida/32/30906_2.png) [@Luca\_Scida](https://forum.babylonjs.com/u/Luca_Scida)\
**Post date:** [May 18, 2023, 3:55pm UTC](https://forum.babylonjs.com/t/default-skybox-and-ground-babylon-js-viewer/40872/7 "2023-05-18T15:55:25Z")

</div>

Thanks so much.

I update playground with my .glb object. [https://playground.babylonjs.com/#BRDY23#1](https://playground.babylonjs.com/#BRDY23#1)

Can help me with the light? Because it’s too dark as compared to [https://mcengineering.eu/vrtest/\_test.html](https://mcengineering.eu/vrtest/_test.html)

---

<div class="post-metadata">

**Author:** ![DRLeria](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/drleria/32/50928_2.png) [@DRLeria](https://forum.babylonjs.com/u/DRLeria)\
**Post date:** [May 18, 2023, 5:19pm UTC](https://forum.babylonjs.com/t/default-skybox-and-ground-babylon-js-viewer/40872/8 "2023-05-18T17:19:53Z")

</div>

Hi @Luca_Scida!

Here it is…

> **[Babylon.js Playground](https://playground.babylonjs.com/#BRDY23%235)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

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:

```auto
shadowGenerator.useContactHardeningShadow = true;

```

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

```auto
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:

```auto
scene.debugLayer.show();

```

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

> **[Introduction to Babylon.js Features | Babylon.js Documentation](https://doc.babylonjs.com/features/introductionToFeatures)**
>
> Welcome to Babylon.js. Introducing the first step into the wonderful, rich world of creating engaging immersive 3D web experiences.

Hope it helps