Merge pull request #4682 from RaananW/validation-viewer

Validation tests viewer

Tools/Gulp/gulpfile.js

@@ -1092,6 +1092,41 @@ gulp.task("tests-viewer-validation-karma", ["tests-viewer-validation-transpile"]
 });
 
 /**
+ * Launches the KARMA validation tests in ff or virtual screen ff on travis for a quick analysis during the build.
+ * (Can only be launch on any branches.)
+ */
+gulp.task("tests-viewer-validation-virtualscreen", ["tests-viewer-validation-transpile"], function (done) {
+    var kamaServerOptions = {
+        configFile: __dirname + "/../../Viewer/tests/validation/karma.conf.js",
+        singleRun: true,
+        browsers: ['Firefox']
+    };
+
+    var server = new karmaServer(kamaServerOptions, done);
+    server.start();
+});
+
+/**
+ * Launches the KARMA validation tests in browser stack for remote and cross devices validation tests.
+ * (Can only be launch from secure branches.)
+ */
+gulp.task("tests-viewer-validation-browserstack", ["tests-viewer-validation-transpile"], function (done) {
+    if (!process.env.BROWSER_STACK_USERNAME) {
+        done();
+        return;
+    }
+
+    var kamaServerOptions = {
+        configFile: __dirname + "/../../Viewer/tests/validation/karma.conf.browserstack.js",
+        singleRun: true
+    };
+
+    var server = new karmaServer(kamaServerOptions, done);
+    server.start();
+});
+
+
+/**
  * Transpiles viewer typescript unit tests. 
  */
 gulp.task("tests-viewer-validation-transpile", function (done) {

Viewer/tests/validation/config.json

@@ -2,10 +2,46 @@
     "root": "",
     "tests": [
         {
+            "title": "Diffuse",
+            "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": 0
+                    }
+                }
+            },
+            "referenceImage": "Diffuse.png"
+        },
+        {
+            "title": "BrainStem Environment",
+            "configuration": {
+                "extends": "extended"
+            },
+            "model": "/dist/assets/BrainStem/BrainStem.gltf",
+            "referenceImage": "BrainStemEnv.png",
+            "enableEnvironment": true
+        }
+    ],
+    "allTests": [
+        {
             "title": "Control Default",
             "createMesh": true,
             "configuration": {
-                "extends": "default"
+                "extends": "minimal"
             },
             "referenceImage": "ControlDefault.png"
         },
@@ -254,11 +290,11 @@
             "enableEnvironment": true
         },
         {
-            "title": "Specular {{glos * 25}} - {{spec * 25}}",
+            "title": "Specular {{glos * 50}} - {{spec * 50}}",
             "createMesh": true,
             "createMaterial": true,
             "repeatVariables": "glos,spec",
-            "repeatTimes": "5,5",
+            "repeatTimes": "3,3",
             "configuration": {
                 "extends": "extended",
                 "castShadow": true,
@@ -270,15 +306,15 @@
                             "b": 1
                         },
                         "reflectivityColor": {
-                            "r": "{{spec / 4}}",
-                            "g": "{{spec / 4}}",
-                            "b": "{{spec / 4}}"
+                            "r": "{{spec / 2}}",
+                            "g": "{{spec / 2}}",
+                            "b": "{{spec / 2}}"
                         },
-                        "microSurface": "{{glos / 4}}"
+                        "microSurface": "{{glos / 2}}"
                     }
                 }
             },
