added test validation page

.vscode/launch.json

@@ -96,6 +96,18 @@
             "runtimeArgs": [
                 "--enable-unsafe-es3-apis" 
             ]
+        },
+        {
+            "name": "Launch Build Validation (Chrome)",
+            "type": "chrome",
+            "request": "launch",
+            "url": "http://localhost:1338/tests/validation/index.html",
+            "webRoot": "${workspaceRoot}/",
+            "sourceMaps": true,
+            "userDataDir": "${workspaceRoot}/.tempChromeProfileForDebug",
+            "runtimeArgs": [
+                "--enable-unsafe-es3-apis" 
+            ]
         }
     ]
 }

dist/preview release/loaders/babylon.glTF2FileLoader.d.ts

@@ -41,6 +41,7 @@ declare module BABYLON.GLTF2 {
         UNSIGNED_BYTE = 5121,
         SHORT = 5122,
         UNSIGNED_SHORT = 5123,
+        UNSIGNED_INT = 5125,
         FLOAT = 5126,
     }
     enum EMeshPrimitiveMode {

dist/preview release/loaders/babylon.glTF2FileLoader.js

@@ -244,6 +244,7 @@ var BABYLON;
             EComponentType[EComponentType["UNSIGNED_BYTE"] = 5121] = "UNSIGNED_BYTE";
             EComponentType[EComponentType["SHORT"] = 5122] = "SHORT";
             EComponentType[EComponentType["UNSIGNED_SHORT"] = 5123] = "UNSIGNED_SHORT";
+            EComponentType[EComponentType["UNSIGNED_INT"] = 5125] = "UNSIGNED_INT";
             EComponentType[EComponentType["FLOAT"] = 5126] = "FLOAT";
         })(EComponentType = GLTF2.EComponentType || (GLTF2.EComponentType = {}));
         var EMeshPrimitiveMode;
@@ -1402,6 +1403,7 @@ var BABYLON;
                     case GLTF2.EComponentType.UNSIGNED_BYTE: return new Uint8Array(buffer, byteOffset, byteLength);
                     case GLTF2.EComponentType.SHORT: return new Int16Array(buffer, byteOffset, byteLength);
                     case GLTF2.EComponentType.UNSIGNED_SHORT: return new Uint16Array(buffer, byteOffset, byteLength);
+                    case GLTF2.EComponentType.UNSIGNED_INT: return new Uint32Array(buffer, byteOffset, byteLength);
                     default: return new Float32Array(buffer, byteOffset, byteLength);
                 }
             };

dist/preview release/loaders/babylon.glTFFileLoader.d.ts

@@ -536,6 +536,7 @@ declare module BABYLON.GLTF2 {
         UNSIGNED_BYTE = 5121,
         SHORT = 5122,
         UNSIGNED_SHORT = 5123,
+        UNSIGNED_INT = 5125,
         FLOAT = 5126,
     }
     enum EMeshPrimitiveMode {

dist/preview release/loaders/babylon.glTFFileLoader.js

@@ -2395,6 +2395,7 @@ var BABYLON;
             EComponentType[EComponentType["UNSIGNED_BYTE"] = 5121] = "UNSIGNED_BYTE";
             EComponentType[EComponentType["SHORT"] = 5122] = "SHORT";
             EComponentType[EComponentType["UNSIGNED_SHORT"] = 5123] = "UNSIGNED_SHORT";
+            EComponentType[EComponentType["UNSIGNED_INT"] = 5125] = "UNSIGNED_INT";
             EComponentType[EComponentType["FLOAT"] = 5126] = "FLOAT";
         })(EComponentType = GLTF2.EComponentType || (GLTF2.EComponentType = {}));
         var EMeshPrimitiveMode;
@@ -3553,6 +3554,7 @@ var BABYLON;
                     case GLTF2.EComponentType.UNSIGNED_BYTE: return new Uint8Array(buffer, byteOffset, byteLength);
                     case GLTF2.EComponentType.SHORT: return new Int16Array(buffer, byteOffset, byteLength);
                     case GLTF2.EComponentType.UNSIGNED_SHORT: return new Uint16Array(buffer, byteOffset, byteLength);
+                    case GLTF2.EComponentType.UNSIGNED_INT: return new Uint32Array(buffer, byteOffset, byteLength);
                     default: return new Float32Array(buffer, byteOffset, byteLength);
                 }
             };

