Merge pull request #4750 from RaananW/viewer-new-env

Viewer using the new .env format

Viewer/assets/templates/default/navbar.html

@@ -501,7 +501,7 @@
         <button class="help help-button" title="{{text.helpButton}}">
             <span class="icon help-icon"></span>
         </button>
-        {{/unless}} {{#unless hideFullScreen}}
+        {{/unless}} {{#unless hideFullscreen}}
         <button class="fullscreen fullscreen-button" title="{{text.fullscreenButton}}">
             <span class="icon fullscreen-icon"></span>
         </button>

Viewer/src/configuration/configuration.ts

@@ -1,5 +1,6 @@
 import { EngineOptions } from 'babylonjs';
 import { ICameraConfiguration, IDefaultRenderingPipelineConfiguration, IGroundConfiguration, ILightConfiguration, IModelConfiguration, IObserversConfiguration, ISceneConfiguration, ISceneOptimizerConfiguration, ISkyboxConfiguration, ITemplateConfiguration, IVRConfiguration } from './interfaces';
+import { IEnvironmentMapConfiguration } from './interfaces/environmentMapConfiguration';
 
 export function getConfigurationKey(key: string, configObject: any) {
     let splits = key.split('.');
@@ -80,6 +81,8 @@ export interface ViewerConfiguration {
         [propName: string]: boolean | undefined;
     };
 
+    environmentMap?: IEnvironmentMapConfiguration
+
     vr?: IVRConfiguration;
 
     // features that are being tested.
@@ -94,8 +97,10 @@ export interface ViewerConfiguration {
             specular?: { r: number, g: number, b: number };
         }
         hideLoadingDelay?: number;
+        /** Deprecated */
         assetsRootURL?: string;
         environmentMainColor?: { r: number, g: number, b: number };
+        /** Deprecated */
         environmentMap?: {
             /**
              * Environment map texture path in relative to the asset folder.

Viewer/src/configuration/configurationCompatibility.ts

@@ -28,6 +28,10 @@ export function processConfigurationCompatibility(configuration: ViewerConfigura
                 setKeyInObject(configuration, "scene.imageProcessingConfiguration.isEnabled", true);
             }
         }
+
+        if (configuration.scene.mainColor) {
+            setKeyInObject(configuration, "environmentMap.mainColor", configuration.scene.mainColor, true);
+        }
     }
 
     if (configuration.model && typeof configuration.model === 'object') {
@@ -36,6 +40,15 @@ export function processConfigurationCompatibility(configuration: ViewerConfigura
             configuration.model.castShadow = (<any>configuration.model).castShadows;
         }
     }
+
+    if (configuration.lab) {
+        if (configuration.lab.assetsRootURL) {
+            setKeyInObject(configuration, "scene.assetsRootURL", configuration.lab.assetsRootURL);
+        }
+        if (configuration.lab.environmentMap) {
+            setKeyInObject(configuration, "environmentMap", configuration.lab.environmentMap, true);
+        }
+    }
 }
 
 function setKeyInObject(object: any, keys: string, value: any, shouldOverwrite?: boolean) {

Viewer/src/configuration/interfaces/environmentMapConfiguration.ts

@@ -0,0 +1,21 @@
+export interface IEnvironmentMapConfiguration {
+    /**
+     * Environment map texture path in relative to the asset folder.
+     */
+    texture: string;
+
+    /**
+     * Default rotation to apply to the environment map.
+     */
+    rotationY: number;
+
+    /**
+     * Tint level of the main color on the environment map.
+     */
+    tintLevel: number;
+
+    /**
+     * The environment's main color.
+     */
+    mainColor?: { r?: number, g?: number, b?: number };
+}

Viewer/src/configuration/interfaces/index.ts

@@ -11,4 +11,5 @@ export * from './sceneConfiguration';
 export * from './sceneOptimizerConfiguration';
 export * from './skyboxConfiguration';
 export * from './templateConfiguration';
-export * from './vrConfiguration';
+export * from './vrConfiguration';
+export * from './environmentMapConfiguration';

Viewer/src/configuration/interfaces/sceneConfiguration.ts

@@ -5,6 +5,7 @@ import { IGlowLayerOptions } from "babylonjs";
 export interface ISceneConfiguration {
     debug?: boolean;
     clearColor?: { r: number, g: number, b: number, a: number };
+    /** Deprecated, use environmentMap.mainColor instead. */
     mainColor?: { r?: number, g?: number, b?: number };
     imageProcessingConfiguration?: IImageProcessingConfiguration;
     environmentTexture?: string;
@@ -36,5 +37,6 @@ export interface ISceneConfiguration {
         spritesEnabled?: boolean;
         skeletonsEnabled?: boolean;
         audioEnabled?: boolean;
-    }
+    };
+    assetsRootURL?: string;
 }

Viewer/src/configuration/types/extended.ts

@@ -252,11 +252,7 @@ export let extendedConfiguration: ViewerConfiguration = {
                 highlightsSaturation: 0
             }
         },
-        mainColor: {
-            r: 0.8823529411764706,
-            g: 0.8823529411764706,
-            b: 0.8823529411764706
-        }
+        assetsRootURL: 'https://viewer.babylonjs.com/assets/environment/'
     },
     loaderPlugins: {
         extendedMaterial: true,
@@ -301,13 +297,17 @@ export let extendedConfiguration: ViewerConfiguration = {
         castShadow: true,
         receiveShadows: true
     },
+    environmentMap: {
+        texture: "EnvMap_3.0-256.env",
+        rotationY: 3,
+        tintLevel: 0.4,
+        mainColor: {
+            r: 0.8823529411764706,
+            g: 0.8823529411764706,
+            b: 0.8823529411764706
+        }
+    },
     lab: {
-        assetsRootURL: 'https://viewer.babylonjs.com/assets/environment/',
-        environmentMap: {
-            texture: "EnvMap_2.0-256.env",
-            rotationY: 3,
-            tintLevel: 0.4
-        },
         defaultRenderingPipelines: {
             bloomEnabled: true,
             bloomThreshold: 1.0,

Viewer/tests/unit/src/configuration/updateConfiguration.ts

@@ -155,19 +155,15 @@ describe(name + " scene", () => {
             assert.equal(viewer.sceneManager.reflectionColor.b, 1);
 
             viewer.updateConfiguration({
-                scene: {
+                environmentMap: {
+                    tintLevel: 1,
+                    texture: "",
+                    rotationY: 0,
                     mainColor: {
                         r: 0.5,
                         g: 0.5,
                         b: 0.5
                     }
-                },
-                lab: {
-                    environmentMap: {
-                        tintLevel: 1,
-                        texture: "",
-                        rotationY: 0
-                    }
                 }
             });
 

Viewer/tests/validation/validation.js

@@ -211,19 +211,14 @@ function runTest(index, done) {
     configuration.camera.behaviors = null;
 
     // make sure we use only local assets
-    /*configuration.skybox = {
-        cubeTexture: {
-            url: "DefaultSkybox_cube_radiance_256.dds"
-        }
-    }*/
 
     //envirnonment directory
-    configuration.lab = configuration.lab || {};
-    configuration.lab.assetsRootURL = "/dist/assets/environment/";
+    configuration.scene = configuration.scene || {};
+    configuration.scene.assetsRootURL = "https://viewer.babylonjs.com/assets/environment/";
     if (!test.enableEnvironment) {
-        configuration.lab.environmentMap = false;
+        configuration.environmentMap = false;
     } else {
-        console.log(configuration.lab.environmentMap)
+        console.log(configuration.environmentMap)
     }
 
     //model config

dist/preview release/what's new.md

@@ -99,6 +99,7 @@
 - The default viewer has a plugin system with which new buttons can be added externally ([RaananW](https://github.com/RaananW))
 - The extended configuration is now the default when not providing the "extended" parameter ([RaananW](https://github.com/RaananW))
 - viewer.updateConfiguration also accepts a URL to download configuration remotely ([RaananW](https://github.com/RaananW))
+- The viewer's environment map is using the new .env feature ([RaananW](https://github.com/RaananW))
 
 ### Documentation