WinJS App creation

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJS.sln

@@ -9,13 +9,19 @@ 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
 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
@@ -53,8 +59,39 @@ Global
 		{CFBE5149-1605-4824-8BD2-55C9B3C1DA60}.Release|Any CPU.Build.0 = 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
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE

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

@@ -7,9 +7,16 @@
 <script type="text/javascript">
     $(document).ready(function () {
         BABYLON.SceneLoader.Load("@Html.Raw(this.BabylonJSSamplesFile("Scenes/" + (string)ViewBag.DemoFolderName))" + "@Url.Encode("/")", "@ViewBag.DemoFile", OURBABYLON.engine, function (scene) {
-            
+
+            if (!scene.activeCamera) {
+                scene.activeCamera = new BABYLON.ArcRotateCamera("DefaultCamera", Math.PI / 2, 0, 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(OURBABYLON.canvas);
-            
+
             // Render loop
             var renderLoop = function () {
                 scene.render();

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/BuildOurOwnBabylonJSWinJSApp.jsproj

@@ -0,0 +1,99 @@
+<?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="..\..\..\Samples\Scenes\**\*.*">
+      <Link>BabylonJS-Demos\%(RecursiveDir)%(Filename)%(Extension)</Link>
+    </Content>
+    <Content Include="css\default.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>
+    <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" />
+  <!-- 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>
+  <Target Name="AfterBuild">
+  </Target>
+  <PropertyGroup>
+    <DisableFastUpToDateCheck>true</DisableFastUpToDateCheck>
+  </PropertyGroup>
+  -->
+</Project>

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/css/default.css

@@ -0,0 +1,42 @@
+#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%;
+    }

Tools/BuildOurOwnBabylonJS/BuildOurOwnBabylonJSWinJSApp/default.html

@@ -0,0 +1,23 @@
+<!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" />
+    <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/pages/babylonScene/babylonScene.css

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

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

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>BabylonScene</title>
+    <script src="babylonScene.js"></script>
+    <script src="/js/ourOwnBabylon.js"></script>
+    <link href="babylonScene.css" rel="stylesheet" />
+</head>
+<body>
+    <div id="babylonScene">
+        <canvas id="babylonCanvas"></canvas>
+    </div>
+</body>
+</html>

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

@@ -0,0 +1,41 @@
+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);
+
+            BABYLON.SceneLoader.Load("/BabylonJs-Demos/"+options.babylonFolder + "/", options.babylonFile, engine, function (scene) {
+                //scene = newScene;
+
+                scene.executeWhenReady(function () { 
+                    if (!scene.activeCamera) {
+                        scene.activeCamera = new BABYLON.ArcRotateCamera("DefaultCamera", Math.PI / 2, 0, 10, new BABYLON.Vector3.Zero(), scene);
+                        scene.activeCamera.zoomOn();
+                        /*var cube = BABYLON.Mesh.CreateSphere("test", 10, 1, scene);
+                        cube.material = new BABYLON.StandardMaterial("test", scene);
+                        cube.material.emissiveColor = new BABYLON.Color3(1.0, 0.0, 0.0);
+                        cube.position = scene.activeCamera.target;*/
+                    }
+                    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();
+                    });
+                });
+            })
+        },
+        unload: function () {
+            engine.stopRenderLoop();
+            engine.dispose();
+            engine = null;
+        }
+    });
+})();

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

@@ -0,0 +1,4 @@
+.homepage section[role=main] {
+    margin-left: 120px;
+    margin-right: 120px;
+}

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

@@ -0,0 +1,22 @@
+<!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>
+    <h1>It sun a game</h1>
+    <ul id="babylonScenes"></ul>
+</body>
+</html>

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

@@ -0,0 +1,47 @@
+(function () {
+    "use strict";
+
+    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) {
+            Windows.ApplicationModel.Package.current.installedLocation.getFolderAsync("BabylonJS-Demos").then(function (folder) {
+                folder.getFoldersAsync().then(function (folders) {
+                    var ul = document.getElementById("babylonScenes");
+                    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;
+                                }
+                                var li = document.createElement("li");
+                                var button = document.createElement("button");
+                                button.className = "sceneButton";
+                                button.setAttribute("data-scene-folder", folder.name);
+                                button.setAttribute("data-scene-file", file.name);
+                                button.textContent = folder.displayName + ((incremental) ? " (incremental)" : "");
+                                li.innerHTML = button;
+                                ul.appendChild(button);
+
+                                button.addEventListener("click", onButtonClick)
+                            }
+                        });
+                    });
+                });
+            }, function (error) {
+                var test = true;
+            });
+
+            var onButtonClick = function (event) {
+                var dataFolder = event.srcElement.getAttribute("data-scene-folder");
+                var dataFile = event.srcElement.getAttribute("data-scene-file")
+                WinJS.Navigation.navigate('/pages/babylonScene/babylonScene.html', { babylonFolder: dataFolder, babylonFile: dataFile });
+            };
+        }
+    });
+})();