
The editor provides a tool to create and edit animations. This tool is not intended to create complex animations, modelers (3ds Max, Blender, etc.) will do it better than the editor.

Anyway, modelers are not able to access objects such as post-processes (for example animating the depth of field in the default or standard rendering pipeline). This is where the Animations Editor exists.

**Note: all animations added and edited in the modeler will not be saved in the editor project event if you modify it inside the editor**

## Using the Animations Editor
To access the tool, just click on the toolbar **Tools -> Animations Editor...**.

If the selected object has already animations, the tool will select the first one by default.

## Overview
To add a new animation, you can click on the toolbar **Add**. A window will open and show you a tree of all available properties (numbers, vectors, colors, etc.).
All properties with a red icon are not supported: for example, you cannot animate "material", but you can animate "material.alpha", "material.diffuseColor", etc.

To select an animation, you can access the list of the available animations for the atteched object using the toolbar **Animations -> the animation to editor**.

To remove the current animation being modified, just click on the toolbar **Remove Animation**.

## Adding keys
When you add a new animation, 2 keys will be created by default with a default value from frames 0 to 60.

To add new keys, just ckick on the toolbar **Add Keys**. Then, the tool will be in mode "Adding Keys", select the frame and click on the red circle to add the new key.

## Removing keys
To remove keys, just click on the toolbar **Remove Keys**. Then, click on all the keys to remove.

## Previewing Animation
To preview the current animation, you can click on the toolbar **Play**. Or use the slider (by default on top-left or the tool)

## Example animating the alpha value of a material
<iframe width="560" height="315" src="https://www.youtube.com/embed/zl_bUqo3juI" frameborder="0" allow="autoplay; encrypted-media" allowFullScreen></iframe>



## Introduction

The editor provides a tool to preview, edit and add materials.

This includes:
* Standard and PBR materials
* All materials from theBabylon.js materials library

To access the tool, just click on the toolbar **View -> Materials Viewer...**.

## Adding a new material
To add a new material, just select the tool's toolbar **Add...**. A dialog will appear to select the type of material to add.
Once selected and confirmed, the material instance will be added to the scene. You can edit its properties and assign to meshes.

![AddingMaterial](/img/extensions/Editor/ManagingMaterials/AddingMaterial.png)

## Editing a material
To edit a material, just click on the desired material to edit. Once clicked, the Editor's Inspector will be updated and show up the material's properties.

## Assigning a material to a mesh
To assign a material to a mesh in the scene, you can drag'n'drop the material on the mesh. Or, change the material value in the **Inspector** once you have selected a mesh.

## Demo
Here is a live demo using the Materials Viewer tool:

<iframe width="560" height="315" src="https://www.youtube.com/embed/alCcn_lUjRc" frameborder="0" allow="autoplay; encrypted-media" allowFullScreen></iframe>


## Introduction

The editor provides a tool to preview, edit and add textures.

This includes:
* PNG and JPEG textures
* DDS Cube textures
* Procedural textures (all from the procedural textures library ofBabylon.js)
* Custom render targets
* Mirror textures

To access the tool, just click on the toolbar **View -> Textures Viewer...**.

## Adding textures from files
To add a new texture files, select in the tool's toolbar **Add -> Add From File...**. A dialog will appear to ask the texture files to add.

Once you have selected the texture files, default textures will be created in the scene. You can now select them and modify their properties.

The tool also registered the files and they'll be saved when saving the project.

**Note: you can also drag'n'drop the texture files in the Textures Viewer panel**

