Merge pull request #182 from nicolas-obre/WinJSApplication

Tools improvement

Babylon/Tools/babylon.filesInput.js

@@ -18,8 +18,6 @@ var BABYLON = BABYLON || {};
         this.additionnalRenderLoopLogicCallback = p_additionnalRenderLoopLogicCallback;
         this.textureLoadingCallback = p_textureLoadingCallback;
         this.startingProcessingFilesCallback = p_startingProcessingFilesCallback;
-
-        this.engine.runRenderLoop(renderFunction);
     };
 
     // elementToMonitor is the HTML element that will listen to drag'n'drop events
@@ -95,6 +93,7 @@ var BABYLON = BABYLON || {};
             // If a ".babylon" file has been provided
             if (sceneFileToLoad) {
                 if (that.currentScene) {
+                    that.engine.stopRenderLoop();
                     that.currentScene.dispose();
                 }
 
@@ -104,10 +103,13 @@ var BABYLON = BABYLON || {};
                     // Wait for textures and shaders to be ready
                     that.currentScene.executeWhenReady(function () {
                         // Attach camera to canvas inputs
-                        that.currentScene.activeCamera.attachControl(that.canvas);
+                        if (that.currentScene.activeCamera) {
+                            that.currentScene.activeCamera.attachControl(that.canvas);
+                        }
                         if (that.sceneLoadedCallback) {
                             that.sceneLoadedCallback(sceneFileToLoad, that.currentScene);
                         }
+                        that.engine.runRenderLoop(renderFunction);
                     });
                 }, function (progress) {
                     if (that.progressCallback) {

Tools/BuildOurOwnBabylonJS/BabylonJS/BabylonJS.csproj

@@ -39,7 +39,7 @@
     <Resource Include="..\..\..\cannon.js">
       <Link>cannon.js</Link>
     </Resource>
-    <Resource Include="..\..\..\babylon.*.*.*.js">
+    <Resource Include="..\..\..\babylon.*.*.js">
       <Link>%(Filename)%(Extension)</Link>
     </Resource>
     <Resource Include="..\..\..\Babylon\**\*.*">

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJS.sln

@@ -9,52 +9,116 @@ Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BuildOurOwnBabylonJSServer"
 EndProject
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BuildOurOwnBabylonJS", "BuildOurOwnBabylonJS\BuildOurOwnBabylonJS.csproj", "{CFBE5149-1605-4824-8BD2-55C9B3C1DA60}"
 EndProject
+Project("{262852C6-CD72-467D-83FE-5EEB1973A190}") = "BuildOurOwnBabylonJSWinJSApp", "BuildOurOwnBabylonJSWinJSApp\BuildOurOwnBabylonJSWinJSApp.jsproj", "{7CDB4B83-4E3E-48D1-B982-9C33CA60712A}"
+EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BuildOurOwnBabylonJSShared", "BuildOurOwnBabylonJSShared\BuildOurOwnBabylonJSShared.csproj", "{F0ABEBA9-1D9B-47C8-9033-E054BF198791}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
+		Debug|ARM = Debug|ARM
 		Debug|Mixed Platforms = Debug|Mixed Platforms
+		Debug|x64 = Debug|x64
 		Debug|x86 = Debug|x86
 		Release|Any CPU = Release|Any CPU
+		Release|ARM = Release|ARM
 		Release|Mixed Platforms = Release|Mixed Platforms
+		Release|x64 = Release|x64
 		Release|x86 = Release|x86
 	EndGlobalSection
 	GlobalSection(ProjectConfigurationPlatforms) = postSolution
 		{0263AD0D-56E6-4439-BC05-6EC957200F52}.Debug|Any CPU.ActiveCfg = Debug|x86
 		{0263AD0D-56E6-4439-BC05-6EC957200F52}.Debug|Any CPU.Build.0 = Debug|x86
+		{0263AD0D-56E6-4439-BC05-6EC957200F52}.Debug|ARM.ActiveCfg = Debug|x86
 		{0263AD0D-56E6-4439-BC05-6EC957200F52}.Debug|Mixed Platforms.ActiveCfg = Debug|x86
 		{0263AD0D-56E6-4439-BC05-6EC957200F52}.Debug|Mixed Platforms.Build.0 = Debug|x86
+		{0263AD0D-56E6-4439-BC05-6EC957200F52}.Debug|x64.ActiveCfg = Debug|x86
 		{0263AD0D-56E6-4439-BC05-6EC957200F52}.Debug|x86.ActiveCfg = Debug|x86
 		{0263AD0D-56E6-4439-BC05-6EC957200F52}.Debug|x86.Build.0 = Debug|x86
 		{0263AD0D-56E6-4439-BC05-6EC957200F52}.Release|Any CPU.ActiveCfg = Release|x86
 		{0263AD0D-56E6-4439-BC05-6EC957200F52}.Release|Any CPU.Build.0 = Release|x86
+		{0263AD0D-56E6-4439-BC05-6EC957200F52}.Release|ARM.ActiveCfg = Release|x86
 		{0263AD0D-56E6-4439-BC05-6EC957200F52}.Release|Mixed Platforms.ActiveCfg = Release|x86
 		{0263AD0D-56E6-4439-BC05-6EC957200F52}.Release|Mixed Platforms.Build.0 = Release|x86
+		{0263AD0D-56E6-4439-BC05-6EC957200F52}.Release|x64.ActiveCfg = Release|x86
 		{0263AD0D-56E6-4439-BC05-6EC957200F52}.Release|x86.ActiveCfg = Release|x86
 		{0263AD0D-56E6-4439-BC05-6EC957200F52}.Release|x86.Build.0 = Release|x86
 		{93EF5B02-72EB-4B55-831E-E5051269EDA6}.Debug|Any CPU.ActiveCfg = Debug|x86
 		{93EF5B02-72EB-4B55-831E-E5051269EDA6}.Debug|Any CPU.Build.0 = Debug|x86
+		{93EF5B02-72EB-4B55-831E-E5051269EDA6}.Debug|ARM.ActiveCfg = Debug|x86
 		{93EF5B02-72EB-4B55-831E-E5051269EDA6}.Debug|Mixed Platforms.ActiveCfg = Debug|x86
 		{93EF5B02-72EB-4B55-831E-E5051269EDA6}.Debug|Mixed Platforms.Build.0 = Debug|x86
+		{93EF5B02-72EB-4B55-831E-E5051269EDA6}.Debug|x64.ActiveCfg = Debug|x86
 		{93EF5B02-72EB-4B55-831E-E5051269EDA6}.Debug|x86.ActiveCfg = Debug|x86
 		{93EF5B02-72EB-4B55-831E-E5051269EDA6}.Debug|x86.Build.0 = Debug|x86
 		{93EF5B02-72EB-4B55-831E-E5051269EDA6}.Release|Any CPU.ActiveCfg = Release|x86
 		{93EF5B02-72EB-4B55-831E-E5051269EDA6}.Release|Any CPU.Build.0 = Release|x86
+		{93EF5B02-72EB-4B55-831E-E5051269EDA6}.Release|ARM.ActiveCfg = Release|x86
 		{93EF5B02-72EB-4B55-831E-E5051269EDA6}.Release|Mixed Platforms.ActiveCfg = Release|x86
 		{93EF5B02-72EB-4B55-831E-E5051269EDA6}.Release|Mixed Platforms.Build.0 = Release|x86
+		{93EF5B02-72EB-4B55-831E-E5051269EDA6}.Release|x64.ActiveCfg = Release|x86
 		{93EF5B02-72EB-4B55-831E-E5051269EDA6}.Release|x86.ActiveCfg = Release|x86
 		{93EF5B02-72EB-4B55-831E-E5051269EDA6}.Release|x86.Build.0 = Release|x86
 		{CFBE5149-1605-4824-8BD2-55C9B3C1DA60}.Debug|Any CPU.ActiveCfg = Debug|x86
 		{CFBE5149-1605-4824-8BD2-55C9B3C1DA60}.Debug|Any CPU.Build.0 = Debug|x86
+		{CFBE5149-1605-4824-8BD2-55C9B3C1DA60}.Debug|ARM.ActiveCfg = Debug|x86
 		{CFBE5149-1605-4824-8BD2-55C9B3C1DA60}.Debug|Mixed Platforms.ActiveCfg = Debug|x86
 		{CFBE5149-1605-4824-8BD2-55C9B3C1DA60}.Debug|Mixed Platforms.Build.0 = Debug|x86
+		{CFBE5149-1605-4824-8BD2-55C9B3C1DA60}.Debug|x64.ActiveCfg = Debug|x86
 		{CFBE5149-1605-4824-8BD2-55C9B3C1DA60}.Debug|x86.ActiveCfg = Debug|x86
 		{CFBE5149-1605-4824-8BD2-55C9B3C1DA60}.Debug|x86.Build.0 = Debug|x86
 		{CFBE5149-1605-4824-8BD2-55C9B3C1DA60}.Release|Any CPU.ActiveCfg = Release|x86
 		{CFBE5149-1605-4824-8BD2-55C9B3C1DA60}.Release|Any CPU.Build.0 = Release|x86
+		{CFBE5149-1605-4824-8BD2-55C9B3C1DA60}.Release|ARM.ActiveCfg = Release|x86
 		{CFBE5149-1605-4824-8BD2-55C9B3C1DA60}.Release|Mixed Platforms.ActiveCfg = Release|x86
 		{CFBE5149-1605-4824-8BD2-55C9B3C1DA60}.Release|Mixed Platforms.Build.0 = Release|x86
+		{CFBE5149-1605-4824-8BD2-55C9B3C1DA60}.Release|x64.ActiveCfg = Release|x86
 		{CFBE5149-1605-4824-8BD2-55C9B3C1DA60}.Release|x86.ActiveCfg = Release|x86
 		{CFBE5149-1605-4824-8BD2-55C9B3C1DA60}.Release|x86.Build.0 = Release|x86
+		{7CDB4B83-4E3E-48D1-B982-9C33CA60712A}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{7CDB4B83-4E3E-48D1-B982-9C33CA60712A}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{7CDB4B83-4E3E-48D1-B982-9C33CA60712A}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
+		{7CDB4B83-4E3E-48D1-B982-9C33CA60712A}.Debug|ARM.ActiveCfg = Debug|ARM
+		{7CDB4B83-4E3E-48D1-B982-9C33CA60712A}.Debug|ARM.Build.0 = Debug|ARM
+		{7CDB4B83-4E3E-48D1-B982-9C33CA60712A}.Debug|ARM.Deploy.0 = Debug|ARM
+		{7CDB4B83-4E3E-48D1-B982-9C33CA60712A}.Debug|Mixed Platforms.ActiveCfg = Debug|x86
+		{7CDB4B83-4E3E-48D1-B982-9C33CA60712A}.Debug|Mixed Platforms.Build.0 = Debug|x86
+		{7CDB4B83-4E3E-48D1-B982-9C33CA60712A}.Debug|Mixed Platforms.Deploy.0 = Debug|x86
+		{7CDB4B83-4E3E-48D1-B982-9C33CA60712A}.Debug|x64.ActiveCfg = Debug|x64
+		{7CDB4B83-4E3E-48D1-B982-9C33CA60712A}.Debug|x64.Build.0 = Debug|x64
+		{7CDB4B83-4E3E-48D1-B982-9C33CA60712A}.Debug|x64.Deploy.0 = Debug|x64
+		{7CDB4B83-4E3E-48D1-B982-9C33CA60712A}.Debug|x86.ActiveCfg = Debug|x86
+		{7CDB4B83-4E3E-48D1-B982-9C33CA60712A}.Debug|x86.Build.0 = Debug|x86
+		{7CDB4B83-4E3E-48D1-B982-9C33CA60712A}.Debug|x86.Deploy.0 = Debug|x86
+		{7CDB4B83-4E3E-48D1-B982-9C33CA60712A}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{7CDB4B83-4E3E-48D1-B982-9C33CA60712A}.Release|Any CPU.Build.0 = Release|Any CPU
+		{7CDB4B83-4E3E-48D1-B982-9C33CA60712A}.Release|Any CPU.Deploy.0 = Release|Any CPU
+		{7CDB4B83-4E3E-48D1-B982-9C33CA60712A}.Release|ARM.ActiveCfg = Release|ARM
+		{7CDB4B83-4E3E-48D1-B982-9C33CA60712A}.Release|ARM.Build.0 = Release|ARM
+		{7CDB4B83-4E3E-48D1-B982-9C33CA60712A}.Release|ARM.Deploy.0 = Release|ARM
+		{7CDB4B83-4E3E-48D1-B982-9C33CA60712A}.Release|Mixed Platforms.ActiveCfg = Release|x86
+		{7CDB4B83-4E3E-48D1-B982-9C33CA60712A}.Release|Mixed Platforms.Build.0 = Release|x86
+		{7CDB4B83-4E3E-48D1-B982-9C33CA60712A}.Release|Mixed Platforms.Deploy.0 = Release|x86
+		{7CDB4B83-4E3E-48D1-B982-9C33CA60712A}.Release|x64.ActiveCfg = Release|x64
+		{7CDB4B83-4E3E-48D1-B982-9C33CA60712A}.Release|x64.Build.0 = Release|x64
+		{7CDB4B83-4E3E-48D1-B982-9C33CA60712A}.Release|x64.Deploy.0 = Release|x64
+		{7CDB4B83-4E3E-48D1-B982-9C33CA60712A}.Release|x86.ActiveCfg = Release|x86
+		{7CDB4B83-4E3E-48D1-B982-9C33CA60712A}.Release|x86.Build.0 = Release|x86
+		{7CDB4B83-4E3E-48D1-B982-9C33CA60712A}.Release|x86.Deploy.0 = Release|x86
+		{F0ABEBA9-1D9B-47C8-9033-E054BF198791}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{F0ABEBA9-1D9B-47C8-9033-E054BF198791}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{F0ABEBA9-1D9B-47C8-9033-E054BF198791}.Debug|ARM.ActiveCfg = Debug|Any CPU
+		{F0ABEBA9-1D9B-47C8-9033-E054BF198791}.Debug|Mixed Platforms.ActiveCfg = Debug|Any CPU
+		{F0ABEBA9-1D9B-47C8-9033-E054BF198791}.Debug|Mixed Platforms.Build.0 = Debug|Any CPU
+		{F0ABEBA9-1D9B-47C8-9033-E054BF198791}.Debug|x64.ActiveCfg = Debug|Any CPU
+		{F0ABEBA9-1D9B-47C8-9033-E054BF198791}.Debug|x86.ActiveCfg = Debug|Any CPU
+		{F0ABEBA9-1D9B-47C8-9033-E054BF198791}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{F0ABEBA9-1D9B-47C8-9033-E054BF198791}.Release|Any CPU.Build.0 = Release|Any CPU
+		{F0ABEBA9-1D9B-47C8-9033-E054BF198791}.Release|ARM.ActiveCfg = Release|Any CPU
+		{F0ABEBA9-1D9B-47C8-9033-E054BF198791}.Release|Mixed Platforms.ActiveCfg = Release|Any CPU
+		{F0ABEBA9-1D9B-47C8-9033-E054BF198791}.Release|Mixed Platforms.Build.0 = Release|Any CPU
+		{F0ABEBA9-1D9B-47C8-9033-E054BF198791}.Release|x64.ActiveCfg = Release|Any CPU
+		{F0ABEBA9-1D9B-47C8-9033-E054BF198791}.Release|x86.ActiveCfg = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSServer/BuildOurOwnBabylonJSServer.csproj

@@ -54,6 +54,9 @@
   </PropertyGroup>
   <ItemGroup>
     <Reference Include="Microsoft.CSharp" />
+    <Reference Include="Newtonsoft.Json">
+      <HintPath>..\packages\Newtonsoft.Json.6.0.2\lib\net45\Newtonsoft.Json.dll</HintPath>
+    </Reference>
     <Reference Include="System.Data.DataSetExtensions" />
     <Reference Include="System.Data.Entity" />
     <Reference Include="System" />
@@ -78,6 +81,7 @@
   </ItemGroup>
   <ItemGroup>
     <Compile Include="Controllers\BabylonJSDemoController.cs" />
+    <Compile Include="Controllers\SandBoxController.cs" />
     <Compile Include="Controllers\OurDemoController.cs" />
     <Compile Include="ViewModel\OurDemoViewModel.cs" />
     <Compile Include="WebViewPageExtensions.cs" />
@@ -89,6 +93,7 @@
     <Compile Include="Properties\AssemblyInfo.cs" />
   </ItemGroup>
   <ItemGroup>
+    <Content Include="Content\Loading.css" />
     <Content Include="Content\Logo.png" />
     <Content Include="Content\themes\base\images\ui-bg_flat_0_aaaaaa_40x100.png" />
     <Content Include="Content\themes\base\images\ui-bg_flat_75_ffffff_40x100.png" />
@@ -168,6 +173,9 @@
       <Private>True</Private>
     </ProjectReference>
   </ItemGroup>
+  <ItemGroup>
+    <Content Include="Views\SandBox\Index.cshtml" />
+  </ItemGroup>
   <PropertyGroup>
     <VisualStudioVersion Condition="'$(VisualStudioVersion)' == ''">10.0</VisualStudioVersion>
     <VSToolsPath Condition="'$(VSToolsPath)' == ''">$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)</VSToolsPath>

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSServer/Content/Loading.css

@@ -0,0 +1,66 @@
+#loadingBack {
+    background-color: #FFFFFF;
+    border: 1px solid #888888;
+    cursor: default;
+    height: 60px;
+    left: 0;
+    margin-top: -30px;
+    position: absolute;
+    top: 50%;
+    transition: transform 0.25s ease-in-out 0s;
+    width: 100%;
+    z-index: 3;
+}
+.loadingBack {
+    transform: translateX(-120%);
+    -webkit-transform: translate(-120%);
+}
+
+
+#loadingText {
+    color: #888888;
+    cursor: default;
+    font-size: 30px;
+    height: 60px;
+    left: 0;
+    margin-top: -30px;
+    padding-top: 10px;
+    position: absolute;
+    text-align: center;
+    top: 50%;
+    transition: transform 0.25s ease-in-out 0s;
+    width: 100%;
+    z-index: 3;
+}
+.loadingText {
+    transform: translateX(120%);
+    -webkit-transform: translate(120%);
+}
+
+#loadingInfos {
+    color: #888888;
+    cursor: default;
+    font-size: 30px;
+    height: 60px;
+    left: 0;
+    margin-top: -30px;
+    padding-top: 10px;
+    position: absolute;
+    text-align: center;
+    bottom: 0;
+    transition: transform 0.25s ease-in-out 0s;
+    width: calc(100% - 10px);
+    z-index: 3;
+    border: 5px dotted gray;
+    pointer-events: none;
+}
+
+#loadingInfos .content {
+    position: relative;
+    top: 50%;
+}
+
+.loadingInfos {
+    transform: translateX(120%);
+    -webkit-transform: translate(120%);
+}

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSServer/Controllers/BuildOurOwnBabylonJSController.cs

