
## How to use Actions

Actions are a simple way to add interactions in your scenes. An action is launched when its trigger is fired. For instance, you can specify that when the user clicks (or touches) a mesh, an action is executed.

To use actions, you have to attach an `BABYLON.ActionManager` to a mesh or to your scene:

```javascript
mesh.actionManager = new BABYLON.ActionManager(scene);
```

Once the ActionManager is created, you can start registering actions:

```javascript
mesh.actionManager.registerAction(
    new BABYLON.InterpolateValueAction(
        BABYLON.ActionManager.OnPickTrigger,
        light,
        'diffuse',
        BABYLON.Color3.Black(),
        1000
    )
);
```

For instance this action will animate the `light.diffuse` property to black in 1000ms when the user picks the mesh.

You can also chain actions:

```javascript
mesh.actionManager
    .registerAction(
        new BABYLON.InterpolateValueAction(
            BABYLON.ActionManager.OnPickTrigger,
            light,
            'diffuse',
            BABYLON.Color3.Black(),
            1000
        )
    )
    .then(
        new BABYLON.SetValueAction(
            BABYLON.ActionManager.NothingTrigger,
            mesh.material,
            'wireframe',
            false
        )
    );
```

In this case, the first click will animate the `light.diffuse` property, the second click will set `mesh.material` to false.
The third one will start again and will animate the `light.diffuse` property and so on...

Finally, you can add a condition to your actions. In this case, actions are launched when the trigger is fired if the condition is true:

```javascript
mesh.actionManager.registerAction(
    new BABYLON.InterpolateValueAction(
        BABYLON.ActionManager.OnPickTrigger,
        camera,
        'alpha',
        0,
        500,
        new BABYLON.PredicateCondition(
            mesh.actionManager,
            function () {
                return light.diffuse.equals(BABYLON.Color3.Red());
            }
        )
    )
);
```

In this example, the `camera.alpha` property will be animated to 0 in 500ms when the user clicks the mesh only if the `light.diffuse` property is equal to red.

## Triggers
Currently, there are 14 different triggers available for meshes, and three for scenes.

The triggers available for meshes are:

* `BABYLON.ActionManager.NothingTrigger`: Never raised. Used for sub-actions with `action.then` function.
* `BABYLON.ActionManager.OnPickTrigger`: Raised when the user touches/clicks on a mesh.
* `BABYLON.ActionManager.OnDoublePickTrigger`: Raised when the user double touches/clicks on a mesh.
* `BABYLON.ActionManager.OnPickDownTrigger`: Raised when the user touches/clicks down on a mesh
* `BABYLON.ActionManager.OnPickUpTrigger`: Raised when the user touches/clicks up on a mesh.
* `BABYLON.ActionManager.OnPickOutTrigger`: Raised when the user touches/clicks down on a mesh and then move off-of the mesh.
* `BABYLON.ActionManager.OnLeftPickTrigger`: Raised when the user touches/clicks on a mesh with left button.
* `BABYLON.ActionManager.OnRightPickTrigger`: Raised when the user touches/clicks on a mesh with right button.
* `BABYLON.ActionManager.OnCenterPickTrigger`: Raised when the user touches/clicks on a mesh with center button.
* `BABYLON.ActionManager.OnLongPressTrigger`: Raised when the user touches/clicks up on a mesh for a long period of time in milliseconds (defined by BABYLON.Scene.LongPressDelay). 
* `BABYLON.ActionManager.OnPointerOverTrigger`: Raised when the pointer is over a mesh. Raised just once.
* `BABYLON.ActionManager.OnPointerOutTrigger`: Raised when the pointer is no more over a mesh. Raised just once.
* `BABYLON.ActionManager.OnIntersectionEnterTrigger`: Raised when the mesh is in intersection with a specific mesh. Raised just once.
* `BABYLON.ActionManager.OnIntersectionExitTrigger`: Raised when the mesh is no more in intersection with a specific mesh. Raised just once. 

Note that the two intersection triggers require you specify a specific mesh, which can be done like so:

```javascript
mesh.actionManager.registerAction(
    new BABYLON.SetValueAction(
        {
            trigger: BABYLON.ActionManager.OnIntersectionEnterTrigger, 
            parameter: { 
                mesh: otherMesh, 
                usePreciseIntersection: true
            }
        }, 
        mesh,
        "scaling",
        new BABYLON.Vector3(1.2, 1.2, 1.2)
    )
);
```

