
# List

## Scene Events

### Scene Start

A node that is fired when a scene is started.

### Scene Tick

A node that fires every time a frame is executed.

## Mesh Events

### Mesh Pick

A node that is fired every time a specific mesh is picked. The mesh is defined through a variable name, which is passed to the constructor.

```javascript
// we have a flow graph named graph and a context named context
// ...
context.setVariable("meshToPick", mesh);
//...
const meshPick = new BABYLON.FlowGraphMeshPickNode({meshVariableName: "meshToPick"});
// add node to graph
```

## Custom Events

### Receive Custom Event

A node that is activated whenever a custom event is sent.



# Execution Nodes

## Animation

### Play Animation

A block that plays an [animation](features/featuresDeepDive/animation/animation_introduction) supplied to it.

```javascript
const block = new BABYLON.FlowGraphPlayAnimationBlock();

block.target.setValue(...); // sets the target of the animation
block.animation.setValue(...); // sets the animation to play
block.speed.setValue(...); // sets the speed of the animation
block.loop.setValue(...); // sets if the animation should loop or not
block.from.setValue(...); // sets the starting frame of the animation
block.to.setValue(...); // sets the ending frame of the animation

block.runningAnimatable.connectTo(...) // the Animatable produced by running the animation

block.onDone.connectTo(...) // this output flow executes as soon as the animation is played
block.onAnimationEnd.connectTo(...) // this output flow executes only once the animation stops playing
```

### Stop Animation

A block that stops an animation.

```javascript
const block = new BABYLON.FlowGraphStopAnimationBlock();

block.animationToStop.setValue(...) // the ANIMATABLE to stop running
```

### Pause Animation

A block that pauses an animation.

```javascript
const block = new BABYLON.FlowGraphPauseAnimationBlock();

block.animationToPause.setValue(...) // the ANIMATABLE to pause
```

## Control Flow

### Branch

A block that executes one of two output flows depending on a condition.

```javascript
const block = new BABYLON.FlowGraphBranchBlock();

block.condition.setValue(...) // the condition to check
block.onTrue.connectTo(...) // the flow to execute if the condition is true
block.onFalse.connectTo(...) // the flow to execute if the condition is false
```

### Counter

A block that counts the number of times that it has been called.

```javascript
const block = new BABYLON.FlowGraphCounterBlock();

block.reset.connectTo(...)  // input flow that resets the counter when activated
block.count.connectTo(...) // the count
```

### DoN

A block that executes an output flow maximum a set number of times

```javascript
const block = new BABYLON.FlowGraphDoNBlock();

block.reset.connectTo(...)  // input flow that resets the times already executed when activated
block.maxNumberOfExecutions.setValue(5...) // will execute the output flow a maximum of 5 times
block.currentCount.connectTo(...) // the current count of executions of the block.
```

### Flip Flop

A block that flips betweent two flows.

### ForLoop

A block that executes a flow in a loop.

```javascript
const forLoop = new BABYLON.FlowGraphForLoopBlock();

forLoop.startIndex.setValue(1...) // the start index of the loop
forLoop.endIndex.setValue(3...) // the end index of the loop
forLoop.step.setValue(2...) // the increment of the index of the loop

forLoop.index.connectTo(...) // the current index of the loop
forLoop.onLoop.connectTo(...) // the body of the loop
forLoop.onDone.connectTo(...) // the flow to execute when the loop is done running
```

### MultiGate

A block that executes one of N outputs sequentially or randomly.

### Switch

A block that executes one of N outputs based on a selection.

### Throttle

A block that throttles the execution of an output signal.

### Timer

A block that activates an output once a timer has ran out.

### WaitAll

A block that executes an output once all the inputs have been activated.

### While Loop

A block that executes an output while a condition is true.

## Others

### Custom Function

A block that executes a custom function.

### Log

A block that logs a message on the console.

### Send Custom Event

A block that sends a custom events (see Event Nodes).

### Set Property

A block that sets a property on a target object.

### Set Variable

A block that sets a variable on the graph.



# Introduction to the Flow Graph

The Flow Graph is a new system currently in development, intended to be a new and powerful way of driving interactive experiences in Babylon.js by connecting node primitives, similar of how [Node Material](/features/featuresDeepDive/materials/node_material/nodeMaterial) and [Node Geometry](/features/featuresDeepDive/mesh/nodeGeometry) work. To create a Flow Graph, first you should create a Flow Graph Coordinator, which is responsible for grouping and communication between graphs.

This is a basic example of a Flow Graph that logs a message to the console when a mesh is clicked:

```javascript
var coord = new BABYLON.FlowGraphCoordinator({scene});

var graph = coord.createGraph();

var ctx = graph.createContext();

var sceneReady = new BABYLON.FlowGraphSceneReadyEventBlock();
graph.addEventBlock(sceneReady);

var log = new BABYLON.FlowGraphLogBlock();
sceneReady.onDone.connectTo(log.onStart);
log.message.setValue("Hello, world!", ctx);

coord.start();
```

Flow Graphs start execution when an **Event Node** is triggered. The other types of nodes are the **Execution Nodes**, which are responsible for setting state, control flow, playing animations and sound, and **Data Nodes**, which perform operations on data when requested by Execution Nodes. Nodes are connected through each other through **Signal Connections**, which activate the execution of each node in the chain, and **Data Connections**, through which data is requested and updated. Data Connections are typed at Typescript level, differently from Node Material and Node Geometry, so it's easier to know the expected type of data through its own code.