@@ -2,59 +2,102 @@
 using System.IO;
 using System.Text;
 using System;
+using Newtonsoft.Json.Linq;
+using System.Collections.Generic;
 
 namespace BuildOurOwnBabylonJSServer.Controllers
 {
     public class BuildOurOwnBabylonJSController : Controller
     {
         public const string GetFileContentActionName = "GetFileContent";
+        public const string GetBabylonScenesActionName = "GetBabylonScenes";
         
         [ActionName(BuildOurOwnBabylonJSController.GetFileContentActionName)]
         public ActionResult GetFileContent(string rootPath, string relPath)
         {
-            var babylonJSPath = Path.Combine(Server.MapPath("~"), rootPath);
+            try
+            {
+                var babylonJSPath = Path.Combine(Server.MapPath("~"), rootPath);
+
+                var absPath = Path.Combine(babylonJSPath, relPath);
+
+                var type = "";
+                var extension = "";
+
+                if (!String.IsNullOrEmpty(relPath))
+                    extension = Path.GetExtension(relPath).ToLower();
 
-            var absPath = Path.Combine(babylonJSPath, relPath);
+                switch (extension)
+                {
+                    case ".js":
+                    case ".babylon":
+                    case ".manifest":
+                        type = "text/javascript";
+                        break;
 
-            var type = "";
-            var extension = "";
+                    case ".png":
+                        type = "image/png";
+                        break;
 
-            if (!String.IsNullOrEmpty(relPath))
-                extension = Path.GetExtension(relPath).ToLower();
+                    case ".jpeg":
+                    case ".jpg":
+                        type = "image/jpeg";
+                        break;
 
-            switch (extension)
+                    case ".bmp":
+                        type = "image/bmp";
+                        break;
+
+                    case ".css":
+                        type = "text/css";
+                        break;
+
+                    default:
+                        type = "text/plain";
+                        break;
+                }
+            
+                return File(new FileStream(absPath, FileMode.Open), type);
+            }
+            catch
             {
-                case ".js":
-                case ".babylon":
-                case ".manifest":
-                    type = "text/javascript";
-                    break;
-
-                case ".png":
-                    type = "image/png";
-                    break;
-
-                case ".jpeg":
-                case ".jpg":
-                    type = "image/jpeg";
-                    break;
-
-                case ".bmp":
-                    type = "image/bmp";
-                    break;
-
-                default:
-                    type = "text/plain";
-                    break;
+                return new HttpNotFoundResult();
             }
+        }
 
+        [ActionName(BuildOurOwnBabylonJSController.GetBabylonScenesActionName)]
+        public string GetBabylonScenes(string rootPath)
+        {
             try
             {
-                return File(new FileStream(absPath, FileMode.Open), type);
+                var dir = new DirectoryInfo(rootPath);
+                var subDirs = dir.GetDirectories();
+                var files = new List<JObject>();
+
+                foreach (var directory in subDirs)
+                {
+                    var babylonFiles = directory.GetFiles("*.babylon");
+
+                    if (babylonFiles.Length == 0)
+                        continue;
+
+                    foreach (var file in babylonFiles)
+                    {
+                        var linkName = directory.Name + (file.Name.Contains(".incremental.babylon") ? " - Incremental" : "");
+                        files.Add(new JObject(
+                            new JProperty("url", Url.Action("Index", "BabylonJSDemo", new { demoFolderName = directory.Name, demoFile = file.Name })),
+                            new JProperty("linkName", linkName)
+                        ));
+                    }
+                }
+
+                var json = new JObject(new JProperty("files", files));
+                return json.ToString(Newtonsoft.Json.Formatting.None);
             }
             catch
             {
-                return new HttpNotFoundResult();
+                var json = new JObject(new JProperty("files", ""));
+                return json.ToString(Newtonsoft.Json.Formatting.None);
             }
         }
     }

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSServer/Controllers/SandBoxController.cs

@@ -0,0 +1,16 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Web;
+using System.Web.Mvc;
+
+namespace BuildOurOwnBabylonJSServer.Controllers
+{
+    public class SandBoxController : Controller
+    {
+        public ActionResult Index()
+        {
+            return View();
+        }
+    }
+}

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSServer/Views/BabylonJSDemo/Index.cshtml

@@ -6,10 +6,15 @@
 
 <script type="text/javascript">
     $(document).ready(function () {
+
+        var loading = new OURBABYLON.Loading(OURBABYLON.canvas.parentElement);
+
+        loading.show();
+
         BABYLON.SceneLoader.Load("@Html.Raw(this.BabylonJSSamplesFile("Scenes/" + (string)ViewBag.DemoFolderName))" + "@Url.Encode("/")", "@ViewBag.DemoFile", OURBABYLON.engine, function (scene) {
-            
+            OURBABYLON.sceneInitialization(scene);
             scene.activeCamera.attachControl(OURBABYLON.canvas);
-            
+
             // Render loop
             var renderLoop = function () {
                 scene.render();
@@ -18,7 +23,8 @@
             // Launch render loop
             scene.getEngine().runRenderLoop(renderLoop);
 
-            OURBABYLON.currentScene = scene;
-        });
+            loading.hide();
+
+        }, $.proxy(loading.onProgress, loading));
     });
 </script>

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSServer/Views/SandBox/Index.cshtml