Note the optional `usePreciseIntersection` property. If you don't want to use precise intersections, you can simply pass the mesh being targeted as the value of the parameter property:

```javascript
mesh.actionManager.registerAction(
    new BABYLON.SetValueAction(
        {
            trigger: BABYLON.ActionManager.OnIntersectionEnterTrigger,
            parameter: otherMesh
        },
        mesh,
        'scaling',
        new BABYLON.Vector3(1.2, 1.2, 1.2)
    )
);
```
The triggers available for scenes are:

* `BABYLON.ActionManager.OnEveryFrameTrigger`: Raised once per frame.
* `BABYLON.ActionManager.OnKeyDownTrigger`: Raised when a key is pressed.
* `BABYLON.ActionManager.OnKeyUpTrigger`: Raised when a key is released.

Both the OnKeyUpTrigger and OnKeyDownTrigger triggers accept a string parameter value, which is compared to the event's `sourceEvent.key` value.
This allows you to create key triggers that will only trigger on specific keys, like so:

```javascript
scene.actionManager.registerAction(
    new BABYLON.ExecuteCodeAction(
        {
            trigger: BABYLON.ActionManager.OnKeyUpTrigger,
            parameter: 'r'
        },
        function () { console.log('r button was pressed'); }
    )
);
```

## Available Actions
Most of the actions have a `propertyPath` property. This string defines the path to the property to affect with the action. 
You can use direct values like `position` or `diffuse`. But you can also provide complex paths like `position.x`

* `BABYLON.SwitchBooleanAction(trigger, target, propertyPath, condition)`: Switchs a boolean property.
* `BABYLON.SetValueAction(trigger, target, propertyPath, value, condition)`: Sets a direct value for a property.
* `BABYLON.IncrementValueAction(trigger, target, propertyPath, value, condition)`: Adds a number to a number property.
* `BABYLON.PlayAnimationAction(trigger, target, from, to, loop, condition)`: Plays an animation on a target.
* `BABYLON.StopAnimationAction(trigger, target, condition)`: Stops any animation being played by the target.
* `BABYLON.DoNothingAction(trigger, condition)`: Do nothing :)
* `BABYLON.CombineAction(trigger, children[], condition)`: Executes multiple actions simultaneously. The children property must be an array of actions.
* `BABYLON.ExecuteCodeAction(trigger, func, condition)`: Executes code.
* `BABYLON.SetParentAction(trigger, target, parent, condition)`: Sets the parent of the target.
* `BABYLON.PlaySoundAction(trigger, sound, condition)`: Plays a given sound.
* `BABYLON.StopSoundAction(trigger, sound, condition)`: Stops a given sound
* `BABYLON.InterpolateValueAction(trigger, target, propertyPath, value, duration, condition, stopOtherAnimations)`: Creates an animation to interpolate the current value of a property to a given target. The following types are supported:
   * `number`
   * `BABYLON.Color3`
   * `BABYLON.Vector3`
   * `BABYLON.Quaternion`

## Conditions
There are three kinds of conditions:

* `BABYLON.ValueCondition(actionManager, target, propertyPath, value, operator)`: true when the given property and value conform to the operator. The following operators are supported:
   * `BABYLON.ValueCondition.IsEqual`
   * `BABYLON.ValueCondition.IsDifferent`
   * `BABYLON.ValueCondition.IsGreater`
   * `BABYLON.ValueCondition.IsLesser`
* `BABYLON.PredicateCondition(actionManager, predicate)`: true when the given predicate function returns true.
* `BABYLON.StateCondition(actionManager, target, value)`: true when the ```state``` property of the target matches the given value.

## Experimenting with Actions
Imagine you want to almost hide a mesh when the user touches it.

First, you'd add a  `BABYLON.ActionManager` to the mesh in question:

```javascript
mesh.actionManager = new BABYLON.ActionManager(scene);
```

Secondly, you'd register an action associated with the `BABYLON.ActionManager.OnPickTrigger` trigger.
This action will interpolate the ```mesh.visibility``` property to 0.2.

```javascript
mesh.actionManager.registerAction(
    new BABYLON.InterpolateValueAction(
        BABYLON.ActionManager.OnPickTrigger,
        mesh,
        'visibility',
        0.2,
        1000
    )
);
```