## Adding procedural textures
More informations about procedural textures: [https://doc.babylonjs.com/divingDeeper/materials/using/proceduralTextures](/divingDeeper/materials/using/proceduralTextures)

To add procedural textures, select in the tool's toolbar **Add -> Add Procedural...** and a dialog will open to ask which type of texture.
Once you have chosen the texture type, the texture will be added to the scene and will appear in the available textures in the tool.

![AddingProceduralTexture](/img/extensions/Editor/ManagingTextures/AddingProceduralTexture.png)

## Cloning a texture
To clone a texture (typically to have same texture but with distinct parameters), just richt-click the desired texture and select **"Clone"**. This will clone the current texture and add the cloned one to the scene.
The source texture and the cloned texture will share the same source file.

![CloningTexture](/img/extensions/Editor/ManagingTextures/CloningTexture.png)

## Removing a texture
To remove a texture, just right-click on the desired texture and select **"Remove"**. This will remove the texture from the scene but not the source file from the project.
Once removed, all affected materials will be updated to remove the texture reference.

**Important: Undo/Redo is not yet supported. Be careful before removing any texture.**

![RemovingTexture](/img/extensions/Editor/ManagingTextures/RemovingTexture.png)

## Using the tool to convert textures
BabylonJS provides a tool to convert environment textures (.dds) to custom .env files. More informations about the format here: [https://doc.babylonjs.com/divingDeeper/materials/using/HDREnvironment#what-is-a-env-tech-deep-dive](/divingDeeper/materials/using/HDREnvironment#what-is-a-env-tech-deep-dive).

To help converting, just ckick the toolbar **Convert .dds to .env**. A dialog will open to select all .dds texture files. Once selected, the tool will process the conversion.
Once done, a dialog will open for each converted texture to choose the folder where to save the result.

You can now add the new .env files by adding new textures to the scene using the above process.

![ConvertToEnv](/img/extensions/Editor/ManagingTextures/ConvertToEnv.png)

## Drag'n'drop support
The tool supports drag'n'dropping textures on meshes. That means, once you have dropped a texture on mesh, its material will be modified:
* 2D texture will replace the **Albedo Texture** for PBR materials and **Diffuse Texture** for other material types.
* Cube texture will replace the **Reflection Texture** of the material.

## Demo
Here is a live demo using the Textures Viewer tool:

<iframe width="560" height="315" src="https://www.youtube.com/embed/3dB0GlLAJko" frameborder="0" allow="autoplay; encrypted-media" allowFullScreen></iframe>


In order to optimize and go faster in design, the editor allows you to create prefabs.
For instance, only meshes are supported by prefabs (no lights, no particle systems, etc.).

Before a tool such as a **Prefab Builder** is coming, you are able to create prefabs from an entire mesh hierarchy.
In the scene graph, you can select a mesh and right click it, then you have a menu called **Create Prefab**.
This menu is used as a shortcut to create a prefab asset starting from the selected source mesh with all its hierarchy.

Given this hierarchy:
1. Sphere
    1. Cube
    2. Plane

If you select the **Sphere** and click **Create Prefab**, the prefab asset will contain the sphere, the cube and the plane.
Else, if you select only the cube, the prefab asset will contain only the cube.
Etc. etc.

Once you have created a prefab, this prefab will appear in the assets panel (don't forget to select the Prefabs tab).
From now, you can drag'n'drop your prefab assets in the scene in order to add new prefab nodes in your scene.

In the scene graph, the hierarchy of a prefab will not be drawn as you cannot remove or clone a child of a prefab for instance.
Anyway, you can of course attach scripts, graphs etc. to your prefabs, including the children of a prefab.

## What about performances?
For instance, only meshes are supported by prefabs (no lights, no particle systems, etc.).
In fact, the meshes used for the prefabs are not cloned because it would need the engine to draw multiple times the same mesh and then increase draw calls.
To overcome the draw calls problem, the editor will just create **Mesh Instances** from source meshes you have selected.

From the given documentation (//doc.babylonjs.com/divingDeeper/mesh/copies/instances), instances can be explain like: **Instances are an excellent way to use hardware accelerated rendering to draw a huge number of identical meshes (let's imagine a forest or an army)**.

In conclusion, that means each mesh of a prefab will be rendered only one time but at several places on each render.

## Demo video
<iframe width="560" height="315" src="https://www.youtube.com/embed/cIT0NK0amBA" frameborder="0" allow="autoplay; encrypted-media" allowFullScreen></iframe>



The editor provides a tool to write and attach custom scripts to objects in the scene.

This includes:
* The scene itself
* Meshes
* Cameras
* Lights
* Particle systems

To access the tool, just click on the toolbar **Tools -> Code Editor...**.

All the scripts you will write are standalone and can be attached to objects (by creating links).
That means you'll first have to add a new script. Then, attach the new script to your object(s).

To add a new script, just click **Add New Script...** in the toolbar and give it a name. If you selected an object before, the script will be automatically attached.
Once you added the new script, the assets panel will be updated and you able to drag'n'drop the new script on another objects.

To add a new reference to a script to the selected object, just click on **Add New** in the grid and select the script to attach.

Once you select another object in the scene, the tool will refresh and draw the available scripts for the new selected object.

<iframe width="560" height="315" src="https://www.youtube.com/embed/6U87lDX8i3A" frameborder="0" allow="autoplay; encrypted-media" allowFullScreen></iframe>

## Explaining the code

```javascript
import { Scene, Color4 } from 'babylonjs';

class Script implements IScript {
    // Public members
    public blackColor = new Color4(0, 0, 0, 1);
    public customParam: string = '';

    /**
     * Constructor
     * @param mesh the mesh reference the script is applied on. Can be of type "Scene", "Light", etc.
     * @param scene the scene reference containing the current script.
     */
    constructor (public mesh: Mesh, public scene: Scene) {

    }

    /**
     * Called once starting the script
     */
    public start (): void {
        // You can access the scene everywhere.
        // That means the scene is globally accessible
        this.scene.clearColor = this.blackColor;

        // You can access the attached object everywhere
        // The attached object can also be "scene", "pointlight", etc.
        console.log(this.mesh);

        // Finally, you can console.log a custom parameter set from the editor
        console.log(this.customParam);
    }

    /**
     * Called on each frame
     */
    public update (): void {
        // Your code... For example:
        this.mesh.rotation.y += 0.01;
    }
}

// Function that exports the script
exportScript(
    Script, // Constructor of the script. No parameters allowed

    // Custom parameters accessible from the editor in order to customize the script.
    // These values will be available in the Inspector panel in the folder 'Script'
    { customParam: 'Hello' }
);
```

## Debugging the code
Once you are happy and want to test your code, just run the scene by clicking in the toolbar **Play and Debug**. The editor will open a new window.

To see errors and debug your code (break points, logs, etc.), just type F12 in the new opened window. To set breakpoints, all the custom scripts are available at **behaviors/**. For instance, sourcemaps are not supported but will come in future versions.

## Importing custom classes in your scripts

To help you factorizing your code, you can create different kinds of scripts:
* Scripts that you'll attach to nodes
* Scripts used to store functionalities

Given this script named `"Maki"` attached to `Sphere Standard`:
![EditorCodeEditor](/img/extensions/Editor/CodeEditor/maki.png)

We would like to import a class we'll write to create new instances and call methods. To add a new script you'll import, just click the button "Add" in the assets panel and give it a name (here `"Dog"`):
![EditorCodeEditor](/img/extensions/Editor/CodeEditor/dog.png)

By default, the new class implements a constructor and a function `"log"`.

Let's rename the class to `Dog`:

![EditorCodeEditor](/img/extensions/Editor/CodeEditor/class_dog.png)

Back to our script `"Maki"`, we are now able to import the class `Dog` from the script named `"Dog"`:

![EditorCodeEditor](/img/extensions/Editor/CodeEditor/maki_final.png)

Then, running your project, the `.log` function is called:

![EditorCodeEditor](/img/extensions/Editor/CodeEditor/maki_result.png)

## Accessing the project files
The Editor is designed to create, edit and add the maximum of scene objects using the Editor's tools. The code editor is done to only interact with the scene objects and add logic.
Anyway, it is also possible to create scene objects in scripts such as textures etc. and that means you have to access the files.

To access the files of the project in your scripts, you have to use the editor's tools class to get the right URLs of the wanted files.
Each script exposes a **`tools`** object that contains some useful methods. In our case, the tools provide a method to get a the real URL of a file according to its name.

Example creating a cube texture:

```javascript
import { Scene, CubeTexture } from 'babylonjs';

class Script implements IScript {
    /**
     * Constructor
     * @param mesh the mesh reference the script is applied on. Can be of type "Scene", "Light", etc.
     * @param scene the scene reference containing the current script.
     */
    constructor (public mesh: Mesh, public scene: Scene) {

    }

    /**
     * Called once starting the script
     */
    public start (): void {
        const cubeTexture = new CubeTexture('Space', this.scene, null, false, [
            tools.getFileUrl('tex1.jpg'),
            tools.getFileUrl('tex2.jpg'),
            tools.getFileUrl('tex3.jpg'),
            tools.getFileUrl('tex4.jpg'),
            tools.getFileUrl('tex5.jpg'),
            tools.getFileUrl('tex6.jpg'),
        ]);

        this.mesh.material.reflectionTexture = cubeTexture;
    }
}

...
```


Once you created a prefab source and drag'n'dropped some prefabs in your scene, you are able to edit:
* A prefab object in the scene
* The source prefab object

## Opening the prefab editor
To edit prefabs, you can open the tool via **Tools -> Prefab Editor**.
This tool has 2 parts:
* Prefab hierarchy (on the left)
* Prefab live preview (on the right)

**Note:** Undo/redo is not yet supported and will be available in future version.

## Editing a prefab object in the scene
Once you have opened the prefab editor and selected a prefab in the scene graph, the tool will be updated and show you the selected prefab hierarchy and the live preview.
In the prefab hierarchy, you can delete the unwanted nodes (right click -> Remove).

Once you removed a node, **ONLY the selected prefab** will have its node removed from the scene. If you want to globally remove a node from all prefabs, you have to edit the source prefab object.

## Editing the source prefab object
In some cases, you would like to remove a node from the source prefab and apply the hierarchy modification on all already instantiated prefabs in the scene. To do that, just select the prefab asset in the assets panel.
Once selected, the prefab editor will be updated.

From now, you are editing the source prefab object. Once you remove a node from the prefab hierarchy, **ALL the instantiated prefab** in the scene will have their related node being removed from the scene.

## Demo
* 1 - Add some prefabs in scene
* 2 - Modify a prefab object in the scene
* 3 - Modify the source prefab object

<iframe width="560" height="315" src="https://www.youtube.com/embed/tVMI2cUC2lU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>

## Future
This tool is the first version of the prefab editor and some features are incoming:
* Re-arrange hierarchy on the fly
* Add new nodes on the fly
* Instantiate a prefab via the code



The V3 of the Babylon.js Editor is now available and comes with new features from the V2. Such as multiple scene managements, improved tools and new tools.

The editor V3 is available at http://editor.babylonjs.com/v3.
The video tutorials are all available on [a Youtube playlist](https://www.youtube.com/watch?v=obEuCI_pPL4&list=PLuZE-0i73Wo-xqfBsgZA531BXeesXQ3Op&index=1)

Please note that the editor is a community project maintained mostly by Julien Moreau.

## Desktop App
The Babylon.js Editor is firstly available as a desktop application.

**Note: It is highly recommended to use the desktop app as you'll get access to the local file system to save your projects.**

When an update is available (new features, bug fixes), you'll get notified and the editor will download the new installer for you.
This will also allow you to continue working even in offline mode and save projects directly on your local file system instead of using OneDrive. Basically, the online version must be just used as a playground or a scene explorer.

Downloading:
* Windows: [http://editor.babylonjs.com/BabylonJS Editor.exe](http://editor.babylonjs.com/download/win32.html)
* Mac OS X: [http://editor.babylonjs.com/BabylonJS Editor.dmg](http://editor.babylonjs.com/download/osx.html)
* Linux: [http://editor.babylonjs.com/v3/BabylonJS Editor.zip](https://editor.babylonjs.com/v3/BabylonJS%20Editor.zip)

## Project example
As an example, the following demo has been done 100% in the editor. It includes writing custom scripts, custom post-processes etc.

<iframe width="560" height="315" src="https://www.youtube.com/embed/obEuCI_pPL4" frameborder="0" allow="autoplay; encrypted-media" allowFullScreen></iframe>

## Available features
* Create, edit and save particle systems
* Create, edit and save particle system sets
* Create and edit animations
* Create and edit lens flares systems
* Create and edit physics states on meshes
* Create and edit materials (including materials library)
* Add and edit sounds
* Add and edit textures (including render target textures & procedural textures)
* Save projects on OneDrive / local with Electron
* Deploy project template on OneDrive / local with Electron
* Scene graph view
* Create and edit custom post-process
* Attach custom scripts (JavaScript and TypeScript) to your objects
* Test your scenes with debug support

## Starting with the editor
Once you run the editor, you'll see several panels:
* Preview: the scene preview in live
* Assets: this will contain assets in future such as custom scripts etc. that you'll be able to modify and drag'n'drop
* Graph: the current scene's graph showing the nodes configuration
* Inspector: contains all the tools available for the currently selected object in the scene. The inspector is used to modify the properties of the selected object
* Stats: shows the rendering and scene statistics for information according to the current scene preview
* Files: shows all the files that have been loaded in your current project. Just as information.

To use the tools and start a new project, it is highly recommended to read the documentation of each tool in this section.


The editor provides a way to manage assets. Assets are element that you can use the customize your objects.

It includes these categories of assets:
* Custom particle system sets (using the **Particle System Creator**)
* Custom scripts (using the **Code Editor**)
* Custom graphs (using the **Graph Editor**)

Once you add an asset (for example a new custom script from the Code Editor), the panel will be updated. From there you can, in the assets panel:
* Click on the asset: the tool will focus work on the selected item
* Right click on the asset: you'll be able to remove the asset (undo/redo supported)
* Double click on the asset: open/show the tool to modify the asset
* Drag'n'drop the asset on a mesh: this will add the asset to the mesh under the pointer

## Future
In future, the assets panel will contain more categories such as materials, textures, animations, etc.

<iframe width="560" height="315" src="https://www.youtube.com/embed/TaMeFlUfqdE" frameborder="0" allow="autoplay; encrypted-media" allowFullScreen></iframe>



## Introduction

Introduced in the Editor v2.0.0 as a POC, the `Graph Editor` is now live starting from the Editor v3.2.0.
As all other tools available in the Editor, the `Graph Editor` is available over the main toolbar in `Tools -> Graph Editor`:
![OpeningGraphEditor](/img/extensions/Editor/GraphEditor/opening.png)

## Understanding the tool

As for the [Node Material Editor](/divingDeeper/materials/node_material/nodeMaterial#using-the-node-material-editor), the `Graph Editor` is used to create custom behaviors for elements in the scene without having to know how to code.
The `Graph Editor` tends to evoluate and provide features such as the [Unreal Engine Blueprints](https://docs.unrealengine.com/en-US/Engine/Blueprints/index.html)

The way to attach graphs to elements of the scene is the same as the [`Code Editor`](/extensions/Editor/Custom_Scripts):
* Select an element in the scene
* Click `Add New Graph`
* Give it a name
* Add, edit and remove nodes from the graph

All graphs are standalone and can be attached to multiple elements in the scene by clicking `Add` in the list on the left side of the tool.

## Adding nodes by the example
Once a graph has been created and attached to an element of the scene, the goal is to add nodes and connect them to finally create a real algorithm.

Let's have a sphere and try the following example: on the user clicks on the sphere, we want to translate the sphere from x=0,y=0,z=0 to x=2,y=3,z=4.

First, let's add a node. By default, a graph is empty showing an empty canvas:
![EmptyGraphEditor](/img/extensions/Editor/GraphEditor/empty.png)

To add a new node, just right click on the canvas and a popup will appear to select a node to add. By default, the `search` input is focused and you can research a node by name. Let's search `"PointerDown"` and press `Enter` or double click the item in the list to add in the graph:
![GraphEditorSearchPointerDown](/img/extensions/Editor/GraphEditor/search_pointerdown.png)

The node is now in the graph and shows one output: a rectangle. All inputs/ouputs are identified by their form:
* Rectangle: means `executable`, can send/receive an event. These are called `"triggerable nodes"`.
* Circle: defines an input or output value. These are just receiving or outputing values.

From now, our `PointerDown` node is in the graph and is ready to trigger some nodes. It exists a large list of available nodes and here a particular one will be useful: the `Transform` node. This node will allow to modify the transforms (position, rotation and scale) the current node. Let's right click the graph and search for `"Transform"` and add the node:
![GraphAddedTransform](/img/extensions/Editor/GraphEditor/added_transform.png)

As we can see, the `Transform` node is `triggerable` as the first input is a rectangle. All other inputs/outputs are values as their forms are circle. All rectangles/circles on the left side are inputs and all rectangles/circles on the right side are outputs.

To connect nodes, let's drag'n'drop the `PointerDown` node output to the first input of the `Transform` node:
![GraphTransformConnected](/img/extensions/Editor/GraphEditor/transform_connected.png)

Once connected, the top color of the `Transform` node changed and became green. That means the execution time change:
* Grey color means "always executing"
* Green color means "executed on triggered"

In our case, the `Transform` node will be executed ONLY and ONLY when the user clicks on the sphere.

Back to the example, we want the sphere to have a new position x=2,y=3,y=4. That means the input "position" must receive a value to change the transform of the sphere. Let's add a new type of node called `"Type Nodes"`.
Type nodes are just nodes that define a type (number, string, vector, color, etc.). In our case, the position is a Vector 3D, so let's add a new Vector3 node:
![GraphVector3](/img/extensions/Editor/GraphEditor/vector3.png)

Once added, the output `"value"` (which is the vector reference itself) can be connected to the input `"position"` of the `Transform` node:
![GraphVector3Connected](/img/extensions/Editor/GraphEditor/vector3_connected.png)

Almost all nodes have options and can be customized. This is the case of the `Vector3` node, the values x, y, and z can be modified. So the output of the node can be customized. Let's click the `Vector3` node and go to the Editor's Edition Tools:
![GraphCustomizeVector3](/img/extensions/Editor/GraphEditor/customize_vector3.png)

The edition tool shows all the customizable properties. Here, the values x, y and z can be customized.

Finally, let's test our graph! To live test a graph, just click the button `Start/Stop` in the Graph Editor an then click the sphere.
The connection between the `PointerDown` and `Transform` nodes will be animated to show an activity: the `PointerDown` node triggered the output on the sphere has been clicked and the `Transform` node has be triggered to change the position of the sphere. That's all!

## Using variables
Each graph can have a list of variables. All variables are scoped and available ONLY and ONLY in the graph's context.
These are used to store values that support read/write. Variable can be read and written using the `Variable` and are identified by a name, like when writing code.

Variables support the following types:
* String
* Boolean
* Number
* Vector 2D
* Vector 3D
* Vector 4D

To add a variable, just click on the graph and the Editor's Edition Tools will be updated to display a list of available variables (empty by default):
![GraphEmptyVariables](/img/extensions/Editor/GraphEditor/empty_variables.png)

Let's modify the example and replace the `Vector3` node by a `Variable` node.
To add a variable, just click `Add New` in the variables list, then give it a name and a type. Here, `Vector 3D`:
![GraphAddVariable](/img/extensions/Editor/GraphEditor/add_variable.png)

Once added, the variable appears in the variables list and can be modified by clicking on the button `Edit`. Let's set the variables values to x=2,y=3,z=4:
![GraphModifyVariable](/img/extensions/Editor/GraphEditor/modify_variable.png)

The variable is now available to use and is configured. Just add the variable to the graph: right click the canvas and add a new node of type `Variable`.
Once added, a combo box is available on the node and can be customized to select the wanted variable: just select your variable:
![GraphAddVariableNode](/img/extensions/Editor/GraphEditor/add_variable_node.png)

From now, what we have to do is to remove the constant Vector 3D previously added and replace by our variable:
![GraphVariableFinal](/img/extensions/Editor/GraphEditor/variable_final.png)

## Advanced behavior example
Let's take this graph as example to illustrate a more advanced behavior. The goal is to rotate the sphere on the Y axis on the pointer is over the sphere.
Then, once the pointer is out, restore the rotation on the Y axis to 0:
![GraphAdvancedGraph](/img/extensions/Editor/GraphEditor/advanced_graph.png)

Teaching logic can't be done here. So, let's experiment with all other available nodes and create awesome graphs for awesome behaviors in your scene.

## List of all available nodes
* **Types**
    * **`Number`**: represents a number and outputs its value
    * **`String`**: represents a string and outputs its value
    * **`Vector2`**: represents a Vector 2D and outputs the vector itself, x, and y
    * **`Vector3`**: represents a Vector 2D and outputs the vector itself, x, y and z
    * **`Vector4`**: represents a Vector 2D and outputs the vector itself, x, y, z, and w
    * **`Color3`**: represents a Color 3 (rgb) and outputs the color itself, red, green, and blue
    * **`Color4`**: represents a Color 4 (rgba) and outputs the color itself, red, green, blue and alpha
* **Properties**: used to manipulate properties of scene elements and variables
    * **`Get Property`**: outputs the property value of the given scene element (see node's properties)
    * **`Set Property`**: sets the given value to the given property of the given scene element (see node's properties)
    * **`Variable`**: adds a variable node available in the graph to output its value and modify its value (see node's properties)
* **Functions**
    * **`Move With Collisions`**: preforms a translation of the node using the given displacement vector by taking care of the collisions in the scene
    * **`Look At`**: computes the rotation needed for the element to look at the given target point. (yawCor, pitchCor and rollCor are optional)
    * **`Rotate`**: rotates the current element in the given axis at the given amount
    * **`Translate`**: translates the current element in the given axis at the given amount
    * **`Set Direction`**: computes the rotation needed for the element to look at the given direction (`localAxis`). For example Vector3(0, 0, 1) will look forward
* **Utils**
    * **`Bypass Type`**: takes an input and transforms its type to an "any" type. Allows to connect the output to any other input in the graph by bypassing the type checking. Use with care
    * **`Time`**: outputs the current time in terms of milliseconds or seconds
    * **`Log`**: logs the given message in the console. Useful to help debugging
    * **`Set Timeout`**: creates a new timer and triggers the first output once the specified time has been elapsed. outputs the id of the timeout
    * **`Clear Timeout`**: clears an existing timeout by taking the timeout id as parameter
    * **`Vector 2D(3D)(4D) to XY(Z)(W)`**: takes a vector 2D, 3D or 4D (according to the node) and splits its values to output numbers x, y, z and w
    * **`Color 3(4) to RGB(A)`**: takes a color 3 or 4 (accordiong to the node) and splits its values to output numbers r, g, b and a
    * **`Vector Merger`**: takes numbers as input and ouputs a new vector 2D, 3D or 4D. Vectors 3D and 4D must have their inputs filled
    * **`Send Script Message`**: used while using Code Editor in the same project, sends a message to the given target element in the scene by calling the given method name (see node's properties)
* **Math**:
    * **`Scale`**: scales the input number of vector using the given scale number (see node's properties)
    * **`Operation`**: performs the given operation (see node's properties) on the given inputs (numbers) and outputs its result. Supported:
        * multiply
        * add
        * subtract
        * divide
    * **`Vector Operation`**: performs the given operation (see node's properties) on the given inputs (vectors) and ouputs its result. Supported:
        * multiply
        * add
        * subtract
        * divide
    * **`Fract`**: computes the fractional part of the given input (vector)
    * **`Negate`**: negates the given input (number of vector) and ouputs its result
    * **`Condition`**: checks the given inputs and triggers the appropriate output by checking their values (equal, different, etc.)
    * **`Cosinus`**: outputs the value of the cosinus of the given input
    * **`Sinus`**: outputs the value of the sinus of the given input
    * **`Tangent`**: outputs the value of the tangent of the given input
    * **`Abs`**: ouputs the absolute value of the given input
* **Node**: defines all the available methods/properties for scene nodes
    * **`Transform`**: ouputs all the transform values of the node (position, rotation and scale) and takes them as input too
    * **`Set Parent`**: sets the given parent to the current scene element. Input is of type "mesh" and can be retrieved using the `Get Node By Name` node
    * **`Get Mesh Direction`**: outputs the current direction of the mesh according to its current rotation in the given axis to rotate. Axis (0, 0, 1) will take Z as forward axis
    * **`Set Mesh Direction`**: sets the new direction of the mesh using the given local axis. Axis (0, 0, 1) will take Z as forward axis
* **Events**: defines all possible events to listen
    * **`Pointer Down`**: triggers the output on the scene element is being touched/clicked
    * **`Pointer Move`**: triggers the output on the mouse moves on the scene element
    * **`Pointer Up`**: triggers the output on the scene element has been clicked
    * **`Pointer Over`**: triggers the output on the mouse is over the scene element
    * **`Pointer Out`**: triggers the output on the mouse is out of the scene element. Will be triggered only and only if the mouse was previously over the scene element
    * **`Keyboard Down`**: triggers the output on the given key (see node's properties) is down
    * **`Keyboard Up`**: triggers the output on the given key (see node's properties) is up
* **Animation**:
    * **`Play Animations`**: plays the animations of the given target using the given properties (see node's properties)
    * **`Stop Animations`**: stops the animations of the given target (see node's properties)
    * **`Interpolate Value`**: animates the given property of the given target at the given parameters (see node's properties)
* **Sound**:
    * **`Play Sound'**: plays the given sound available in the scene (see node's properties)
    * **`Pause Sound`**: pauses the given sound available in the scene (see node's properties)
    * **`Stop Sound`**: stops the given sound available in the scene (see node's properties)
* **Scene**:
    * **`Get Node By Name`**: gets a node identified by the given name (see node's properties) and outputs its reference (type "node")
    * **`Get Mesh By Name`**: gets a mesh identified by the given name (see node's properties) and outputs its reference (type "mesh")



## Introduction
Introduced in the version 3.1.0, a new tool is available to edit custom particle system sets.
More informations about particle systems set here: [https://doc.babylonjs.com/divingDeeper/particles/particle_system/particleHelper#particlesystemset](/divingDeeper/particles/particle_system/particleHelper#particlesystemset).

A set of particle systems is done to handle a collection of systems that can be played all together according to their properties (start time, end time etc.).
The Editor provides a tool named **Particle System Creator** that allows to create sets and add / edit / remove systems from these sets.

The workflow tends to:
* create a set
* add / edit / remove systems in set
* preview
* modify
* preview
* modify
* preview
* etc. until the set fits the wanted result

## Demo
Here is a live demo using the Particle System Creator tool:

<iframe width="560" height="315" src="https://www.youtube.com/embed/FyCGTVNchQU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>

## Creating a new set
To add a new set you'll edit using the **Particle System Creator** tool, you first have to add a new set in the assets library.
In the assets panel, a tab named **Particles** shows you all the available particle system sets in the current project.

To add a new set, just click the button **Add** and give it a name. Once confirmed, a new set is available.

Example, a set named **maki**:
![AddingNewSet](/img/extensions/Editor/CreatingParticleSystemSet/AddingNewSet.png)

To load the **Particle System Creator**, just double-click on the asset and the tool will open and load the selected particle system set.
![OpeningSet](/img/extensions/Editor/CreatingParticleSystemSet/OpeningSet.png)

## Using the timeline
The tool is set of two panels:
* The timeline
* The realtime preview

The timeline is used to visualize easily when systems will be started (in milliseconds) once the set has been started.
For each system in the timeline, you can drag'n'drop horizontally to change the delay (in milliseconds) until the system starts once the set has been started.

The overall timeline can also be drag'n'dropped to translate its content by drag'n'dropping the timeline's background.
Using the mouse scroll, you can zoom/unzoom the time scale of the timeline.

Example drag'n'dropping the **New Particle System** system to 2 seconds (2000 ms):
![UsingTimeline](/img/extensions/Editor/CreatingParticleSystemSet/UsingTimeline.png)

## Editing a system
Still using the timeline, when you click a system, the Editor's Inspector will be updated to show the selected particle system's properties.
When you modify a property, the result is applied in the realtime preview panel of the tool.

The set is saved automatically.

## Adding a new system to the set
By default, a new set is composed of a default system. Fortunately, you can add new systems to the set.
To add a new system, just click the tool's toolbar **Add System...**. A dialog will appear to ask the new system's name. Once confirmed, the timeline is updated and a new row is created with the new system.

You can now edit the new system.

Example by adding a new system named **awesome system**:
![AddNewSystem](/img/extensions/Editor/CreatingParticleSystemSet/AddNewSystem.png)

## Removing a system from the set
Hopefully, you can also remove a system from the set. Just right-click on the system in the timeline and select **Remove** in the context menu.

**Note: Undo/Redo is not yet supported in the tool, be careful before removing any system.**

![RemovingSystem](/img/extensions/Editor/CreatingParticleSystemSet/RemovingSystem.png)

## Previewing the set
Once you are happy with the current configuration of the set, you can preview the result by clicking on the tool's toolbar **Reset**.
This will stop all the active systems and restart the set.

Once started, the timeline's cursor (reading head) will show the current progress in time of the set. Each time a system is started, the system in timeline will be animated to visually notify that it started.

## Exporting a set
The current set being edited can be exported. It is typically useful to re-use later in other projects or to populate a collection of particle system sets.

To export a set and sanve on the local file system, just click the tool's toolbar **Export As...**.

![ExportAsToolbar](/img/extensions/Editor/CreatingParticleSystemSet/ExportAsToolbar.png)

A dialog will appear to ask if the exported set should embed the textures content:
* If yes, the set will consist of a `.json` file containing te set's configuration and the textures data embedded as base64
* If no, the set will consist of a `.json` file containing the set's configuration and a `textures` folder containing the textures.

Embedding textures means that the `.json` file will grow faster than separating to multiple files while separating to multiple files allows incremental loading that can be useful in some cases.

![ExportAs](/img/extensions/Editor/CreatingParticleSystemSet/ExportAs.png)

## Importing from a set
In case of you have already exported a set, it is possible to import systems from a saved set to the current set being modified in the **Particle System Creator** tool.
To import a set, just click the tool's toolbar **Import From...**. A dialog will appear to select the set's `.json` file to import.

![ImportFromToolbar](/img/extensions/Editor/CreatingParticleSystemSet/ImportFromToolbar.png)

Once confirmed, all the systems and textures will be imported to the current set.

## Loading from a preset
BabylonJS provides a list of already built sets: [https://doc.babylonjs.com/divingDeeper/particles/particle_system/particleHelper#available-effects](/divingDeeper/particles/particle_system/particleHelper#available-effects).
It's useful to start from these presets as they are also good examples to understand how to build a cool particle system set.

**Note: an internet connection is required to load the following presets.**

The **Particle System Creator** allows to download these presets using the tool's toolbar **Presets**. Once clicked, let's choose the wanted preset.
A dialog will appear to ask if you want to override the current set:
* Clicking "Yes" means that the current set will be cleared to add only the preset.
* Clicking "No" will just close the dialog and will not apply the preset.

![PresetOverride](/img/extensions/Editor/CreatingParticleSystemSet/PresetOverride.png)

PG: <Playground id="#X37LS1#3" title="Explosion" description="Example with the explosion preset"/>

![ExplosionPreset](/img/extensions/Editor/CreatingParticleSystemSet/ExplosionPreset.png)

## Adding a set to the current scene
Once the set is finalized, you can instantiate the set in the scene.
To instantiate a set in the scene, just drag'n'drop the asset from the assets panel to the scene preview. The set will be created with:
* An empty mesh containing all the particle systems. The mesh will have the set's name.
* All particle systems as children of the empty mesh.

**Note: editing a set using the tool will not edit the systems already instanced in the scene.**




The editor provides a tool to help creating path finders. That will require programming skills.

For example in this video, a path finder is used to animate randomly a particle system in a given mesh surface:
<iframe width="560" height="315" src="https://www.youtube.com/embed/7HucXzBYC34" frameborder="0" allow="autoplay; encrypted-media" allowFullScreen></iframe>

## Using the Path Finder Editor
To access the tool, just click on the toolbar **Tools -> Path Finder...**.

The tool will show 2 panels:
* List of meshes surfaces where positions are available (on the left)
* Preview of the path finder output (black = wall, white = available)

To add new available surfaces, just click on the button **Add New** in the list (left). Once you add or remove surfaces, the preview will be updated.

To edit the path finder configuration, just click on the toolbar **Edit**. Now, the editor's **Inspector** will show you the available properties:
* Name: The name of the path finder configuration (important and used when programming)
* Size: Can be seen as the quality (number of positions available) of the path finder
* Ray Height: In some cases (like huge/high terrains), the ray height represents the start position on Y axis for rays being launched to check collisions on mesh surfaces. Sometimes you'll have to set a higher value
* Ray Length: Represents the length of rays being launched to check collisions. Sometimes, you'll have to set higher value
* Remove...: Remove the current path finder configuration
* Create new...: Create a new path finder configuration

## Selecting a path finder configuration
To select a path finder configuration, just click on the toolbar **Paths -> the configuration to edit**.

## Programming using path finder configurations
As a developer, you'll want to use a previously configured path finder. For example, when you add a script to a node, you can use the global instance named **tools** to access all extensions including the path finder extension.

For example, animating randomly an object:

```javascript
class Script implements IScript {
    // Public members
    public isPlaying: boolean = false; // If the object is being animated

    /**
     * Constructor
     */
    constructor ()
    { }

    /**
     * Called once starting the script
     */
    public start (): void {
        // Here we are editing a mesh
        console.log(mesh);
    }

    /**
     * Called on each frame
     */
    public update (): void {
        // Get the path finder instance. Let's have a configuration named "tutorial"
        const pathFinderConfiguration = tools.getPathFinder('tutorial');

        // Now, get start and end positions calculated by the path finder.
        // To do that, you'll have to find the nearest available point for the current node position
        const start = pathFinderConfiguration.findNearestPoint(mesh.position);
        
        const randomIndex = (Math.random() * pathFinderConfiguration.availablePoints.length) >> 0;
        const end = pathFinderConfiguration.availablePoints[randomIndex];

        // Now compute path using the path finder instance
        const path = pathFinderConfiguration.fromTo(start, end);

        // Now, create an animation. This is used as an helper to create easily a traval animation
        // Here we create an animation named "AnimationName" set as 60FPS
        const animation = pathFinderConfiguration.createAnimation('AnimationName', path, 60);

        // Animate the node!
        this.isPlaying = true;
        scene.stopAnimation(mesh);
        scene.beginAnimation(mesh, 0, path.length - 1, false, 0.4, () => {
            // On animation end, set isPlaying to false
            this.isPlaying = false;
        });
    }
}

// Function that exports the script
exportScript(Script);
```



## Introduction

The Babylon.JS Editor v3.2.0 comes with a new feature: the Photoshop Extension. The goal of this extension is to connect to the current Photoshop instance opened in our computer and send to the editor the file that is being edited in Photoshop. This feature is mainly used to live-texture meshes and see the result in real-time (almost real-time) without reloading the scene.

The Editor's plugin is called a "Generator Plug-in" and works only with Photoshop CC. In other words, the editor will connect to Photoshop and listen for events.

A simple demo video is available here:
<iframe width="560" height="315" src="https://www.youtube.com/embed/-gsR6FJPA8Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>

## Enabling Extensions

First, we have to enable Generators Plug-ins in Photoshop. To enable, just go in preferences -> plug-ins to open the plug-ins options.
![OpeningPreferences](/img/extensions/Editor/PhotoshopExtension/photoshop_setup.png)

The first options are based on Photoshop Generators. We'll have to enable:
* Generator
* Remote connections (required as the plug-in is not installed in the Photoshop directory but is embeded by the editor)
* A password (default is "password")
![Generators](/img/extensions/Editor/PhotoshopExtension/generators.png)

Once done, click "Ok" and Generator Plug-ins are enabled!

## Connecting to Photoshop

The last step is to connect to Photoshop. In the editor, in the main toolbar, a Photoshop icon is available and can be clicked.

![EditorConnect](/img/extensions/Editor/PhotoshopExtension/editor_connect.png)

This will ask you a password: this is the password you chose for remote connections in the plug-ins preferences. Type your password and then the editor connects to Photoshop:

![EditorPassword](/img/extensions/Editor/PhotoshopExtension/editor_password.png)

## Viewing Textures

Once connected, to view textures, just open the Textures Viewer and assign to our meshes we want to live-texture.

![EditorPassword](/img/extensions/Editor/PhotoshopExtension/editor_textures_viewer.png)

That's all!
Now, once a photoshop file changes (painting, new text, etc.) then the texture will be sent to the Editor and will be updated in the Babylon.JS Scene in real-time.


Please note that the Babylon.js Editor is a community project maintained mostly by Julien Moreau.

## Babylon.JS Editor v4.0 now available
**The Babylon.JS Editor v4.0 is available and is open to beta-tests. The Editor v4.0 can be downloaded here: http://editor.babylonjs.com/**

For new projects, it is highly recommanded to start using the version 4.0 of the Editor as it comes with more powerful tools to help Babylon.JS developers & artists to create awesome 3D games / applications.

## Babylon.JS Editor v3
V3 of the editor is now available and comes with new features from the V2. Such as multiple scene managements, improved tools and new tools.

It is highly recommended that you use the desktop app as you'll get access to the local file system to save your projects.

### Available features
* Create, edit and save particle systems
* Create, edit and save particle system sets
* Create and edit animations
* Create and edit lens flares systems
* Create and edit physics states on meshes
* Create and edit materials (including materials library)
* Add and edit sounds
* Add and edit textures (including render target textures & procedural textures)
* Save projects on OneDrive / local with Electron
* Deploy project template on OneDrive / local with Electron
* Scene graph view
* Create and edit custom post-process
* Attach custom scripts (JavaScript and TypeScript) to your objects
* Test your scenes with debug support


![Generated Tree ](/img/extensions/trees/quick1.png)

The function QuickTreeGenerator uses a sphere with randomized vertices to generate a tree. 

A demo can be found at: <Playground id="#LG3GS#107" title="Quick Tree Generator Example" description="Simple example of the quick tree generator."/>

## How to use it.

Clone or copy the file https://github.com/BabylonJS/Extensions/tree/master/TreeGenerators/QuickTreeGenerator

Before using check your version of BABYLONJS versions 2.2 and earlier require line 8 to be active, comment line 9 instead
BABYLON 2.3 or later leave as is.

call the function

```
var tree = QuickTreeGenerator(sizeBranch, sizeTrunk, radius, trunkMaterial, leafMaterial, scene);
```

## Parameters

sizeBranch - sphere radius used for branches and leaves 15 to 20.

sizeTrunk - height of trunk 10 to 15.

radius - radius of trunk 1 to 5.

trunkMaterial - material used for trunk.

leafMaterial - material for canopies.
 
scene - BABYLON scene. 


Babylon.js Editor

Babylon.JS Editor v4.0 now available

Babylon.JS Editor v3

Available features

Coming next

Getting Started with the Editor

Getting Started with the Babylon.js Editor, a community project maintained mostly by Julien Moreau.

Babylon.js Editor Workflow Boilerplate

A short guide to the recommended workflow for Babylon.js Editor.

Adding Textures

Babylon.js Editor tool to preview, edit and add textures.

Adding Materials

Babylon.js Editor tool to preview, edit and add materials.

Using The Assets Panel

Babylon.js Editor asset management.

Writing Custom Scripts

Babylon.js Editor tool to write and attach custom scripts to objects in the scene.

Adding Animations

Babylon.js Editor tool to create and edit simple animations.

Using Path Finder

Babylon.js Editor tool to help creating path finders

Creating Prefabs

Babylon.js Editor, in order to optimize and speed up design, allows you to create prefab.

Editing Prefabs

Babylon.js Editor having created a prefab source allows you edit a prefab object and its source.

Using the Particle System Editor

Babylon.js Editor tool to edit custom particle system sets

Using the graph Editor

Babylon.js Editor 'Graph Editor' is used to create custom behaviors for elements in the scene without having to know how to code..

using the Photoshop Extension

Babylon.js Editor extension to connect to the current Photoshop instance opened in our computer and send to the editor the file that is being edited in Photoshop.