@@ -0,0 +1,56 @@
+@{
+    ViewBag.Title = "Our Own BabylonJS";
+    ViewBag.BabylonJSFolder = "..\\..\\..\\";
+}
+<style>
+    #loadingInfos {
+        color: #888888;
+        cursor: default;
+        font-size: 30px;
+        height: 60px;
+        left: 0;
+        margin-top: -30px;
+        padding-top: 10px;
+        position: absolute;
+        text-align: center;
+        bottom: 0;
+        transition: transform 0.25s ease-in-out 0s;
+        width: calc(100% - 10px);
+        z-index: 3;
+        border: 5px dotted gray;
+        pointer-events: none;
+    }
+
+    #loadingInfos .content {
+        position: relative;
+        top: 50%;
+    }
+
+    .loadingInfos {
+        transform: translateX(120%);
+        -webkit-transform: translate(120%);
+    }
+</style>
+<div id="loadingInfos"><div class="content">Drag and drop your .babylon files inside, with associated assets</div></div>
+
+<script type="text/javascript">
+    $(document).ready(function () {
+        var loading = new OURBABYLON.Loading(OURBABYLON.canvas.parentElement);
+
+        var loadingInfos = document.getElementById("loadingInfos");
+
+        loadingInfos.style.height = (OURBABYLON.canvas.height-20)+"px";
+        window.addEventListener('resize', function () {
+            loadingInfos.style.height = (OURBABYLON.canvas.height - 20) + "px";
+        });
+
+        var filesInput = new BABYLON.FilesInput(OURBABYLON.engine, OURBABYLON.currentScene, OURBABYLON.canvas, function (sceneFile, babylonScene) {
+            OURBABYLON.sceneInitialization(babylonScene, true);
+            loading.hide();
+        }, $.proxy(loading.onProgress, loading), null, null, function () {
+            loading.show();
+            loadingInfos.className = "loadingInfos";
+        });
+        filesInput.monitorElementForDragNDrop(OURBABYLON.canvas);
+    });
+</script>

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSServer/Views/Shared/_Layout.cshtml