And you're done! Easy, right?

If after fading out the mesh, you wished it to fade back in, you'd do so by chaining an action
to restore the `mesh.visibility` property to default value:

```javascript
mesh.actionManager
        .registerAction(
            new BABYLON.InterpolateValueAction(
                BABYLON.ActionManager.OnPickTrigger,
                mesh,
                'visibility',
                0.2,
                1000
            )
        )
        .then(
            new BABYLON.InterpolateValueAction(
                BABYLON.ActionManager.OnPickTrigger,
                mesh,
                'visibility',
                1.0,
                1000
            )
        );
```

In this case, the first click will hide the button, the following click will restore it, and so on...

## Sprites 
Starting with Babylon.js 2.3, sprites can have an action manager: <Playground id="#9RUHH#5" title="Sprite Action Manager" description="Simple example of a sprite with an attached action manager." image=""/>

Please note that the SpriteManager must turn picking support on by using `spriteManager.isPickable = true`
Sprites can also control picking with `sprite.isPickable = false / true` (False by default)

## Playground
If you want to play with actions, you can try them out in our playground here: <Playground id="#J19GYK#0" title="Play with Actions" description="Simple examples of actions in a scene." image="/img/playgroundsAndNMEs/divingDeeperActions1.jpg"/>


## How To Use Observables

