
An Instant Game is a game that can be played directly in the Facebook Messenger application, and from Babylon.js version 3.1 you can use your favorite framework to create a game that can be deployed on this platform.

This documentation will explain how to transform an existing Babylon.js game to an Instant Game. 

## Useful links

* [Instant Games documentation](https://developers.facebook.com/docs/games/instant-games)

* [Instant Games SDK documentation](https://developers.facebook.com/docs/games/instant-games/sdk/fbinstant6.2)

## The process
1) Create an Instant Game app : [Facebook Dashboard](https://developers.facebook.com/docs/games/instant-games/)

2) Include the Facebook SDK URL in your game HTML page: 
```html
<script src="https://connect.facebook.net/en_US/fbinstant.6.2.js"></script>
```

3) Then you have to initialize the instant game with the method `FBInstant.initializeAsync`. In the game example, I created a file `main.ts` that will create the game once the framework is initalized:

```javascript
FBInstant.initializeAsync().then(() => {
    // Many properties will be null until the initialization completes.
    // This is a good place to fetch them:
    let locale = FBInstant.getLocale(); // 'en_US' 'fr_FR'...
    let platform = FBInstant.getPlatform(); // 'IOS', 'ANDROID' or 'WEB'
    let sdkVersion = FBInstant.getSDKVersion(); // '3.0'
    let playerID = FBInstant.player.getID();

    console.log(locale, platform, sdkVersion, playerID);

    // The game is created here
    new Game('gameCanvas');

}).catch((e) => {
    console.log(e);
});
```
Then you can load your assets and start your game.

4) Update the Facebook loading screen : by using an Asset Manager, you can use the exposed property 'onProgress' to update the loading screen

```javascript
loader.onProgress = (remaining: number, totalCount: number) => {
    FBInstant.setLoadingProgress(100 - remaining / totalCount);
}; 
```

5) Remove the loading screen and start the game : once your scene is ready, use `FBInstant.startGameAsync` to start your instant game.

```javascript
this.scene.executeWhenReady(() => {
    FBInstant.startGameAsync().then(() => {
        // Game initialization
        this._initGame();
        
        // Run render loop
        this.engine.runRenderLoop(() => {
            this.scene.render();
        });
    });
});
```

6) Once your game is ready, you can upload it via Facebook Instant Games Dashboard, and run it. The configuration is done!

## Example
An example game can be found here: [SIMON3D](https://github.com/Temechon/simon3d) 

This game is not finished at all, but show how to configure a very simple Babylon.js demo-game and make it run as an Instant Game.


## A brief example showing how to use BabylonJS in an Ionic 2 application ##

For anyone interested, it is possible to integrate BabylonJS in an Ionic/Cordova app in just a few easy steps. The following is just a narrative of how I did it, since it's been a trial and error thing probably there'll be a better way of doing it, when in doubt I've gone for simplicity rather than optimisation. 

## What you need

First, you need node/npm installed. For more on that look [here](https://nodejs.org/en/).

Second, and quite obviously, a working Ionic environment. How to do this is very well documented by the Ionic people so, if you haven't done it before have a look [there](https://ionicframework.com/docs/intro/tutorial/).

## The process

1) Start a new Ionic project, I used the blank template, which provides a basic scaffolding, and removed all unnecessary stuff.

2) Then, install BabylonJS within the project:
```bash
npm install babylonjs@2.5.0 --save
```
>A couple things to remember: 
> * Be careful not to write babylon (different package, yes it happened to me!). 
> * Specify version, otherwise npm will install the preview branch and things will fall apart at runtime!

3) Go to the last line of babylon.d.ts (in node_modules/babylonjs/dist) and type:

```typescript
export = BABYLON;
```  
>These last two steps will create the proper entry in the node_modules folder and will let you do:
> ```typescript
>import BABYLON from 'babylonjs'
>```  
>wherever you need to.

4) Depending of what you intend to do in your app, other dependencies might be needed (e.g. cannon.js or hand.js) 
You could install them the same way as BabylonJS, but I just downloaded the javascript files, saved them in the www folder and referenced using script tags in `index.html`. However, this has a downside, the www folder is generated after transpiling, so you will need to add those javascript files **manually**.