@@ -9,20 +9,34 @@
     <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
     @if (ViewBag.DoNotUseBabylonJS == null)
     {
+        @Html.Raw(this.BabylonJSStyle(@"Tools\BuildOurOwnBabylonJS\BuildOurOwnBabylonJSShared\Style\Loading.css"))
         @Html.Raw(this.BabylonJSScript("cannon.js"))
         @Html.Raw(this.BabylonJSScript(@"Tools\BuildOurOwnBabylonJS\BuildOurOwnBabylonJS\ourOwnBabylon.js"))
+        @Html.Raw(this.BabylonJSScript(@"Tools\BuildOurOwnBabylonJS\BuildOurOwnBabylonJSShared\Scripts\Loading.js"))
         <script type="text/javascript">
-            $(document).ready(function () {
+            var OURBABYLON = OURBABYLON || {};
+            $(document).ready(function(){
                 if (!BABYLON.Engine.isSupported()) {
                     alert("Your browser does not support WebGL so you can't use BabylonJS on it");
                     return;
                 }
 
-                var OURBABYLON = {};
-
-                OURBABYLON.canvas = $("#ourOwnBabylonJSCanvas")[0];
+                OURBABYLON.canvas = document.getElementById("ourOwnBabylonJSCanvas");
                 OURBABYLON.engine = new BABYLON.Engine(OURBABYLON.canvas, true);
 
+                OURBABYLON.sceneInitialization = function (scene, attachControlToCamera) {
+                    OURBABYLON.currentScene = scene;
+                    if (!OURBABYLON.currentScene.activeCamera) {
+                        OURBABYLON.currentScene.activeCamera = new BABYLON.ArcRotateCamera("DefaultCamera", Math.PI / 2, 0, 10, new BABYLON.Vector3.Zero(), OURBABYLON.currentScene);
+                        OURBABYLON.currentScene.activeCamera.zoomOn();
+                        if (attachControlToCamera) {
+                            OURBABYLON.currentScene.activeCamera.attachControl(OURBABYLON.canvas);
+                        }
+                    }
+                    if (OURBABYLON.currentScene.lights.length == 0) {
+                        var light = new BABYLON.HemisphericLight("Default light", new BABYLON.Vector3(0, 1, 0), OURBABYLON.currentScene);
+                    }
+                };
                 window.addEventListener("resize", function () {
                     OURBABYLON.engine.resize();
                 });
@@ -37,19 +51,7 @@
         <div id="title">
             <h1>@ViewBag.Title</h1>
             <div id="menu">
-                <a href="@Url.Action("Index", "BabylonJSDemo", new { demoFolderName = "Blender", demoFile = "blender.babylon" })">Blender</a>
-                | <a href="@Url.Action("Index", "BabylonJSDemo", new { demoFolderName = "Dude", demoFile = "Dude.babylon" })">Dude</a>
-                | <a href="@Url.Action("Index", "BabylonJSDemo", new { demoFolderName = "Espilit", demoFile = "Espilit.incremental.babylon" })">Espilit</a>
-                | <a href="@Url.Action("Index", "BabylonJSDemo", new { demoFolderName = "Flat2009", demoFile = "Flat2009.babylon" })">Flat2009</a>
-                | <a href="@Url.Action("Index", "BabylonJSDemo", new { demoFolderName = "Heart", demoFile = "Heart.babylon" })">Heart</a>
-                | <a href="@Url.Action("Index", "BabylonJSDemo", new { demoFolderName = "Rabbit", demoFile = "Rabbit.babylon" })">Rabbit</a>
-                | <a href="@Url.Action("Index", "BabylonJSDemo", new { demoFolderName = "Robot", demoFile = "Robot.babylon" })">Robot</a>
-                | <a href="@Url.Action("Index", "BabylonJSDemo", new { demoFolderName = "SpaceDek", demoFile = "SpaceDek.babylon" })">SpaceDek</a>
-                | <a href="@Url.Action("Index", "BabylonJSDemo", new { demoFolderName = "Spaceship", demoFile = "Spaceship.babylon" })">Spaceship</a>
-                | <a href="@Url.Action("Index", "BabylonJSDemo", new { demoFolderName = "TheCar", demoFile = "TheCar.incremental.babylon" })">TheCar</a>
-                | <a href="@Url.Action("Index", "BabylonJSDemo", new { demoFolderName = "Train", demoFile = "Train.babylon" })">Train</a>
-                | <a href="@Url.Action("Index", "BabylonJSDemo", new { demoFolderName = "Viper", demoFile = "Viper.babylon" })">Viper</a>
-                | <a href="@Url.Action("Index", "BabylonJSDemo", new { demoFolderName = "WCafe", demoFile = "WCafe.babylon" })">WCafe</a>
+                <a href="@Url.Action("Index", "SandBox")">Sandbox</a>
             </div>
         </div>
         @if (ViewBag.DoNotUseBabylonJS == null)
@@ -57,6 +59,31 @@
         <canvas id="ourOwnBabylonJSCanvas"></canvas>
         }
         @RenderBody()
+        <script type="text/javascript">
+            var menu = document.getElementById("menu");
+
+            var req = new XMLHttpRequest();
+            req.open('GET', "@Html.Raw(this.BabylonJSSamplesFolder())");
+            req.onreadystatechange = function (evt) {
+                if (req.readyState == 4) {
+                    if (req.status == 200) {
+                        var json = JSON.parse(req.responseText);
+                        for (var i in json.files) {
+                            var span = document.createElement("span");
+                            span.innerHTML = " | ";
+                            menu.appendChild(span);
+
+                            var file = json.files[i];
+                            var a = document.createElement("a");
+                            a.setAttribute("href", file.url);
+                            a.textContent = file.linkName.charAt(0).toUpperCase() + file.linkName.slice(1);
+                            menu.appendChild(a);
+                        }
+                    }
+                }
+            };
+            req.send(null);
+        </script>
     </div>
 </body>
 </html>

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSServer/WebViewPageExtensions.cs

@@ -41,6 +41,24 @@ namespace BuildOurOwnBabylonJSServer.Extensions
             return page.Html.Raw(script.ToString(TagRenderMode.Normal));
         }
 
+        public static IHtmlString BabylonJSStyle(this WebViewPage page,
+            string relPathToBabylonJSFolder) 
+        {
+            if (page == null)
+                return null;
+
+            var type = "text/css";
+
+            var src = page.BabylonJSFile(relPathToBabylonJSFolder);
+
+            var script = new TagBuilder("link");
+            script.Attributes.Add("href", src);
+            script.Attributes.Add("type", type);
+            script.Attributes.Add("rel", "stylesheet");
+
+            return page.Html.Raw(script.ToString(TagRenderMode.Normal));
+        }
+
         public static string BabylonJSSamplesFile(this WebViewPage page,
             string relPathToBabylonJSSamplesFolder)
         {
@@ -57,5 +75,20 @@ namespace BuildOurOwnBabylonJSServer.Extensions
 
             return url;
         }
+
+
+        public static string BabylonJSSamplesFolder(this WebViewPage page)
+        {
+            if (page == null)
+                return null;
+
+            var babylonJSSamplesDirFullPath = Environment.GetEnvironmentVariable("BabylonJSSamplesDirFullPath") + "\\Scenes";
+
+            var url = page.Url.Action(BuildOurOwnBabylonJSController.GetBabylonScenesActionName,
+                                      "BuildOurOwnBabylonJS",
+                                      new { rootPath = babylonJSSamplesDirFullPath },
+                                      page.Request.Url.Scheme);
+            return url;
+        }
     }
 }

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSServer/packages.config

@@ -6,4 +6,5 @@
   <package id="jQuery.Validation" version="1.8.0" />
   <package id="jQuery.vsdoc" version="1.5.1" />
   <package id="Modernizr" version="1.7" />
+  <package id="Newtonsoft.Json" version="6.0.2" targetFramework="net45" />
 </packages>

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSShared/BuildOurOwnBabylonJSShared.csproj

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project ToolsVersion="12.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />
+  <PropertyGroup>
+    <Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
+    <Platform Condition=" '$(Platform)' == '' ">AnyCPU</Platform>
+    <ProjectGuid>{F0ABEBA9-1D9B-47C8-9033-E054BF198791}</ProjectGuid>
+    <OutputType>Library</OutputType>
+    <AppDesignerFolder>Properties</AppDesignerFolder>
+    <RootNamespace>BuildOurOwnBabylonJSShared</RootNamespace>
+    <AssemblyName>BuildOurOwnBabylonJSShared</AssemblyName>
+    <TargetFrameworkVersion>v4.5</TargetFrameworkVersion>
+    <FileAlignment>512</FileAlignment>
+  </PropertyGroup>
+  <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Debug|AnyCPU' ">
+    <DebugSymbols>true</DebugSymbols>
+    <DebugType>full</DebugType>
+    <Optimize>false</Optimize>
+    <OutputPath>bin\Debug\</OutputPath>
+    <DefineConstants>DEBUG;TRACE</DefineConstants>
+    <ErrorReport>prompt</ErrorReport>
+    <WarningLevel>4</WarningLevel>
+  </PropertyGroup>
+  <PropertyGroup Condition=" '$(Configuration)|$(Platform)' == 'Release|AnyCPU' ">
+    <DebugType>pdbonly</DebugType>
+    <Optimize>true</Optimize>
+    <OutputPath>bin\Release\</OutputPath>
+    <DefineConstants>TRACE</DefineConstants>
+    <ErrorReport>prompt</ErrorReport>
+    <WarningLevel>4</WarningLevel>
+  </PropertyGroup>
+  <ItemGroup>
+    <Reference Include="System" />
+    <Reference Include="System.Core" />
+    <Reference Include="System.Xml.Linq" />
+    <Reference Include="System.Data.DataSetExtensions" />
+    <Reference Include="Microsoft.CSharp" />
+    <Reference Include="System.Data" />
+    <Reference Include="System.Xml" />
+  </ItemGroup>
+  <ItemGroup>
+    <Compile Include="Properties\AssemblyInfo.cs" />
+  </ItemGroup>
+  <ItemGroup>
+    <Content Include="Style\Loading.css" />
+    <Content Include="Scripts\Loading.js" />
+  </ItemGroup>
+  <Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />
+  <!-- To modify your build process, add your task inside one of the targets below and uncomment it. 
+       Other similar extension points exist, see Microsoft.Common.targets.
+  <Target Name="BeforeBuild">
+  </Target>
+  <Target Name="AfterBuild">
+  </Target>
+  -->
+</Project>

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSShared/Properties/AssemblyInfo.cs

@@ -0,0 +1,36 @@
+using System.Reflection;
+using System.Runtime.CompilerServices;
+using System.Runtime.InteropServices;
+
+// General Information about an assembly is controlled through the following 
+// set of attributes. Change these attribute values to modify the information
+// associated with an assembly.
+[assembly: AssemblyTitle("BuildOurOwnBabylonJSShared")]
+[assembly: AssemblyDescription("")]
+[assembly: AssemblyConfiguration("")]
+[assembly: AssemblyCompany("")]
+[assembly: AssemblyProduct("BuildOurOwnBabylonJSShared")]
+[assembly: AssemblyCopyright("Copyright ©  2014")]
+[assembly: AssemblyTrademark("")]
+[assembly: AssemblyCulture("")]
+
+// Setting ComVisible to false makes the types in this assembly not visible 
+// to COM components.  If you need to access a type in this assembly from 
+// COM, set the ComVisible attribute to true on that type.
+[assembly: ComVisible(false)]
+
+// The following GUID is for the ID of the typelib if this project is exposed to COM
+[assembly: Guid("fd7a67c2-19d4-455a-9c9c-17f50b2a08b0")]
+
+// Version information for an assembly consists of the following four values:
+//
+//      Major Version
+//      Minor Version 
+//      Build Number
+//      Revision
+//
+// You can specify all the values or you can default the Build and Revision Numbers 
+// by using the '*' as shown below:
+// [assembly: AssemblyVersion("1.0.*")]
+[assembly: AssemblyVersion("1.0.0.0")]
+[assembly: AssemblyFileVersion("1.0.0.0")]

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSShared/Scripts/Loading.js

@@ -0,0 +1,45 @@
+var OURBABYLON = OURBABYLON || {};
+
+(function () {
+    OURBABYLON.Loading = function (container, loadingMessage) {
+        //Be careful while using document.body as container, if you do not specify a 'overflow-x: hidden' it will pop a horizontal scrollbar.
+        container = container || document.body;
+
+        this._loadingBack = document.createElement("div");//loadingBackDiv;
+        this._loadingBack.id = "loadingBack";
+
+        this._loadingText = document.createElement("div");//loadingTextDiv;
+        this._loadingText.id = "loadingText";
+
+        this.hide();
+
+        container.appendChild(this._loadingBack);
+        container.appendChild(this._loadingText);
+
+        this._loadingMessage = loadingMessage || "Loading, please wait ...";
+    };
+
+    OURBABYLON.Loading.prototype.show = function () {
+        this._loadingBack.className = "";
+        this._loadingText.className = "";
+        this._loadingText.innerHTML = this._loadingMessage;
+    };
+
+    OURBABYLON.Loading.prototype.hide = function () {
+        this._loadingBack.className = "loadingBack";
+        this._loadingText.className = "loadingText";
+    };
+
+    OURBABYLON.Loading.prototype.changeMessage = function (newMessage) {
+        this._loadingText.innerHTML = newMessage;
+    };
+
+    OURBABYLON.Loading.prototype.onProgress = function (evt) {
+        if (evt.lengthComputable) {
+            this.changeMessage("Loading, please wait..." + (evt.loaded * 100 / evt.total).toFixed() + "%");
+        } else {
+            dlCount = evt.loaded / (1024 * 1024);
+            this.changeMessage("Loading, please wait..." + Math.floor(dlCount * 100.0) / 100.0 + " MB already loaded.");
+        }
+    };
+})();

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSShared/Style/Loading.css

@@ -0,0 +1,39 @@
+#loadingBack {
+    background-color: #FFFFFF;
+    border: 1px solid #888888;
+    cursor: default;
+    height: 60px;
+    left: 0;
+    margin-top: -30px;
+    position: absolute;
+    top: 50%;
+    transition: transform 0.25s ease-in-out 0s;
+    width: 100%;
+    z-index: 3;
+}
+.loadingBack {
+    transform: translateX(-120%);
+    -webkit-transform: translate(-120%);
+}
+
+
+#loadingText {
+    color: #888888;
+    cursor: default;
+    font-size: 30px;
+    height: 60px;
+    left: 0;
+    margin-top: -30px;
+    padding-top: 10px;
+    position: absolute;
+    text-align: center;
+    top: 50%;
+    transition: transform 0.25s ease-in-out 0s;
+    width: 100%;
+    z-index: 3;
+}
+
+.loadingText {
+    transform: translateX(120%);
+    -webkit-transform: translate(120%);
+}

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/BuildOurOwnBabylonJSWinJSApp.jsproj

