
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 render 3D scenes with JavaScript, it is possible to integrate them for a better visual effect.

Inspired by [Integrating Cesium with Three.js](https://cesium.com/blog/2017/10/23/integrating-cesium-with-threejs/), this solution renders the two libraries on two canvases, with the upper canvas used for BabylonJS. Set the upper canvas to `pointer-events: none;` so CesiumJS keeps control, then make BabylonJS's camera follow CesiumJS's camera.
## 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
The scene's `clearColor` is important; make the background transparent so you can see what is rendered 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 renders, we should change BabylonJS's camera position and rotation so they exactly match 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 because we need its camera parameters.
```javascript
engine.runRenderLoop(() => {
    viewer.render();
    moveBabylonCamera();
    scene.render();
});
```
## Setup root node
This step is not strictly necessary, but it makes 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 explains how to transform an existing Babylon.js game into 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 `FBInstant.initializeAsync` method. In the game example, I created a file called `main.ts` that creates the game once the framework is initialized:

```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 `onProgress` property 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 through the Facebook Instant Games Dashboard and run it. Setup is complete.

## Example

An example game can be found here: [SIMON3D](https://github.com/Temechon/simon3d)

This game is far from finished, but it shows 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 Babylon.js in an Ionic 2 application

For anyone interested, it is possible to integrate Babylon.js into an Ionic/Cordova app in just a few easy steps. The following is simply a narrative of how I did it. Since it has been a trial-and-error process, there is probably a better way to do it. When in doubt, I went for simplicity rather than optimization.

## 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 Babylon.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 on 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 Babylon.js, but I just downloaded the JavaScript files, saved them in the `www` folder, and referenced them 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 wraps our Babylon.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 and made available to the hierarchy of components that make up 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, which makes them available to any page that declares a dependency on the Config provider.

8. The Home page will contain the Babylon.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 access the canvas element. Think of it as Angular's equivalent of the 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. As a result, 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 anew.

## Conclusion

Integrating Babylon.js into an Ionic application was easier than it seemed at first, once you get to know a couple of things about how Ionic/Angular 2 works. In fact, doing the same in an Ionic 1 app was easy too, but overall everything looks cleaner and more streamlined in the latest version.  
However, despite the improvements introduced to Angular, the overhead of having both Ionic and Babylon.js together might make performance a bit sluggish. Maybe it's not the best way to implement 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.webp)
![](/img/how_to/ionic-angular/screenshot2.webp)
![](/img/how_to/ionic-angular/screenshot3.webp)



Pixi.js is a fast, lightweight, open source 2D library with full support for WebGL and very fast rendering. It works great as a UI in combination with Babylon.js, making it 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_ properties are very important and must both be 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, you need to reset the Pixi.js context first for each render, as shown 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 at https://github.com/pixijs/pixi-spine.
Here's some sample code showing 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 information about 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 indicate when users are playing your game, and the gameplayStop() event whenever gameplay halts, such as after a level ends, on game over, when returning to a menu, or when pausing the game.
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 the Poki team or submit your game directly.



## How to use Babylon.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 whether you choose Create React App or a custom project; this guide only discusses how to load Babylon.js in a component. This example uses the newer `@babylonjs/core` ES6 NPM package, but it can also be modified to work with the `babylonjs` NPM package.

## 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 (i.e. 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 on 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 on your website! A rotation has been added in the render loop (and the sphere has been changed to a box, so you can notice it).

If you would like to see this in action, there is a boilerplate project using the original `babylonjs` NPM package, which you can clone from:

- [Reactjs +Babylon.js + Electron](https://github.com/blurymind/babylon-react-electron-app)

There is a boilerplate using the above component with the ES6 NPM package `@babylonjs/core` here:

- [Reactjs +Babylon.js](https://github.com/brianzinn/babylonjs-cra-vanilla-ts)

## Adding other Babylon.js NPMs

If you start with the `@babylonjs` [ES6 NPMs](/setup/frameworkPackages/es6Support) (as we have done), then add only those packages.

> 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 difficult. Since Babylon.js 3.1, we can use ES6 imports not only for Babylon.js, but also for supported libraries (GUI/loaders/etc.).

If the component above does everything you need, then that's all you need and you're 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 Babylon.js components (and persist through HMR), and you can maintain your scene graph with declarative syntax and 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.webp)

## 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 files 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 a VRM file in Babylon.js?

You can load a VRM file in Babylon.js by using [babylon-vrm-loader](https://github.com/virtual-cast/babylon-vrm-loader), which is a community-made Babylon.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 you do?

For example, once you write some animation code, all VRM models can use it!

![VRM Same Code Animation](/img/resources/babylonjs_and_vrm/vrm-samecode-animation.webp)

```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) can also be used.