5) After this I generated an Angular [Provider](https://docs.angularjs.org/guide/providers), this is a singleton class that will wrap our BabylonJS Engine: 
```bash
ionic g provider BabylonJS
```  
>Besides holding our Engine instance, being in a provider allows for different pages to access the same Engine, e.g. you define different scenes in different pages and use the same Engine provider for all.

6) Another provider (ConfigProvider) is created to handle all necessary configuration variables. In this case it just contains the dice colors and texture for both dice.
> Actually, when you look at it, a Provider is a regular typescript class, nothing really special apart from the **@Injectable** decorator, which tells Angular that this is a special class to be injected during the bootstrap process to make it available to the hierarchy of components that make an app.

7) The very basic configuration interface is an Ionic page showing the available options. Note the header, a basic Ionic component that handles the back button automatically.  
All the values are stored in the Config service, that makes them available to any page that declares a dependency to the Config provider.

8) The Home page will contain the BabylonJS canvas. An Ionic page is basically an Angular component with some sugar added, mainly in the form of a few helpful life cycle hooks.  
The whole scene is created here, note that we are using the two providers that were previously generated.  
The ViewChild decorator is needed in order to have access to the canvas element, think of it as an Angular equivalent of good old 'document.getElementById' method.  

## A few notes on the code

The app itself is a very basic no frills dice roller, but there are a few things worth mentioning:
* We are using Ionic components to provide a basic user interface, with a header and a couple FAB buttons to access the configuration screen and roll the dice. See the methods handling the button events.
* The Home page code makes use of `ionViewDidLoad` and `ionViewWillEnter`, both are Ionic hooks to the page life cycle. The first fires only once, when the view loads, so it is ideal to initialize variables and generate the scene proper.  
The second fires every time the view is going to become active, it checks for possible changes in the configuration and modifies the vertex data to point to the correct coordinates if necessary.  
* Ionic, by default, caches the views. so anything included in the `ionViewDidLoad` hook will run only once, so the methods createScene() and animate() are called only once. Caching can be disabled, in that case this method will fire every time the view is loaded, and the scene will be generated as new.

## Conclusion

Integrating BabylonJS in an Ionic application was easier than it seemed at first, once you get to know a couple of thing of how Ionic/Angular 2 works. In fact, doing the same in an Ionic 1 app was easy too, but overall everything looks cleaner, more streamlined in the latest version.  
However, despite the improvements introduced to Angular, the overhead of having both Ionic and BabylonJS together might make performance a bit sluggish. Maybe it's not the best way of implementing a pure 3d action packed game.  
On the other hand, with Ionic you get things, like a very simple way of handling the user interface, navigation and storage out of the box, not to mention that, through Cordova, it's easy to build apps for any mobile platform, so it might be the way to go for less demanding apps.  

Finally, this is how the app looks running on an actual Android 6.0 device:  

![](/img/How_To/ionic-angular/screenshot1.jpg)
![](/img/How_To/ionic-angular/screenshot2.jpg)
![](/img/How_To/ionic-angular/screenshot3.jpg)



Pixi.js is a fast, lightweight, open source 2D library with full support for webGL with a very fast rendering speed. It is great to use as a UI in combination with Babylon.js, making a perfect duo for your web game world.

## Setup Pixi.js rendering
```javascript
var pixiRenderer = new PIXI.WebGLRenderer({
    context: engine._gl,
    view: engine.getRenderingCanvas(),
    clearBeforeRender: false,
    autoStart: false
});
```

## Add Pixi.js Sprites to Stage

```javascript
var stage = new PIXI.Container();
var sprite = PIXI.Sprite.from('https://i.imgur.com/1yLS2b8.jpg');
sprite.anchor.set(0.5);
sprite.position.set(canvas.width/2, canvas.height/2);
stage.addChild(sprite);

```
The *clearBeforeRender* and *autoStart* are two very important properties that must be used and set to *false*.

## Rendering Sequence
The render sequence of Babylon.js and Pixi.js is also very important, Babylon.js must be rendered first.

```
engine.runRenderLoop(function() {   
    scene.render();    	
    engine.wipeCaches(true);
  
    pixiRenderer.reset();
    pixiRenderer.render(stage);
});
```