@@ -0,0 +1,116 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project ToolsVersion="12.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <ItemGroup Label="ProjectConfigurations">
+    <ProjectConfiguration Include="Debug|AnyCPU">
+      <Configuration>Debug</Configuration>
+      <Platform>AnyCPU</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Debug|ARM">
+      <Configuration>Debug</Configuration>
+      <Platform>ARM</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Debug|x64">
+      <Configuration>Debug</Configuration>
+      <Platform>x64</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Debug|x86">
+      <Configuration>Debug</Configuration>
+      <Platform>x86</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Release|AnyCPU">
+      <Configuration>Release</Configuration>
+      <Platform>AnyCPU</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Release|ARM">
+      <Configuration>Release</Configuration>
+      <Platform>ARM</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Release|x64">
+      <Configuration>Release</Configuration>
+      <Platform>x64</Platform>
+    </ProjectConfiguration>
+    <ProjectConfiguration Include="Release|x86">
+      <Configuration>Release</Configuration>
+      <Platform>x86</Platform>
+    </ProjectConfiguration>
+  </ItemGroup>
+  <PropertyGroup Label="Globals">
+    <ProjectGuid>7cdb4b83-4e3e-48d1-b982-9c33ca60712a</ProjectGuid>
+  </PropertyGroup>
+  <Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />
+  <PropertyGroup Condition="'$(VisualStudioVersion)' == '' or '$(VisualStudioVersion)' &lt; '12.0'">
+    <VisualStudioVersion>12.0</VisualStudioVersion>
+  </PropertyGroup>
+  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\$(WMSJSProjectDirectory)\Microsoft.VisualStudio.$(WMSJSProject).Default.props" />
+  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\$(WMSJSProjectDirectory)\Microsoft.VisualStudio.$(WMSJSProject).props" />
+  <PropertyGroup>
+    <TargetPlatformIdentifier>Windows</TargetPlatformIdentifier>
+    <TargetPlatformVersion>8.1</TargetPlatformVersion>
+    <RequiredPlatformVersion>8.1</RequiredPlatformVersion>
+    <MinimumVisualStudioVersion>12.0</MinimumVisualStudioVersion>
+    <DefaultLanguage>en-US</DefaultLanguage>
+    <PackageCertificateKeyFile>BuildOurOwnBabylonJSWinJSApp_TemporaryKey.pfx</PackageCertificateKeyFile>
+  </PropertyGroup>
+  <ItemGroup>
+    <AppxManifest Include="package.appxmanifest">
+      <SubType>Designer</SubType>
+    </AppxManifest>
+    <Content Include="css\default.css" />
+    <Content Include="css\Loading.css" />
+    <Content Include="images\logo.scale-100.png" />
+    <Content Include="images\smalllogo.scale-100.png" />
+    <Content Include="images\splashscreen.scale-100.png" />
+    <Content Include="images\storelogo.scale-100.png" />
+    <Content Include="js\default.js" />
+    <Content Include="js\jquery-2.1.0.min.js" />
+    <Content Include="js\navigator.js" />
+    <Content Include="default.html" />
+    <Content Include="pages\babylonScene\babylonScene.css" />
+    <Content Include="pages\babylonScene\babylonScene.html" />
+    <Content Include="pages\babylonScene\babylonScene.js" />
+    <Content Include="pages\home\home.css" />
+    <Content Include="pages\home\home.html" />
+    <Content Include="pages\home\home.js" />
+    <Content Include="..\BuildOurOwnBabylonJS\ourOwnBabylon.js">
+      <Link>js\ourOwnBabylon.js</Link>
+    </Content>
+    <Content Include="..\BuildOurOwnBabylonJSShared\Scripts\Loading.js">
+      <Link>js\Shared\Loading.js</Link>
+    </Content>
+    <Content Include="..\BuildOurOwnBabylonJSShared\Style\Loading.css">
+      <Link>css\Shared\Loading.css</Link>
+    </Content>
+    <Content Include="$(BabylonJSSamplesDirFullPath)Scenes\**\*.*">
+      <Link>BabylonJS-Demos\%(RecursiveDir)%(Filename)%(Extension)</Link>
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </Content>
+    <Content Include="pages\sandbox\sandbox.css" />
+    <Content Include="pages\sandbox\sandbox.html" />
+    <Content Include="pages\sandbox\sandbox.js" />
+    <None Include="BuildOurOwnBabylonJSWinJSApp_TemporaryKey.pfx" />
+  </ItemGroup>
+  <ItemGroup>
+    <SDKReference Include="Microsoft.WinJS.2.0, Version=1.0" />
+  </ItemGroup>
+  <ItemGroup>
+    <ProjectReference Include="..\BuildOurOwnBabylonJS\BuildOurOwnBabylonJS.csproj" />
+  </ItemGroup>
+  <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\$(WMSJSProjectDirectory)\Microsoft.VisualStudio.$(WMSJSProject).targets" />
+  <Import Project="packageExtraFiles.targets" />
+  <Target Name="AfterBuild">
+    <PropertyGroup>
+      <!--ConfigurationName should be the one set by the Solution but it doesn't really matter here, doesn't it?-->
+      <_BuildOurOwnBabylonJSExeFolder>$(SolutionDir)BuildOurOwnBabylonJS\bin\$(ConfigurationName)\</_BuildOurOwnBabylonJSExeFolder>
+    </PropertyGroup>
+    <Exec Command="&quot;$(_BuildOurOwnBabylonJSExeFolder)BuildOurOwnBabylonJS.exe&quot; /w:&quot;$(SolutionDir)..\..&quot; /i:&quot;$(SolutionDir)BuildOurOwnBabylonJS\ourOwnBabylonJS.xml&quot; /s:&quot;Babylon\Shaders&quot; /o:&quot;$(SolutionDir)BuildOurOwnBabylonJS&quot; /k:&quot;$(_BuildOurOwnBabylonJSExeFolder)executables&quot;" />
+  </Target>
+  <!-- To modify your build process, add your task inside one of the targets below then uncomment
+       that target and the DisableFastUpToDateCheck PropertyGroup. 
+       Other similar extension points exist, see Microsoft.Common.targets.
+  <Target Name="BeforeBuild">
+  </Target>
+  <PropertyGroup>
+    <DisableFastUpToDateCheck>true</DisableFastUpToDateCheck>
+  </PropertyGroup>
+  -->
+</Project>

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/addToPackage/readme.md

