Adding createEngine option to the playground

createEngine is an optional function that will be used to create a different engine other than the default one.

Playground/js/frame.js

@@ -61,72 +61,83 @@
             }
 
             var canvas = document.getElementById("renderCanvas");
-            engine = new BABYLON.Engine(canvas, true, { stencil: true });
-            BABYLON.Camera.ForceAttachControlToAlwaysPreventDefault = true;
-            engine.runRenderLoop(function () {
-                if (engine.scenes.length === 0) {
-                    return;
-                }
 
-                if (canvas.width !== canvas.clientWidth) {
-                    engine.resize();
-                }
+            var checkCamera = true;
+            var wrappedEval = false;
+            var createEngineFunction = "createDefaultEngine";
+            var createSceneFunction;
 
-                var scene = engine.scenes[0];
+            var createDefaultEngine = function () {
+                return new BABYLON.Engine(canvas, true, { stencil: true });
+            }
 
-                if (scene.activeCamera || scene.activeCameras.length > 0) {
-                    scene.render();
-                }
+            var scene;
 
-                if (fpsLabel) {
-                    fpsLabel.innerHTML = engine.getFps().toFixed() + " fps";
-                }
-            });
+            if (code.indexOf("createEngine") !== -1) {
+                createEngineFunction = "createEngine";
+            }
 
-            var scene;
             if (code.indexOf("delayCreateScene") !== -1) { // createScene
+                createSceneFunction = "delayCreateScene";
+                checkCamera = false;
+            } else if (code.indexOf("createScene") !== -1) { // createScene
+                createSceneFunction = "createScene";
+            } else if (code.indexOf("CreateScene") !== -1) { // CreateScene
+                createSceneFunction = "CreateScene";
+            } else if (code.indexOf("createscene") !== -1) { // createscene
+                createSceneFunction = "createscene";
+            }
+
+            if (!createSceneFunction) {
+                // just pasted code.
+                engine = createDefaultEngine();
+                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;
+            } else {
+                //execute the code
                 eval(code);
-                scene = delayCreateScene();
-                if (!scene) {
-                    showError("delayCreateScene function must return a scene.", null);
+                //create engine
+                eval("engine = " + createEngineFunction + "()");
+                if (!engine) {
+                    showError("createEngine function must return an engine.", null);
                     return;
                 }
 
-                zipCode = code + "\r\n\r\nvar scene = createScene();";
-            } if (code.indexOf("createScene") !== -1) { // createScene
-                eval(code);
-                scene = createScene();
+                //create scene
+                eval("scene = " + createSceneFunction + "()");
+
                 if (!scene) {
-                    showError("createScene function must return a scene.");
+                    showError(createSceneFunction + " function must return a scene.", null);
                     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.");
+                // update the scene code for the zip file
+                zipCode = code + "\r\n\r\nvar scene = " + createSceneFunction + "()";
+            }
+
+            BABYLON.Camera.ForceAttachControlToAlwaysPreventDefault = true;
+            engine.runRenderLoop(function () {
+                if (engine.scenes.length === 0) {
                     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;
+                if (canvas.width !== canvas.clientWidth) {
+                    engine.resize();
                 }
 
-                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);
+                var scene = engine.scenes[0];
 
-                zipCode = "var scene = new BABYLON.Scene(engine);\r\n\r\n" + code;
-            }
+                if (scene.activeCamera || scene.activeCameras.length > 0) {
+                    scene.render();
+                }
+
+                if (fpsLabel) {
+                    fpsLabel.innerHTML = engine.getFps().toFixed() + " fps";
+                }
+            });
 
         } catch (e) {
             // showError(e.message);

Playground/js/index.js

@@ -355,77 +355,85 @@
                 }
 
                 var canvas = document.getElementById("renderCanvas");
-                engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
                 document.getElementById("errorZone").style.display = 'none';
                 document.getElementById("errorZone").innerHTML = "";
                 document.getElementById("statusBar").innerHTML = "Loading assets...Please wait";
                 var checkCamera = true;
+                var wrappedEval = false;
+                var createEngineFunction = "createDefaultEngine";
+                var createSceneFunction;
 
-                engine.runRenderLoop(function () {
-                    if (engine.scenes.length === 0) {
-                        return;
-                    }
-
-                    if (canvas.width !== canvas.clientWidth) {
-                        engine.resize();
-                    }
+                var code = jsEditor.getValue();
 
-                    var scene = engine.scenes[0];
+                var createDefaultEngine = function () {
+                    return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
+                }
 
-                    if (scene.activeCamera || scene.activeCameras.length > 0) {
-                        scene.render();
-                    }
+                var scene;
 
-                    fpsLabel.style.right = document.body.clientWidth - (jsEditor.domElement.clientWidth + canvas.clientWidth) + "px";
-                    fpsLabel.innerHTML = engine.getFps().toFixed() + " fps";
-                });
+                if (code.indexOf("createEngine") !== -1) {
+                    createEngineFunction = "createEngine";
+                }
 