Each Flow Graph contains one or more **contexts**, which represent the actual execution state of a graph. Having the capacity of handling multiple contexts allows the same behavior, such as a door opening when a switch is pressed, to be reused across different scene objects. This reuse can be accomplished by setting different **variables** on each context. When a graph is started, all of its contexts are started. Here, the previous example has been modified with two contexts:

```javascript
var coord = new BABYLON.FlowGraphCoordinator({scene});

var graph = coord.createGraph();

var ctx = graph.createContext();
var ctx2 = graph.createContext();

var sceneReady = new BABYLON.FlowGraphSceneReadyEventBlock();
graph.addEventBlock(sceneReady);

var log = new BABYLON.FlowGraphLogBlock();
sceneReady.onDone.connectTo(log.onStart);
log.message.setValue("Hello, world!", ctx);
log.message.setValue("I'm a different context!", ctx2);

coord.start();
```

Different Flow Graphs can also communicate with each other by sending and receiving **custom events**. For example, the previous example has been modified again to use a custom event sent between two different graphs.

```javascript
var coord = new BABYLON.FlowGraphCoordinator({scene});

var sendGraph = coord.createGraph();
var sendGraphCtx = sendGraph.createContext();

var sceneReady = new BABYLON.FlowGraphSceneReadyEventBlock();
sendGraph.addEventBlock(sceneReady);

var sendEvent = new BABYLON.FlowGraphSendCustomEventBlock();
sendEvent.eventId.setValue("customEvent", sendGraphCtx);
sendEvent.eventData.setValue("Custom event data", sendGraphCtx);
sceneReady.onDone.connectTo(sendEvent.onStart);

var receiveGraph = coord.createGraph();
var receiveGraphCtx = receiveGraph.createContext();

var receiveEvent = new BABYLON.FlowGraphReceiveCustomEventBlock({eventId: "customEvent"});
receiveGraph.addEventBlock(receiveEvent);

var log = new BABYLON.FlowGraphLogBlock();
receiveEvent.onDone.connectTo(log.onStart);
receiveEvent.eventData.connectTo(log.message);

coord.start();
```

The Flow Graph format will allow for parsing and serializing files in the gLTF format by utilizing their Interactivity Extension.



# Flow Graph

The flow graph is a new system in development that allows creating interactive experiences using simple building blocks.



Any scene or mesh can be downloaded as a file to you computer. This is achieved with the [scene serializer](/typedoc/classes/babylon.sceneserializer)

## Scene

Include the following code in your project to download your scene

```javascript
let objectUrl;
function doDownload(filename, scene) {
  if (objectUrl) {
    window.URL.revokeObjectURL(objectUrl);
  }

  const serializedScene = BABYLON.SceneSerializer.Serialize(scene);

  const strScene = JSON.stringify(serializedScene);

  if (filename.toLowerCase().lastIndexOf(".babylon") !== filename.length - 8 || filename.length < 9) {
    filename += ".babylon";
  }

  const blob = new Blob([strScene], { type: "octet/stream" });

  // turn blob into an object URL; saved as a member, so can be cleaned out later
  objectUrl = (window.webkitURL || window.URL).createObjectURL(blob);

  const link = window.document.createElement("a");
  link.href = objectUrl;
  link.download = filename;
  const click = document.createEvent("MouseEvents");
  click.initEvent("click", true, false);
  link.dispatchEvent(click);
}
```

The following playground is an example of creating a scene, using the serializer, converting it to a JSON file and then giving the option of downloading it to your computer.  
PG: <Playground id="#1AGCWP#1" title="Save Scene" description="Example of saving a scene." image="/img/playgroundsAndNMEs/pg-1AGCWP-1.png"/>

## Meshes

The following code shows the changes necessary to just download a mesh to your computer.

```javascript
let objectUrl;
function doDownload(filename, mesh) {
  if (objectUrl) {
    window.URL.revokeObjectURL(objectUrl);
  }

  const serializedMesh = BABYLON.SceneSerializer.SerializeMesh(mesh);

  const strMesh = JSON.stringify(serializedMesh);

  if (filename.toLowerCase().lastIndexOf(".babylon") !== filename.length - 8 || filename.length < 9) {
    filename += ".babylon";
  }

  const blob = new Blob([strMesh], { type: "octet/stream" });

  // turn blob into an object URL; saved as a member, so can be cleaned out later
  objectUrl = (window.webkitURL || window.URL).createObjectURL(blob);

  const link = window.document.createElement("a");
  link.href = objectUrl;
  link.download = filename;
  const click = document.createEvent("MouseEvents");
  click.initEvent("click", true, false);
  link.dispatchEvent(click);
}
```


Flow Graph

Coming next

Introduction to the Flow Graph

Discover the new system to drive interactive experiences in Babylon.js

Available Event Nodes

A list of all the Event Nodes available in the Babylon.js Flow Graph

Available Execution Nodes

A list of all the Execution Nodes available in the Babylon.js Flow Graph

Available Data Nodes

A list of all the Data Nodes available in the Babylon.js Flow Graph