@@ -0,0 +1,3 @@
+Put your demo files in this folder.
+You can use sub-folders.
+All files/folders will be added to the package during application packaging.

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/css/Loading.css

@@ -0,0 +1,36 @@
+#loadingBack {
+    background-color: #FFFFFF;
+    border: 1px solid #888888;
+    cursor: default;
+    height: 60px;
+    left: 0;
+    margin-top: -30px;
+    position: absolute;
+    top: 50%;
+    transition: transform 0.25s ease-in-out 0s;
+    width: 100%;
+    z-index: 3;
+}
+.loadingBack {
+    transform: translateX(-120%);
+}
+
+
+#loadingText {
+    color: #888888;
+    cursor: default;
+    font-size: 30px;
+    height: 60px;
+    left: 0;
+    margin-top: -30px;
+    padding-top: 10px;
+    position: absolute;
+    text-align: center;
+    top: 50%;
+    transition: transform 0.25s ease-in-out 0s;
+    width: 100%;
+    z-index: 3;
+}
+.loadingText {
+    transform: translateX(120%);
+}

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/css/default.css

@@ -0,0 +1,83 @@
+#contenthost {
+    height: 100%;
+    width: 100%;
+}
+
+.fragment {
+    /* Define a grid with rows for a banner and a body */
+    -ms-grid-columns: 1fr;
+    -ms-grid-rows: 128px 1fr;
+    display: -ms-grid;
+    height: 100%;
+    width: 100%;
+}
+
+    .fragment header[role=banner] {
+        /* Define a grid with columns for the back button and page title. */
+        -ms-grid-columns: 37px 83px 1fr;
+        -ms-grid-rows: 1fr;
+        display: -ms-grid;
+    }
+
+        .fragment header[role=banner] .win-navigation-backbutton {
+            -ms-grid-column: 2;
+            margin-top: 57px;
+            position: relative;
+            z-index: 1;
+        }
+
+        .fragment header[role=banner] .titlearea {
+            -ms-grid-column: 3;
+            margin-top: 37px;
+        }
+
+            .fragment header[role=banner] .titlearea .pagetitle {
+                width: calc(100% - 20px);
+            }
+
+    .fragment section[role=main] {
+        -ms-grid-row: 2;
+        height: 100%;
+        width: 100%;
+    }
+
+
+/*
+    Custom css to be applied on all pages
+*/
+#loadingText {
+    /*color: #888888;
+    cursor: default;
+    font-size: 30px;
+    height: 60px;
+    left: 0;
+    margin-top: -30px;*/
+    /*padding-top: 10px;*/
+    /*position: absolute;
+    text-align: center/
+    top: 50%;
+    transition: transform 0.25s ease-in-out 0s;
+    width: 100%;
+    z-index: 3;*/
+}
+
+.loadingText {
+    transform: translateX(120%);
+}
+
+#loadingBack {
+    /*background-color: #FFFFFF;
+    border: 1px solid #888888;*/
+    /*cursor: default;
+    height: 60px;
+    left: 0;
+    margin-top: -30px;*/
+    /*position: absolute;
+    top: 50%;
+    transition: transform 0.25s ease-in-out 0s;
+    width: 100%;
+    z-index: 3;*/
+}
+.loadingBack {
+    transform: translateX(-120%);
+}

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/default.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>BuildOurOwnBabylonJSWinJSApp</title>
+
+    <!-- WinJS references -->
+    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
+    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
+    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
+
+    <!-- BuildOurOwnBabylonJSWinJSApp references -->
+    <link href="/css/default.css" rel="stylesheet" />
+    <link href="/css/Shared/Loading.css" rel="stylesheet" />
+    <script src="/js/default.js"></script>
+    <script src="/js/navigator.js"></script>
+</head>
+<body>
+    <div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/home/home.html'}"></div>
+    <!-- <div id="appbar" data-win-control="WinJS.UI.AppBar">
+        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}" type="button"></button>
+    </div> -->
+</body>
+</html>

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/js/default.js

@@ -0,0 +1,48 @@
+// For an introduction to the Navigation template, see the following documentation:
+// http://go.microsoft.com/fwlink/?LinkId=232506
+(function () {
+    "use strict";
+
+    var activation = Windows.ApplicationModel.Activation;
+    var app = WinJS.Application;
+    var nav = WinJS.Navigation;
+    var sched = WinJS.Utilities.Scheduler;
+    var ui = WinJS.UI;
+
+    app.addEventListener("activated", function (args) {
+        if (args.detail.kind === activation.ActivationKind.launch) {
+            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
+                // TODO: This application has been newly launched. Initialize
+                // your application here.
+            } else {
+                // TODO: This application has been reactivated from suspension.
+                // Restore application state here.
+            }
+
+            nav.history = app.sessionState.history || {};
+            nav.history.current.initialPlaceholder = true;
+
+            // Optimize the load of the application and while the splash screen is shown, execute high priority scheduled work.
+            ui.disableAnimations();
+            var p = ui.processAll().then(function () {
+                return nav.navigate(nav.location || Application.navigator.home, nav.state);
+            }).then(function () {
+                return sched.requestDrain(sched.Priority.aboveNormal + 1);
+            }).then(function () {
+                ui.enableAnimations();
+            });
+
+            args.setPromise(p);
+        }
+    });
+
+    app.oncheckpoint = function (args) {
+        // TODO: This application is about to be suspended. Save any state
+        // that needs to persist across suspensions here. If you need to 
+        // complete an asynchronous operation before your application is 
+        // suspended, call args.setPromise().
+        app.sessionState.history = nav.history;
+    };
+
+    app.start();
+})();

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/js/navigator.js

