Default SkyBox and Ground Babylon js viewer

Questions
1

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

2

Try this:

    // 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:

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

Captura de pantalla (48)
Captura de pantalla (48)1920×975 248 KB

3 Likes
3

I want like this https://mcengineering.eu/vrtest/_test.html

html page

<!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>
4

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

You´ve here this lines:

/**
 * 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

2 Likes
5

Can you help me with https://playground.babylonjs.com ?

6

Hi @Luca_Scida

Here it is…

Hope it helps

7

Thanks so much.

I update playground with my .glb object. 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

8

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:

scene.debugLayer.show();

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