[Working JSFiddle Example Pixi.js in Front](https://jsfiddle.net/y5q7Lb1v/40/)

It is possible to place a Pixi.js stage behind a Babylon.js scene provided you use

```
scene.autoClear = false;
```

to make the background of the scene transparent. In this case render Pixi.js before Babylon.js.

```
engine.runRenderLoop(function() {   
  pixiRenderer.reset();
  pixiRenderer.render(stage);
  
  scene.autoClear = false;
  scene.render();    	
  engine.wipeCaches(true);
   
});
```

It is also possible to combine these and have Pixi.js stages behind and in front of a Babylon.js scene.

```
engine.runRenderLoop(function() {   
  pixiRenderer.reset();
  pixiRenderer.render(stage);
  
  scene.autoClear = false;
  scene.render();    	
  engine.wipeCaches(true);
  
  pixiRenderer.reset();
  pixiRenderer.render(stage1);
 
});
```

[JSFiddle Example Multiple Pixi.js Stages](https://jsfiddle.net/y5q7Lb1v/42/)

## WebGL1 Problems


When your browser is running webGL1 then you need to reset the Pixi.js context first for each rendering as below.

```
engine.runRenderLoop(function() { 
    if(engine.webGLVersion === 1) {
        pixiRenderer.reset();
    }
    scene.render();    	
    engine.wipeCaches(true);
  
    pixiRenderer.reset();
    pixiRenderer.render(stage);
});
```


## Pixi.js Versions

Always use the [latest released version of Pixi.js](https://github.com/pixijs/pixi.js/releases)


Poki.com is a curated discovery platform for free, high-quality online games. You can reach millions of players around the globe and get a revenue share from advertising when your game is played.

This documentation explains how to transform an existing Babylon.js game to make it available on Poki.com 

## Useful links

* [Poki.com](https://poki.com/)
* [Poki developers page](https://developers.poki.com/)
* [Poki SDK documentation](https://sdk.poki.com/)


## Some Babylon.js games on Poki

* [Minecraft Classic - By Mojan](https://poki.com/en/g/minecraft-classic)
* [Temple Run 2 - By Imangi Studios](https://poki.com/en/g/temple-run-2)
* [Tunnel Rush - By Deer Cat](https://poki.com/en/g/tunnel-rush)
* [Shell Shockers - By Blue Wizard Digital](https://poki.com/en/g/shell-shockers)


## The process

#### 1) Include the Poki Javascript SDK

Add the following HTML within the ```<head>``` tags of your game HTML:
```html
    <script src="//game-cdn.poki.com/scripts/v2/poki-sdk.js"></script>
```

#### 2) Initialize the SDK 

At the start of your game, initialize the SDK with the following JavaScript:

```javascript
    PokiSDK.init().then(
        () => {
            console.log("Poki SDK successfully initialized");
            // your code to continue to game
            continueToGame();
        }   
    ).catch(
        () => {
            console.log("Initialized, but the user likely has adblock");
            // your code to continue to game
            continueToGame();
        }   
    );
```

#### 3) Integrate the Poki API into your game

Use the gameplayStart() event to describe when users are playing your game and the gameplayStop() event every time the gameplay halts, like in the case of a level finish, game over or when going back to a menu, pausing the game etc.
	
Use commercialBreak() to display video ads. It should be triggered on natural breaks in your game.
	
Use  rewardedBreak() to allow for a user to choose to watch a rewarded video ad in exchange for a certain benefit in the game (e.g. more coins, etc.).

You'll find more details on the [Poki SDK Implementation guide for HTML5](https://sdk.poki.com/html5/).


#### 4) Submit your game on Poki

On the [Developers page of Poki](https://developers.poki.com/), you can get in touch with Poki team or directly submit your game.





## How to use BabylonJS with React

For anyone interested, it is not difficult to integrate BabylonJS into a React application. 

## What you need
It's up to you if you choose Create React App or a custom project; only how to load BabylonJS in a component will be discussed here.  This example uses the newer `@babylonjs/core` ES6 NPM, but can also be modified to work with the `babylonjs` NPM.

## Component
We are going to build a reusable React component that takes care of starting up BabylonJS for us!

In a working React project you first need to install the package `@babylonjs/core` using npm or yarn:
```bash
npm install @babylonjs/core
```

```bash
yarn add @babylonjs/core
```
Create a file called `SceneComponent.jsx` and add this:
```jsx
import { Engine, Scene } from '@babylonjs/core'
import React, { useEffect, useRef } from 'react'

export default (props) => {
    const reactCanvas = useRef(null);
    const { antialias, engineOptions, adaptToDeviceRatio, sceneOptions, onRender, onSceneReady, ...rest } = props;

    useEffect(() => {
        if (reactCanvas.current) {
            const engine = new Engine(reactCanvas.current, antialias, engineOptions, adaptToDeviceRatio);
            const scene = new Scene(engine, sceneOptions);
            if (scene.isReady()) {
                props.onSceneReady(scene)
            } else {
                scene.onReadyObservable.addOnce(scene => props.onSceneReady(scene));
            }

            engine.runRenderLoop(() => {
                if (typeof onRender === 'function') {
                    onRender(scene);
                }
                scene.render();
            })

            const resize = () => {
                scene.getEngine().resize();
            }

            if (window) {
                window.addEventListener('resize', resize);
            }

            return () => {
                scene.getEngine().dispose();

                if (window) {
                    window.removeEventListener('resize', resize);
                }
            }
        }
    }, [reactCanvas])

    return (
        <canvas ref={reactCanvas} {...rest} />
    );
}
```
>In 45 lines we have: 
> * Reusable React Component for BabylonJS.
> * Will resize the engine when window is resized.
> * Cleans up resources automatically when unmounted.
> * Any extra props you add to this component will flow to the canvas (ie: style/className).
> * We only need to add this component to a page and specify a method to run when the scene is ready.  A `<canvas />` element is created and a BabylonJS engine and scene are created and started.
> * If you want more control of the runRenderLoop, just remove it from here and add it in your `onSceneReady` prop.
> * TypeScript source can be copied from [here](https://raw.githubusercontent.com/brianzinn/babylonjs-hook/master/src/babylonjs-hook.tsx).

The above component is available in NPM, if you prefer:
```bash
npm add babylonjs-hook
yarn add babylonjs-hook
```

Here is a page using our component:

```jsx
import React from 'react';
import { FreeCamera, Vector3, HemisphericLight, MeshBuilder } from '@babylonjs/core';
import SceneComponent from './SceneComponent'; // uses above component in same directory
// import SceneComponent from 'babylonjs-hook'; // if you install 'babylonjs-hook' NPM.
import './App.css';

let box;

const onSceneReady = scene => {
  // This creates and positions a free camera (non-mesh)
  var camera = new FreeCamera("camera1", new Vector3(0, 5, -10), scene);

  // This targets the camera to scene origin
  camera.setTarget(Vector3.Zero());

  const canvas = scene.getEngine().getRenderingCanvas();

  // This attaches the camera to the canvas
  camera.attachControl(canvas, true);

  // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
  var light = new HemisphericLight("light", new Vector3(0, 1, 0), scene);

  // Default intensity is 1. Let's dim the light a small amount
  light.intensity = 0.7;

  // Our built-in 'box' shape.
  box = MeshBuilder.CreateBox("box", {size: 2}, scene);

  // Move the box upward 1/2 its height
  box.position.y = 1;

  // Our built-in 'ground' shape.
  MeshBuilder.CreateGround("ground", {width: 6, height: 6}, scene);
}

/**
 * Will run on every frame render.  We are spinning the box on y-axis.
 */
const onRender = scene => {
  if (box !== undefined) {
    var deltaTimeInMillis = scene.getEngine().getDeltaTime();

    const rpm = 10;
    box.rotation.y += ((rpm / 60) * Math.PI * 2 * (deltaTimeInMillis / 1000));
  }
}

export default () => (
    <div>
      <SceneComponent antialias onSceneReady={onSceneReady} onRender={onRender} id='my-canvas' />
    </div>
)
```

## A few notes on the code
This will show the basic playground in your website!  A rotation has been added in the render loop (and the sphere changed to a box, so you would notice).

If you would like to see this in action, there is a boilerplate project using the original NPM `babylonjs`, which you can clone from
* [Reactjs + BabylonJS + Electron](https://github.com/blurymind/babylon-react-electron-app)

There is a boilerplate using above component with ES6 NPM `@babylonjs/core` here
* [Reactjs + BabylonJS](https://github.com/brianzinn/babylonjs-cra-vanilla-ts)

## Adding other BabylonJS NPMs
If you start with the `@babylonjs` [ES6 NPMs](/divingDeeper/developWithBjs/treeShaking) (as we have done) then add those ones only.  
> For GUI use `@babylonjs/gui` instead of the NPMs that don't start with `@`.

## Conclusion

Integrating BabylonJS into a React site turns out to be not so tough.  Since BabylonJS 3.1 we can use ES6 imports not only for BabylonJS, but also for supported libraries (GUI/loaders/etc).

If the above component we created does everything you need then that's all you will need and you are all set!  If you want to take it a step further you may want to take the `react-babylonjs` renderer for a spin.

## react-babylonjs renderer
A renderer is a next-level React integration that lets you use JSX to build your scenes and GUI.  State changes will flow automatically to your BabylonJS components (and persist through HMR) and you can maintain your scene graph in a declarative syntax and through components.

There is an NPM project called `react-babylonjs` that is a react renderer for BabylonJS.

What you are able to easily do is powerful, because inside the Scene component you can declare BabylonJS objects like Cameras/Meshes/Lights/Materials/Textures/3D Models/etc, using familiar JSX.  Meanwhile there are escape hatches that allow you to work imperatively as well.

> BabylonJS ES6 + CRA (Create React App) project examples:
> * JavaScript (examples for 3D models, GUI, VR, behaviors, props/state management)
>   * [source](https://github.com/brianzinn/create-react-app-babylonjs)
>   * [demo](https://brianzinn.github.io/create-react-app-babylonjs/)
>* TypeScript (GUI + physics + shadows)
>   * [source](https://github.com/brianzinn/create-react-app-typescript-babylonjs)
>   * [demo](https://brianzinn.github.io/create-react-app-typescript-babylonjs/)
>* [Electron](https://github.com/brianzinn/react-babylonjs-electron) (Electron added to above TypeScript project)
>* [PWA](https://github.com/brianzinn/create-react-app-babylonjs-pwa) (Progressive Web App)

`react-babylonjs` (https://github.com/brianzinn/react-babylonjs) links to many live storybook code examples (skybox, CSG, dynamic terrain, behaviors, GUI, react hooks, integrations (PIXI, react-spring, gsap, chroma-js), 3D models, physics, shadows, layers (glow/highlight), textures, fresnel parameters, PBR, etc.



## The Possibilities

Using 'webview' it is possible to run the Babylon.js Engine inside React Native on Windows and iOS with Android still under test.

However currently there are difficulties, especially on Windows, but with determination it is possible. Some issues are:

* Debugging with webview can be very problematic however logging is possible.
* Performance inside the webview is acceptable on Windows but it can be improved on iOS with a small twist
* To load models you need to serve your files through a web server
* The babylon RN “engine” is basically a website
* Some packages for RN are custom and not yet merged inside their respective repos, so you need care with package.json
* Getting it to work on React Native Windows is an art form at times

The experiment that provided the proof of concept and details of how to do it are in the [Cubeslam Blog](http://cubeslam.net/2017/11/16/babylonjs-inside-react-native-inception-style/) so to give it a go give it a read. 




![VRM top header](/img/resources/babylonjs_and_vrm/vrm_topheader.png)

## What is VRM?

> “VRM” is **a file format for handling 3D humanoid avatar (3D model) data for VR applications**. It is based on glTF2.0. Anyone is free to use it.
> 
> In addition, a standard implementation ([UniVRM](https://github.com/vrm-c/UniVRM)) in c## that can import and export VRM file in [Unity](https://unity3d.com/) is released as open source.

Additional information can be viewed at [vrm.dev](https://vrm.dev/en/).

## How to load VRM file in BabylonJS?

You can load VRM file in BabylonJS that uses [babylon-vrm-loader](https://github.com/virtual-cast/babylon-vrm-loader), which is community-made BabylonJS glTF Loader Extension for `VRM`.

It supports `.vrm` and `.vci` file loading.

## A brief example

PG: <Playground id="#K5W35Y" title="VRM" description="Example of loading a VRM file." image=""/>

## What can do?

For example, once write some animation code, all VRM models can animate it!

![VRM Same Code Animation](/img/resources/babylonjs_and_vrm/vrm-samecode-animation.gif)

```javascript
// example code
vrmManager.humanoidBone.leftShoulder.rotationQuaternion = Quaternion.FromEulerAngles(
    Math.sin(Math.PI / 4 * (elapsedTime / 200)),
    0,
    Math.PI / 3.5,
);
vrmManager.humanoidBone.rightShoulder.rotationQuaternion = Quaternion.FromEulerAngles(
    Math.sin(Math.PI + (Math.PI / 4 * (elapsedTime / 200))),
    0,
    -Math.PI / 3.5,
);
vrmManager.humanoidBone.leftUpperLeg.rotationQuaternion = Quaternion.FromEulerAngles(
    Math.sin(Math.PI / 4 * (elapsedTime / 200)),
    0,
    0,
);
vrmManager.humanoidBone.rightUpperLeg.rotationQuaternion = Quaternion.FromEulerAngles(
    Math.sin(Math.PI + (Math.PI / 4 * (elapsedTime / 200))),
    0,
    0,
);
vrmManager.humanoidBone.leftLowerLeg.rotationQuaternion = Quaternion.FromEulerAngles(
    -Math.PI / 6,
    0,
    0,
);
vrmManager.humanoidBone.rightLowerLeg.rotationQuaternion = Quaternion.FromEulerAngles(
    -Math.PI / 6,
    0,
    0,
);
```

BabylonJS [standard animation mechanism](/divingDeeper/animation/animation_introduction) also can be used.

For instance, you can make pose to any VRM.

PG: <Playground id="#K5W35Y#8" title="VRM" description="Posing the VRM" image=""/>

## How to use?

On browser example is [here](https://codepen.io/anon/pen/zQXyxL?editors=1010).

Example PG: <Playground id="#K5W35Y" title="VRM" description="Example VRM" image=""/>

On npm/yarn with webpack...

```bash
$ npm install --save @babylonjs/core @babylonjs/loaders babylon-vrm-loader
## or
$ yarn add @babylonjs/core @babylonjs/loaders babylon-vrm-loader
```

```javascript
import * as BABYLON from '@babylonjs/core'

// has side-effect
// ref. https://webpack.js.org/guides/tree-shaking#mark-the-file-as-side-effect-free
import 'babylon-vrm-loader'

// vrmFile is File object retrieved by <input type="file">.
const scene = await BABYLON.SceneLoader.LoadAsync('file:', vrmFile, engine);
const vrmManager = scene.metadata.vrmManagers[0];

// Update secondary animation
scene.onBeforeRenderObservable.add(() => {
    vrmManager.update(scene.getEngine().getDeltaTime());
});

// Model Transformation
vrmManager.rootMesh.translate(new BABYLON.Vector3(1, 0, 0), 1);

// Work with HumanoidBone
vrmManager.humanoidBone.leftUpperArm.addRotation(0, 1, 0);

// Work with BlendShape(MorphTarget)
vrmManager.morphing('Joy', 1.0);
```

## External

* [vrm.dev](https://vrm.dev/en/)
* [virtual-cast/babylon-vrm-loader: GitHub](https://github.com/virtual-cast/babylon-vrm-loader)
* [vrm-c/UniVRM: GitHub](https://github.com/vrm-c/UniVRM)
* [Loading VRM Humanoid-based model - Demos and projects - Babylon.js Forums](https://forum.babylonjs.com/t/loading-vrm-humanoid-based-model/4980/8)


This tutorial:
 - Is for you, if you have no or limited experience with web development or servers in general.
 - Will show you how to setup and start a simple, local, NodeJs web server for your BabylonJs application.
 - Is primarily focused on Windows.


## Nodejs & NPM

If you already have NodeJs and NPM installed, skip to **Sample** section.

Download the latest (LTS) Nodejs installer from https://nodejs.org/en/download/

Run the installer and follow the NodeJs setup Wizard. The default settings are fine for our use.

NPM is included in this installation.


## Sample
Having installed NodeJs and NPM, we're now ready for our server code.

 - Create a folder for your project 

In this tutorial, we'll use **C:\babylon**

- Download the sample server [master.zip](https://github.com/aWeirdo/babylonJs_sample_server/archive/master.zip)
- Extract the .zip file content to C:\babylon

Your **C:\babylon** folder should now look something like this:
```
C:\babylon\public\
C:\babylon\public\index.html
C:\babylon\public\babylonScene.js

C:\babylon\package.json
C:\babylon\readme.md
C:\babylon\server.js
C:\babylon\Windows_NPM_INSTALL.BAT
C:\babylon\Windows_START.BAT

```


**On windows**
 - Navigate your file explorer to C:\babylon
 - Double-click **Windows_NPM_INSTALL.BAT**
 - Wait for BAT window to finish running and close itself. This executes ```npm install --save```

A new folder "node_modules" should be created.
 
 - Double-click **Windows_START.BAT**. This executes ```node server.js```
 - A new BAT window should open:
```
C:\babylon>node server.js
Server is listening on port 80
```
 - Your server should now be running. Note: Closing this window will shutdown the nodeJs server again.
 - In your browser, navigate to http://localhost/
 - If the BAT immidiately closes again, please re-check previous steps were done correctly.
 - To view errors, in a CMD or PowerShell window run ```C:\babylon> node server.js```  

**Other OS**
 - See NpmJs.org and NodeJs.org documentations for instructions. 
 - Execute "npm install --save" on C:\babylon
 - Execute "node server.js" on C:\babylon
 
 _If anyone wish to expand this section, feel free to PR_

## Public Folder
In the Public folder you'll find a sample scene consisting of a index.html and a babylonScene.js file.

The browser's access is restricted to this folder and it's files & sub-folders.

You're now ready to start your project.



Any scene or mesh can be downloaded as a file to you computer. This is achieved with the [scene serializer](//doc.babylonjs.com/api/classes/babylon.sceneserializer)

## Scene

Include the following code in your project to download your scene

```javascript
var objectUrl;
function doDownload(filename, scene) {
    if(objectUrl) {
        window.URL.revokeObjectURL(objectUrl);
    }
    
    var serializedScene = BABYLON.SceneSerializer.Serialize(scene);
        
    var strScene = JSON.stringify(serializedScene);
    
    if (filename.toLowerCase().lastIndexOf(".babylon") !== filename.length - 8 || filename.length < 9){
        filename += ".babylon";
    }
            
	var blob = new Blob ( [ strScene ], { type : "octet/stream" } );
       
    // turn blob into an object URL; saved as a member, so can be cleaned out later
    objectUrl = (window.webkitURL || window.URL).createObjectURL(blob);
    
    var link = window.document.createElement('a');
    link.href = objectUrl;
    link.download = filename;
    var click = document.createEvent("MouseEvents");
    click.initEvent("click", true, false);
    link.dispatchEvent(click);          
}
```
The following playground is an example of creating a scene, using the serializer, converting it to a JSON file and then giving the option of downloading it to your computer.  
PG: <Playground id="#1AGCWP#1" title="Save Scene" description="Example of saving a scene." image="/img/playgroundsAndNMEs/pg-1AGCWP-1.png"/>

## Meshes

The following code shows the changes necessary to just download a mesh to your computer.

```javascript
var objectUrl;
function doDownload(filename, mesh) {
    if(objectUrl) {
        window.URL.revokeObjectURL(objectUrl);
    }
    
    var serializedMesh = BABYLON.SceneSerializer.SerializeMesh(mesh);
        
    var strMesh = JSON.stringify(serializedMesh);
    
    if (filename.toLowerCase().lastIndexOf(".babylon") !== filename.length - 8 || filename.length < 9){
        filename += ".babylon";
    }
            
	var blob = new Blob ( [ strMesh ], { type : "octet/stream" } );
       
    // turn blob into an object URL; saved as a member, so can be cleaned out later
    objectUrl = (window.webkitURL || window.URL).createObjectURL(blob);
    
    var link = window.document.createElement('a');
    link.href = objectUrl;
    link.download = filename;
    var click = document.createEvent("MouseEvents");
    click.initEvent("click", true, false);
    link.dispatchEvent(click);          
}
```

External Libraries

Coming next

BabylonJS and Facebook Instant Games

Using babylon.js to create a game for Facebook.

BabylonJS and Ionic Angular

How to integrate Babylon.js an Ionic/Cordova app.

Babylon.js and Pixi.js

How to integrate Babylon.js and Pixi.js.

BabylonJS and Poki

Using babylon.js to create a game for Poki.

BabylonJS and React

How to integrate BabylonJS into a React application.

Babylon.js inside React Native

How to run the Babylon.js Engine inside React Native on Windows and iOS with Android still under test.

Babylon.js and VRM

Using 3D humanoid avatar data for VR applications in Babylon.js.

A Local Webserver for Babylon.js

A simple local webserver for running Babylon.js.