• Environment Options
  • Environment
  • Environment parameter overview
  • Default Skybox
  • Photo Dome
  • Parameter handling
  • Example usages

Environment Options

In Babylon.js there are several ways to define an environment or a background, depending if you want to have a skybox with 6 images, a 360 image (Photo Dome) or just a simple background color. You can also just use the environment as the source for reflection and image base lighting (IBL).

Here is a good read for getting into Babylon.js environments in general.

Environment

The "environment" is responsible for reflections and indirect lighting for PBR materials. The Spec entry in the SceneJson is called environment and expects the URL of the image that should be used as the environment texture.

Keep in mind that the environment parameter itself doesn't add any background images or nodes to the scene! Use environment.background or environment.usedefault for this use case.

It is recommended to use *.env files with the environment parameter. See Babylon.js documentation for more details on how to generate such a file etc.

The maximum possible resolution of the environment is 512px, therefore it doesn't make sense to use images with higher resolutions here! But don't worry you can use higher quality images for the "real" background (Photo Dome).

You can also adjust the rotation of the environment texture with the environment.rotation parameter and the intensity with environment.intensity.

Environment parameter overview

Here is an overview of all available environment parameters:

• ENVIRONMENT
• ENVIRONMENT_USEDEFAULT
• ENVIRONMENT_BACKGROUND
• ENVIRONMENT_COLOR
• ENVIRONMENT_ROTATION
• ENVIRONMENT_INTENSITY

Default Skybox

One way to define a background is to use the default environment functionality of Babylon.js. Set the environment.usedefault paramter to true to automatically create a skybox and a ground mesh with the current background color of the scene.

As you can see there is a purple background and also a purple ground mesh available. Use environment.color to adjust the background and ground color.

As a side note, you can see a different reflection environment in the sphere. This reflection has been set via the environment parameter and is not related to the created background from environment.usedefault at all.

Photo Dome

If you want to use an image as the background, Photo Domes are the way to go. Enter the URL of the image in the environment.background parameter.

Photo Domes work with images with a resolution of up to 4k. In praxis you will therefore most likely have two seperated images for the background:

• Low resolution image for the environment (reflecation & IBL). Usually an *.env file. Applied via paramter environment.
• High resolution image for the Photo Dome applied via parameter environment.background.

Just as the environment texture, the Photo Dome can also be rotated with the environment.rotation paramter. If both, environment and environment.background are set, environment.rotation will rotate them both.

High resolution images for the Photo Dome can be downloaded from various sites like https://polyhaven.com. Those sites usually offer *.hdr files for download which need to be manually converted to *.jpg first in order to work with the Photo Dome.

Parameter handling

Each of the mentioned parameters can either be set in the Spec's SceneJson or adjusted at runtime via the Parameter workflow.

Example usages

// Example of how to set environment parameter values in the spec
/**
 * @return {StructureJson}
 */
export function createSpec() {
  return {
    scene: {
      parameters: {
        [Parameter.ENVIRONMENT]: 'https://some-url/to/studio.env',
        [Parameter.ENVIRONMENT_ROTATION]: 60,
        [Parameter.ENVIRONMENT_BACKGROUND]: 'https://some-url/to/scene-background.jpg',
      },
      /* ... */
    },
    setup: {
      instances: [
        /* ... */
      ],
    },
    variants: {
      /* ... */
    },
  };
}

// Example of how to commit the parameter on the viewers SceneManager
viewer.sceneManager.commitParameter(Parameter.ENVIRONMENT_BACKGROUND, 'https://some-url/to/scene-background.jpg');