src/Lights/Shadows/babylon.shadowGenerator.ts

@@ -2,6 +2,7 @@
     export interface IShadowGenerator {
         getShadowMap(): RenderTargetTexture;
  
+        isReady(subMesh: SubMesh, useInstances: boolean): boolean;
         dispose(): void;
     }
  

src/babylon.scene.ts

@@ -1447,6 +1447,8 @@
                 return false;
             }
             var index: number;
+
+            // Geometries
             for (index = 0; index < this._geometries.length; index++) {
                 var geometry = this._geometries[index];
 
@@ -1455,6 +1457,7 @@
                 }
             }
 
+            // Meshes
             for (index = 0; index < this.meshes.length; index++) {
                 var mesh = this.meshes[index];
 

tests/validation/config.json

@@ -0,0 +1,101 @@
+{
+  "root": "https://cdn.rawgit.com/BabylonJS/Website/06ecbea7",
+  "tests": [  
+   {
+      "title": "Sponza",
+      "sceneFolder": "/Scenes/Sponza/",
+      "sceneFilename": "Sponza.babylon",
+      "referenceImage": "Sponza.png"
+    },    
+    {
+      "title": "Windows cafe",
+      "sceneFolder": "/Scenes/WCafe/",
+      "sceneFilename": "WCafe.babylon",
+      "referenceImage": "WCafe.png"
+    },
+    {
+      "title": "Espilit",
+      "sceneFolder": "/Scenes/Espilit/",
+      "sceneFilename": "Espilit.binary.babylon",
+      "referenceImage": "Espilit.png"
+    },
+    {
+      "title": "The car",
+      "sceneFolder": "/Scenes/TheCar/",
+      "sceneFilename": "TheCar.binary.babylon",
+      "referenceImage": "TheCar.png"
+    },
+    {
+      "title": "Viper",
+      "sceneFolder": "/Scenes/Viper/",
+      "sceneFilename": "Viper.babylon",
+      "referenceImage": "Viper.png"
+    },
+    {
+      "title": "Retail",
+      "sceneFolder": "/Scenes/Retail/",
+      "sceneFilename": "Retail.babylon",
+      "referenceImage": "Retail.png"
+    },
+    {
+      "title": "Hill Valley",
+      "sceneFolder": "/Scenes/hillvalley/",
+      "sceneFilename": "HillValley.incremental.babylon",
+      "referenceImage": "HillValley.png"
+    },
+    {
+      "title": "Heart",
+      "sceneFolder": "/Scenes/Heart/",
+      "sceneFilename": "Heart.babylon",
+      "referenceImage": "heart.png"
+    },
+    {
+      "title": "Mansion",
+      "sceneFolder": "/Scenes/Mansion/",
+      "sceneFilename": "Mansion.babylon",
+      "referenceImage": "Mansion.png"
+    },
+    {
+      "title": "SpaceDeK",
+      "sceneFolder": "/Scenes/SpaceDek/",
+      "sceneFilename": "SpaceDek.babylon",
+      "referenceImage": "SpaceDeK.png"
+    },
+    {
+      "title": "Flat2009",
+      "sceneFolder": "/Scenes/Flat2009/",
+      "sceneFilename": "Flat2009.babylon",
+      "referenceImage": "Flat2009.png"
+    },
+    {
+      "title": "CSG",
+      "scriptToRun": "/Demos/CSG/csg.js",
+      "functionToCall": "CreateCSGTestScene",
+      "referenceImage": "csg.png"
+    },
+    {
+      "title": "Charting",
+      "scriptToRun": "/Demos/Charting/charting.js",
+      "functionToCall": "CreateChartingTestScene",
+      "referenceImage": "charting.png"
+    },
+    {
+      "title": "Fog",
+      "scriptToRun": "/Demos/Fog/fog.js",
+      "functionToCall": "CreateFogScene",
+      "referenceImage": "fog.png"
+    },
+    {
+      "title": "Polygon",
+      "scriptToRun": "/Demos/Polygon/polygon.js",
+      "functionToCall": "CreatePolygonScene",
+      "referenceImage": "polygon.png"
+    },      
+    {
+      "title": "Lines",
+      "scriptToRun": "/Demos/Lines/lines.js",
+      "functionToCall": "CreateLinesTestScene",
+      "referenceImage": "lines.png"
+    }
+  ]
+}

tests/validation/index.css

@@ -0,0 +1,84 @@
+html, body {
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    background-color: white;
+    background: url("LogoV3.jpg");
+    background-position: center center;
+    background-repeat: no-repeat;
+}
+
+.container {
+    width: calc(100% - 50px);
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    background: rgba(255, 255, 255, 0.6);
+    margin: auto;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    outline: 2px solid black;
+    max-width: 1000px;   
+}
+
+.containerTitle {
+    width:100%;
+    order: 1;
+    display: flex;
+    background-color: rgba(0, 0, 0, 0.8);
+    height: 50px;
+}
+
+.title {
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    font-size: 40px;
+    color: white;
+    text-align: center;
+    margin-left: 20px;
+    order: 1;
+}
+
+.result {
+    color:green;
+    font-size: 30px;
+    order: 2;
+    text-align: center;
+    margin-top: 5px;
+    margin-left: 20px;
+}
+
+.result.failed {
+    color:red;
+}
+
+.waitRing {
+    order: 3;
+    height: 40px;
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+.waitRing.hidden {
+    display: none;
+}
+
+.renderCanvas {
+    position:absolute;
+    transform: translateX(-600px);
+    width: 600px;
+    height: 400px;
+}
+
+.renderImage {
+    order: 1;
+    flex-basis: 50%;
+    width: 50%;
+}
+
+.resultImage {
+    width: 50%;
+    flex-basis: 50%;
+    order: 2;
+}

tests/validation/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>BabylonJS - Build validation page</title>
+	<link href="index.css" rel="stylesheet" />
+	<script src="../../Tools/DevLoader/BabylonLoader.js"></script>
+</head>
+<body>
+	<script>
+        BABYLONDEVTOOLS.Loader.require('validation.js')
+            .load();
+    </script>	
+</body>
+</html>

tests/validation/validation.js

@@ -0,0 +1,212 @@
+"use strict";
+
+var engine;
+var canvas;
+var currentScene;
+var config;
+
+function compare(renderData, referenceCanvas) {
+    var width = referenceCanvas.width;
+    var height = referenceCanvas.height;
+    var size = width * height * 4;
+
+    var referenceContext = referenceCanvas.getContext("2d");
+
+    var referenceData = referenceContext.getImageData(0, 0, width, height);
+
+    var differencesCount = 0;
+    for (var index = 0; index < size; index += 4) {
+        if (renderData[index] === referenceData.data[index] &&
+            renderData[index + 1] === referenceData.data[index + 1] &&
+            renderData[index + 2] === referenceData.data[index + 2]) {
+            continue;
+        }
+
+        referenceData.data[index] = 255;
+        referenceData.data[index + 1] *= 0.5;
+        referenceData.data[index + 2] *= 0.5;
+        differencesCount++;
+    }
+
+    referenceContext.putImageData(referenceData, 0, 0);
+
+    return differencesCount;
+}
+
+function getRenderData(canvas, engine) {
+    var width = canvas.width;
+    var height = canvas.height;
+
+    var renderData = engine.readPixels(0, 0, width, height);
+    var numberOfChannelsByLine = width * 4;
+    var halfHeight = height / 2;
+
+    for (var i = 0; i < halfHeight; i++) {
+        for (var j = 0; j < numberOfChannelsByLine; j++) {
+            var currentCell = j + i * numberOfChannelsByLine;
+            var targetLine = height - i - 1;
+            var targetCell = j + targetLine * numberOfChannelsByLine;
+
+            var temp = renderData[currentCell];
+            renderData[currentCell] = renderData[targetCell];
+            renderData[targetCell] = temp;
+        }
+    }
+
+    return renderData;
+}
+
+function saveRenderImage(data, canvas) {
+    var width = canvas.width;
+    var height = canvas.height;
+    var screenshotCanvas = document.createElement('canvas');
+    screenshotCanvas.width = width;
+    screenshotCanvas.height = height;
+    var context = screenshotCanvas.getContext('2d');
+
+    var imageData = context.createImageData(width, height);
+    var castData = imageData.data;
+    castData.set(data);
+    context.putImageData(imageData, 0, 0);
+
+    return screenshotCanvas.toDataURL();
+}
+
+function evaluate(resultCanvas, result, renderImage, index, waitRing) {
+    var renderData = getRenderData(canvas, engine);
+
+    if (compare(renderData, resultCanvas) !== 0) {
+        result.classList.add("failed");
+        result.innerHTML = "×";
+        console.log("failed");
+    } else {
+        result.innerHTML = "✔";
+        console.log("validated");
+    }
+
+    waitRing.classList.add("hidden");
+
+    renderImage.src = saveRenderImage(renderData, canvas);
+
+    currentScene.dispose();
+
+    runTest(index + 1);
+}
+
+function processCurrentScene(test, resultCanvas, result, renderImage, index, waitRing) {
+    currentScene.executeWhenReady(function () {
+        var renderCount = test.renderCount || 1;
+
+        for (var renderIndex = 0; renderIndex < renderCount; renderIndex++) {
+            currentScene.render();
+        }
+
+        evaluate(resultCanvas, result, renderImage, index, waitRing);
+    });
+}
+
+function runTest(index) {
+    if (index >= config.tests.length) {
+        return;
+    }
+
+    var test = config.tests[index];
+    var container = document.createElement("div");
+    container.id = "container#" + index;
+    container.className = "container";
+    document.body.appendChild(container);
+
+    var titleContainer = document.createElement("div");
+    titleContainer.className = "containerTitle";
+    container.appendChild(titleContainer);
+
+    var title = document.createElement("div");
+    title.className = "title";
+    titleContainer.appendChild(title);
+
+    var result = document.createElement("div");
+    result.className = "result";
+    titleContainer.appendChild(result);
+
+    var waitRing = document.createElement("img");
+    waitRing.className = "waitRing";
+    titleContainer.appendChild(waitRing);
+    waitRing.src = "loading.gif";
+
+    var resultCanvas = document.createElement("canvas");
+    resultCanvas.className = "resultImage";
+    container.appendChild(resultCanvas);
+
+    title.innerHTML = test.title;
+
+    console.log("Running " + test.title);
+
+    var resultContext = resultCanvas.getContext("2d");
+    var img = new Image();
+    img.onload = function () {
+        resultCanvas.width = img.width;
+        resultCanvas.height = img.height;
+        resultContext.drawImage(img, 0, 0);
+    }
+
+    img.src = "ReferenceImages/" + test.referenceImage;
+
+    var renderImage = new Image();
+    renderImage.className = "renderImage";
+    container.appendChild(renderImage);
+
+    location.href = "#" + container.id;
+
+    if (test.sceneFolder) {
+        BABYLON.SceneLoader.Load(config.root + test.sceneFolder, test.sceneFilename, engine, function (newScene) {
+            currentScene = newScene;
+            processCurrentScene(test, resultCanvas, result, renderImage, index, waitRing);
+        });
+    } else {
+        var script = document.createElement("script");
+        script.setAttribute("type", "text/javascript")
+
+        var runScript = function () {
+            currentScene = eval(test.functionToCall + "(engine)");
+            processCurrentScene(test, resultCanvas, result, renderImage, index, waitRing);
+        }
+
+        script.onreadystatechange = function () {
+            if (this.readyState == 'complete') {
+                runScript();
+            }
+        }
+
+        script.onload = runScript;
+        script.setAttribute("src", config.root + test.scriptToRun);
+
+        document.getElementsByTagName("head")[0].appendChild(script);
+    }
+}
+
+BABYLON.SceneLoader.ShowLoadingScreen = false;
+BABYLON.Database.IDBStorageEnabled = false;
+BABYLON.SceneLoader.ForceFullSceneLoadingForIncremental = true;
+
+canvas = document.createElement("canvas");
+canvas.className = "renderCanvas";
+document.body.appendChild(canvas);
+engine = new BABYLON.Engine(canvas, false);
+
+// Loading tests
+var xhr = new XMLHttpRequest();
+
+xhr.open("GET", "config.json", true);
+
+xhr.addEventListener("load",function() {
+    if (xhr.status === 200) {
+
+        config = JSON.parse(xhr.responseText);
+
+        // Run tests
+        runTest(0, engine);
+
+    }
+}, false);
+
+xhr.send();