For instance, you can apply a pose to any VRM.

PG: <Playground id="#K5W35Y#8" title="VRM" description="Posing the VRM"/>

## How to use?

A browser example is available [here](https://codepen.io/anon/pen/zQXyxL?editors=1010).

Example PG: <Playground id="#K5W35Y" title="VRM" description="Example VRM"/>

For 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.LoadSceneAsync("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.



heyVR.io is a publishing platform for WebXR games, giving you access to a global audience of hundreds of thousands of players across multiple devices.

It offers a wide range of ready-to-use gameplay features to enhance your players' experience and enable you to start earning from your game through in-game content sales and advertisements.

## Useful Links
- [heyVR.io](https://heyvr.io)
- [heyVR Developer Area](https://developer.heyvr.io)
- [heyVR Documentation](https://docs.heyvr.io)

## Publishing Flow
heyVR.io is free to use, both for players and game developers.
Developers can create an account on the [Developer Area](https://developer.heyvr.io) and publish their games free of charge.
To read more about how the process works, please refer to the documentation on [Publishing Flow](https://docs.heyvr.io/en/developer-area/publish-a-game).

## SDK Implementation
While implementing the heyVR SDK in your games is completely optional, it's highly recommended that you take advantage of the SDK to further enhance your game and make use of features such as save games, leaderboards, inventory, etc. to provide a better user experience.

heyVR offers two different ways to integrate the SDK into your Babylon.js game. Depending on your development environment, you can proceed with either of them.

### 1) Built-in SDK
Every game submitted on heyVR has the option to enable the built-in SDK. This injects the SDK into the game at runtime. 

#### 1.1) Installation
The built-in SDK does not require any installation. 
To enable the built-in SDK, all you need to do is choose an SDK version for your build before uploading it. 
You can read more about this on the [documentation website](https://docs.heyvr.io/en/developer-area/publish-a-game#game-files).

> If you're using TypeScript, you can install the type definition package for the built-in SDK. Simply run:
> `npm i @heyvr/sdk-types -D` in your project's root directory.

#### 1.2) Basic Usage
Since the SDK loads asynchronously, it's important to make sure it's been loaded before making calls.
To do so, you can listen to the event that's dispatched by the SDK on load:

```javascript
const doStuff= () => 'Executed on SDK load'

window.heyVR ?
  doStuff() :
  window.addEventListener( 'heyVR.SDKLoaded', doStuff );
```

Once the SDK is loaded, all the methods are available via the `window.heyVR` object.
Here's a simple example of checking a user's authentication status:

```javascript
window.heyVR.user.isLoggedIn()
    .then( () => console.log( 'User is authenticated!' ) )
    .catch( () => console.warn( 'User is not logged in.' ) );
```

The SDK offers extensive methods and functionality, including a sandbox version that allows your game to use the SDK features locally. 
To read about how to use these features, please consult the [SDK documentation](https://docs.heyvr.io/game-development/sdk/gameplay).

### 2) NPM Package
You might be using NPM to manage your game's dependencies.
In that case, you can take advantage of the NPM package that heyVR provides. 

#### 2.1) Installation
You can install the package by running the following command in your project:

```bash
npm i @heyvr/sdk-gameplay
```
The package already includes the type definitions, in case you're using TypeScript.

#### 2.2) Basic Usage
The package's API is extremely similar to the built-in SDK. 
You can start by importing the pieces that you need. 
Let's replicate the previous example.

```javascript
import {User} from "@heyvr/sdk-gameplay/dist";

User.isLoggedIn()
    .then( () => console.log( 'User is authenticated!' ) )
    .catch( () => console.warn( 'User is not logged in.' ) );
```

The package also includes a sandbox version. 
For detailed instructions on how to use the package, check out the documentation on [NPM Package](https://docs.heyvr.io/en/game-development/sdk/gameplay/npm-package).


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



## Startup

It has been noticed that sometimes the Editor cannot be started (or starts with WebGL errors) and therefore cannot be
used. This 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 `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 recommended).
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 breaking something.

---

## 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 heyVR.io

heyVR integration for Babylon.js games

Babylon.js and Ionic Angular

How to integrate Babylon.js into 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 integrate Babylon.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