Updates

daoshengmu · Aug 6, 2021 · 2bfd42e · 2bfd42e
1 parent 62c640e
commit 2bfd42e
Show file tree

Hide file tree

Showing 12 changed files with 86 additions and 101 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -414,7 +414,7 @@
             ]
         },
         {
-            "name": "Launch 3D Commerce Certification (Chrome)",
+            "name": "Launch 3D Commerce Viewer Certification (Chrome)",
             "type": "chrome",
             "request": "launch",
             "url": "http://localhost:1338/tests/certification/index.html",

diff --git a/sandbox/src/sandbox.tsx b/sandbox/src/sandbox.tsx
@@ -100,13 +100,13 @@ export class Sandbox extends React.Component<ISandboxProps, { isFooterVisible: b
 
     checkUrl() {
         // Check URL
-        var indexOf = location.href.indexOf("?");
+        const indexOf = location.href.indexOf("?");
         if (indexOf !== -1) {
-            var params = location.href.substr(indexOf + 1).split("&");
-            for (var index = 0; index < params.length; index++) {
-                var param = params[index].split("=");
-                var name = param[0];
-                var value = param[1];
+            const params = location.href.substr(indexOf + 1).split("&");
+            for (const param of params) {
+                const split = param.split("=", 2);
+                const name = split[0];
+                const value = split[1];
                 switch (name) {
                     case "assetUrl": {
                         this._assetUrl = value;

diff --git a/tests/certification/.gitignore b/tests/certification/.gitignore
@@ -0,0 +1 @@
+models
diff --git a/tests/certification/ReadMe.md b/tests/certification/ReadMe.md
@@ -0,0 +1,12 @@
+# Khronos 3D Commerce Viewer Certification
+
+This page will run through all of the tests required for [3D Commerce Viewer Certification Program](https://www.khronos.org/3dcommerce/certification) and create a download for a zip with the results for submission.
+
+## Setup
+1. Download the [certification models](https://github.com/KhronosGroup/3DC-Certification/tree/main/models) and place them in a subfolder under this folder called `models`.
+1. Launch the certification from vscode using the `Launch 3D Commerce Viewer Certification (Chrome)`.
+1. Wait a few minutes for the page to render all the models and capture screenshots.  
+_NOTE: The browser freezes a lot while loading these models. Please be patient._
+1. Once the process completes, the page will generate a `certification.zip` for download with the results.
+
+_NOTE: The page will use the local dist version of the sandbox (i.e. http://localhost:1338/sandbox/public/index-local.html?dist=true). Using the dev loader (i.e. without the `dist=true`) to load the sandbox makes this process much slower._
diff --git a/tests/certification/index.html b/tests/certification/index.html
@@ -3,38 +3,15 @@
 
 <head>
     <title>BabylonJS - Certification</title>
-    <link href="index.css" rel="stylesheet" />
-    <script src="color.js"></script>
-    <script src="zip.min.js"></script>
-    <script src="certification.js"></script>
+    <link href="src/index.css" rel="stylesheet" />
+    <script src="src/color.js"></script>
+    <script src="src/zip.min.js"></script>
+    <script src="src/certification.js"></script>
 </head>
 
 <body>
     <script>
-        checkUrl();
-
-        const xhr = new XMLHttpRequest();
-        xhr.open("GET", "config.json", true);
-        xhr.addEventListener("load", async function() {
-            if (xhr.status === 200) {
-                config = JSON.parse(xhr.responseText);
-
-                const recursiveRunTest = async function(index) {
-                    const result = await runTest(index);
-
-                    if (index + 1 == config.tests.length) {
-                        showResultSummary();
-                        downloadResult();
-                        return;
-                    }
-
-                    recursiveRunTest(index + 1);
-                }
-
-                recursiveRunTest(0);
-            }
-        }, false);
-        xhr.send();
+        runTests("../../sandbox/public/index-local.html");
     </script>
 </body>
 

diff --git a/tests/certification/certification.js → tests/certification/src/certification.js b/tests/certification/certification.js → tests/certification/src/certification.js
@@ -1,32 +1,10 @@
 "use strict";
 
-let debug = false;
-let dist = true;
+let config = null;
 let numTestsOk = 0;
 const failedTests = [];
 const renderImages = [];
 
-function checkUrl() {
-    const indexOf = location.href.indexOf("?");
-    if (indexOf !== -1) {
-        const params = location.href.substr(indexOf + 1).split("&");
-        for (let index = 0; index < params.length; index++) {
-            const param = params[index].split("=");
-            const name = param[0];
-            const value = param[1];
-            switch (name) {
-                case "debug": {
-                    debug = (value === "true" ? true : false);
-                }
-                case "dist": {
-                    dist = (value === "true" ? true : false);
-                    break;
-                }
-            }
-        }
-    }
-}
-
 function download(blob, fileName) {
     if (navigator && navigator.msSaveBlob) {
         navigator.msSaveBlob(blob, fileName);
@@ -81,16 +59,12 @@ function compare(renderCanvas, referenceCanvas, diffCanvas, threshold, errorRati
         differencesCount++;
     }
 
-    if (debug) {
-        console.log(`Max deltaE: ${maxDeltaE}`);
-    }
-
     diffContext.putImageData(referenceData, 0, 0);
 
     const curErrorRatio = (differencesCount * 100) / (width * height);
 
     if (differencesCount) {
-        console.log(`%c Pixel difference: ${differencesCount} pixels. Error ratio=${curErrorRatio.toFixed(4)}%`, "color: orange");
+        console.log(`%c Pixel difference: ${differencesCount} pixels. Error ratio=${curErrorRatio.toFixed(4)}%. Max deltaE: ${maxDeltaE}`, "color: orange");
     }
 
     return curErrorRatio > errorRatio;
@@ -139,25 +113,25 @@ function loadImage(src) {
 
 function loadFrame(frame, src) {
     return new Promise(function (resolve) {
-        frame.onload = function () {
-            const BABYLONDEVTOOLS = frame.contentWindow.BABYLONDEVTOOLS;
-            if (BABYLONDEVTOOLS) {
-                BABYLONDEVTOOLS.Loader.onReady(function () {
-                    resolve();
-                });
-            }
-            else {
+        const checkReady = function () {
+            if (frame.contentWindow.BABYLON && frame.contentWindow.BABYLON.Sandbox) {
                 resolve();
+                return;
             }
-        };
+
+            setTimeout(checkReady, 100);
+        }
+
+        checkReady();
 
         frame.src = src;
     });
 }
 
-async function runTest(index) {
+async function runTest(sandboxUrl, index) {
     const test = config.tests[index];
 
+    // Container
     const container = document.createElement("div");
     container.id = "container#" + index;
     container.className = "container";
@@ -198,19 +172,15 @@ async function runTest(index) {
 
     // Reference
     const referenceContext = referenceCanvas.getContext("2d");
-    const referenceImage = await loadImage(test.referenceImage);
+    const referenceImage = await loadImage(`${config.root}/${test.referenceImage}`);
     referenceCanvas.width = referenceImage.width;
     referenceCanvas.height = referenceImage.height;
     referenceContext.drawImage(referenceImage, 0, 0);
 
     // Render
     renderFrame.width = referenceCanvas.clientWidth;
     renderFrame.height = referenceCanvas.clientHeight;
-    const src = "../../sandbox/public/index-local.html?skybox=false&clearColor=FFFFFF&kiosk=true"
-        + `&assetUrl=../../tests/certification/models/${test.model}`
-        + `&environment=../../tests/certification/models/${test.environment || "Neutral.hdr"}`
-        + `&camera=${test.camera || 0}`
-        + (dist ? "&dist=true" : "");
+    const src = `${sandboxUrl}?&dist=true&skybox=false&clearColor=FFFFFF&kiosk=true&assetUrl=${config.root}/${test.model}&environment=${config.root}/${test.environment || "Neutral.hdr"}&camera=${test.camera || 0}`;
     await loadFrame(renderFrame, src);
     const renderScreenshot = await renderFrame.contentWindow.BABYLON.Sandbox.CaptureScreenshotAsync({width: 1024, height: 1024});
     const renderCanvas = document.createElement("canvas");
@@ -253,3 +223,28 @@ async function downloadResult() {
 
     download(blob, "certification.zip");
 }
+
+function runTests(sandboxUrl) {
+    const xhr = new XMLHttpRequest();
+    xhr.open("GET", "src/config.json", true);
+    xhr.addEventListener("load", async function() {
+        if (xhr.status === 200) {
+            config = JSON.parse(xhr.responseText);
+
+            const recursiveRunTest = async function(index) {
+                const result = await runTest(sandboxUrl, index);
+
+                if (index + 1 == config.tests.length) {
+                    showResultSummary();
+                    downloadResult();
+                    return;
+                }
+
+                recursiveRunTest(index + 1);
+            }
+
+            recursiveRunTest(0);
+        }
+    }, false);
+    xhr.send();
+}
diff --git a/tests/certification/color.js → tests/certification/src/color.js b/tests/certification/color.js → tests/certification/src/color.js
diff --git a/tests/certification/config.json → tests/certification/src/config.json b/tests/certification/config.json → tests/certification/src/config.json
@@ -1,128 +1,128 @@
 {
-    "root": "https://cdn.babylonjs.com",
+    "root": "http://localhost:1338/tests/certification/models",
     "tests": [
         {
             "title": "AnalyticalCubes",
             "model": "AnalyticalCubes/glTF/AnalyticalCubes.gltf",
-            "referenceImage": "models/AnalyticalCubes/rr-AnalyticalCubes.png"
+            "referenceImage": "AnalyticalCubes/rr-AnalyticalCubes.png"
         },
         {
             "title": "AnalyticalGrayscale",
             "model": "AnalyticalGrayscale/glTF/AnalyticalGrayscale.gltf",
-            "referenceImage": "models/AnalyticalGrayscale/rr-AnalyticalGrayscale.png"
+            "referenceImage": "AnalyticalGrayscale/rr-AnalyticalGrayscale.png"
         },
         {
             "title": "AnalyticalSpheres (Neutral)",
             "model": "AnalyticalSpheres/glTF/AnalyticalSpheres.gltf",
-            "referenceImage": "models/AnalyticalSpheres/rr-AnalyticalSpheres.png"
+            "referenceImage": "AnalyticalSpheres/rr-AnalyticalSpheres.png"
         },
         {
             "title": "AnalyticalSpheres (Cannon)",
             "model": "AnalyticalSpheres/glTF/AnalyticalSpheres.gltf",
             "environment": "Cannon_Exterior.hdr",
-            "referenceImage": "models/AnalyticalSpheres/rr-AnalyticalSpheres-Cannon.png"
+            "referenceImage": "AnalyticalSpheres/rr-AnalyticalSpheres-Cannon.png"
         },
         {
             "title": "AnalyticalSpheres (Street)",
             "model": "AnalyticalSpheres/glTF/AnalyticalSpheres.gltf",
             "environment": "Wide_Street.hdr",
-            "referenceImage": "models/AnalyticalSpheres/rr-AnalyticalSpheres-Street.png"
+            "referenceImage": "AnalyticalSpheres/rr-AnalyticalSpheres-Street.png"
         },
         {
             "title": "AnalyticalSpheres (Studio)",
             "model": "AnalyticalSpheres/glTF/AnalyticalSpheres.gltf",
             "environment": "Colorful_Studio.hdr",
-            "referenceImage": "models/AnalyticalSpheres/rr-AnalyticalSpheres-Studio.png"
+            "referenceImage": "AnalyticalSpheres/rr-AnalyticalSpheres-Studio.png"
         },
         {
             "title": "GreenChair (0)",
             "model": "GreenChair/glTF/GreenChair.gltf",
             "camera": 0,
-            "referenceImage": "models/GreenChair/rr-GreenChair-0.png"
+            "referenceImage": "GreenChair/rr-GreenChair-0.png"
         },
         {
             "title": "GreenChair (1)",
             "model": "GreenChair/glTF/GreenChair.gltf",
             "camera": 1,
-            "referenceImage": "models/GreenChair/rr-GreenChair-1.png"
+            "referenceImage": "GreenChair/rr-GreenChair-1.png"
         },
         {
             "title": "GreenChair (2)",
             "model": "GreenChair/glTF/GreenChair.gltf",
             "camera": 2,
-            "referenceImage": "models/GreenChair/rr-GreenChair-2.png"
+            "referenceImage": "GreenChair/rr-GreenChair-2.png"
         },
         {
             "title": "Mixer (0)",
             "model": "Mixer/glTF/Mixer.gltf",
             "camera": 0,
-            "referenceImage": "models/Mixer/rr-Mixer-0.png"
+            "referenceImage": "Mixer/rr-Mixer-0.png"
         },
         {
             "title": "Mixer (1)",
             "model": "Mixer/glTF/Mixer.gltf",
             "camera": 1,
-            "referenceImage": "models/Mixer/rr-Mixer-1.png"
+            "referenceImage": "Mixer/rr-Mixer-1.png"
         },
         {
             "title": "Mixer (2)",
             "model": "Mixer/glTF/Mixer.gltf",
             "camera": 2,
-            "referenceImage": "models/Mixer/rr-Mixer-2.png"
+            "referenceImage": "Mixer/rr-Mixer-2.png"
         },
         {
             "title": "Shoe (0)",
             "model": "Shoe/glTF/Shoe.gltf",
             "camera": 0,
-            "referenceImage": "models/Shoe/rr-Shoe-0.png"
+            "referenceImage": "Shoe/rr-Shoe-0.png"
         },
         {
             "title": "Shoe (1)",
             "model": "Shoe/glTF/Shoe.gltf",
             "camera": 1,
-            "referenceImage": "models/Shoe/rr-Shoe-1.png"
+            "referenceImage": "Shoe/rr-Shoe-1.png"
         },
         {
             "title": "Shoe (2)",
             "model": "Shoe/glTF/Shoe.gltf",
             "camera": 2,
-            "referenceImage": "models/Shoe/rr-Shoe-2.png"
+            "referenceImage": "Shoe/rr-Shoe-2.png"
         },
         {
             "title": "TennisRacquet (0)",
             "model": "TennisRacquet/glTF/TennisRacquet.gltf",
             "camera": 0,
-            "referenceImage": "models/TennisRacquet/rr-TennisRacquet-0.png"
+            "referenceImage": "TennisRacquet/rr-TennisRacquet-0.png"
         },
         {
             "title": "TennisRacquet (1)",
             "model": "TennisRacquet/glTF/TennisRacquet.gltf",
             "camera": 1,
-            "referenceImage": "models/TennisRacquet/rr-TennisRacquet-1.png"
+            "referenceImage": "TennisRacquet/rr-TennisRacquet-1.png"
         },
         {
             "title": "TennisRacquet (2)",
             "model": "TennisRacquet/glTF/TennisRacquet.gltf",
             "camera": 2,
-            "referenceImage": "models/TennisRacquet/rr-TennisRacquet-2.png"
+            "referenceImage": "TennisRacquet/rr-TennisRacquet-2.png"
         },
         {
             "title": "WickerChair (0)",
             "model": "WickerChair/glTF/WickerChair.gltf",
             "camera": 0,
-            "referenceImage": "models/WickerChair/rr-WickerChair-0.png"
+            "referenceImage": "WickerChair/rr-WickerChair-0.png"
         },
         {
             "title": "WickerChair (1)",
             "model": "WickerChair/glTF/WickerChair.gltf",
             "camera": 1,
-            "referenceImage": "models/WickerChair/rr-WickerChair-1.png"
+            "referenceImage": "WickerChair/rr-WickerChair-1.png"
         },
         {
             "title": "WickerChair (2)",
             "model": "WickerChair/glTF/WickerChair.gltf",
             "camera": 2,
-            "referenceImage": "models/WickerChair/rr-WickerChair-2.png"
+            "referenceImage": "WickerChair/rr-WickerChair-2.png"
         }
     ]
 }
diff --git a/tests/certification/index.css → tests/certification/src/index.css b/tests/certification/index.css → tests/certification/src/index.css
diff --git a/tests/certification/loading.gif → tests/certification/src/loading.gif b/tests/certification/loading.gif → tests/certification/src/loading.gif
diff --git a/tests/certification/logo.png → tests/certification/src/logo.png b/tests/certification/logo.png → tests/certification/src/logo.png
diff --git a/tests/certification/zip.min.js → tests/certification/src/zip.min.js b/tests/certification/zip.min.js → tests/certification/src/zip.min.js