ADd perf page for PG

Playground/frame.html

@@ -77,7 +77,7 @@
     <a class="link" id="link" href="#" target="_blank">Edit</a>
 
     <script src="https://code.jquery.com/jquery.js"></script>
-    <script src="frame.js"></script>
+    <script src="/js/frame.js"></script>
 </body>
 
 </html>

Playground/js/perf.js

@@ -0,0 +1,158 @@
+(function () {
+    var snippetUrl = "https://babylonjs-api2.azurewebsites.net/snippets";
+    var currentSnippetToken;
+    var engine;
+    var scripts;
+    var zipCode;
+    BABYLON.Engine.ShadersRepository = "/src/Shaders/";
+    var loadScript = function (scriptURL, title) {
+        var xhr = new XMLHttpRequest();
+
+        xhr.open('GET', scriptURL, true);
+
+        xhr.onreadystatechange = function () {
+            if (xhr.readyState === 4) {
+                if (xhr.status === 200) {
+                    blockEditorChange = true;
+                    console.log(xhr.responseText);
+                    jsEditor.setValue(xhr.responseText);
+                    jsEditor.setPosition({ lineNumber: 0, column: 0 });
+                    blockEditorChange = false;
+                    compileAndRun();
+
+                    document.getElementById("currentScript").innerHTML = title;
+
+                    currentSnippetToken = null;
+                }
+            }
+        };
+
+        xhr.send(null);
+    };
+
+    var showError = function(error) {
+        console.warn(error);
+    };
+
+    compileAndRun = function (code) {
+        try {
+
+            if (!BABYLON.Engine.isSupported()) {
+                showError("Your browser does not support WebGL");
+                return;
+            }
+
+            if (engine) {
+                engine.dispose();
+                engine = null;
+            }
+
+            var canvas = document.getElementById("renderCanvas");
+            engine = new BABYLON.Engine(canvas, true, {stencil: true});
+            engine.renderEvenInBackground = false;
+            BABYLON.Camera.ForceAttachControlToAlwaysPreventDefault = true;
+
+            engine.runRenderLoop(function () {
+                if (engine.scenes.length === 0) {
+                    return;
+                }
+
+                if (canvas.width !== canvas.clientWidth) {
+                    engine.resize();
+                }
+
+                var scene = engine.scenes[0];
+
+                if (scene.activeCamera || scene.activeCameras.length > 0) {
+                    scene.render();
+                }
+            });
+
+            var scene;
+            if (code.indexOf("createScene") !== -1) { // createScene
+                eval(code);
+                scene = createScene();
+                if (!scene) {
+                    showError("createScene function must return a scene.");
+                    return;
+                }
+
+                zipCode = code + "\r\n\r\nvar scene = createScene();";
+            } else if (code.indexOf("CreateScene") !== -1) { // CreateScene
+                eval(code);
+                scene = CreateScene();
+                if (!scene) {
+                    showError("CreateScene function must return a scene.");
+                    return;
+                }
+
+                zipCode = code + "\r\n\r\nvar scene = CreateScene();";
+            } else if (code.indexOf("createscene") !== -1) { // createscene
+                eval(code);
+                scene = createscene();
+                if (!scene) {
+                    showError("createscene function must return a scene.");
+                    return;
+                }
+
+                zipCode = code + "\r\n\r\nvar scene = createscene();";
+            } else { // Direct code
+                scene = new BABYLON.Scene(engine);
+                eval("runScript = function(scene, canvas) {" + code + "}");
+                runScript(scene, canvas);
+
+                zipCode = "var scene = new BABYLON.Scene(engine);\r\n\r\n" + code;
+            }
+
+        } catch (e) {
+            // showError(e.message);
+        }
+    };
+    window.addEventListener("resize", function () {
+        if (engine) {
+            engine.resize();
+        }
+    });
+
+    // UI
+
+    var cleanHash = function () {
+        var splits = decodeURIComponent(location.hash.substr(1)).split("#");
+
+        if (splits.length > 2) {
+            splits.splice(2, splits.length - 2);
+        }
+
+        location.hash = splits.join("#");
+    };
+
+    var checkHash = function () {
+        if (location.hash) {
+            cleanHash();
+
+            try {
+                var xmlHttp = new XMLHttpRequest();
+                xmlHttp.onreadystatechange = function () {
+                    if (xmlHttp.readyState === 4) {
+                        if (xmlHttp.status === 200) {
+                            var snippetCode = JSON.parse(JSON.parse(xmlHttp.responseText)[0].jsonPayload).code;
+                            compileAndRun(snippetCode);
+                        }
+                    }
+                };
+
+                var hash = location.hash.substr(1);
+                currentSnippetToken = hash.split("#")[0];
+                if(!hash.split("#")[1]) hash += "#0";
+
+                xmlHttp.open("GET", snippetUrl + "/" + hash.replace("#", "/"));
+                xmlHttp.send();
+            } catch (e) {
+
+            }
+        }
+    };
+
+    checkHash();
+
+})();

