Merge pull request #4281 from RaananW/viewer-tests

Validation tests

Viewer/src/viewer/sceneManager.ts

@@ -1284,7 +1284,9 @@ export class SceneManager {
 
         this.models.length = 0;
 
-        this.scene.dispose();
+        if (this.scene) {
+            this.scene.dispose();
+        }
     }
 
     private _setCameraBehavior(behaviorConfig: number | {

Viewer/src/viewer/viewer.ts

@@ -210,9 +210,7 @@ export abstract class AbstractViewer {
 
         this.onInitDoneObservable.add(() => {
             this._isInit = true;
-            //this.sceneManager.scene.executeWhenReady(() => {
             this.engine.runRenderLoop(this._render);
-            //});
         });
     }
 
@@ -410,7 +408,7 @@ export abstract class AbstractViewer {
         this.onModelAddedObservable.clear();
         this.onModelRemovedObservable.clear();
 
-        if (this.sceneManager.scene.activeCamera) {
+        if (this.sceneManager.scene && this.sceneManager.scene.activeCamera) {
             this.sceneManager.scene.activeCamera.detachControl(this.canvas);
         }
 
@@ -421,7 +419,9 @@ export abstract class AbstractViewer {
 
         this.modelLoader.dispose();
 
-        this.engine.dispose();
+        if (this.engine) {
+            this.engine.dispose();
+        }
 
         this.templateManager.dispose();
         viewerManager.removeViewer(this);
@@ -449,6 +449,10 @@ export abstract class AbstractViewer {
      * But first - it will load the extendible onTemplateLoaded()!
      */
     private _onTemplateLoaded(): Promise<AbstractViewer> {
+        // check if viewer was disposed right after created
+        if (this._isDisposed) {
+            return Promise.reject("viewer was disposed");
+        }
         return this._onTemplatesLoaded().then(() => {
             let autoLoad = typeof this._configuration.model === 'string' || (this._configuration.model && this._configuration.model.url);
             return this._initEngine().then((engine) => {

Viewer/tests/unit/src/viewer/viewer.ts

@@ -175,12 +175,14 @@ describe('Viewer', function () {
         let viewer = Helper.getNewViewerInstance();
         viewer.onInitDoneObservable.add(() => {
             assert.isTrue(viewer.engine.renderEvenInBackground, "Engine is rendering in background");
+            assert.equal(viewer.engine.renderEvenInBackground, viewer.renderInBackground, "engine render in background should be equal to the viewer's");
             viewer.updateConfiguration({
                 scene: {
                     renderInBackground: false
                 }
             });
             assert.isFalse(viewer.engine.renderEvenInBackground, "Engine is not rendering in background");
+            assert.equal(viewer.engine.renderEvenInBackground, viewer.renderInBackground, "engine render in background should be equal to the viewer's");
             viewer.dispose();
             done();
         });
@@ -260,6 +262,50 @@ describe('Viewer', function () {
             viewer.forceRender();
         });
     });
+
+    it('should have the correct base ID', (done) => {
+        let element = document.createElement("div");
+        let randomString = "" + Math.random();
+        element.id = randomString;
+        let viewer = Helper.getNewViewerInstance(element);
+        assert.equal(viewer.baseId, viewer.containerElement.id);
+        assert.equal(randomString, viewer.baseId);
+        viewer.dispose();
+        done();
+    });
+
+    it('should update the configuration object when updateConfiguration is called', (done) => {
+        let randomVersion = "" + Math.random();
+        let viewer = Helper.getNewViewerInstance(undefined, {
+            version: randomVersion
+        });
+        viewer.onInitDoneObservable.add(() => {
+            assert.equal(viewer.configuration.version, randomVersion);
+            let newRandom = "" + Math.random();
+            viewer.updateConfiguration({
+                version: newRandom
+            });
+            assert.equal(viewer.configuration.version, newRandom);
+            viewer.dispose();
+            done();
+        });
+    });
+
+    it('should not init engine if viewer is disposed right after created', (done) => {
+        let viewer = Helper.getNewViewerInstance();
+        viewer.dispose();
+        // wait a bit for the engine to initialize, if failed
+        let timeout = setTimeout(() => {
+            assert.isUndefined(viewer.engine);
+            done();
+        }, 1000);
+
+        viewer.onEngineInitObservable.add(() => {
+            assert.fail();
+            clearTimeout(timeout);
+            done();
+        });
+    });
 });
 
 //}
@@ -399,35 +445,4 @@ QUnit.test('Test getEnvironmentAssetUrl absolute root', function (assert) {
     assert.ok(viewer.getEnvironmentAssetUrl("http://foo.png") === "http://foo.png", "Absolute url should not be undefined with configuration.");
 });
 
-QUnit.test('unlockBabylonFeatures', function () {
-    let viewer = Helper.createViewer();
-
-    QUnit.assert.ok(viewer.Scene.EngineScene.shadowsEnabled, "shadowsEnabled");
-    QUnit.assert.ok(!viewer.Scene.EngineScene.particlesEnabled, "particlesEnabled");
-    QUnit.assert.ok(!viewer.Scene.EngineScene.collisionsEnabled, "collisionsEnabled");
-    QUnit.assert.ok(viewer.Scene.EngineScene.lightsEnabled, "lightsEnabled");
-    QUnit.assert.ok(viewer.Scene.EngineScene.texturesEnabled, "texturesEnabled");
-    QUnit.assert.ok(!viewer.Scene.EngineScene.lensFlaresEnabled, "lensFlaresEnabled");
-    QUnit.assert.ok(!viewer.Scene.EngineScene.proceduralTexturesEnabled, "proceduralTexturesEnabled");
-    QUnit.assert.ok(viewer.Scene.EngineScene.renderTargetsEnabled, "renderTargetsEnabled");
-    QUnit.assert.ok(!viewer.Scene.EngineScene.spritesEnabled, "spritesEnabled");
-    QUnit.assert.ok(viewer.Scene.EngineScene.skeletonsEnabled, "skeletonsEnabled");
-    QUnit.assert.ok(!viewer.Scene.EngineScene.audioEnabled, "audioEnabled");
-
-    viewer.unlockBabylonFeatures();
-
-    QUnit.assert.ok(viewer.Scene.EngineScene.shadowsEnabled, "shadowsEnabled");
-    QUnit.assert.ok(viewer.Scene.EngineScene.particlesEnabled, "particlesEnabled");
-    QUnit.assert.ok(viewer.Scene.EngineScene.postProcessesEnabled, "postProcessesEnabled");
-    QUnit.assert.ok(viewer.Scene.EngineScene.collisionsEnabled, "collisionsEnabled");
-    QUnit.assert.ok(viewer.Scene.EngineScene.lightsEnabled, "lightsEnabled");
-    QUnit.assert.ok(viewer.Scene.EngineScene.texturesEnabled, "texturesEnabled");
-    QUnit.assert.ok(viewer.Scene.EngineScene.lensFlaresEnabled, "lensFlaresEnabled");
-    QUnit.assert.ok(viewer.Scene.EngineScene.proceduralTexturesEnabled, "proceduralTexturesEnabled");
-    QUnit.assert.ok(viewer.Scene.EngineScene.renderTargetsEnabled, "renderTargetsEnabled");
-    QUnit.assert.ok(viewer.Scene.EngineScene.spritesEnabled, "spritesEnabled");
-    QUnit.assert.ok(viewer.Scene.EngineScene.skeletonsEnabled, "skeletonsEnabled");
-    QUnit.assert.ok(viewer.Scene.EngineScene.audioEnabled, "audioEnabled");
-});
-
 */

Viewer/tests/validation/config.json

@@ -2,10 +2,18 @@
     "root": "",
     "tests": [
         {
+            "title": "Control Default",
+            "createMesh": true,
+            "configuration": {
+                "extends": "default"
+            },
+            "referenceImage": "ControlDefault.png"
+        },
+        {
             "title": "Control",
             "createMesh": true,
             "configuration": {
-                "extends": "extended, shadowDirectionalLight"
+                "extends": "extended"
             },
             "referenceImage": "Control.png"
         },
@@ -14,7 +22,7 @@
             "createMesh": true,
             "createMaterial": true,
             "configuration": {
-                "extends": "extended, shadowDirectionalLight",
+                "extends": "extended",
                 "castShadow": true,
                 "model": {
                     "material": {
@@ -35,13 +43,224 @@
             "referenceImage": "Diffuse.png"
         },
         {
-            "title": "Specular {{glos * 20}} - {{spec * 20}}",
+            "title": "Emissive",
+            "createMesh": true,
+            "createMaterial": true,
+            "configuration": {
+                "extends": "extended",
+                "castShadow": true,
+                "model": {
+                    "material": {
+                        "albedoColor": {
+                            "r": 1,
+                            "g": 0,
+                            "b": 1
+                        },
+                        "reflectivityColor": {
+                            "r": 0.8,
+                            "g": 0.8,
+                            "b": 0.8
+                        },
+                        "microSurface": 0
+                    }
+                }
+            },
+            "referenceImage": "Emissive.png"
+        },
+        {
+            "title": "Transparency",
+            "createMesh": true,
+            "createMaterial": true,
+            "configuration": {
+                "extends": "extended",
+                "castShadow": true,
+                "model": {
+                    "material": {
+                        "albedoColor": {
+                            "r": 0,
+                            "g": 0,
+                            "b": 1
+                        },
+                        "reflectivityColor": {
+                            "r": 0.5,
+                            "g": 0.5,
+                            "b": 0.5
+                        },
+                        "alpha": 0.5,
+                        "microSurface": 0.5
+                    }
+                }
+            },
+            "referenceImage": "Transparency.png"
+        },
+        {
+            "title": "Camera Contrast 0",
+            "createMesh": true,
+            "createMaterial": true,
+            "configuration": {
+                "extends": "extended",
+                "castShadow": true,
+                "model": {
+                    "material": {
+                        "albedoColor": {
+                            "r": 0,
+                            "g": 0,
+                            "b": 1
+                        },
+                        "reflectivityColor": {
+                            "r": 0,
+                            "g": 0,
+                            "b": 0
+                        },
+                        "microSurface": 1
+                    }
+                },
+                "camera": {
+                    "contrast": 0
+                }
+            },
+            "referenceImage": "CameraContrast0.png"
+        },
+        {
+            "title": "Camera Contrast 1",
+            "createMesh": true,
+            "createMaterial": true,
+            "configuration": {
+                "extends": "extended",
+                "castShadow": true,
+                "model": {
+                    "material": {
+                        "albedoColor": {
+                            "r": 0,
+                            "g": 0,
+                            "b": 1
+                        },
+                        "reflectivityColor": {
+                            "r": 0,
+                            "g": 0,
+                            "b": 0
+                        },
+                        "microSurface": 1
+                    }
+                },
+                "camera": {
+                    "contrast": 1
+                }
+            },
+            "referenceImage": "CameraContrast1.png"
+        },
+        {
+            "title": "Camera Exposure 0.001",
+            "createMesh": true,
+            "createMaterial": true,
+            "configuration": {
+                "extends": "extended",
+                "castShadow": true,
+                "model": {
+                    "material": {
+                        "albedoColor": {
+                            "r": 0,
+                            "g": 0,
+                            "b": 1
+                        },
+                        "reflectivityColor": {
+                            "r": 0,
+                            "g": 0,
+                            "b": 0
+                        },
+                        "microSurface": 1
+                    }
+                },
+                "camera": {
+                    "exposure": 0.001
+                }
+            },
+            "referenceImage": "CameraExposure0.png"
+        },
+        {
+            "title": "Camera Exposure 1",
+            "createMesh": true,
+            "createMaterial": true,
+            "configuration": {
+                "extends": "extended",
+                "castShadow": true,
+                "model": {
+                    "material": {
+                        "albedoColor": {
+                            "r": 0,
+                            "g": 0,
+                            "b": 1
+                        },
+                        "reflectivityColor": {
+                            "r": 0,
+                            "g": 0,
+                            "b": 0
+                        },
+                        "microSurface": 1
+                    }
+                },
+                "camera": {
+                    "exposure": 1
+                }
+            },
+            "referenceImage": "CameraExposure1.png"
+        },
+        {
+            "title": "Specular With Env {{glos * 50}} - {{spec * 50}}",
             "createMesh": true,
             "createMaterial": true,
             "repeatVariables": "glos,spec",
-            "repeatTimes": "6,6",
+            "repeatTimes": "3,3",
             "configuration": {
-                "extends": "extended, shadowDirectionalLight",
+                "extends": "extended",
+                "castShadow": true,
+                "model": {
+                    "material": {
+                        "albedoColor": {
+                            "r": 1,
+                            "g": 0,
+                            "b": 1
+                        },
+                        "reflectivityColor": {
+                            "r": "{{spec / 2}}",
+                            "g": "{{spec / 2}}",
+                            "b": "{{spec / 2}}"
+                        },
+                        "microSurface": "{{glos / 2}}"
+                    }
+                }
+            },
+            "referenceImage": "SpecularEnv{{glos * 50}}-{{spec * 50}}.png",
+            "enableEnvironment": true
+        },
+        {
+            "title": "Main Color Env {{r * 50}} - {{g * 50}}",
+            "createMesh": true,
+            "createMaterial": true,
+            "repeatVariables": "r,g",
+            "repeatTimes": "3,3",
+            "configuration": {
+                "extends": "extended",
+                "castShadow": true,
+                "scene": {
+                    "mainColor": {
+                        "r": "{{r / 2}}",
+                        "g": "{{g / 2}}",
+                        "b": "1"
+                    }
+                }
+            },
+            "referenceImage": "MainColorEnv{{r * 50}}-{{g * 50}}.png",
+            "enableEnvironment": true
+        },
+        {
+            "title": "Specular {{glos * 25}} - {{spec * 25}}",
+            "createMesh": true,
+            "createMaterial": true,
+            "repeatVariables": "glos,spec",
+            "repeatTimes": "5,5",
+            "configuration": {
+                "extends": "extended",
                 "castShadow": true,
                 "model": {
                     "material": {
@@ -51,28 +270,37 @@
                             "b": 1
                         },
                         "reflectivityColor": {
-                            "r": "{{spec / 5}}",
-                            "g": "{{spec / 5}}",
-                            "b": "{{spec / 5}}"
+                            "r": "{{spec / 4}}",
+                            "g": "{{spec / 4}}",
+                            "b": "{{spec / 4}}"
                         },
-                        "microSurface": "{{glos / 5}}"
+                        "microSurface": "{{glos / 4}}"
                     }
                 }
             },
-            "referenceImage": "Specular{{glos * 20}}-{{spec * 20}}.png"
+            "referenceImage": "Specular{{glos * 25}}-{{spec * 25}}.png"
         },
         {
             "title": "BrainStem",
             "configuration": {
-                "extends": "extended, shadowDirectionalLight"
+                "extends": "extended"
             },
             "model": "/dist/assets/BrainStem/BrainStem.gltf",
             "referenceImage": "BrainStem.png"
         },
         {
+            "title": "BrainStem Environment",
+            "configuration": {
+                "extends": "extended"
+            },
+            "model": "/dist/assets/BrainStem/BrainStem.gltf",
+            "referenceImage": "BrainStemEnv.png",
+            "enableEnvironment": true
+        },
+        {
             "title": "BrainStem transformation",
             "configuration": {
-                "extends": "extended, shadowDirectionalLight",
+                "extends": "extended",
                 "camera": {
                     "disableAutoFocus": true
                 },

Viewer/tests/validation/index.css

@@ -72,7 +72,7 @@ babylon {
     position: absolute !important;
     transform: translateX(-600px);
     width: 600px;
-    height: 400px;
+    height: 400px !important;
 }
 
 .renderImage {

Viewer/tests/validation/validation.js

@@ -90,6 +90,22 @@ function saveRenderImage(data, canvas) {
     return screenshotCanvas.toDataURL();
 }
 
+function downloadDataUrlFromJavascript(filename, dataUrl) {
+
+    // Construct the 'a' element
+    var link = document.createElement("a");
+    link.download = filename;
+    link.target = "_blank";
+
+    // Construct the URI
+    link.href = dataUrl;
+    document.body.appendChild(link);
+    link.click();
+
+    // Cleanup the DOM
+    document.body.removeChild(link);
+}
+
 function evaluate(test, resultCanvas, result, renderImage, index, waitRing, done) {
     seed = 100000;
     var renderData = getRenderData(currentViewer.canvas, currentViewer.engine);
@@ -122,6 +138,7 @@ function evaluate(test, resultCanvas, result, renderImage, index, waitRing, done
 
     var renderB64 = saveRenderImage(renderData, currentViewer.canvas);
     renderImage.src = renderB64;
+    // downloadDataUrlFromJavascript(test.referenceImage, renderB64)
 
     done(testRes, renderB64);
 }
@@ -197,20 +214,25 @@ function runTest(index, done) {
     configuration.camera.behaviors = null;
 
     // make sure we use only local assets
-    configuration.skybox = {
+    /*configuration.skybox = {
         cubeTexture: {
-            url: "/dist/assets/environment/DefaultSkybox_cube_radiance_256.dds"
+            url: "DefaultSkybox_cube_radiance_256.dds"
         }
-    }
+    }*/
 
     //envirnonment directory
     configuration.lab = configuration.lab || {};
-    configuration.lab.environmentAssetsRootURL = "/dist/assets/environment/";
-    configuration.lab.environmentMap = false;
+    configuration.lab.assetsRootURL = "/dist/assets/environment/";
+    if (!test.enableEnvironment) {
+        configuration.lab.environmentMap = false;
+    } else {
+        console.log(configuration.lab.environmentMap)
+    }
 
     //model config
     configuration.model = configuration.model || {};
-    configuration.model.castShadow = !test.createMesh
+    //configuration.model.castShadow = !test.createMesh
+    configuration.model.entryAnimation = false;
 
     // create a new viewer
     currentViewer && currentViewer.dispose();
@@ -222,7 +244,7 @@ function runTest(index, done) {
     currentViewer.onInitDoneObservable.add(() => {
 
         var currentFrame = 0;
-        var waitForFrame = test.waitForFrame || 4;
+        var waitForFrame = test.waitForFrame || 0;
 
         if (test.model) {
             currentViewer.initModel(test.model);
@@ -242,7 +264,6 @@ function runTest(index, done) {
                 }
                 currentFrame++;
             });
-
         })
     });
 }
@@ -253,14 +274,13 @@ function prepareMeshForViewer(viewer, configuration, test) {
     let sphereMesh = BABYLON.Mesh.CreateSphere('sphere-' + test.title, 20, 1.0, viewer.sceneManager.scene);
     if (test.createMaterial) {
         let material = new BABYLON.PBRMaterial("sphereMat", viewer.sceneManager.scene);
-        material.environmentBRDFTexture = null;
-        material.useAlphaFresnel = material.needAlphaBlending();
-        material.backFaceCulling = material.forceDepthWrite;
-        material.twoSidedLighting = true;
-        material.useSpecularOverAlpha = false;
-        material.useRadianceOverAlpha = false;
-        material.usePhysicalLightFalloff = true;
-        material.forceNormalForward = true;
+        /* material.useAlphaFresnel = material.needAlphaBlending();
+         material.backFaceCulling = material.forceDepthWrite;
+         material.twoSidedLighting = true;
+         material.useSpecularOverAlpha = false;
+         material.useRadianceOverAlpha = false;
+         material.usePhysicalLightFalloff = true;
+         material.forceNormalForward = true;*/
         sphereMesh.material = material;
     }
     meshModel.addMesh(sphereMesh, true);

Viewer/tsconfig-gulp.json

@@ -19,7 +19,7 @@
         "types": [
             "node"
         ],
-        "baseUrl": ".",
+        "baseUrl": "./",
         "paths": {
             "babylonjs": [
                 "../dist/preview release/babylon.d.ts"
@@ -33,5 +33,8 @@
         "node_modules",
         "dist",
         "tests"
+    ],
+    "include": [
+        "./src/**/*.ts"
     ]
 }

Viewer/webpack.gulp.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-    //context: __dirname,
+    // context: __dirname,
     entry: [
         __dirname + '/src/index.ts'
     ]