@@ -0,0 +1,123 @@
+(function () {
+    "use strict";
+
+    var nav = WinJS.Navigation;
+
+    WinJS.Namespace.define("Application", {
+        PageControlNavigator: WinJS.Class.define(
+            // Define the constructor function for the PageControlNavigator.
+            function PageControlNavigator(element, options) {
+                this._element = element || document.createElement("div");
+                this._element.appendChild(this._createPageElement());
+
+                this.home = options.home;
+
+                this._eventHandlerRemover = [];
+
+                var that = this;
+                function addRemovableEventListener(e, eventName, handler, capture) {
+                    e.addEventListener(eventName, handler, capture);
+                    that._eventHandlerRemover.push(function () {
+                        e.removeEventListener(eventName, handler);
+                    });
+                };
+
+                addRemovableEventListener(nav, 'navigating', this._navigating.bind(this), false);
+                addRemovableEventListener(nav, 'navigated', this._navigated.bind(this), false);
+
+                window.onresize = this._resized.bind(this);
+
+                Application.navigator = this;
+            }, {
+                home: "",
+                /// <field domElement="true" />
+                _element: null,
+                _lastNavigationPromise: WinJS.Promise.as(),
+                _lastViewstate: 0,
+
+                // This is the currently loaded Page object.
+                pageControl: {
+                    get: function () { return this.pageElement && this.pageElement.winControl; }
+                },
+
+                // This is the root element of the current page.
+                pageElement: {
+                    get: function () { return this._element.firstElementChild; }
+                },
+
+                // This function disposes the page navigator and its contents.
+                dispose: function () {
+                    if (this._disposed) {
+                        return;
+                    }
+
+                    this._disposed = true;
+                    WinJS.Utilities.disposeSubTree(this._element);
+                    for (var i = 0; i < this._eventHandlerRemover.length; i++) {
+                        this._eventHandlerRemover[i]();
+                    }
+                    this._eventHandlerRemover = null;
+                },
+
+                // Creates a container for a new page to be loaded into.
+                _createPageElement: function () {
+                    var element = document.createElement("div");
+                    element.setAttribute("dir", window.getComputedStyle(this._element, null).direction);
+                    element.style.position = "absolute";
+                    element.style.visibility = "hidden";
+                    element.style.width = "100%";
+                    element.style.height = "100%";
+                    return element;
+                },
+
+                // Retrieves a list of animation elements for the current page.
+                // If the page does not define a list, animate the entire page.
+                _getAnimationElements: function () {
+                    if (this.pageControl && this.pageControl.getAnimationElements) {
+                        return this.pageControl.getAnimationElements();
+                    }
+                    return this.pageElement;
+                },
+
+                _navigated: function () {
+                    this.pageElement.style.visibility = "";
+                    WinJS.UI.Animation.enterPage(this._getAnimationElements()).done();
+                },
+
+                // Responds to navigation by adding new pages to the DOM.
+                _navigating: function (args) {
+                    var newElement = this._createPageElement();
+                    this._element.appendChild(newElement);
+
+                    this._lastNavigationPromise.cancel();
+
+                    var that = this;
+                    this._lastNavigationPromise = WinJS.Promise.as().then(function () {
+                        return WinJS.UI.Pages.render(args.detail.location, newElement, args.detail.state);
+                    }).then(function parentElement(control) {
+                        var oldElement = that.pageElement;
+                        // Cleanup and remove previous element
+                        if (oldElement.winControl) {
+                            if (oldElement.winControl.unload) {
+                                oldElement.winControl.unload();
+                            }
+                            oldElement.winControl.dispose();
+                        }
+                        oldElement.parentNode.removeChild(oldElement);
+                        oldElement.innerText = "";
+                    });
+
+                    args.detail.setPromise(this._lastNavigationPromise);
+                },
+
+                // Responds to resize events and call the updateLayout function
+                // on the currently loaded page.
+                _resized: function (args) {
+                    if (this.pageControl && this.pageControl.updateLayout) {
+                        this.pageControl.updateLayout.call(this.pageControl, this.pageElement);
+                    }
+                },
+            }
+        )
+    });
+})();

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/package.appxmanifest

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Package xmlns="http://schemas.microsoft.com/appx/2010/manifest" xmlns:m2="http://schemas.microsoft.com/appx/2013/manifest">
+
+  <Identity
+    Name="7cdb4b83-4e3e-48d1-b982-9c33ca60712a"
+    Version="1.0.0.0"
+    Publisher="CN=Nicolas" />
+
+  <Properties>
+    <DisplayName>BuildOurOwnBabylonJSWinJSApp</DisplayName>
+    <PublisherDisplayName>Nicolas</PublisherDisplayName>
+    <Logo>images\storelogo.png</Logo>
+  </Properties>
+
+  <Prerequisites>
+    <OSMinVersion>6.3.0</OSMinVersion>
+    <OSMaxVersionTested>6.3.0</OSMaxVersionTested>
+  </Prerequisites>
+
+  <Resources>
+    <Resource Language="x-generate" />
+  </Resources>
+
+  <Applications>
+    <Application 
+      Id="App"
+      StartPage="default.html">
+
+      <m2:VisualElements
+        DisplayName="BuildOurOwnBabylonJSWinJSApp"
+        Description="BuildOurOwnBabylonJSWinJSApp"
+        ForegroundText="light"
+        BackgroundColor="#464646"
+        Square150x150Logo="images\Logo.png"
+        Square30x30Logo="images\SmallLogo.png">
+
+        <m2:SplashScreen Image="images\splashscreen.png" />
+
+      </m2:VisualElements>
+    </Application>
+  </Applications>
+
+  <Capabilities>
+    <Capability Name="internetClient" />
+  </Capabilities>
+
+</Package>

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/packageExtraFiles.targets

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- $(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\AppxPackage\Microsoft.AppxPackage.Targets
+    must be imported before this file -->
+<Project ToolsVersion="12.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+    <Target Name="PackageExtraFiles" AfterTargets="GetPackagingOutputs">
+		<ItemGroup>
+            <_AddToPackageFiles Include="$(ProjectDir)\addToPackage\**\*" />
+            <PackagingOutputs Include="@(_AddToPackageFiles -> '%(Identity)')">
+				<OutputGroup>ExtraFiles</OutputGroup>
+				<ProjectName>$(ProjectName)</ProjectName>
+                <TargetPath>addToPackage\%(RecursiveDir)%(Filename)%(Extension)</TargetPath>
+			</PackagingOutputs>
+        </ItemGroup>
+    </Target>
+</Project>

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/pages/babylonScene/babylonScene.css

@@ -0,0 +1,5 @@
+#babylonScene,
+#babylonCanvas {
+    width: 100%;
+    height: 100%;
+}

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/pages/babylonScene/babylonScene.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <!-- WinJS references -->
+    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
+    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
+    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
+
+    <title>BabylonScene</title>
+    <script src="babylonScene.js"></script>
+    <script src="/js/ourOwnBabylon.js"></script>
+    <script src="/js/Shared/Loading.js"></script>
+    <link href="babylonScene.css" rel="stylesheet" />
+</head>
+<body>
+    <div data-win-control="WinJS.UI.NavBar">
+        <div data-win-control="WinJS.UI.NavBarContainer">
+            <button class="backButton" data-win-control="WinJS.UI.BackButton"></button>
+        </div>
+    </div>
+    <div id="babylonScene">
+        <canvas id="babylonCanvas"></canvas>
+    </div>
+</body>
+</html>

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/pages/babylonScene/babylonScene.js