Playground/perf.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Babylon.js Playground</title>
+    <link rel="shortcut icon" href="https://www.babylonjs.com/img/favicon/favicon.ico">
+	<link rel="apple-touch-icon" sizes="57x57" href="https://www.babylonjs.com/img/favicon/apple-icon-57x57.png">
+	<link rel="apple-touch-icon" sizes="60x60" href="https://www.babylonjs.com/img/favicon/apple-icon-60x60.png">
+	<link rel="apple-touch-icon" sizes="72x72" href="https://www.babylonjs.com/img/favicon/apple-icon-72x72.png">
+	<link rel="apple-touch-icon" sizes="76x76" href="https://www.babylonjs.com/img/favicon/apple-icon-76x76.png">
+	<link rel="apple-touch-icon" sizes="114x114" href="https://www.babylonjs.com/img/favicon/apple-icon-114x114.png">
+	<link rel="apple-touch-icon" sizes="120x120" href="https://www.babylonjs.com/img/favicon/apple-icon-120x120.png">
+	<link rel="apple-touch-icon" sizes="144x144" href="https://www.babylonjs.com/img/favicon/apple-icon-144x144.png">
+	<link rel="apple-touch-icon" sizes="152x152" href="https://www.babylonjs.com/img/favicon/apple-icon-152x152.png">
+	<link rel="apple-touch-icon" sizes="180x180" href="https://www.babylonjs.com/img/favicon/apple-icon-180x180.png">
+	<link rel="icon" type="image/png" sizes="192x192"  href="https://www.babylonjs.com/img/favicon/android-icon-192x192.png">
+	<link rel="icon" type="image/png" sizes="32x32" href="https://www.babylonjs.com/img/favicon/favicon-32x32.png">
+	<link rel="icon" type="image/png" sizes="96x96" href="https://www.babylonjs.com/img/favicon/favicon-96x96.png">
+	<link rel="icon" type="image/png" sizes="16x16" href="https://www.babylonjs.com/img/favicon/favicon-16x16.png">
+	<link rel="manifest" href="https://www.babylonjs.com/img/favicon/manifest.json">
+	<meta name="msapplication-TileColor" content="#ffffff">
+	<meta name="msapplication-TileImage" content="https://www.babylonjs.com/img/favicon/ms-icon-144x144.png">
+	<meta name="msapplication-config" content="https://www.babylonjs.com/img/favicon/browserconfig.xml">
+	<meta name="theme-color" content="#ffffff">
+
+    <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
+    <!-- Babylon.js -->
+    <script src="https://preview.babylonjs.com/cannon.js"></script>
+    <script src="https://preview.babylonjs.com/Oimo.js"></script>
+    <script src="https://preview.babylonjs.com/babylon.js"></script>    
+    <script src="https://preview.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>
+
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.fireMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.waterMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.lavaMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.normalMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.skyMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.triPlanarMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.terrainMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.gradientMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.furMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.gridMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.shadowOnlyMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.customMaterial.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylon.cellMaterial.min.js"></script>
+
+    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.brickProceduralTexture.min.js"></script>
+    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.cloudProceduralTexture.min.js"></script>
+    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.fireProceduralTexture.min.js"></script>
+    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.grassProceduralTexture.min.js"></script>
+    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.marbleProceduralTexture.min.js"></script>
+    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.roadProceduralTexture.min.js"></script>
+    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.starfieldProceduralTexture.min.js"></script>
+    <script src="https://preview.babylonjs.com/proceduralTexturesLibrary/babylon.woodProceduralTexture.min.js"></script>
+
+    <script src="https://preview.babylonjs.com/postProcessesLibrary/babylon.asciiArtPostProcess.min.js"></script>
+    <script src="https://preview.babylonjs.com/postProcessesLibrary/babylon.digitalRainPostProcess.min.js"></script>
+
+    <script src="https://preview.babylonjs.com/loaders/babylon.glTFFileLoader.js"></script>
+    <script src="https://preview.babylonjs.com/loaders/babylon.objFileLoader.js"></script>
+    <script src="https://preview.babylonjs.com/loaders/babylon.stlFileLoader.js"></script>
+
+    <script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>
+    
+    <script src="https://rawgit.com/BabylonJS/Extensions/master/ClonerSystem/src/babylonx.cloner.js"></script>    
+    <script src="https://rawgit.com/BabylonJS/Extensions/master/canvas2D/dist/preview%20release/babylon.canvas2d.min.js"></script>
+    <script src="https://rawgit.com/BabylonJS/Extensions/master/CompoundShader/src/babylonx.CompoundShader.js"></script>
+    <link href="frame.css" rel="stylesheet" />
+</head>
+
+<body>
+    <canvas touch-action="none" id="renderCanvas"></canvas>
+    <script src="https://code.jquery.com/jquery.js"></script>
+    <script src="/js/perf.js"></script>
+</body>
+
+</html>