moving main color to environment map

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') {

Viewer/src/configuration/interfaces/environmentMapConfiguration.ts

@@ -13,4 +13,9 @@ export interface IEnvironmentMapConfiguration {
      * 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/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;

Viewer/src/configuration/types/extended.ts

@@ -252,11 +252,6 @@ export let extendedConfiguration: ViewerConfiguration = {
                 highlightsSaturation: 0
             }
         },
-        mainColor: {
-            r: 0.8823529411764706,
-            g: 0.8823529411764706,
-            b: 0.8823529411764706
-        },
         assetsRootURL: 'https://viewer.babylonjs.com/assets/environment/'
     },
     loaderPlugins: {
@@ -305,7 +300,12 @@ export let extendedConfiguration: ViewerConfiguration = {
     environmentMap: {
         texture: "EnvMap_3.0-256.env",
         rotationY: 3,
-        tintLevel: 0.4
+        tintLevel: 0.4,
+        mainColor: {
+            r: 0.8823529411764706,
+            g: 0.8823529411764706,
+            b: 0.8823529411764706
+        }
     },
     lab: {
         defaultRenderingPipelines: {

Viewer/src/managers/sceneManager.ts

@@ -646,43 +646,6 @@ export class SceneManager {
             }
         }
 
-        // process mainColor changes:
-        if (sceneConfig.mainColor) {
-            this._configurationContainer.mainColor = this.mainColor || Color3.White();
-            let mc = sceneConfig.mainColor;
-            if (mc.r !== undefined) {
-                this.mainColor.r = mc.r;
-            }
-            if (mc.g !== undefined) {
-                this.mainColor.g = mc.g
-            }
-            if (mc.b !== undefined) {
-                this.mainColor.b = mc.b
-            }
-
-            this.reflectionColor.copyFrom(this.mainColor);
-
-
-            let environmentTint = getConfigurationKey("lab.environmentMap.tintLevel", this._globalConfiguration) || 0;
-
-            // reflection color
-            this.reflectionColor.toLinearSpaceToRef(this.reflectionColor);
-            this.reflectionColor.scaleToRef(1 / this.scene.imageProcessingConfiguration.exposure, this.reflectionColor);
-            let tmpColor3 = Color3.Lerp(this._white, this.reflectionColor, environmentTint);
-            this.reflectionColor.copyFrom(tmpColor3);
-
-            //update the environment, if exists
-            if (this.environmentHelper) {
-                if (this.environmentHelper.groundMaterial) {
-                    this.environmentHelper.groundMaterial._perceptualColor = this.mainColor;
-                }
-
-                if (this.environmentHelper.skyboxMaterial) {
-                    this.environmentHelper.skyboxMaterial._perceptualColor = this.mainColor;
-                }
-            }
-        }
-
         if (sceneConfig.defaultMaterial) {
             let conf = sceneConfig.defaultMaterial;
             if ((conf.materialType === 'standard' && this.scene.defaultMaterial.getClassName() !== 'StandardMaterial') ||
@@ -852,6 +815,43 @@ export class SceneManager {
         if (this.scene.environmentTexture) {
             Matrix.FromQuaternionToRef(rotatquatRotationionY, this.scene.environmentTexture.getReflectionTextureMatrix());
         }
+
+        // process mainColor changes:
+        if (environmentMapConfiguration.mainColor) {
+            this._configurationContainer.mainColor = this.mainColor || Color3.White();
+            let mc = environmentMapConfiguration.mainColor;
+            if (mc.r !== undefined) {
+                this.mainColor.r = mc.r;
+            }
+            if (mc.g !== undefined) {
+                this.mainColor.g = mc.g
+            }
+            if (mc.b !== undefined) {
+                this.mainColor.b = mc.b
+            }
+
+            this.reflectionColor.copyFrom(this.mainColor);
+
+
+            let environmentTint = getConfigurationKey("environmentMap.tintLevel", this._globalConfiguration) || 0;
+
+            // reflection color
+            this.reflectionColor.toLinearSpaceToRef(this.reflectionColor);
+            this.reflectionColor.scaleToRef(1 / this.scene.imageProcessingConfiguration.exposure, this.reflectionColor);
+            let tmpColor3 = Color3.Lerp(this._white, this.reflectionColor, environmentTint);
+            this.reflectionColor.copyFrom(tmpColor3);
+
+            //update the environment, if exists
+            if (this.environmentHelper) {
+                if (this.environmentHelper.groundMaterial) {
+                    this.environmentHelper.groundMaterial._perceptualColor = this.mainColor;
+                }
+
+                if (this.environmentHelper.skyboxMaterial) {
+                    this.environmentHelper.skyboxMaterial._perceptualColor = this.mainColor;
+                }
+            }
+        }
     }
 
     /**