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



The [Babylon Unity Toolkit](http://www.babylontoolkit.com) hosts a set of tools designed to provide a small subset of the Unity Editor's design-time features for exporting Babylon.js content scene files. You can create your games using a design-time, component-based architecture. Please refer to the [Unity Editor](https://docs.unity3d.com/Manual/index.html) documentation for details. 


# WebXR Extension

## Introduction
The package provides a set of various features for working with hand gestures and organizing spaces in immersive mode.

## Installation
Just install the package `@clickon/xr-extension` with npm:
```shell
npm i @clickon/xr-extension
```

## Usage

### Initiation and exit
Now you can initialize and use the service provided by the package. The service uses the standard WebXRDefaultExperience and does not interfere with its operation. This means you can continue using any standard WebXR features provided by BabylonJS.
```typescript
const xrService = new XRService();
await xrService.init(scene, options);
```

The service will be initialized with the options you provide.

```typescript
export type TXRServiceOptions = {
	mode: 'immersive-vr' | 'immersive-ar';
	features?: TXRFeaturesConfig;
	needBabylonUIEnterButton?: boolean;
	floors?: string[];
	enableColliding?: boolean;
	debugConfig?: TClickLoggerOptions & {
		outSlotName: string;
		isLoggerDeactivated?: boolean;
	};
};
```
Some of these values will be passed to the standard BabylonJS functions that handle XR,
while others will configure the XRService itself.

*IXRService* and *TXRFeaturesConfig* define the capabilities of the service.

Example of entering and exiting immersive mode after initialization:
```typescript
isOk = await xrService.activateXR();
// do some
xrService.exitFromXR();
```

### Access to features
Primarily, _XRService_ is used to access XR feature wrappers or the features 
themselves and work with them. The set of features and their initial configuration 
are defined by the _features?:TXRFeaturesConfig_ field in _TXRServiceOptions_.

```typescript
const handTrackingFeatureEnv = xrService.extractFeatureEnv('HAND_TRACKING');
if(handTrackingFeatureEnv){
    // interract with feature wrapper
}
```
All feature wrappers implement _IXRFeatEnv_ and provide access to native XR features of Babylon.js.
Prefer the functions and attributes of the wrappers whenever they are provided.
All functions and attributes are described by corresponding interfaces for each wrapper.
```typescript
export interface IXRFeatEnv<NATIVE_FEAT_TYPE extends IWebXRFeature = IWebXRFeature>{
	//...
	readonly nativeFeature: NATIVE_FEAT_TYPE | undefined;
	//...
}
```


  


# Azure Media Player 360 Video Plugin

The Azure Media Player 360 Video Plugin is a handy 360 video plugin for easy integration into your Babylon.js 360 Web Apps.

## Introduction

The [Azure Media Player](http://amp.azure.net/libs/amp/latest/docs/index.html) 360 Video plugin for AMP (aka [Azure Media Player](http://amp.azure.net/libs/amp/latest/docs/index.html)) uses Babylon.js to facilitate the integration of 360 videos into your web app.

The plugin natively supports VR headsets (Windows Mixed Reality, etc.).

{/* [Online Demo of the plugin](https://www.babylonjs.com/Demos/Amp360Video/) */}

## How to Run Locally

First, clone the Babylon.js extensions repository:

```bash
git clone https://github.com/BabylonJS/Extensions.git
```

Once the repository has been cloned, open a command prompt in the Amp360Video folder.

Then, type the following commands:

```bash
npm install
npm start
```

The hosting web page will automatically open (using webpack-dev-server).

## How it works

The 360 video plugin is a [videojs](https://docs.videojs.com/tutorial-plugins.html) plugin compatible with AMP versions 2.1.7 through the latest supported version (2.2.3 at the time of writing).

The plugin depends on Babylon.js in order to enable 3D functionalities in AMP.

For more information about AMP, you can access their [documentation](http://amp.azure.net/libs/amp/latest/docs/index.html).

## How to use it on your website

After deploying the bundled JavaScript file [`dist/amp-360video.js`](https://raw.githubusercontent.com/BabylonJS/Extensions/master/Amp360Video/dist/amp-360video.js) from the dist directory to your website, you can follow the steps below.

> Note: If you used the plugin before, you might have needed to reference Babylon.js in your site. We now provide a bundle that keeps delivery as small as possible, so the Babylon.js reference is no longer required.

## External Resources

Include the following resources in your HTML:

```html

<script src="https://code.jquery.com/pep/0.4.1/pep.js"></script>


<link href="https://amp.azure.net/libs/amp/2.2.3/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
<script src="https://amp.azure.net/libs/amp/2.2.3/azuremediaplayer.min.js"></script>
```

## Plugin Script

Include the link to your previously downloaded plugin script in your HTML:

```html

<script src="amp-360video.js"></script>
```

## Plugin Setup

You can either embed the plugin in your HTML or initialize it in code, as specified in the [AMP documentation](http://amp.azure.net/libs/amp/latest/docs/index.html#plugins).

### Html Initialization

Add the **threeSixty plugin** to your video data-setup:

```html
<video playsinline crossorigin="anonymous" class="azuremediaplayer amp-default-skin amp-big-play-centered" autoplay controls width="100%" height="100%" data-setup='{ "techOrder": ["azureHtml5JS", "html5"], "plugins": { "threeSixty": { } } }'>
    <source src="//willzhanmswest.streaming.mediaservices.windows.net/1f2dd2dd-ee99-40be-aae9-d0c2209982eb/DroneFlightOverLasVegasStripH3Pro7.ism/Manifest" type="application/vnd.ms-sstr+xml" />
    <p class="amp-no-js">
        To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
    </p>
</video>
```

The only difference from your default AMP initialization is the presence of the 360 plugin:

```javascript
"plugins": { "threeSixty": { } }'
```

One example can be found in the _index.html_ file located in the [repo](https://github.com/BabylonJS/Extensions/blob/master/Amp360Video/index.html).

### Code Initialization

The following code initializes the plugin in your AMP player:

```javascript
const myPlayer = amp(
  "videoPlayer",
  {
    nativeControlsForTouch: false,
    autoplay: false,
    controls: true,
    width: "640",
    height: "480",
    poster: "",
    techOrder: ["azureHtml5JS", "html5"],
    plugins: {
      threeSixty: {
        enableVR: true,
      },
    },
  },
  function () {
    console.log("Good to go!");
    // add an event listener
    this.addEventListener("ended", function () {
      console.log("Finished!");
    });
  },
);

myPlayer.src([
  {
    src: "//willzhanmswest.streaming.mediaservices.windows.net/1f2dd2dd-ee99-40be-aae9-d0c2209982eb/DroneFlightOverLasVegasStripH3Pro7.ism/Manifest",
    type: "application/vnd.ms-sstr+xml",
  },
]);
```

One example can be found in the indexCode.html file located in the [repo](https://github.com/BabylonJS/Extensions/blob/master/Amp360Video/indexCode.html).

## Define the 360 video format (Monoscopic, Side by Side, Top Bottom)

Several types of 360 video exist today. The most common are Monoscopic Panoramic, Stereoscopic Side by Side panoramic, and Top Bottom panoramic.

The first represents a panoramic view dedicated to one eye. The second contains two panoramic views, one for each eye, whereas the last contains both panoramic views on the top and bottom of the video, respectively.

The plugin defaults to Monoscopic panoramic mode.

In order to specify the type of your source (this can unfortunately not be automated in the plugin), you can specify a different value in your options:

### By HTML configuration

In the data-setup plugin section:

```javascript
"plugins": { "threeSixty": { "videoType": "stereoscopicTopBottom" } }
```

The available types are: "monoscopicPanoramic", "stereoscopicSideBySide", "stereoscopicTopBottom".

### By code configuration

This works exactly the same as the previous point. In the options of your plugin:

```javascript
plugins: {
    "threeSixty": {
        videoType: "stereoscopicTopBottom"
    }
}
```

The available types are: "monoscopicPanoramic", "stereoscopicSideBySide", "stereoscopicTopBottom".

## Enable/Disable the VR Button

By default, the plugin includes a VR mode available through a button shaped like a head-mounted display.

In order to disable the button, you can specify in your options:

### By HTML configuration

In the data-setup plugin section:

```javascript
"plugins": { "threeSixty": { "enableVR": false } }
```

### By code configuration

This works exactly the same as the previous point. In the options of your plugin:

```javascript
plugins: {
    "threeSixty": {
        enableVR: false
    }
}
```

## Update the camera FOV

By default, the plugin uses a camera with a 1.18-radian field of view.

In order to change it if needed, you can specify a different value in your options:

### By HTML configuration

In the data-setup plugin section:

```javascript
"plugins": { "threeSixty": { "fov": 1 } }
```

### By code configuration

This works exactly the same as the previous point. In the options of your plugin:

```javascript
plugins: {
    "threeSixty": {
        fov: 1
    }
}
```

## Update the default camera orientation

If the camera is not looking where you expect when the video starts, you can use the defaultCameraOrientationX and defaultCameraOrientationY options to adjust the camera's starting point for your use case. These properties are angles around the x and y axes, respectively, defined in radians.

In order to change them, you can specify a different value in your options:

### By HTML configuration

In the data-setup plugin section:

```javascript
"plugins": { "threeSixty": { "defaultCameraOrientationX": 1 } }
```

### By code configuration

This works exactly the same as the previous point. In the options of your plugin:

```javascript
plugins: {
    "threeSixty": {
        defaultCameraOrientationY: 1
    }
}
```

## Disable WebGL2

The default setup enables WebGL2 to enhance application performance. If you encounter compatibility issues across platforms and want to disable it, you can use the setup below:

### By HTML configuration

In the data-setup plugin section:

```javascript
"plugins": { "threeSixty": { "disableWebGL2Support": true } }
```

### By code configuration

This works exactly the same as the previous point. In the options of your plugin:

```javascript
plugins: {
    "threeSixty": {
        disableWebGL2Support: true
    }
}
```

## Adapt to native resolution

To provide the best performance, the plugin does not account for your [devicePixelRatio](https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio) setup by default. It renders 1 to 1 with CSS pixels. On a HiDPI or Retina display, the ratio might be quite high, which means that if you want to make full use of your pixels (using physical pixels), the plugin may need to render, for example, four times more pixels than the actual CSS pixel count.

You can use the plugin's hardwareScalingLevel setting to choose how many times the physical pixels of your device are multiplied to define the number of CSS pixels. For instance, a value of 0.5 means there would be twice as many pixels in width and height as the number of CSS pixels, which greatly enhances the resolution.

### By HTML configuration

In the data-setup plugin section:

```javascript
"plugins": { "threeSixty": { "hardwareScalingLevel": 0.5 } }
```

### By code configuration

This works exactly the same as the previous point. In the options of your plugin:

```javascript
plugins: {
    "threeSixty": {
        hardwareScalingLevel: 0.5
    }
}
```


This section contains extensions that help Babylon.js integrate with Content Management Systems.



# Box3D Physics

[babylon-box3d](https://github.com/Pryme8/babylon-box3d) brings [Box3D](https://github.com/erincatto/box3d) to Babylon.js. Box3D is Erin Catto's 3D successor to Box2D v3: an MIT licensed rigid body engine with a soft step solver, continuous collision, cross platform determinism and SIMD. The package ships the engine compiled to WebAssembly together with `Box3DPlugin`, an implementation of the physics v2 plugin interface. It supports most of the Physics V2 API (`PhysicsAggregate`, `PhysicsBody`, `PhysicsShape`, constraints, events, ray casts), so scenes written for the Havok plugin generally run on it without changes. The differences that can change how a scene behaves are listed under [Limitations](#limitations).

## Features

- Static, animated and dynamic bodies, thin instances, pre step teleport and action modes
- Sphere, capsule, cylinder, box, convex hull, mesh, height field and container shapes
- Ball and socket, hinge, prismatic, slider, lock and distance constraints with limits, velocity and position motors
- `Physics6DoFConstraint` and `SpringConstraint`, mapped onto the closest Box3D joint with Havok's axis rules: twist limits, a swing cone and one sided hinge limits carry over, which covers ragdolls
- Mass properties with Havok's semantics, including inertia per unit mass and locked rotation axes
- Collision started, continued and finished events, trigger events, per body observables, Havok's event mask bits
- Ray casts with membership and collide masks
- Box3D extras: explosions, wheel joints with suspension and steering, parallel joints, collision groups, rolling resistance
- An optional threaded build that runs one world step across several worker threads, with identical results

## Limitations

Box3D is a different engine, so parts of the API map onto it approximately and a few do not map at all:

- `PhysicsCharacterController` is not supported yet: it depends on Havok internals.
- `MESH` shapes are for static and animated bodies and `HEIGHTFIELD` shapes for static ones, as in Box3D itself. A dynamic body needs convex shapes, or a `CONTAINER` of them.
- `BOX`, `CYLINDER` and `CONVEX_HULL` are built as Box3D convex hulls. A cylinder is a 16 sided prism, and a hull above Box3D's limit of 128 vertices, faces or edges is simplified until it fits.
- Box3D has a fixed set of joints, so a `Physics6DoFConstraint` becomes the one its axes describe: weld, revolute, spherical, prismatic or distance. The swing cone is symmetric (the larger of the `ANGULAR_Y` and `ANGULAR_Z` ranges is used) and at most 90 degrees, limit stiffness and damping become one softness for the whole joint, and a motor on an axis the chosen joint does not have does nothing. Combinations that match no joint fall back to the closest one or leave the bodies unconstrained, and say so once in the console.
- `COLLISION_CONTINUED` comes from Box3D's hit events. It is reported when two shapes hit each other faster than 1 m/s, not on every step they stay in contact, and its `impulse` holds that approach speed.
- The queries only the Havok plugin has, `shapeCast`, `shapeProximity` and `pointProximity`, have no equivalent. Ray casts are supported.

## Usage

### Installation

```
npm add @babylonjs/core babylon-box3d
```

```typescript
import { Vector3 } from "@babylonjs/core/Maths/math.vector";
import "@babylonjs/core/Physics/joinedPhysicsEngineComponent"; // adds scene.enablePhysics
import { Box3D, Box3DPlugin } from "babylon-box3d";

const box3d = await Box3D();
scene.enablePhysics(new Vector3(0, -9.81, 0), new Box3DPlugin(true, box3d));
```

`scene.enablePhysics` comes from the side effect import `@babylonjs/core/Physics/joinedPhysicsEngineComponent`, which `babylon-box3d` does not import. An app that imports Babylon module by module, as above, needs that line once. Without it `scene.enablePhysics` is either missing (`scene.enablePhysics is not a function`) or, in recent Babylon 9 releases, a stub that does nothing, so the first physics body throws `No Physics Engine available.` Importing from the `@babylonjs/core` index includes it.

The wasm file is fetched from the same folder as the loader script. With a bundler pass its URL explicitly:

```typescript
import wasmUrl from "babylon-box3d/lib/esm/box3d.wasm?url"; // vite

const box3d = await Box3D({ locateFile: () => wasmUrl });
```

The loader and the wasm are one build and have to stay together. An app that copies `box3d.wasm` into a folder of its
own has to refresh that copy whenever it updates the package, and clear its bundler's dependency cache with it; a
loader and a wasm from two builds cannot bind to each other, so the module fails to instantiate or `new Box3DPlugin`
throws naming the entry points that are missing.

### Threads

Box3D can run a world step on several threads. That needs `SharedArrayBuffer`, which a browser only gives to a [cross origin isolated](https://developer.mozilla.org/en-US/docs/Web/API/Window/crossOriginIsolated) page, so it ships as a second build of the wasm that is loaded only when asked for:

```typescript
import { Vector3 } from "@babylonjs/core/Maths/math.vector";
import "@babylonjs/core/Physics/joinedPhysicsEngineComponent";
import { LoadBox3D, Box3DPlugin } from "babylon-box3d";

// the threaded build where the page allows it, the single threaded one everywhere else
const box3d = await LoadBox3D({ threads: "auto" });
scene.enablePhysics(new Vector3(0, -9.81, 0), new Box3DPlugin(true, box3d, { workerCount: "auto" }));
```

The page has to be served with:

```
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
```

`workerCount` counts the thread the step is called on, so 4 means this one and 3 others; `"auto"` asks for half of `navigator.hardwareConcurrency`. On a page that is not isolated the single threaded build is loaded, the worker count is clamped to 1 and the plugin explains it once in the console, so the same code runs either way. Results do not change: the same scene stepped the same number of times reaches bit identical positions at any worker count. The step is still finished when `executeStep` returns, so nothing in a scene has to be written differently.

The threads are worth asking for on scenes with thousands of awake bodies, where they take a step several times faster than one thread can. Under a few hundred they cost more than they save.

### Script tags

```html
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://unpkg.com/babylon-box3d/lib/umd/box3d.umd.js"></script>
<script src="https://unpkg.com/babylon-box3d/umd/babylon.box3d.min.js"></script>
<script>
  // a classic script cannot use await at the top level, so the setup runs in an async function
  (async () => {
    const box3d = await Box3D();
    scene.enablePhysics(new BABYLON.Vector3(0, -9.81, 0), new BABYLONBOX3D.Box3DPlugin(true, box3d));
    // create physics bodies from here on
  })();
</script>
```

### Playground

```javascript
// Box3D is not on the Playground's CDN list, so load the two script tags first. This is a complete scene:
// paste it over the default one and hit run.
const createScene = async function () {
  const load = (src) =>
    new Promise((resolve, reject) => {
      const script = document.createElement("script");
      script.src = src;
      script.onload = resolve;
      script.onerror = () => reject(new Error("could not load " + src));
      document.head.appendChild(script);
    });
  await load("https://unpkg.com/babylon-box3d@0.4/lib/umd/box3d.umd.js");
  await load("https://unpkg.com/babylon-box3d@0.4/umd/babylon.box3d.min.js");

  // Box3D's Large Pyramid benchmark, the pyramid in the performance tables below: a 2D pyramid of unit boxes, rows
  // boxes wide at the base. 20 rows is the 210 box scene, 50 rows the 1275 box one.
  const rows = 20;

  const scene = new BABYLON.Scene(engine);
  const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2 + 0.6, Math.PI / 2.6, rows * 1.6 + 10, new BABYLON.Vector3(0, rows * 0.4, 0), scene);
  camera.attachControl(canvas, true);
  new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

  const box3d = await Box3D();
  const plugin = new BABYLONBOX3D.Box3DPlugin(true, box3d);
  scene.enablePhysics(new BABYLON.Vector3(0, -9.81, 0), plugin);

  // the benchmark's ground slab, friction and restitution
  const groundSize = Math.max(40, rows * 2 + 20);
  const ground = BABYLON.MeshBuilder.CreateBox("ground", { width: groundSize, height: 1, depth: groundSize }, scene);
  ground.position.y = -0.5;
  new BABYLON.PhysicsAggregate(ground, BABYLON.PhysicsShapeType.BOX, { mass: 0, friction: 0.6, restitution: 0 }, scene);

  const h = 0.5;
  for (let i = 0; i < rows; i++) {
    const material = new BABYLON.StandardMaterial("row" + i, scene);
    material.diffuseColor = BABYLON.Color3.FromHSV((i * 15) % 360, 0.55, 0.9);
    material.specularColor = new BABYLON.Color3(0.1, 0.1, 0.1);
    for (let j = i; j < rows; j++) {
      const box = BABYLON.MeshBuilder.CreateBox("box", { size: 1 }, scene);
      box.position.set((i + 1) * h + 2 * (j - i) * h - h * rows, (2 * i + 1) * h, 0);
      box.material = material;
      // 1 tonne, a unit box at the benchmark's density of 1000
      new BABYLON.PhysicsAggregate(box, BABYLON.PhysicsShapeType.BOX, { mass: 1000, friction: 0.6, restitution: 0 }, scene);
    }
  }

  // click it to blow a crater in it
  scene.onPointerDown = (event, pick) => {
    if (pick.hit) {
      plugin.explode(pick.pickedPoint, 6, 25000, 3);
    }
  };

  return scene;
};
```

### Box3D specific features

```typescript
// radial impulse on everything within 6 units
plugin.explode(position, 6, 2500);

// a car: wheel joints with suspension, steering on the front wheels and a drive motor on the rear ones
const wheel = plugin.createWheelJoint(chassisBody, wheelBody, {
  pivotA: new Vector3(1.5, -0.5, 0.8), // chassis local anchor
  axisA: Vector3.Up(), // suspension axis
  axleA: Vector3.Forward(), // axle direction in chassis space
  enableSteering: true,
  enableSpinMotor: false,
});
wheel.setSteeringAngle(0.3);
rearWheel.setSpinSpeed(-40);

// keep a body upright with a soft spring instead of locking its rotation
plugin.createParallelJoint(groundBody, chassisBody, Vector3.Up(), Vector3.Up(), 0.5, 1);

// ragdoll bones that never collide with each other
plugin.setShapeFilterGroup(boneShape, -ragdollIndex);
```

## Performance

Box3D, Havok and Oimo building the same scenes through Babylon's physics API, engine defaults, a fixed 1/60 s step and nothing rendered. Mean milliseconds per physics step, sleep on, median of 3 interleaved runs, AMD Ryzen 9 5900X, Babylon.js 9.26.1, `@babylonjs/havok` 1.3.14, oimo 1.0.9, node 24 (2026-09-17):

| Scene                          | Box3D |           Havok |            Oimo |
| ------------------------------ | ----: | --------------: | --------------: |
| Pyramid, 20 rows (210 boxes)   |  0.09 |            0.51 |             6.3 |
| Pyramid, 50 rows (1275 boxes)  |  0.98 | 7.45, collapses | 68.2, collapses |
| Pyramid, 100 rows (5050 boxes) |  28.2 | 27.5, collapses |  174, collapses |
| Pile, 1000 boxes and spheres   |  3.44 |            4.48 |            31.3 |
| Pile, 4000 boxes and spheres   |  20.9 |            22.0 |             183 |

The same Box3D scenes on the threaded build, where Havok and Oimo have no equivalent:

| Scene                          | 1 thread | 4 workers | 8 workers |
| ------------------------------ | -------: | --------: | --------: |
| Pyramid, 20 rows (210 boxes)   |     0.09 |      0.05 |      0.11 |
| Pyramid, 50 rows (1275 boxes)  |     0.98 |      0.42 |      0.34 |
| Pyramid, 100 rows (5050 boxes) |     28.2 |      7.55 |      5.72 |
| Pile, 1000 boxes and spheres   |     3.44 |      1.38 |      1.65 |
| Pile, 4000 boxes and spheres   |     20.9 |      7.21 |      6.31 |

Reading these fairly:

- Box3D keeps every pyramid standing for 30 s of simulated time, up to 100 rows, where Babylon's default Havok setup has a 50 row pyramid flat within 10 s. The stability, not the clock, is the interesting column.
- On one thread Havok's own world step is faster in the piles (15.7 ms against 19.5 ms at 4000 bodies). Box3D is ahead on the whole Babylon step because the plugin only syncs the bodies Box3D reports as moved.
- Threads are for big scenes: the 210 box pyramid is slower with 8 workers than with none.
- Every threaded run ends in the same state as the single threaded one, drift and pile height included.
- Chrome tells the same story, with one difference: there Havok's full step wins the 4000 body pile on one thread.

The harness is in the repository: `npm run bench`, `npm run bench -- --workers 4`, or `bench.html` in the demo, with full tables in [bench/results](https://github.com/Pryme8/babylon-box3d/tree/master/bench/results).

## Examples

The repository contains a showcase with a 5000 box pyramid, Box3D's human ragdoll, a drivable car and a wrecking ball demolition: `npm run demo` in a checkout, then open `http://localhost:5178/?demo=pyramid|ragdolls|car|destruction`. The dev server sends the cross origin isolation headers, so `?demo=pyramid&rows=100&workers=8` runs the 5050 box pyramid on threads and the overlay reports the worker count.

## Documentation

Full documentation, the C shim source and build instructions are in the [GitHub repository](https://github.com/Pryme8/babylon-box3d).



# Babylon Buffered Interpolation

Have you ever wanted to manage the position, rotation, and scale of networked Babylon.js objects? This [awesome package](https://github.com/virbela/buffered-interpolation) provides a fantastic solution. It is a port of Mozilla's [buffered-interpolation](https://github.com/InfiniteLee/buffered-interpolation) to Babylon.js and aims to work well both in situations with continuous and sparse network updates.

To see this system working live, check out the virtual co-presence experience: [Frame](https://framevr.io/).

To get started and learn more, head over to [Virbela's GitHub page](https://github.com/virbela/buffered-interpolation).



This system allows you to take an array of meshes, clone them, and display the results in a variety of patterns.

Be aware that the current documentation refers to the old version of Cloner. Meanwhile, the basic API is the same, so you can use it as a reference.

The new Cloner version is [published on npm](https://www.npmjs.com/package/bp-cloner) and can be installed with <pre>npm i bp-cloner</pre>



Welcome to the documentation for the Babylon.JS Editor. A series of tutorials is available to help you understand the basics of the Editor. It is recommended that you read the tutorials before getting started with the Editor.

Please note that the Editor is a community project maintained mostly by Julien Moreau-Mathis ([@luaacro](https://twitter.com/Luaacro)).



# Figma to BabylonJS
![Screenshot showing the Figma right-click menu on the Plugins option](/img/extensions/FigmaToBabylonJS/FigmaToBabylonJS.webp)

## Introduction

FigmaToBabylonJS is a Figma plugin that lets you export or serialize your Figma designs as BabylonJS GUI controls. It uses a headless Babylon GUI environment running inside the plugin to serialize your Figma designs into .json files. These can be parsed into a Fullscreen UI advanced dynamic texture (https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#advanceddynamictexture) or as a single GUI control.

This plugin's goal is to quickly and easily export Figma designs to BabylonJS GUI controls.

## Get the Plugin
The plugin is available via the [Figma community](https://www.figma.com/community/plugin/1186201881571137432) page.

After adding the plugin to Figma, select the frame (artboard) that you want to export and right-click it.
In the right-click menu, select Plugins > Saved Plugins > FigmaToBabylonJS
![Screenshot showing the Figma right-click menu on the Plugins option](/img/extensions/FigmaToBabylonJS/FigmaToBabylonJS-Step1.webp)

You will be presented with 5 menu options:

+ **Export & Settings** 
  + This is the main export screen, where you can choose what to export and how.
+ **Quick Export Fullscreen ADT** 
  + This will export the selected frame as a fullscreen advanced dynamic texture with your last settings.
+ **Quick Export Control Only** 
  + This will export the selected frame as a single control with your last settings.
+ **Quick Export Fullscreen ADT with Images** 
  + This will export the selected frame as a fullscreen advanced dynamic texture with images included.
+ **Quick Export Control Only with Images** 
  + This will export the selected frame as a single control with images included.

## How to Use
   
For first-time users, it is recommended to click the **"Export & Settings"** menu option first to set up how you want the export to work.

After clicking **"Export & Settings"**, you should see this screen:
![Screenshot showing the Figma to BabylonJS plugins first screen. Two checkboxes for background and images, with two large buttons for exporting](/img/extensions/FigmaToBabylonJS/FigmaToBabylonJS-Step2.webp)
Each tab controls what will and will not be included in the export.

At the bottom, there are two large buttons. 
The first button, **"Export Fullscreen ADT"**, exports the entire frame as an [advanced dynamic texture](/features/featuresDeepDive/gui/gui#advanceddynamictexture), which can then be passed into Babylon.js's advanced dynamic texture function.
For **Export Fullscreen ADT** exported JSON, you can use the "Load" menu option on gui.babylonjs.com or load it in your project using: 
 ```ts
const  guiData  =  require("../figmaToBabylonJS.json")
let  advancedTexture  =  AdvancedDynamicTexture.CreateFullscreenUI("UI")
advancedTexture.parseSerializedObject(guiData, true)
 ```

The secondary button, **"Export Control Only"**, exports a single control that you want to pass into BabylonJS using the `parse()` command.
For **Single Components** in JSON, use the following code: 
  ```ts
 const  guiData  =  require("../figmaToBabylonJS.json")
 let  advancedTexture  =  AdvancedDynamicTexture.CreateFullscreenUI("UI")
 const  guiRect  =  Rectangle.Parse(guiData, null)
advancedTexture.addControl(guiRect)
  ```

After clicking either export button, after a short wait you will see your file explorer. Choose where you want the JSON or ZIP file to go. For best results, place it directly into your project with the correct file name your code uses (by default the filename is the same as the name of the parent frame).

It is also good practice to load the UI in gui.babylonjs.com or the [GUI Editor](toolsAndResources/guiEditor/) so you can check the output UI and tweak it. There may be inconsistencies; for those, please check [inconsistencies and polyfills](/communityExtensions/figmaToBabylonJS#inconsistencies--polyfills)

### Includes Tab
Basic "What should be in the output file" options; none of them are required. Please note that if you want to **Include Images**, the output file will be a .zip file and the .json will be inside it.
![Screenshot showing the Figma to BabylonJS plugins Includes screen. Two checkboxes for background and images](/img/extensions/FigmaToBabylonJS/FigmaToBabylonJS-Step3.webp)
+ **Background Color**
  + This will decide if the export should have its background set to the same fill as the Figma frame.
+ **Include Images**
  + This enables the plug-in to package all images in a predefined folder and add them to a .zip file.

### Identifiers Tab
Identifiers are the strings you put in layer names to identify specific BJS GUI controls. The controls that can be identified and converted to BabylonJS GUI controls are:
![Screenshot showing the Figma to BabylonJS plugins Identifiers screen. Three input fields for tags, buttons and scrollbars](/img/extensions/FigmaToBabylonJS/FigmaToBabylonJS-Step4.webp)

+ **Buttons** 
  + Can be a Figma Component/Instance/Frame with text in it. The button's text will be whatever the first text box it finds inside itself is.
  + Can be a rectangle; the link text is set to null in this case.

+ **Scroll View** 
  + Can be a Frame or Group. Please note that although Figma allows you to have auto layouts on items that you define as scroll views, BabylonJS cannot have something that is both a stack panel and a scroll view. So if you want, for example, a stack panel of text, you need to place it inside an empty parent frame set as the scroll view.

+ **Checkboxes** 
  + Can be a Frame/Component/Instance or a flat rectangle.
  + There is not much customization available for BJS checkboxes beyond their size, border color, and fill color.

### Images Tab
This tab is for additional options that apply to exported images.
![Screenshot showing the Figma to BabylonJS plugins Images screen. Three input fields for image scale and folder, with two large buttons for exporting](/img/extensions/FigmaToBabylonJS/FigmaToBabylonJS-Step5.webp)
+ **Image Scale**
  + By default, the scale is set to x2. This means that any images exported from Figma will be 2 times their size in Figma. This can go all the way up to x4. Please be aware that if you export a very large design with lots of images at x4, you may have memory-usage issues within Figma. If the plug-in becomes unresponsive, please restart Figma and try again.
+ **Image Folder**
  + The image folder will define what the parent folder for the exported images should be.
  + This will also affect the image "source" URL used in the BabylonJS .JSON format.

### Compatibility warnings screen
![Screenshot showing the Figma to BabylonJS plugins Compatibility warnings screen. A list of warnings about potential issues with the export](/img/extensions/FigmaToBabylonJS/FigmaToBabylonJS-Step6.webp)
After clicking either export button, if there are any potential compatibility issues with the design you are exporting, you will see a list of warnings. These are not errors, just things to be aware of that may not export as expected. 

It helps to preview the UI by loading it into either gui.babylonjs.com or your local project using the inspector to make sure that the export is correct [(see inconsistencies and polyfills)](/communityExtensions/figmaToBabylonJS#inconsistencies--polyfills)  

## How it Works
The plugin recursively loops through the selected Figma frame and pulls out all the "nodes" in the design. It then maps each node to the correct [BabylonJS GUI control](http://localhost:3000/features/featuresDeepDive/gui/gui#controls). For example, a Figma rectangle will be converted to a BabylonJS Rectangle control, a Figma text node will be converted to a BabylonJS TextBlock control, and so on.
When the plugin finishes creating the new controls, it uses BabylonJS's serialize function to convert the control group to a JSON string, writes it to a file, and makes it available to download or "stream" directly to Figma.

### Video Demo
Below is a short YouTube video of the plugin's creator demonstrating how to use the plugin.
<Youtube id="hFlrMNi671E" />

## Inconsistencies & Polyfills
Figma has features that are beyond the scope of the BabylonJS GUI system. Below is a list of some areas where the plug-in has to decide how to interpret things that Figma supports but BabylonJS GUI cannot replicate 1:1.

### Misc Inconsistencies
+ **Borders**
  + All borders are treated as "Inner" when porting to BabylonJS 
  + (BabylonJS does not differentiate between different types of positions).
+ **Colors not 1:1**
  + By default, Figma uses an "unmanaged" color space. To make Figma more closely represent what will actually be output when viewed in a web browser, go to `Figma > Preferences > Color Profile...` and set the ColorSpace to sRGB.
+ **Polygons**
	+ Polygons are not supported by BabylonJS GUI, so the plug-in will simply skip over polygons when encountered. If you need to use complex shapes and polygons like this, it is recommended that you export them as PNGs and import them into the BabylonJS project as images.
	+ A "polygon" of Lines/Vector is supported; it is an array of lines with a master empty rect as a parent.
+ **Blending/Multi Fills**
	+ Figma allows you to layer fills one on top of the other and use special blending options. Right now, the plugin will only use the topmost visible fill.
+ **Stack Panels + Scrollviews**
  + The plugin supports both of these BJS GUI controls, however, BabylonJS cannot have a control that is both a ScrollView AND Stackpanel. Whereas Figma will allow you to mark an Autolayout (Stackpanel) as a ScrollView.
  + If you need, for example, a list that is also scrollable, please place the Autolayout list of items inside an empty group/frame that is marked as `-scroll` (this can be customized in the Identifiers Tab). 
  Borders on a parent will render in front of any children in BabylonJS. In Figma, borders are drawn behind any children.
  + StackPanels CAN'T have shadows, border radius or outlines.
+ **Frames/groups** can have shadows and will give all children the same shadow. This doesn't look the same as in Figma, but it is the closest approximation.
+ **Text** can't have gradient strokes, it will use the first color stop of the gradient and set it to a solid color.
+ **Images** can't have a stroke, all images are square.
+ **Patterns** and **Video** fills are not supported by BabylonJS GUI, the plugin will simply skip over these when encountered.

## Tips & Tricks
+ Use frames when possible, groups can sometimes cause unexpected issues.
+ StackPanels CAN'T have shadows, border radius or outlines. If you need these features, wrap the Autolayout in a parent Frame with the desired effects.
+ Avoid giving parents effects like shadows and borders as they will apply to all children and may not look as expected.
+ Always use border inner when designing in Figma to get the closest match to BabylonJS GUI.
+ Use single fills, do not rely on blend modes or multiple fills as BabylonJS GUI does not support these features.

## Help & Support
+ If the file output name is “undefined”, that means you are selecting a single item in the design and not the whole frame/artboard.
+ The plugin export buttons are disabled after clicking them
  + This could be due to a memory usage error. Please restart Figma
  + Also check for union shapes, as they can cause issues. 
+ Very large designs may cause the plugin to "hang." Please be patient. If the plugin takes too much time, Figma will abort it for you.
  + If you have this issue, make the design frame less complex or simplify Components which reference other Components.
+ For help and support, please go to the dedicated thread for this plug-in on the [BabylonJS forums](https://forum.babylonjs.com/t/figma-to-babyonjs-plugin/37187).



An extension library for loading and playing Lottie animation files in Babylon.js.

## Introduction
This is an integration of lottie-web and Babylon.js.

It allows you to load a Lottie JSON file as a texture for Babylon.js.

[Demo](https://babylonjs-lottie-demo.netlify.app/)


## What is Lottie?

Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.

[Official website](https://airbnb.design/lottie/)
## install
```shell
pnpm add babylonjs-lottie @babylonjs/core
```

It currently relies on the "@babylonjs/core" package and probably does not support the "babylonjs" package.

## example

Load a Lottie JSON file
```javascript
import {LottieTexture} from "babylon-lottie"

let lottieTexture = await LottieTexture.LoadFromUrlAsync("name", "/lottie.json", scene, {} /*option*/)
```

Create a box and set its texture to the Lottie animation
```javascript
let box = MeshBuilder.CreateBox("box")
let mat = new PBRMaterial("pbr", scene)
let lottieTexture = await LottieTexture.LoadFromUrlAsync("name", "/Aniki Hamster.json", scene, {} /*option*/)
mat.albedoTexture = lottieTexture
box.material = mat
mat.unlit = true
```

LottieTexture exposes the lottieAnimation property.

You can use it to pause playback, get playback progress, and access other APIs.
```javascript
let lottieTexture = await LottieTexture.LoadFromUrlAsync("name", "/lottie.json", scene, {} /*option*/)

lottieTexture.lottieAnimation.play()
lottieTexture.lottieAnimation.pause()
lottieTexture.lottieAnimation.currentFrame()
//....
```
Options
```javascript
await LottieTexture.LoadFromUrlAsync("name", "/lottie.json", scene, {
    useAnimeSize: false, // If true then use the width and height set in the animation file
    autoPlay: true,
    width: 512,
    height: 512,
    loop: true,
})

```



Generate letters as BABYLON meshes.

## Basic-Usage

```javascript no-code-variants
Writer = BABYLON.MeshWriter(scene, { scale: scale });
text1 = new Writer("ABC", {
  anchor: "center",
  "letter-height": 50,
  color: "#1C3870",
  position: {
    z: 20,
  },
});
```

PG: <Playground id="#PL752W#150" title="Mesh Writer Example 1" description=""/>

## Getting the code

Copy https://github.com/BabylonJS/Extensions/blob/master/MeshWriter/meshwriter.min.js or https://github.com/BabylonJS/Extensions/blob/master/MeshWriter/meshwriter.js and include it in your load sequence.

## If you prefer npm

### npm i meshwriter

Import in your React/Angular component:

`import { MeshWriter } from "meshwriter";`

With **meshwriter** you can use MeshWriter directly like this:

```javascript
let Writer = MeshWriter(this.scene, { scale: 0.25, defaultFont: "Arial" });
let textMesh = new Writer("Hello World", {
  "font-family": "Arial",
  "letter-height": 30,
  "letter-thickness": 12,
  color: "#1C3870",
  anchor: "center",
  colors: {
    diffuse: "#F0F0F0",
    specular: "#000000",
    ambient: "#F0F0F0",
    emissive: "#ff00f0",
  },
  position: {
    x: 0,
    y: 10,
    z: 0,
  },
});
```

## Superconstructor - BABYLON.MeshWriter()

After MeshWriter is loaded, BABYLON.MeshWriter is defined. It is called with one or two parameters.

- **scene** &nbsp; required
- **preferences** &nbsp; optional &nbsp; The preferences object may specify up to three values

        FIELD                 DEFAULT
      default-font           Helvetica
      scale                      1
      letter-origin         "letter-center"

The call to BABYLON.MeshWriter returns a constructor. Call it "**Writer**".

## Constructor - new Writer()

new Writer() is called with a string and an (optional) options parameter.&nbsp; The options object conforms to normal Babylon.js structures and terminology.

          FIELD                 DEFAULT
        font-family             default-font
        anchor                  left
        letter-height           100
        letter-thickness        1
        color                   #808080              # hits emissive only
        alpha                   1
        position
            x                   0
            y                   0
            z                   0
        colors                                       # if you need to control more than just emissive
            diffuse             #F0F0F0
            specular            #000000
            ambient             #F0F0F0
            emissive            color                # from option field 'color' above

**new Writer()** builds a mesh with material that is inserted into the scene.&nbsp; This is a multi-step process with interim meshes and holes per letter.&nbsp; These meshes are combined into an SPS and then disposed of.&nbsp; At the end, one mesh, one material, and one SPS have been added to the scene.

**new Writer()** also returns a **writer** instance with useful methods.&nbsp; See below.

## Instance

Each **writer** instance has methods that allow you to retrieve the Babylon.js objects or get/set SPS attributes.

       getSPS
       getMesh
       getMaterial
       color                   # sets or gets color but no change to material
       alpha                   # sets or gets alpha but no change to material
       setColor                # set emissive color and change color value
       setAlpha                # change value and material
       overrideOpac            # change material but not value
       resetOpac               # sets material to current value
       dispose

## Usage Hints

If you wish to do extensive things with position, rotation or animation, retrieve the meshes and materials from the instance using the methods shown above.&nbsp; The output from **new Writer()** is an SPS with one particle for each character.

Example:
PG: <Playground id="#PL752W#151" title="Mesh Writer Example 2" description=""/>

```javascript no-code-variants
const SCALE = 0.25;
const TEXT_SIZE = 35;
const TEXT_THICKNESS = 10;

Writer = BABYLON.MeshWriter(scene, { scale: SCALE, defaultFont: "Arial" });
textMesh = new Writer("BABYLON JS", {
  "font-family": "Arial",
  anchor: "center",
  "letter-height": TEXT_SIZE,
  "letter-thickness": TEXT_THICKNESS,
  color: "#1C3870",
  colors: {
    diffuse: "#F0F0F0",
    specular: "#000000",
    ambient: "#F0F0F0",
    emissive: "#ff00f0",
  },
  position: {
    x: 0,
    y: 5,
    z: 70,
  },
});

//Text Writer create SPS with Particle for each letter
SPS = textMesh.getSPS();

//Update animation
SPS.updateParticle = (particle) => {
  particle.rotation.x -= 0.06;
};

scene.registerBeforeRender(() => {
  SPS.setParticles();
  //sps.mesh.rotation.y = k;
});
```

Colors:&nbsp; With most lighting, it is enough to use the "color" field to specify the letter coloring.&nbsp; However, programmers may specify all four color types by putting a "colors" object in the options object.

Unless you have a specific need, do not specify a font.&nbsp; The default font, Helvetica, has the most extensive character set and the fewest faces; it will be the most efficient if you have a lot of text.&nbsp; Jura was added because the author likes it for numbers.



## **[babylon-mmd](https://github.com/noname0310/babylon-mmd)**: The MMD Loader and Runtime for Babylon.js

![Screenshot showing the MMD model in the playground](/img/extensions/mmdLoader/ModelWithInspector.webp)
*[YYB Hatsune Miku_10th](https://www.deviantart.com/sanmuyyb/art/YYB-Hatsune-Miku-10th-DL-702119716) by YYB (modified)*

MMD is a Japanese 3D animation creation software that has its own 3D model format, PMD/PMX, and motion formats, VPD and VMD.

babylon-mmd is a library focused on loading PMX models and VMD motion files into Babylon.js and playing high-quality dance animations.

## Features

- Load PMX models and VMD motion files
- Solve IK, AppendTransform(a.k.a. Append, Grant) and RigidBody / Joint simulation
- MMD morph system
- MmdStandardMaterial for PMX models
- Support multiple models and motions
- Synced audio playback
- Player controls (play, pause, etc.)
- Optimized custom format for MMD models and motions

## Example

![Playground example of a MMD](/img/extensions/mmdLoader/PGScreenshot.webp)
<Playground id="#028YR6#41" title="Complete MMD Example" description="Example of a MMD model with a VMD motion file and audio." />

*Music: [メランコリ・ナイト](https://youtu.be/y__uZETTuL8) by higma*

*Model: [YYB Hatsune Miku_10th](https://www.deviantart.com/sanmuyyb/art/YYB-Hatsune-Miku-10th-DL-702119716) by YYB (modified)*

*Motion / Camera: https://www.nicovideo.jp/watch/sm41164308 by ほうき堂*

## Usage

These are just a few code snippets; please refer to the documentation for full usage.

### Installation

ES6 module:

```bash
npm add @babylonjs/core @babylonjs/havok babylon-mmd
```

UMD module using the HTML script tag:

```html
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/havok/HavokPhysics_umd.js"></script>
<script src="https://www.unpkg.com/babylon-mmd/umd/babylon.mmd.min.js"></script>
```

UMD module in Playgrounds:

```typescript
declare const BABYLONMMD: any;

await new Promise((resolve) => {
    const babylonMmdScript = document.createElement("script");
    babylonMmdScript.src = "https://www.unpkg.com/babylon-mmd/umd/babylon.mmd.min.js";
    document.head.appendChild(babylonMmdScript);
    babylonMmdScript.onload = resolve;
});
```

### Import PMX Model

<Playground id="#FY1L15#3" title="Import PMX Model" description="Example of importing a PMX model." />

```typescript
import "babylon-mmd/esm/Loader/pmxLoader"; // side effect import

const mmdMesh = await ImportMeshAsync("your_model_path.pmx", scene).then((result) => result.meshes[0]);
```

Loading a PMX model with `ImportMeshAsync` always returns an array of length 1, so you can get the mesh with `result.meshes[0]`.

### Import VMD Motion

```typescript
const vmdLoader = new VmdLoader(scene);
const modelMotion = await vmdLoader.loadAsync("model_motion_1", "your_model_motion_path.vmd");
```

### Play MMD Animation

```typescript
const mmdRuntime = new MmdRuntime();
mmdRuntime.register(scene);
const mmdModel = mmdRuntime.createMmdModel(mmdMesh);
mmdModel.addAnimation(modelMotion);
mmdModel.setAnimation("model_motion_1");
```

## Documentation

In **[this document](https://noname0310.github.io/babylon-mmd/)**, you'll learn how to fully use babylon-mmd through two step-by-step examples.



A series of extensions that generate 3D trees.



# Extensions

This section contains incredible Babylon.js extensions and resources contributed by the amazing community surrounding this platform. While they are not part of the main engine, and therefore are not maintained by the core Babylon.js development team, this section includes some incredible technology that you can use to extend your Babylon.js experience even further!


# MSDF Text Renderer

## Introduction
The TextRenderer class provides a powerful and efficient solution for rendering crisp, scalable text in Babylon.js scenes using MSDF (Multi-channel Signed Distance Fields). Unlike traditional bitmap fonts or SDF techniques, MSDF preserves sharp corners and detailed glyph shapes at any scale, making it ideal for modern 3D and 2D applications that demand both performance and visual fidelity.

Example:

<Playground id="#6RLCWP#38" title="TextRenderer example" description="Example of using a TextRenderer"/>

Rendering text in WebGL presents a unique challenge: balancing resolution-independence with performance. Simple bitmap fonts scale poorly and blur at larger sizes, while classic single-channel SDFs tend to lose precision around complex edges. MSDF solves these issues by encoding distance information into three color channels (RGB), allowing precise reconstruction of glyph shapes using a shader, regardless of size or zoom level.

This technique offers:

* Resolution-independent clarity — no pixelation at large scales.

* GPU-efficient rendering — no need to regenerate or resize textures.

* Support for complex typographic details — sharp corners, curves, and serifs remain intact.

The TextRenderer class handles MSDF rendering under the hood, managing vertex buffers, instancing, and shader logic seamlessly. It supports advanced features like billboarding, text thickness control, and instanced paragraph rendering, enabling dynamic, high-quality text rendering in immersive 3D environments.

Whether you're building UI overlays, 3D HUDs, or in-world labels, TextRenderer offers a scalable and performant foundation for text in Babylon.js.

## Installation

The MSDF Text Renderer is available as a UMD NPM package.

```shell
-npm install babylonjs-addons --save
```

and as an ES6 package:

```shell
-npm install @babylonjs/addons --save
```

## Initialization

Two assets are needed to initialize an MSDF `TextRenderer`:
1. A texture that contains the MSDF glyphs.
2. A JSON file that describes the bounds of each glyph within the texture, as well as other per-glyph information.

Because we need to load the correct shaders (either WebGL or WebGPU), creating a TextRenderer is async:

```
const sdfFontDefinition = await (await fetch("https://assets.babylonjs.com/fonts/roboto-regular.json")).text();
const fontAsset = new ADDONS.FontAsset(sdfFontDefinition, "https://assets.babylonjs.com/fonts/roboto-regular.png");

const textRenderer = await ADDONS.TextRenderer.CreateTextRendererAsync(fontAsset, engine);
```

The `fontAsset` defines the font shapes and can be shared across several TextRenderers.

## Generating font data

You can check the following free tools to generate font assets for your project:

* https://msdf-bmfont.donmccurdy.com/
* https://github.com/Chlumsky/msdfgen#using-a-multi-channel-distance-field

These tools generate the required JSON file and texture image (for example, a PNG). You will need to provide as input the set of characters that you need in your app. For example, if you want to support typical alphanumeric English characters along with other common characters, your input string might be:
```text
abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 `~!@#$%^&*()-_=+[{]}\|;:'",<.>/?
```

After generating custom font assets, you might find this Playground useful for testing:

<Playground id="#Y20U5M#3" title="TextRenderer Test" description="Helpful PG for testing custom MSDF font assets"/>

## Usage

Using a TextRenderer is pretty straightforward:

```
textRenderer.addParagraph("Hello World !");
```

This will add the text centered on the screen.

You can also provide options to control how your paragraph is set up:

```
textRenderer.addParagraph("What's up ?", {
    textAlign: "center"
});
```

The options are defined by this type:

```
type ParagraphOptions = {
    maxWidth: number;
    lineHeight: number;
    letterSpacing: number;
    tabSize: number;
    textAlign: "left" | "right" | "center";
    translate: Vector2 | undefined;
};
```

You can also add a third parameter to the `addParagraph` call to control where you want your text:

```
textRenderer.addParagraph("What's up ?", {
    textAlign: "center"
}, BABYLON.Matrix.Translation(5, 0, 0));
```

The following properties are also available to control all rendering for a TextRenderer:

* color: Color4 used to define the color of the text
* thicknessControl: a float indicating how to change the overall default thickness (between -0.5 and 0.5, with 0 as the default value)
* parent: A node used to attach the text to
* isBillboard: a boolean indicating you want the text to always face the camera. ** Please note that in this case only the translation part of the parent world matrix will be considered **
* isBillboardScreenProjected: indicates whether billboard mode renders the text in screen-space. When set to true, the text keeps a constant on-screen size—its scale no longer changes with the camera’s distance.
* strokeColor: Color4 used to define the color of the stroke around the text
* strokeInsetWidth: Size of the stroke inset (inside the text)
* strokeOutsetWidth: Size of the stroke outset (outside the text)
* ignoreDepthBuffer: Will ignore depth buffer value and render the text on top of whatever is already in the frame buffer
* transformMatrix: Matrix used to move the entire list of paragraphs as a whole

## Positioning and scaling

By default, the text will be rendered at 0,0,0. Then we apply the paragraph world matrix, followed by the transform matrix.

You can control its position, rotation, and scaling by setting a parent. If you opt to use billboard mode, then only the parent's position will be used.

The overall location of the text will be computed as follows:

Final world matrix = Parent World * Transform Matrix * Paragraph Matrix

## Examples

Setting a parent:

<Playground id="#6RLCWP#72" title="TextRenderer" description="Setting a parent"/>

A Star Wars scroller:

<Playground id="#6RLCWP#40" title="TextRenderer" description="Star Wars scroller"/>

Thickness control:

<Playground id="#IABMEZ#4" title="TextRenderer" description="Thickness control"/>

Stroke:

<Playground id="#6RLCWP#41" title="TextRenderer" description="Setting a parent"/>


Community Extensions

Coming next

Azure Media Player 360 Video Plugin

The Azure Media Player 360 Video Plugin is a handy 360 video plugin for easy integration into your Babylon.js 360 Web Apps.

Babylon.js CMS Integration

This section contains extensions that help Babylon.js integrate with Content Management Systems.

Box3D Physics

Box3D, Erin Catto's open source 3D rigid body engine, as a physics v2 plugin for Babylon.js.

Babylon Buffered Interpolation

Awesome package for interpolation of position, rotation, scale data of networked Babylon.js objects.

Cloner System

This system allows you to take an array of meshes, clone them, and display the results in a variety of patterns.

Dynamic Terrain

The Dynamic Terrain is an extension that provides a way to display a large terrain dynamically morphed from a map of 3D data.

Figma to BabylonJS

FigmaToBabylonJS is a Figma plugin that allows you to export Figma designs to BabylonJS GUI .json files.

Lottie Texture

An extension library for loading and playing Lottie animation files in Babylon.js.

Mesh Writer

The Mesh Writer allows you to write 3D text, as meshes, in various fonts.

MMD Loader

babylon-mmd is an MMD(MikuMikuDance) 3D model loader and animation runtime for Babylon.js.

Tree Generators

Learn about the tree generator extensions.

Babylon.js Editor

Welcome to the Babylon.js Editor Documentation.

External Libraries

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

Unity Toolkit

The Unity Toolkit hosts a set of tools designed to provide a small subset of the Unity Editor's design-time features for exporting Babylon.js content scene files.

WebXR extension package and utility

The library and utility are designed to simplify the creation of applications using hand gesture recognition. They also include other useful features for working with virtual reality headsets.