@@ -0,0 +1,42 @@
+var engine;
+(function () {
+    "use strict";
+
+    WinJS.UI.Pages.define("/pages/babylonScene/babylonScene.html", {
+        // This function is called whenever a user navigates to this page. It
+        // populates the page elements with the app's data.
+        ready: function (element, options) {
+            var canvas = element.querySelector("#babylonCanvas");
+            engine = new BABYLON.Engine(canvas, true);
+
+            var loading = new OURBABYLON.Loading(canvas.parentElement);
+
+            loading.show();
+
+            BABYLON.SceneLoader.Load(options.babylonFolder + "/", options.babylonFile, engine, function (scene) {
+                scene.executeWhenReady(function () { 
+                    if (!scene.activeCamera) {
+                        scene.activeCamera = new BABYLON.ArcRotateCamera("DefaultCamera", -Math.PI / 2, Math.PI / 2, 10, new BABYLON.Vector3.Zero(), scene);
+                        scene.activeCamera.zoomOn();
+                    }
+                    if (scene.lights.length == 0) {
+                        var light = new BABYLON.HemisphericLight("Default light", new BABYLON.Vector3(0, 1, 0), scene);
+                    }
+                    scene.activeCamera.attachControl(canvas);
+
+                    engine.runRenderLoop(function () {
+                        scene.render();
+                    });
+
+                    loading.hide();
+                });
+            }, $.proxy(loading.onProgress, loading));
+
+        },
+        unload: function () {
+            engine.stopRenderLoop();
+            engine.dispose();
+            engine = null;
+        }
+    });
+})();

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/pages/home/home.css

@@ -0,0 +1,22 @@
+.homepage section[role=main] {
+    margin-left: 120px;
+    margin-right: 120px;
+}
+
+.ListItem {
+    width: 150px;
+    height: 100px;
+    background-color: #808080;
+    text-shadow: black 0.1em 0.1em 0.2em;
+    padding: 5px 10px;
+}
+
+#babylonScenesListView {
+    height: 100%;
+    margin: 0px 10px;
+}
+
+.sandbox {
+    background-image: none;
+    background-color: #330066;
+}

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/pages/home/home.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>homePage</title>
+
+    <!-- WinJS references -->
+    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
+    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
+    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
+
+    <script src="/js/jquery-2.1.0.min.js"></script>
+
+    <link href="/css/default.css" rel="stylesheet" />
+    <link href="/pages/home/home.css" rel="stylesheet" />
+    <script src="/pages/home/home.js"></script>
+</head>
+<body>
+    <div id="ListHeaderTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
+        <div class="sceneListHeader">
+            <h2 data-win-bind="innerText: title"></h2>
+        </div>
+    </div>
+    <div id="ListItemTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
+        <div data-win-bind="className: className">
+            <h4 data-win-bind="textContent: title"></h4>
+            <h6 data-win-bind="textContent: text"></h6>
+        </div>
+    </div>
+
+    <div id="babylonScenesListView"
+         class="win-selectionstylefilled"
+         data-win-control="WinJS.UI.ListView"
+         data-win-options="{
+            itemDataSource: home.babylonScenes.groupedItemsList.dataSource,
+            itemTemplate: select('#ListItemTemplate'),
+            groupDataSource: home.babylonScenes.groupedItemsList.groups.dataSource,
+            groupHeaderTemplate: select('#ListHeaderTemplate'),
+            layout: { type: WinJS.UI.GridLayout },
+            selectionMode: 'single',
+            swipeBehavior: 'none'
+         }">
+    </div>
+</body>
+</html>

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/pages/home/home.js

@@ -0,0 +1,84 @@
+(function () {
+    "use strict";
+
+    var itemsList = new WinJS.Binding.List();
+
+    function getGroupKey(dataItem){
+        return dataItem.group;
+    }
+
+    function getGroupData(dataItem){
+        return {
+            title: dataItem.group
+        };
+    }
+
+    var groupedItemsList = itemsList.createGrouped(getGroupKey, getGroupData);
+
+    WinJS.Namespace.define("home.babylonScenes", {
+        groupedItemsList: groupedItemsList
+    });
+    WinJS.Namespace.define("home.userScenes", {
+        data: new WinJS.Binding.List()
+    });
+
+    WinJS.UI.Pages.define("/pages/home/home.html", {
+        // This function is called whenever a user navigates to this page. It
+        // populates the page elements with the app's data.
+        ready: function (element, options) {
+            element.querySelector("#babylonScenesListView").addEventListener("iteminvoked", function (event) {
+                event.detail.itemPromise.done(function (item) {
+                    if (!item.data.file) {
+                        WinJS.Navigation.navigate('/pages/sandbox/sandbox.html');
+                        return;
+                    }
+                    WinJS.Navigation.navigate('/pages/babylonScene/babylonScene.html', { babylonFolder: item.data.folder, babylonFile: item.data.file });
+                });
+            });
+
+            var className = "ListItem";
+
+            var onSceneFolderOpenCallback = function (rootFolder) {
+                rootFolder.getFoldersAsync().then(function (folders) {
+                    var list = itemsList;
+                    var group = (rootFolder.name == "BabylonJS-Demos") ? "BabylonJS demos scenes" : "Your scenes"
+                    folders.forEach(function (folder) {
+                        folder.getFilesAsync().then(function (files) {
+                            for (var j in files) {
+                                var file = files[j];
+                                if (file.fileType != ".babylon") {
+                                    continue;
+                                }
+                                var incremental = false;
+                                if (file.name.indexOf(".incremental.babylon") !== -1) {
+                                    incremental = true;
+                                }
+                                list.push({
+                                    title: folder.displayName.charAt(0).toUpperCase() + folder.displayName.slice(1),
+                                    text: file.name,
+                                    group: group,
+                                    folder: rootFolder.name + "/" + folder.name,
+                                    file: file.name,
+                                    className: className
+                                });
+                            }
+                        });
+                    });
+                });
+            };
+
+            if (itemsList.length == 0) {
+                itemsList.push({
+                    title: "Sandbox",
+                    text: "BabylonJS Sandbox",
+                    group: "Sandbox",
+                    folder: null,
+                    file: null,
+                    className: className + " sandbox"
+                });
+                Windows.ApplicationModel.Package.current.installedLocation.getFolderAsync("BabylonJS-Demos").then(onSceneFolderOpenCallback);
+                Windows.ApplicationModel.Package.current.installedLocation.getFolderAsync("addToPackage").then(onSceneFolderOpenCallback);
+            }
+        }
+    });
+})();

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/pages/sandbox/sandbox.css

@@ -0,0 +1,5 @@
+#babylonScene,
+#babylonCanvas {
+    width: 100%;
+    height: 100%;
+}

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/pages/sandbox/sandbox.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <!-- WinJS references -->
+    <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
+    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
+    <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
+
+    <title>Sandbox</title>
+    <script src="sandbox.js"></script>
+
+    <script src="/js/hand-1.3.6.js"></script>
+    <script src="/js/ourOwnBabylon.js"></script>
+    <script src="/js/Shared/Loading.js"></script>
+    <link href="sandbox.css" rel="stylesheet" />
+</head>
+<body>
+    <div id="navbar" data-win-control="WinJS.UI.NavBar">
+        <div data-win-control="WinJS.UI.NavBarContainer">
+            <button class="backButton" data-win-control="WinJS.UI.BackButton"></button>
+            <div>
+                <input type="file" id="fileInput" multiple />
+            </div>            
+        </div>
+    </div>
+    <div id="babylonScene">
+        <canvas id="babylonCanvas"></canvas>
+    </div>
+</body>
+</html>

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/pages/sandbox/sandbox.js

@@ -0,0 +1,41 @@
+var engine;
+ (function () {
+    "use strict";
+
+    WinJS.UI.Pages.define("/pages/sandbox/sandbox.html", {
+        // This function is called whenever a user navigates to this page. It
+        // populates the page elements with the app's data.
+        ready: function (element, options) {
+            var canvas = element.querySelector("#babylonCanvas");
+            engine = new BABYLON.Engine(canvas);
+
+            var htmlInput = element.querySelector("#fileInput");
+
+            var loading = new OURBABYLON.Loading(canvas.parentElement);
+
+            var filesInput = new BABYLON.FilesInput(engine, null, canvas, function (sceneFile, scene) {
+                if (!scene.activeCamera) {
+                    scene.activeCamera = new BABYLON.ArcRotateCamera("DefaultCamera", -Math.PI / 2, Math.PI / 2, 10, new BABYLON.Vector3.Zero(), scene);
+                    scene.activeCamera.zoomOn();
+                    scene.activeCamera.attachControl(canvas);
+                }
+                if (scene.lights.length == 0) {
+                    var light = new BABYLON.HemisphericLight("Default light", new BABYLON.Vector3(0, 1, 0), scene);
+                }
+
+                loading.hide();
+
+            }, $.proxy(loading.onProgress, loading), null, null, $.proxy(loading.show, loading));
+
+            htmlInput.addEventListener("change", filesInput.loadFiles, false);
+
+            var navBar = document.body.querySelector("#navbar").winControl;
+            navBar.show();
+        },
+        unload: function () {
+            engine.stopRenderLoop();
+            engine.dispose();
+            engine = null;
+        }
+    });
+})();