changes to main color application

Viewer/src/loader/modelLoader.ts

@@ -90,7 +90,9 @@ export class ModelLoader {
             }
 
             this._checkAndRun("onLoaded", model);
-            model.onLoadedObservable.notifyObserversWithPromise(model);
+            this._viewer.sceneManager.scene.executeWhenReady(() => {
+                model.onLoadedObservable.notifyObservers(model);
+            });
         }, (progressEvent) => {
             this._checkAndRun("onProgress", progressEvent);
             model.onLoadProgressObservable.notifyObserversWithPromise(progressEvent);

Viewer/src/model/viewerModel.ts

@@ -1,4 +1,4 @@
-import { ISceneLoaderPlugin, ISceneLoaderPluginAsync, AnimationGroup, Animatable, AbstractMesh, Tools, Scene, SceneLoader, Observable, SceneLoaderProgressEvent, Tags, ParticleSystem, Skeleton, IDisposable, Nullable, Animation, Quaternion, Material, Vector3, AnimationPropertiesOverride, QuinticEase, SineEase, CircleEase, BackEase, BounceEase, CubicEase, ElasticEase, ExponentialEase, PowerEase, QuadraticEase, QuarticEase } from "babylonjs";
+import { ISceneLoaderPlugin, ISceneLoaderPluginAsync, AnimationGroup, Animatable, AbstractMesh, Tools, Scene, SceneLoader, Observable, SceneLoaderProgressEvent, Tags, ParticleSystem, Skeleton, IDisposable, Nullable, Animation, Quaternion, Material, Vector3, AnimationPropertiesOverride, QuinticEase, SineEase, CircleEase, BackEase, BounceEase, CubicEase, ElasticEase, ExponentialEase, PowerEase, QuadraticEase, QuarticEase, PBRMaterial, MultiMaterial } from "babylonjs";
 import { GLTFFileLoader, GLTF2 } from "babylonjs-loaders";
 import { IModelConfiguration, IModelAnimationConfiguration } from "../configuration/configuration";
 import { IModelAnimation, GroupModelAnimation, AnimationPlayMode, ModelAnimationConfiguration, EasingFunction } from "./modelAnimation";
@@ -95,8 +95,8 @@ export class ViewerModel implements IDisposable {
 
     private _entryAnimation: ModelAnimationConfiguration;
     private _exitAnimation: ModelAnimationConfiguration;
-    private _scaleTransition: BABYLON.Animation;
-    private _animatables: Array<BABYLON.Animatable> = [];
+    private _scaleTransition: Animation;
+    private _animatables: Array<Animatable> = [];
     private _frameRate: number = 60;
 
     constructor(protected _viewer: AbstractViewer, modelConfiguration: IModelConfiguration) {
@@ -114,7 +114,7 @@ export class ViewerModel implements IDisposable {
         // rotate 180, gltf fun
         this._pivotMesh.rotation.y += Math.PI;
 
-        this._scaleTransition = new Animation("scaleAnimation", "scaling", this._frameRate, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
+        this._scaleTransition = new Animation("scaleAnimation", "scaling", this._frameRate, Animation.ANIMATIONTYPE_VECTOR3, Animation.ANIMATIONLOOPMODE_CONSTANT);
 
         this._animations = [];
         //create a copy of the configuration to make sure it doesn't change even after it is changed in the viewer
@@ -289,6 +289,11 @@ export class ViewerModel implements IDisposable {
     }
 
     private _modelComplete() {
+        //reapply material defines to be sure:
+        let meshes = this._pivotMesh.getChildMeshes(false);
+        meshes.filter(m => m.material).forEach((mesh) => {
+            this._applyModelMaterialConfiguration(mesh.material!);
+        });
         this.state = ModelState.COMPLETE;
         this.onCompleteObservable.notifyObservers(this);
     }
@@ -502,7 +507,7 @@ export class ViewerModel implements IDisposable {
 
         extendClassWithConfig(material, this._modelConfiguration.material);
 
-        if (material instanceof BABYLON.PBRMaterial) {
+        if (material instanceof PBRMaterial) {
             if (this._modelConfiguration.material.directIntensity !== undefined) {
                 material.directIntensity = this._modelConfiguration.material.directIntensity;
             }
@@ -522,7 +527,7 @@ export class ViewerModel implements IDisposable {
                 material.reflectionColor = this._viewer.sceneManager.reflectionColor;
             }
         }
-        else if (material instanceof BABYLON.MultiMaterial) {
+        else if (material instanceof MultiMaterial) {
             for (let i = 0; i < material.subMaterials.length; i++) {
                 const subMaterial = material.subMaterials[i];
                 if (subMaterial) {
@@ -539,13 +544,13 @@ export class ViewerModel implements IDisposable {
      * @param completeCallback Callback to execute when the animation completes
      */
     private _applyAnimation(animationConfiguration: ModelAnimationConfiguration, isEntry: boolean, completeCallback?: () => void) {
-        let animations: BABYLON.Animation[] = [];
+        let animations: Animation[] = [];
 
         //scale
         if (animationConfiguration.scaling) {
 
-            let scaleStart: BABYLON.Vector3 = isEntry ? animationConfiguration.scaling : this.rootMesh.scaling;
-            let scaleEnd: BABYLON.Vector3 = isEntry ? this.rootMesh.scaling : animationConfiguration.scaling;
+            let scaleStart: Vector3 = isEntry ? animationConfiguration.scaling : new Vector3(1, 1, 1);
+            let scaleEnd: Vector3 = isEntry ? new Vector3(1, 1, 1) : animationConfiguration.scaling;
 
             if (!scaleStart.equals(scaleEnd)) {
                 this.rootMesh.scaling = scaleStart;
@@ -598,7 +603,6 @@ export class ViewerModel implements IDisposable {
 
         if (this._viewer.sceneManager.scene.beginAnimation) {
             let animatable: Animatable = this._viewer.sceneManager.scene.beginAnimation(this.rootMesh, 0, this._frameRate * duration, false, 1, () => {
-                console.log(this.rootMesh.scaling);
                 if (onAnimationEnd) {
                     onAnimationEnd();
                 }
@@ -614,7 +618,7 @@ export class ViewerModel implements IDisposable {
      * @param endValue The value of the last key
      * @param duration The duration of the animation, used to determine the end frame
      */
-    private _setLinearKeys(animation: BABYLON.Animation, startValue: any, endValue: any, duration: number) {
+    private _setLinearKeys(animation: Animation, startValue: any, endValue: any, duration: number) {
         animation.setKeys([
             {
                 frame: 0,

Viewer/src/viewer/sceneManager.ts

@@ -426,16 +426,6 @@ export class SceneManager {
             this._defaultRenderingPipelineShouldBuild = false;
             this._defaultRenderingPipeline.prepare();
         }
-
-        // reflection color
-        this._reflectionColor.copyFrom(this.mainColor);
-        this._reflectionColor.toLinearSpaceToRef(this._reflectionColor);
-        if (globalConfiguration.camera && globalConfiguration.camera.exposure) {
-            this._reflectionColor.scaleToRef(1 / globalConfiguration.camera.exposure, this._reflectionColor);
-        }
-        let environmentTint = getConfigurationKey("lab.environmentMap.tintLevel", globalConfiguration) || 0;
-        let tmpColor3 = Color3.Lerp(this._white, this._reflectionColor, environmentTint);
-        this._reflectionColor.copyFrom(tmpColor3);
     }
 
     private _defaultRenderingPipelineShouldBuild: boolean = true;
@@ -534,19 +524,21 @@ export class SceneManager {
             return;
         }
 
-        let cc = sceneConfig.clearColor || { r: 0.9, g: 0.9, b: 0.9, a: 1.0 };
+        let cc = sceneConfig.clearColor;
         let oldcc = this.scene.clearColor;
-        if (cc.r !== undefined) {
-            oldcc.r = cc.r;
-        }
-        if (cc.g !== undefined) {
-            oldcc.g = cc.g
-        }
-        if (cc.b !== undefined) {
-            oldcc.b = cc.b
-        }
-        if (cc.a !== undefined) {
-            oldcc.a = cc.a
+        if (cc) {
+            if (cc.r !== undefined) {
+                oldcc.r = cc.r;
+            }
+            if (cc.g !== undefined) {
+                oldcc.g = cc.g
+            }
+            if (cc.b !== undefined) {
+                oldcc.b = cc.b
+            }
+            if (cc.a !== undefined) {
+                oldcc.a = cc.a
+            }
         }
 
         // image processing configuration - optional.
@@ -605,11 +597,35 @@ export class SceneManager {
                 this._mainColor.b = mc.b
             }
 
-            /*this._mainColor.toLinearSpaceToRef(this._mainColor);
-            let exposure = Math.pow(2.0, -((globalConfiguration.camera && globalConfiguration.camera.exposure) || 0.75)) * Math.PI;
-            this._mainColor.scaleToRef(1 / exposure, this._mainColor);
-            let environmentTint = (globalConfiguration.lab && globalConfiguration.lab.environmentMap && globalConfiguration.lab.environmentMap.tintLevel) || 0;
-            this._mainColor = Color3.Lerp(this._white, this._mainColor, environmentTint);*/
+            this._reflectionColor.copyFrom(this.mainColor);
+
+            if (this._viewer.configuration.camera && this._viewer.configuration.camera.exposure) {
+
+                let environmentTint = getConfigurationKey("lab.environmentMap.tintLevel", this._viewer.configuration) || 0;
+
+                /*this._mainColor.toLinearSpaceToRef(this._mainColor);
+                let exposure = Math.pow(2.0, -(this._viewer.configuration.camera.exposure) * Math.PI);
+                this._mainColor.scaleToRef(1 / exposure, this._mainColor);
+                let tmpColor = Color3.Lerp(this._white, this._mainColor, environmentTint);
+                this._mainColor.copyFrom(tmpColor);*/
+
+                // reflection color
+                this._reflectionColor.toLinearSpaceToRef(this._reflectionColor);
+                this._reflectionColor.scaleToRef(1 / this._viewer.configuration.camera.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) {
@@ -921,10 +937,11 @@ export class SceneManager {
 
         let groundConfig = (typeof groundConfiguration === 'boolean') ? {} : groundConfiguration;
         if (this.environmentHelper.groundMaterial && groundConfig && groundConfig.material) {
-            if (!this.environmentHelper.groundMaterial._perceptualColor) {
-                this.environmentHelper.groundMaterial._perceptualColor = Color3.Black();
-            }
-            this.environmentHelper.groundMaterial._perceptualColor.copyFrom(this.mainColor);
+            //if (!this.environmentHelper.groundMaterial._perceptualColor) {
+
+            this.environmentHelper.groundMaterial._perceptualColor = this.mainColor;
+            //}
+            //this.environmentHelper.groundMaterial._perceptualColor.copyFrom(this.mainColor);
             // to be configured using the configuration object
 
             /*this.environmentHelper.groundMaterial.primaryColorHighlightLevel = groundConfig.material.highlightLevel;
@@ -954,14 +971,13 @@ export class SceneManager {
             }
         }
 
-        if (postInitSkyboxMaterial) {
-            let skyboxMaterial = this.environmentHelper.skyboxMaterial;
-            if (skyboxMaterial) {
+
+        let skyboxMaterial = this.environmentHelper.skyboxMaterial;
+        if (skyboxMaterial) {
+            skyboxMaterial._perceptualColor = this.mainColor;
+
+            if (postInitSkyboxMaterial) {
                 if (typeof skyboxConifguration === 'object' && skyboxConifguration.material) {
-                    if (!skyboxMaterial._perceptualColor) {
-                        skyboxMaterial._perceptualColor = Color3.Black();
-                    }
-                    skyboxMaterial._perceptualColor.copyFrom(this.mainColor);
                     extendClassWithConfig(skyboxMaterial, skyboxConifguration.material);
                 }
             }