-                var code = jsEditor.getValue();
-                var scene;
                 if (code.indexOf("delayCreateScene") !== -1) { // createScene
-                    eval(code);
-                    scene = delayCreateScene();
+                    createSceneFunction = "delayCreateScene";
                     checkCamera = false;
-                    if (!scene) {
-                        showError("delayCreateScene function must return a scene.", null);
-                        return;
-                    }
-
-                    zipCode = code + "\r\n\r\nvar scene = createScene();";
                 } else if (code.indexOf("createScene") !== -1) { // createScene
+                    createSceneFunction = "createScene";
+                } else if (code.indexOf("CreateScene") !== -1) { // CreateScene
+                    createSceneFunction = "CreateScene";
+                } else if (code.indexOf("createscene") !== -1) { // createscene
+                    createSceneFunction = "createscene";
+                }
+
+                if (!createSceneFunction) {
+                    // just pasted code.
+                    engine = createDefaultEngine();
+                    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;
+                } else {
+                    //execute the code
                     eval(code);
-                    scene = createScene();
-                    if (!scene) {
-                        showError("createScene function must return a scene.", null);
+                    //create engine
+                    eval("engine = " + createEngineFunction + "()");
+                    if (!engine) {
+                        showError("createEngine function must return an engine.", null);
                         return;
                     }
 
-                    zipCode = code + "\r\n\r\nvar scene = createScene();";
-                } else if (code.indexOf("CreateScene") !== -1) { // CreateScene
-                    eval(code);
-                    scene = CreateScene();
+                    //create scene
+                    eval("scene = " + createSceneFunction + "()");
+
                     if (!scene) {
-                        showError("CreateScene function must return a scene.", null);
+                        showError(createSceneFunction + " function must return a scene.", null);
                         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.", null);
+                    // update the scene code for the zip file
+                    zipCode = code + "\r\n\r\nvar scene = " + createSceneFunction + "()";
+                }
+
+                engine.runRenderLoop(function () {
+                    if (engine.scenes.length === 0) {
                         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);
+                    if (canvas.width !== canvas.clientWidth) {
+                        engine.resize();
+                    }
 
-                    zipCode = "var scene = new BABYLON.Scene(engine);\r\n\r\n" + code;
-                }
+                    var scene = engine.scenes[0];
+
+                    if (scene.activeCamera || scene.activeCameras.length > 0) {
+                        scene.render();
+                    }
+
+                    fpsLabel.style.right = document.body.clientWidth - (jsEditor.domElement.clientWidth + canvas.clientWidth) + "px";
+                    fpsLabel.innerHTML = engine.getFps().toFixed() + " fps";
+                });
 
                 if (engine.scenes.length === 0) {
                     showError("You must at least create a scene.", null);

localDev/index.html

@@ -1,111 +1,120 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-	<title>Local Development</title>
-	
-    <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
-	<script src="https://preview.babylonjs.com/cannon.js"></script>
-	<script src="https://preview.babylonjs.com/Oimo.js"></script>
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
-	<script src="../Tools/DevLoader/BabylonLoader.js"></script>
-	<script src="src/webgl-debug.js"></script>
-
-	<style>
-		html, body {
-			width: 100%;
-			height: 100%;
-			padding: 0;
-			margin: 0;
-			overflow: hidden;
-		}
-
-		#renderCanvas {
-			width: 100%;
-			height: 100%;
-		}
-
-		#fps {
-			position: absolute;
-			background-color: black;
-			border: 2px solid red;
-			text-align: center;
-			font-size: 16px;
-			color: white;
-			top: 15px;
-			right: 10px;
-			width: 60px;
-			height: 20px;
-		}
-	</style>
-</head>
-<body>
-	<div id="fps">0</div>
-	<canvas id="renderCanvas" touch-action="none"></canvas>
-	
-	<script>
-		var canvas = document.getElementById("renderCanvas");
-	//	canvas = WebGLDebugUtils.makeLostContextSimulatingCanvas(canvas);
-		var divFps = document.getElementById("fps");
-
-		// Global to simulate PG.
-		var engine = null;
-
-		// Allow querystring to navigate easily in debug in local samples.
-		var indexjs = 'src/index';
-		var sampleSearch = /sample=([0-9]+)/i;
-		var matches = null;
-		if ((matches = sampleSearch.exec(window.location)) !== null) {			
-			indexjs += '.';
-			indexjs += matches[1];
-		}
-		indexjs += '.js';
-
-		// Load the scripts + map file to allow vscode debug.
-		BABYLONDEVTOOLS.Loader
-			.require(indexjs)
-			.load(function() {
-				if (BABYLON.Engine.isSupported()) {
-					engine = new BABYLON.Engine(canvas, true, { stencil: true, disableWebGL2Support: false, preserveDrawingBuffer: true });
-					BABYLONDEVTOOLS.Loader.debugShortcut(engine);
-
-					// call the scene creation from the js.
-					if (typeof delayCreateScene !== "undefined") {
-						var scene = delayCreateScene();
-
-						if (scene) {
-							// Register a render loop to repeatedly render the scene
-
-							engine.runRenderLoop(function () {
-								if (scene.activeCamera) {
-									scene.render();
-								}
-								divFps.innerHTML = engine.getFps().toFixed() + " fps";
-							});
-						}
-					}
-					else {
-						var scene = createScene();
-
-						if (scene) {
-							// Register a render loop to repeatedly render the scene
-
-							engine.runRenderLoop(function () {
-								scene.render();
-								divFps.innerHTML = engine.getFps().toFixed() + " fps";
-							});
-						}
-					}
-
-					// Resize
-					window.addEventListener("resize", function () {
-						engine.resize();
-					});
-					
-				}
-				else {
-					alert('BabylonJS is not supported.')
-				}
-			});
-	</script>
-</body>
-</html>
+
+    <head>
+        <title>Local Development</title>
+
+        <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
+        <script src="https://preview.babylonjs.com/cannon.js"></script>
+        <script src="https://preview.babylonjs.com/Oimo.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
+        <script src="../Tools/DevLoader/BabylonLoader.js"></script>
+        <script src="src/webgl-debug.js"></script>
+
+        <style>
+            html,
+            body {
+                width: 100%;
+                height: 100%;
+                padding: 0;
+                margin: 0;
+                overflow: hidden;
+            }
+
+            #renderCanvas {
+                width: 100%;
+                height: 100%;
+            }
+
+            #fps {
+                position: absolute;
+                background-color: black;
+                border: 2px solid red;
+                text-align: center;
+                font-size: 16px;
+                color: white;
+                top: 15px;
+                right: 10px;
+                width: 60px;
+                height: 20px;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div id="fps">0</div>
+        <canvas id="renderCanvas" touch-action="none"></canvas>
+
+        <script>
+            var canvas = document.getElementById("renderCanvas");
+            //	canvas = WebGLDebugUtils.makeLostContextSimulatingCanvas(canvas);
+            var divFps = document.getElementById("fps");
+
+            // Global to simulate PG.
+            var engine = null;
+
+            // Allow querystring to navigate easily in debug in local samples.
+            var indexjs = 'src/index';
+            var sampleSearch = /sample=([0-9]+)/i;
+            var matches = null;
+            if ((matches = sampleSearch.exec(window.location)) !== null) {
+                indexjs += '.';
+                indexjs += matches[1];
+            }
+            indexjs += '.js';
+
+            // Load the scripts + map file to allow vscode debug.
+            BABYLONDEVTOOLS.Loader
+                .require(indexjs)
+                .load(function () {
+                    if (BABYLON.Engine.isSupported()) {
+                        if (typeof createEngine !== "undefined") {
+                            engine = createEngine();
+                        } else {
+                            engine = new BABYLON.Engine(canvas, true, { stencil: true, disableWebGL2Support: false, preserveDrawingBuffer: true });
+                        }
+
+                        BABYLONDEVTOOLS.Loader.debugShortcut(engine);
+
+                        // call the scene creation from the js.
+                        if (typeof delayCreateScene !== "undefined") {
+                            var scene = delayCreateScene();
+
+                            if (scene) {
+                                // Register a render loop to repeatedly render the scene
+
+                                engine.runRenderLoop(function () {
+                                    if (scene.activeCamera) {
+                                        scene.render();
+                                    }
+                                    divFps.innerHTML = engine.getFps().toFixed() + " fps";
+                                });
+                            }
+                        }
+                        else {
+                            var scene = createScene();
+
+                            if (scene) {
+                                // Register a render loop to repeatedly render the scene
+
+                                engine.runRenderLoop(function () {
+                                    scene.render();
+                                    divFps.innerHTML = engine.getFps().toFixed() + " fps";
+                                });
+                            }
+                        }
+
+                        // Resize
+                        window.addEventListener("resize", function () {
+                            engine.resize();
+                        });
+
+                    }
+                    else {
+                        alert('BabylonJS is not supported.')
+                    }
+                });
+        </script>
+    </body>
+
+</html>