
CesiumJS is an open source JavaScript library for creating world-class 3D globes and maps with the best possible performance, precision, visual quality, and ease of use. Because both BabylonJS and CesiumJS show 3D scene with javascript, it is possible to integrate them together for a better visual effect.

Inspired by [Integrating Cesium with Three.js](https://cesium.com/blog/2017/10/23/integrating-cesium-with-threejs/), the base point of the solution is to render two libraries in two canvases, the canvas upper for BabylonJS. Set the upper canvas `pointer-events: none;`, CesiumJS will have the control and we make BabylonJS's camera to follow CesiumJS's.
## Setup CesiumJS
```javascript
const LNG = -122.4175, LAT = 37.655;

const viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: Cesium.createWorldTerrain(),
    useDefaultRenderLoop: false
});

viewer.camera.flyTo({
    destination : Cesium.Cartesian3.fromDegrees(LNG, LAT, 300),
    orientation : {
        heading : Cesium.Math.toRadians(0.0),
        pitch : Cesium.Math.toRadians(-90.0),
    }
});

// get these two points for later setup of BabylonJS root node.
const base_point = cart2vec(Cesium.Cartesian3.fromDegrees(LNG, LAT, 50));
const base_point_up = cart2vec(Cesium.Cartesian3.fromDegrees(LNG, LAT, 300));
```

## Setup BabylonJS
`Scene's clearColor` is important, we should make background transparent to see things renderer in CesiumJS.
```javascript
const engine = new BABYLON.Engine(canvas);
const scene = new BABYLON.Scene(engine);
scene.clearColor = BABYLON.Color4(0, 0, 0, 0);

const camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 0, -10), scene);
```

## Rendering Sequence
Before BabylonJS rendering, we should change BabylonJS's camera's position and rotation to make it absolutely the same with CesiumJS's.
```javascript
function cart2vec(cart) {
    return new BABYLON.Vector3(cart.x, cart.z, cart.y);
}

const fov = Cesium.Math.toDegrees(viewer.camera.frustum.fovy);
camera.fov = fov / 180 * Math.PI;

const civm = viewer.camera.inverseViewMatrix;
const camera_matrix = BABYLON.Matrix.FromValues(
    civm[0 ], civm[1 ], civm[2 ], civm[3 ],
    civm[4 ], civm[5 ], civm[6 ], civm[7 ],
    civm[8 ], civm[9 ], civm[10], civm[11],
    civm[12], civm[13], civm[14], civm[15]
);

// I'm sure it is able to get the result with the matrix directly, but I'm not familiar with matrixs, so you can do it yourselves.:)
const scaling = BABYLON.Vector3.Zero(), rotation = BABYLON.Vector3.Zero(), transform = BABYLON.Vector3.Zero();
camera_matrix.decompose(scaling, rotation, transform);
const camera_pos = cart2vec(transform),
    camera_direction = cart2vec(viewer.camera.direction),
    camera_up = cart2vec(viewer.camera.up);

const rotation_y = Math.atan(camera_direction.z / camera_direction.x);
if (camera_direction.x < 0) rotation_y += Math.PI;
rotation_y = Math.PI / 2 - rotation_y;
const rotation_x = Math.asin(-camera_direction.y);
const camera_up_before_rotatez = new BABYLON.Vector3(-Math.cos(rotation_y), 0, Math.sin(rotation_y));
const rotation_z = Math.acos(camera_up.x * camera_up_before_rotatez.x + camera_up.y * camera_up_before_rotatez.y + camera_up.z * camera_up_before_rotatez.z);
rotation_z = Math.PI / 2 - rotation_z;
if (camera_up.y < 0) rotation_z = Math.PI - rotation_z;

camera.position.x = camera_pos.x - base_point.x;
camera.position.y = camera_pos.y - base_point.y;
camera.position.z = camera_pos.z - base_point.z;
camera.rotation.x = rotation_x;
camera.rotation.y = rotation_y;
camera.rotation.z = rotation_z;
```
CesiumJs must render first as we need the parameters of its camera.
```javascript
engine.runRenderLoop(() => {
    viewer.render();
    moveBabylonCamera();
    scene.render();
});
```
## Setup root node
This step is actually not necessary, but it will make things easier.
```javascript
const root_node = new BABYLON.TransformNode("BaseNode", scene);
root_node.lookAt(base_point_up.subtract(base_point));
root_node.addRotation(Math.PI / 2, 0, 0);

// Then you can add your meshes to root_node.
const box = BABYLON.MeshBuilder.CreateBox("box", {size: 10}, scene);
const material = new BABYLON.StandardMaterial("Material", scene);
material.emissiveColor = new BABYLON.Color3(1, 0, 0);
material.alpha = 0.5;
box.material = material;
box.parent = root_node;

const ground = BABYLON.MeshBuilder.CreateGround("ground", {
    width: 100,
    height: 100
}, scene);
ground.material = material;
ground.parent = root_node;
```
## Example
An example can be found here: [cesium-babylonjs](https://github.com/Hypnosss/cesium-babylonjs).


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 useBabylon.js in an Ionic 2 application

For anyone interested, it is possible to integrateBabylon.js 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, installBabylon.js 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 asBabylon.js, 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 ourBabylon.js Engine:

```bash
ionic g providerBabylon.js
```

> 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 theBabylon.js 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

IntegratingBabylon.js 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 andBabylon.js 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
const pixiRenderer = new PIXI.WebGLRenderer({
  context: engine._gl,
  view: engine.getRenderingCanvas(),
  clearBeforeRender: false,
  autoStart: false,
});
```

## Add Pixi.js Sprites to Stage

```javascript
const stage = new PIXI.Container();
const 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.

```javascript
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

```javascript
scene.autoClear = false;
```

to make the background of the scene transparent. In this case render Pixi.js before Babylon.js.

```javascript
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.

```javascript
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.

```javascript
engine.runRenderLoop(function () {
  if (engine.webGLVersion === 1) {
    pixiRenderer.reset();
  }
  scene.render();
  engine.wipeCaches(true);

  pixiRenderer.reset();
  pixiRenderer.render(stage);
});
```

## Spine animation with pixi.js

![image info](https://raw.githubusercontent.com/pixijs/examples/gh-pages/examples/assets/pixi-spine/spineboy-pro.png)

Running 2D spine animation is now easy using the pixi spine extension @https://github.com/pixijs/pixi-spine
Here's a sample code of how to run a simple spineboy animation

```javascript
loader.add("spineboy", "https://raw.githubusercontent.com/pixijs/examples/gh-pages/examples/assets/pixi-spine/spineboy-pro.json");

loader.load((loader, resources) => {
  let spineboy = new PIXI.spine.Spine(resources.spineboy.spineData);
  spineboy.scale.set(0.4);
  spineboy.state.setAnimation(0, "portal", false);
  spineboy.x = 1000;
  spineboy.y = 650;
  spineboy.state.getCurrent(0).onComplete = () => {
    spineboy.state.setAnimation(0, "shoot", true);
  };
  pixi.stage.addChild(spineboy);
});
```

[Working playground with spine animation](https://www.babylonjs-playground.com/#DX6LWQ)
For more api info as regards spine animation, visit [github](https://github.com/pixijs/pixi-spine)

## 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 useBabylon.js with React

For anyone interested, it is not difficult to integrate Babylon.js 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 Babylon.js 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 Babylon.js 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 { useEffect, useRef } from "react";
import { Engine, Scene } from "@babylonjs/core";

export default ({ antialias, engineOptions, adaptToDeviceRatio, sceneOptions, onRender, onSceneReady, ...rest }) => {
  const reactCanvas = useRef(null);

  // set up basic engine and scene
  useEffect(() => {
    const { current: canvas } = reactCanvas;

    if (!canvas) return;

    const engine = new Engine(canvas, antialias, engineOptions, adaptToDeviceRatio);
    const scene = new Scene(engine, sceneOptions);
    if (scene.isReady()) {
      onSceneReady(scene);
    } else {
      scene.onReadyObservable.addOnce((scene) => 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);
      }
    };
  }, [antialias, engineOptions, adaptToDeviceRatio, sceneOptions, onRender, onSceneReady]);

  return <canvas ref={reactCanvas} {...rest} />;
};
```

> In 45 lines we have:
>
> - Reusable React Component for Babylon.js.
> - 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 Babylon.js 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)
  const 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)
  const 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) {
    const 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 +Babylon.js + Electron](https://github.com/blurymind/babylon-react-electron-app)

There is a boilerplate using above component with ES6 NPM `@babylonjs/core` here

- [Reactjs +Babylon.js](https://github.com/brianzinn/babylonjs-cra-vanilla-ts)

## Adding otherBabylon.js NPMs

If you start with the `@babylonjs` [ES6 NPMs](/setup/frameworkPackages/es6Support) (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 Babylon.js into a React site turns out to be not so tough. SinceBabylon.js 3.1 we can use ES6 imports not only forBabylon.js, 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 yourBabylon.js 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 Babylon.js.

What you are able to easily do is powerful, because inside the Scene component you can declare Babylon.js 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.

> Babylon.js 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.



![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 Babylon.js?

You can load VRM file in Babylon.js that uses [babylon-vrm-loader](https://github.com/virtual-cast/babylon-vrm-loader), which is community-madeBabylon.js 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."/>

## 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](/features/featuresDeepDive/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"/>

## 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"/>

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)



Descriptions of how to use VUE with BabylonJS



Descriptions of how to use some third party libraries with Babylon.js



## Startup

It has been noticed that sometimes the Editor can't be started (or at least with WebGL errors) and then can't be
used. That problem has been noticed mostly on devices using Intel HD Graphics.

---

## Intel HD Graphics
There are 2 options to fix the startup problem

### Changing Windows settings
- Open the Windows settings and search for `Graphics Settings`.
- In `Graphics Performance Preference`, select `Desktop App` in the drop down and then browse to the `BabylonJSEditor.exe`, you should now see it added to the list.
- Click on `Babylon JS Editor` in the list and click `Options`.
- Set your preference to `High Performance Mode`.
- Close and reopen the Editor.

### Updating the Intel UHD driver
[Install the Generic Intel DCH graphics driver](https://downloadcenter.intel.com/download/30381/Intel-Graphics-Windows-10-DCH-Drivers) (the `Driver Support Assistant` is recommanded).
Read the caveat, but in short: your default drivers are usually customized by the manufacturer, but this generic driver is not. Obviously you run the risk of screwing something up.

---

## References

Linked issue: https://github.com/BabylonJS/Editor/issues/278

External Libraries

Coming next

Babylon.js and Facebook Instant Games

Using babylon.js to create a game for Facebook.

Babylon.js 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.

Babylon.js and Poki

Using babylon.js to create a game for Poki.

Babylon.js and React

How to integrateBabylon.js into a React application.

Babylon.js and VRM

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

Vue

Descriptions of how to use VUE with BabylonJS

Integrate With CesiumJS

Learn how to integrate BabylonJS with CesiumJS