For many of you creating Babylon.js projects only [GUI](/divingDeeper/gui), and [scene](/divingDeeper/events/observables#scene-observables) Observables will be needed, particularly [scene.onPointerObservable](/divingDeeper/scene/interactWithScenes).

## Introduction

Babylon.js provides a lot of events (like scene.beforeRender) and before v2.4 there was not a unified way to handle them.
Starting with v2.4, we introduced (without breaking backward compatibility of course) a new pattern: the Observables.

There are two parts: the [Observable](//doc.babylonjs.com/api/classes/babylon.observable) and the [Observer](//doc.babylonjs.com/api/classes/babylon.observer). The Observable is a property of an object which represents a given event (like beforeRender for instance).
Users that want to have their own piece of code running in response to such event will register an Observer to the appropriate Observable. Then it's the duty of the Observable to execute the Observers, when appropriate.

The implementer uses an Observable to create a property which will trigger all the registered observers. The Generic type T is used to communicate a given data type from the Observable to the Observer.

While it is possible to create your own Observable (a simple example of which is below) for most users it will be a case of adding their own Observers to the Observables that Babylon.js provides. For those who want to delve deeper there is more detail in the [API](//doc.babylonjs.com/api/classes/babylon.observable)

- <Playground id="#6IGFM2" title="Simple Custom Observable Example" description="Simple example of using an observable in a scene." image="/img/playgroundsAndNMEs/divingDeeperObservable1.jpg"/>
  An Observable - onXChange- is added to the master sphere. The two minion spheres and the actions they have to undertake form the two Observers which react when a change in the x position of the master is observed.

## Observable Methods and Properties

The following are available:

- [add](//doc.babylonjs.com/api/classes/babylon.observable#add)(): to add an Observer
- [addOnce](//doc.babylonjs.com/api/classes/babylon.observable#addonce)(): to add an Observer which will be executed once and then removed
- [remove](//doc.babylonjs.com/api/classes/babylon.observable#remove)(): to remove a previously registered Observer
- [removeCallback](//doc.babylonjs.com/api/classes/babylon.observable#removecallback)(): same as above but giving the callback instead of the Observer instance
- [notifyObservers](//doc.babylonjs.com/api/classes/babylon.observable#notifyobservers)(): used to notify all the registered Observers
- [notifyObserversWithPromise](//doc.babylonjs.com/api/classes/babylon.observable#notifyobserverswithpromise)(): calling this will execute each callback, expecting it to be a promise or return a value. If at any point in the chain one function fails, the promise will fail and the execution will not continue.
- [hasObservers](//doc.babylonjs.com/api/classes/babylon.observable#hasobservers): a property that returns true if at least one Observer is registered
- [hasSpecificMask](//doc.babylonjs.com/api/classes/babylon.observable#hasspecificmask)(mask): a function that returns true if at least one Observer is registered with this mask
- [clear](//doc.babylonjs.com/api/classes/babylon.observable#clear)() to remove all Observers
- [clone](//doc.babylonjs.com/api/classes/babylon.observable#clone)() to simply clone the object but not the registered Observers.

Many Babylon.js objects have a range of available Observables. Here is an [unordered list](//doc.babylonjs.com/search/?bjsq=observable) from the search facility of the Documentation with links to the API.

## Add An Observer

An Observer is formed from an object set to watch the Observable and the objects reaction to the observation.

In the following example the sphere and its scale change create an Observer through the Observable.[add](//doc.babylonjs.com/api/classes/babylon.observable#add)() method.

Set the Observable that notifies its Observers before the scene starts the rendering each frame.

```javascript
var alpha = 0;
scene.onBeforeRenderObservable.add(function () {
  sphere.scaling.y = Math.cos(alpha);

  alpha += 0.01;
});
```

- <Playground id="#UP2O8#0" title="Add an Observer" description="Simple example of how to add an observer to a scene." image="/img/playgroundsAndNMEs/divingDeeperObservable2.jpg"/>

To remove an Observer, you need to store it during it's creation to refer to it with remove. The following example remove the Observer before it is notified of even the first frame rendering.

```javascript
var alpha = 0;
var observer = scene.onBeforeRenderObservable.add(function () {
  sphere.scaling.y = Math.cos(alpha);

  alpha += 0.01;
});

scene.onBeforeRenderObservable.remove(observer);
```

- <Playground id="#UP2O8#1" title="Add and Remove an Observer" description="Simple example of how to add and remove an observer from a scene." image="/img/playgroundsAndNMEs/divingDeeperObservable3.jpg"/>

The following example removes the Observer during the rendering cycle. Since it is not possible to remove an Observer that does not exist there is a need to check whether the Observable still has the Observer.

```javascript
var alpha = 0;
var observer = scene.onBeforeRenderObservable.add(function () {
  sphere.scaling.y = Math.cos(alpha);

  alpha += 0.01;

  if (scene.onBeforeRenderObservable.hasObservers && alpha > 3) {
    scene.onBeforeRenderObservable.remove(observer);
  }
});
```

## Scene Observables

The BabylonJS Scene Object has over 20 observables that 'fire' under various conditions. Most of them are checked EACH frame/render, and in a deterministic/predictable order or sequence. Below is a list of Scene observables checked during each renderLoop... in the order they are checked:

- [onBeforeAnimationsObservable](//doc.babylonjs.com/api/classes/babylon.scene#onbeforeanimationsobservable)
- [onAfterAnimationsObservable](//doc.babylonjs.com/api/classes/babylon.scene#onafteranimationsobservable)
- [onBeforePhysicsObservable](//doc.babylonjs.com/api/classes/babylon.scene#onbeforephysicsobservable)
- [onAfterPhysicsObservable](//doc.babylonjs.com/api/classes/babylon.scene#onafterphysicsobservable)
- [onBeforeRenderObservable](//doc.babylonjs.com/api/classes/babylon.scene#onbeforerenderobservable)
- [onBeforeRenderTargetsRenderObservable](//doc.babylonjs.com/api/classes/babylon.scene#onbeforerendertargetsrenderobservable)
- [onAfterRenderTargetsRenderObservable](//doc.babylonjs.com/api/classes/babylon.scene#onafterrendertargetsrenderobservable)
- [onBeforeCameraRenderObservable](//doc.babylonjs.com/api/classes/babylon.scene#onbeforecamerarenderobservable)
- [onBeforeActiveMeshesEvaluationObservable](//doc.babylonjs.com/api/classes/babylon.scene#onbeforeactivemeshesevaluationobservable)
- [onAfterActiveMeshesEvaluationObservable](//doc.babylonjs.com/api/classes/babylon.scene#onafteractivemeshesevaluationobservable)
- [onBeforeParticlesRenderingObservable](//doc.babylonjs.com/api/classes/babylon.scene#onbeforeparticlesrenderingobservable)
- [onAfterParticlesRenderingObservable](//doc.babylonjs.com/api/classes/babylon.scene#onafterparticlesrenderingobservable)
- [onBeforeRenderTargetsRenderObservable](//doc.babylonjs.com/api/classes/babylon.scene#onbeforerendertargetsrenderobservable)
- [onAfterRenderTargetsRenderObservable](//doc.babylonjs.com/api/classes/babylon.scene#onafterrendertargetsrenderobservable)
- [onBeforeDrawPhaseObservable](//doc.babylonjs.com/api/classes/babylon.scene#onbeforedrawphaseobservable)
- [onAfterDrawPhaseObservable](//doc.babylonjs.com/api/classes/babylon.scene#onafterdrawphaseobservable)
- [onAfterCameraRenderObservable](//doc.babylonjs.com/api/classes/babylon.scene#onaftercamerarenderobservable)
- [onAfterRenderObservable](//doc.babylonjs.com/api/classes/babylon.scene#onafterrenderobservable)

The Scene Object also has observers: onReady, onDataLoaded, onDispose, but they do not happen within a rendering/frame.

Also, [onBeforeStepObservable](//doc.babylonjs.com/api/classes/babylon.scene#onbeforestepobservable) and [onAfterStepObservable](//doc.babylonjs.com/api/classes/babylon.scene#onafterstepobservable) are available when using [deterministic lock step](/divingDeeper/animation/advanced_animations#deterministic-lockstep)

However possibly the most useful Observable is the one that checks what is happening to the screen pointer whether with mouse or with finger or controller. [scene.onPointerObservable](//doc.babylonjs.com/api/classes/babylon.scene#onpointerobservable) . For more details on that have a look into the [Interactions HowTo](/divingDeeper/scene/interactWithScenes)

## Observable-based countdown function

Starting Babylon 4.2 a new way of setting a delay call for a function was added. This method is calculating the time delay using observables. Think about a setTimeout function, but inside the babylon context. The best way to explain is to show an example:

```javascript
// classic set timeout:
setTimeout(() => {
  // code running here is not guaranteed to be called inside the render loop
  // Actually, it is most likely that it will be called OUTSIDE the render loop
}, 3000);

// the new and simple way
BABYLON.setAndStartTimer({
  timeout: 3000,
  contextObservable: scene.onBeforeRenderObservable,
  onEnded: () => {
    // code running here is guaranteed to run inside the beforeRender loop
  },
});
```

### setAndStartTimer

As you can see in the example, the babylon countdown timer is taking an observable as context. This observable is the most important part of this code - the observable is the context in which the rest of the time functions will be called and is in charge of calculating the delta time until finished. To explain it simply, these are the steps for the function we implemented before:

1. set time = 0, add an observer to scene.onBeforeRenderObservable
2. wait for the observer to be called.
3. in the observer - check if time-passed-since-start > timeout
4. If not, go to 2
5. If yes, call onEnded, remove the observer
6. We are done

A full example of the function's API:

```javascript
BABYLON.setAndStartTimer({
  timeout: 3000,
  contextObservable: scene.onBeforeRenderObservable,
  breakCondition: () => {
    // this will check if we need to break before the timeout has reached
    return scene.isDisposed();
  },
  onEnded: (data) => {
    // this will run when the timeout has passed
  },
  onTick: (data) => {
    // this will run
  },
  onAborted: (data) => {
    // this function will run when the break condition has met (premature ending)
  },
});
```

As you can understand, any observable can be used here, but some don't really make any sense. If, for example, we use pointer down observable, it might take a long time until the next call of the observer, making it impractical. But if you need to process pointer down input for the next 2 minutes, you can use it this way:

```javascript
let gameIsOn = true;
BABYLON.setAndStartTimer({
    timeout: 2 * 60 * 1000,
    contextObservable: scene.onPointerObservable,
    observableParameters: { mask: BABYLON.PointerEventTypes.POINTERDOWN },
    breakCondition: () => {
        // break if the game ended prior to this timeout
        return !gameIsOn;
    },
    onEnded: () { console.log('time is over'); },
    onTick: (data) => {
        // data.payload is the pointerInfo object from the onPointerObservable
        doSomethingWithTheData(data);
    }
});
```

A more practical example can be used to make the user touch something for 3 seconds (while indicating that the 3 seconds is counting):

```javascript
const guiButton = // created a GUI button
const guiButtonMaterial = ... // get the material
let pressed = false;
scene.onPointerDown = () => {
    pressed = true;
    BABYLON.setAndStartTimer({
        timeout: 2 * 60 * 1000,
        contextObservable: scene.onBeforeRenderObservable,
        breakCondition: () => {
            // break if no longer pressed
            return !pressed;
        },
        onEnded: () {
            console.log('Button pressed!');
            // back to a black button
            guiButtonMaterial.diffuseColor.set(0,0,0);
         },
        onTick: (data) => {
            // turn it slowly green on each call to the registered observer
            guiButtonMaterial.diffuseColor.set(0,data.completeRate,0);
        },
        onAborted: () => {
            // Aborted, back to a black button
            guiButtonMaterial.diffuseColor.set(0,0,0);
        }
    });
}

scene.onPointerUp = () => {
    pressed = false;
}
```

### Advanced Timer

Apart from this quick function, you can use the AdvancedTimer class, which brings a bit more flexibility but is a lot more verbose. The object itself is reusable, so it can eventually saved a few unneeded calls and object creations. The last example using the AdvancedTimer will look like this:

```javascript
const guiButton = // created a GUI button
const guiButtonMaterial = ... // get the material
const advancedTimer : BABYLON.AdvancedTimer<Scene> = new BABYLON.AdvancedTimer({
    timeout: 3000,
    contextObservable: scene.onBeforeRenderObservable
});
advancedTimer.onEachCountObservable.add(() => {
    // turn it slowly green on each call to the registered observer
    guiButtonMaterial.diffuseColor.set(0,data.completeRate,0);
});
advancedTimer.onTimerAbortedObservable.add(() => {
    // Aborted, back to a black button
    guiButtonMaterial.diffuseColor.set(0,0,0);
});
advancedTimer.onTimerEndedObservable.add(() => {
    // back to a black button
    guiButtonMaterial.diffuseColor.set(0,0,0);
    console.log('Button pressed!');
});

scene.onPointerDown = () => {
    advancedTimer.start();
}

scene.onPointerUp = () => {
    advancedTimer.stop();
}
```



# How To Use Promises

## Introduction

Starting with v3.2, we introduced (without breaking backward compatibility of course) a new pattern: the promises.
To learn more about promises, please read this great [MDN web documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)

In a nutshell, the basic idea is to rely on promises instead of having to deal with pyramids of callbacks intricated in a non easy to maintain way.
Regarding portability, Babylon.js provides a custom polyfill for browsers where promises are not supported so you can blindly use them.

## Examples

### Basic usage

```javascript
BABYLON.SceneLoader.LoadAssetContainerAsync("https://playground.babylonjs.com/scenes/", "skull.babylon", scene).then(function (container) {
    container.addAllToScene();
});
```

<Playground id="#JA1ND3#63" title="Simple Promise Example" description="Simple example loading an asset into a scene after the file has been loaded." image="/img/playgroundsAndNMEs/divingDeeperPromises1.jpg"/>

### Chaining multiple promises together

```javascript
var scene = new BABYLON.Scene(engine);
var xrPromise = scene.createDefaultXRExperienceAsync();
xrPromise
    .then((xrExperience) => {
        return BABYLON.SceneLoader.AppendAsync("https://playground.babylonjs.com/scenes/", "skull.babylon", scene);
    })
    .then(function () {
        // xr resolved, skull added to the scene
    });
```

### Using async/await with promises

Note: This is not supported in all browsers

```javascript
var main = async function () {
    var scene = new BABYLON.Scene(engine);
    var helper = scene.createDefaultVRExperience();
    var supported = await helper.webVRCamera.useStandingMatrixAsync();
    console.log(supported);
    await BABYLON.SceneLoader.AppendAsync("https://playground.babylonjs.com/scenes/", "skull.babylon", scene);
};
```

### Loading two glTF assets in parallel

```javascript
var scene = new BABYLON.Scene(engine);

var baseUrl = "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/";

Promise.all([
    BABYLON.SceneLoader.ImportMeshAsync(null, baseUrl + "BoomBox/glTF/", "BoomBox.gltf", scene).then(function (result) {
        result.meshes[0].position.x = 0.01;
    }),
    BABYLON.SceneLoader.ImportMeshAsync(null, baseUrl + "Avocado/glTF/", "Avocado.gltf", scene).then(function (result) {
        result.meshes[0].position.x = -0.01;
        result.meshes[0].position.y = -0.01;
        result.meshes[0].scaling.scaleInPlace(0.25);
    }),
]).then(() => {
    scene.createDefaultCameraOrLight(true, true, true);
    scene.activeCamera.alpha += Math.PI;
});
```

<Playground id="#U2KKMK#1" title="Load 2 Asset At Once" description="Simple example of loading 2 assets at once inside of a promise." image="/img/playgroundsAndNMEs/divingDeeperPromises2.jpg"/>



## How To 360 Video

360 Video is a simplex mix of specific geometry, textures, and material properties; however, rather than put the burden on you to figure out how to connect them, we've created the VideoDome.

Note that the video dome also supports 180 degrees video. Read below for further information.

## VideoDome

VideoDomes rely heavily on the [VideoTexture](/divingDeeper/materials/using/videoTexture) class, check out it's documentation so that some parameters make more sense.
The source video itself should be "Equirectangular", without an equirectangular source the class won't function correctly.

## VideoDome Code

Within the playground you can copy and paste the following into your scene and then adjust the options.

``` javascript
videoDome = new BABYLON.VideoDome("videoDome", url, { < options >
}, scene);
```

All of the settings in the options object are optional, but the object itself is not. Please provide an empty object at minimum.

All the options are based through the corresponding classes, mainly the dome geometry and the VideoTexture:

* resolution = 32: Integer, defines the resolution of the sphere used to host the video. Lower resolutions have more artifacts at extreme fovs
* clickToPlay = false: Add a click to play listener to the video, does not prevent autoplay
* autoPlay = true: Automatically attempt to being playing the video
* loop = true: Automatically loop video on end
* size = 1000: Physical radius to create the dome at, defaults to approximately half the far clip plane
* poster: URL of the image displayed during the video loading or until the user interacts with the video
* useDirectMapping = true: Use a direct mapping technique to render the video. You should leave this value on unless you want to use the `fovMultiplier` property
* halfDomeMode = false: Enable the support for 180 videos instead of 360.

<Playground id="#SQ5UC1#22" title="Playground Example of a VideoDome" description="Simple example of using a videoDome in your scene." image="/img/playgroundsAndNMEs/divingDeeperVideoDome1.jpg"/>

As iOS disable autoplay, you should call video play on user interaction, using `videoDome.videoTexture.video.play();` .

## FOV adjustment

Sometimes 360 Video can feel an uncomfortable distance from the camera, to help with this a material based FOV adjustment is available.
Adjust it between 0.0 and 2.0 with the following code.

``` javascript
videoDome.fovMultiplier = newValue;
```

Please note that `fovMultiplier` only works when using `useDirectMapping = false` creation option.

As a warning, the further the value gets from 1 the more distortion will be visible. Higher resolutions on the video dome help reduce, but not eliminate, this.

<Playground id="#SQ5UC1#0" title="VideoDome with fovMultiplier" description="Simple example of using a videoDome with an fovMultiplier." image=""/>

## Video Types

Several types of 360 video exist today. The most common being Monoscopic Panoramic, Stereoscopic Side by Side panoramic and Top bottom panoramic.

The first one represents a panoramic view which is dedicated to one eye. The second one contains two panoramic views dedicated to each eyes whereas the last one contains both panoramic views respectively on the top and bottom of the video.

In the video Dome you can change adapt to the type of your source video by using :

``` javascript
videoDome.videoMode = BABYLON.VideoDome.MODE_MONOSCOPIC;
// or
videoDome.videoMode = BABYLON.VideoDome.MODE_SIDEBYSIDE;
// or
videoDome.videoMode = BABYLON.VideoDome.MODE_TOPBOTTOM;
```

## 180 Video

Another format of VR-enabled videos are the 180 degrees videos. The front of the user is recorded, but the back is black.

There are two ways to enable the 180 video mode (which we call `half dome mode` ):

* During construction enable the halfDomeMode in the options:

``` javascript
let videoDome = new BABYLON.VideoDome(
    "videoDome",
    ["https://videourl.com/videos/180.mp4"], {
        resolution: 32,
        clickToPlay: true,
        halfDomeMode: true
    },
    scene
);
```

* set `videoDome.halfDome` to true : 

``` javascript
let videoDome = ....
videoDome.halfDome = true;
```

Events

Event Handling

Coming next

Actions

Learn how to use actions in Babylon.js.

Observables

Learn all about observables in Babylon.js.

Promises

Learn all about the power of promises in Babylon.js.