-            "referenceImage": "Specular{{glos * 25}}-{{spec * 25}}.png"
+            "referenceImage": "Specular{{glos * 50}}-{{spec * 50}}.png"
         },
         {
             "title": "BrainStem",

Viewer/tests/validation/integration.js

@@ -67,7 +67,7 @@ window.onload = function () {
                                 }
                                 catch (e) {
                                     if (screenshot) {
-                                        console.error(screenshot);
+                                        //console.error(screenshot);
                                     }
                                     deferredDone(e);
                                 }

Viewer/tests/validation/karma.conf.browserstack.js

@@ -9,27 +9,21 @@ module.exports = function (config) {
         browserDisconnectTolerance: 3,
         concurrency: 1,
 
-        urlRoot: '/karma',
+        urlRoot: '/karma/',
 
         frameworks: ['mocha', 'chai', 'sinon'],
 
         files: [
-            './dist/preview release/earcut.min.js',
-            './Tools/DevLoader/BabylonLoader.js',
             './tests/validation/index.css',
             './tests/validation/integration.js',
-            './favicon.ico',
-            { pattern: 'dist/**/*', watched: false, included: false, served: true },
-            { pattern: 'assets/**/*', watched: false, included: false, served: true },
-            { pattern: 'tests/**/*', watched: false, included: false, served: true },
-            { pattern: 'Playground/scenes/**/*', watched: false, included: false, served: true },
-            { pattern: 'Playground/textures/**/*', watched: false, included: false, served: true },
-            { pattern: 'Playground/sounds/**/*', watched: false, included: false, served: true },
-            { pattern: 'Tools/DevLoader/**/*', watched: false, included: false, served: true },            
-            { pattern: 'Tools/Gulp/config.json', watched: false, included: false, served: true },
+            './tests/build/test.js',
+            './tests/validation/validation.js',
+            { pattern: './tests/**/*', watched: false, included: false, served: true },
+            { pattern: './dist/assets/**/*', watched: false, included: false, served: true },
         ],
         proxies: {
-            '/': '/base/'
+            '/tests/': '/base/tests/',
+            '/dist/assets/': '/base//dist/assets/'
         },
 
         port: 1338,
@@ -44,7 +38,7 @@ module.exports = function (config) {
         browserStack: {
             project: 'Babylon JS Validation Tests',
             video: false,
-            debug : 'true',
+            debug: 'true',
             timeout: 1200,
             build: process.env.TRAVIS_BUILD_NUMBER,
             username: process.env.BROWSER_STACK_USERNAME,
@@ -75,16 +69,16 @@ module.exports = function (config) {
             bs_chrome_android: {
                 base: 'BrowserStack',
                 os: 'Android',
-                os_version : '8.0',
-                device : 'Google Pixel',
-                real_mobile : 'true'
+                os_version: '8.0',
+                device: 'Google Pixel',
+                real_mobile: 'true'
             },
             bs_safari_ios: {
                 base: 'BrowserStack',
                 os: 'ios',
-                os_version : '10.3',
-                device : 'iPhone 7',
-                real_mobile : 'true'
+                os_version: '10.3',
+                device: 'iPhone 7',
+                real_mobile: 'true'
             }
         },
         browsers: ['bs_chrome_android'],

Viewer/tests/validation/validation.js

@@ -138,6 +138,8 @@ function evaluate(test, resultCanvas, result, renderImage, index, waitRing, done
 
     var renderB64 = saveRenderImage(renderData, currentViewer.canvas);
     renderImage.src = renderB64;
+
+    // save all reference images
     // downloadDataUrlFromJavascript(test.referenceImage, renderB64)
 
     done(testRes, renderB64);
@@ -151,11 +153,6 @@ function runTest(index, done) {
 
     var test = Object.assign({}, config.tests[index]);
 
-    //process params
-    /*if (params) {
-        processTest(test, "", params);
-    }*/
-
     var container = document.createElement("div");
     container.id = "container#" + index;
     container.className = "container";
@@ -236,35 +233,42 @@ function runTest(index, done) {
 
     // create a new viewer
     currentViewer && currentViewer.dispose();
-    currentViewer = null;
-    currentScene = null;
-    viewerElement.innerHTML = '';
-    currentViewer = new BabylonViewer.DefaultViewer(viewerElement, configuration);
-
-    currentViewer.onInitDoneObservable.add(() => {
-
-        var currentFrame = 0;
-        var waitForFrame = test.waitForFrame || 0;
-
-        if (test.model) {
-            currentViewer.initModel(test.model);
-        } else if (test.createMesh) {
-            prepareMeshForViewer(currentViewer, configuration, test);
-        }
-
-        currentViewer.onModelLoadedObservable.add((model) => {
-            currentViewer.onFrameRenderedObservable.add(() => {
-                if (test.animationTest && !currentFrame) {
-                    model.playAnimation(model.getAnimationNames()[0]);
-                }
-                if (currentFrame === waitForFrame) {
-                    currentViewer.sceneManager.scene.executeWhenReady(() => {
-                        evaluate(test, resultCanvas, result, renderImage, index, waitRing, done);
-                    });
-                }
-                currentFrame++;
+    currentViewer && currentViewer.engine.dispose();
+
+    setTimeout(() => {
+        currentViewer = null;
+        currentScene = null;
+        viewerElement.innerHTML = '';
+        currentViewer = new BabylonViewer.DefaultViewer(viewerElement, configuration);
+
+        currentViewer.onInitDoneObservable.add(() => {
+
+            var currentFrame = 0;
+            var waitForFrame = test.waitForFrame || 0;
+
+            currentViewer.onModelLoadedObservable.add((model) => {
+                console.log("model loaded");
+                currentViewer.onFrameRenderedObservable.add(() => {
+                    console.log("frame rendered", currentFrame, model.meshes.every(m => m.isReady()));
+                    if (test.animationTest && !currentFrame) {
+                        model.playAnimation(model.getAnimationNames()[0]);
+                    }
+                    if (currentFrame === waitForFrame) {
+                        currentViewer.onFrameRenderedObservable.clear();
+                        currentViewer.sceneManager.scene.executeWhenReady(() => {
+                            evaluate(test, resultCanvas, result, renderImage, index, waitRing, done);
+                        });
+                    }
+                    currentFrame++;
+                });
             });
-        })
+
+            if (test.model) {
+                currentViewer.initModel(test.model);
+            } else if (test.createMesh) {
+                prepareMeshForViewer(currentViewer, configuration, test);
+            }
+        });
     });
 }
 
@@ -274,16 +278,11 @@ 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.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);
+    meshModel.rootMesh.position.y = 0.5;
+    console.log("sphere created");
 }
 
 function init() {

dist/preview release/what's new.md

@@ -148,7 +148,7 @@
 - Viewer is not using Engine.LastCreatedScene anymore, to support multiple viewers in a single page [#4500](https://github.com/BabylonJS/Babylon.js/issues/4500) ([RaananW](https://github.com/RaananW))
 - Template location was ignored if html was defined ([RaananW](https://github.com/RaananW))
 - Drag and Drop only worked if a model was already loaded before ([RaananW](https://github.com/RaananW))
-- It was not possible to add new custom optimizers, only to use existing ones ([RaananW](https://github.com/RaananW))
+- It was not possible to add new custom optimizers, only use existing ones ([RaananW](https://github.com/RaananW))
 
 ### Loaders