
## Graphical User Interface

There are a number of options for adding a GUI to Babylon.js. The **Babylon.GUI** is covered in this section.

It allows you to place buttons and labels within in 3D space as well as a 2D front of screen GUI.
When you want a GUI that works in VR or within the 3D space it's the only option.

It is integrated within the playground. For your own projects it has to be loaded as well as Babylon.js.

<Playground id="#NGS9AU" title="Simple GUI Slider Example" description="Simple example of adding a GUI slider to your scene." image="/img/playgroundsAndNMEs/divingDeeperGUI1.jpg"/>

Other possible GUIs are:
1. CastorGUI, a Babylon.js community extension which overlays the scene
1. Dat.GUI, an external interface
3. HTML GUI


## CastorGUI

An alternative 2D GUI is the extension [CastorGUI](/communityExtensions/castorGUI). It has to be loaded both for the playground and for your own projects.

It can be found on [Github](https://github.com/dad72/CastorGUI).

<Playground id="#S34THY#14" title="CastorGUI Example" description="Simple example of using the CastorGUI system in your scene." image="/img/playgroundsAndNMEs/divingDeeperGUI2.jpg"/>

## Dat.GUI

The external [dat.GUI](https://github.com/dataarts/dat.gui) is integrated within the playground. For your own projects it has to be loaded as well as Babylon.js.

<Playground id="#NGS9AU#1" title="dat.GUI Example" description="Simple example of using the dat.GUI system in your scene." image="/img/playgroundsAndNMEs/divingDeeperGUI3.jpg"/>

## HTML GUI

Since Babylon.js is in JavaScript it is possible to use HTML and CSS to overlay the Babylon.js scene.

<Playground id="#1AHPN5" title="HTML GUI Example" description="Simple example of using HTML GUI elements in your scene." image="/img/playgroundsAndNMEs/divingDeeperGUI4.jpg"/>

## Comparison of GUI Options

Here's a list of the pros and cons of using different types of GUIs. It’s worth noting that these options aren’t mutually exclusive - they can be used together, depending on requirements, for instance:

* Use a simple HTML GUI for initial rapid protoyping, before transitioning to Babylon 2D or 3D GUI
* Use an HTML GUI overlay for complex, dynamic, text-heavy info panels but Babylon 2D GUI for everything else

The sky’s the limit! Go forth and GUI in whatever way takes your fancy!


### HTML GUI

#### Pros

* Use familiar HTML, CSS and front-end frameworks like Bootstrap, Tailwind, React, Vue, Svelte & Angular etc
* Near unlimited flexibility & mobile responsiveness
* High performance (as rendered by native browser rather than 3D engine)
* Easier to make WCAG accessibility compliant

#### Cons

* Looser integration with 3D scene
* Can’t have GUI elements directly within 3D scene (e.g. applied to meshes)
* Can’t apply 3D post processing effects to overlaid HTML GUI elements
* Can’t be used for fullscreen/native VR

### Babylon 2D GUI

#### Pros

* There’s now an awesome [GUI Editor](/toolsAndResources/guiEditor) to make interface creation easier!
* Tight integration with 3D scene
* Ability to optionally apply scene post processing effects to GUI as well
* Ability to apply/link GUI elements and meshes
* Some unique, useful capabilities like nine-patch stretching and sprite-sheet animation that aren’t available with a raw HTML GUI

#### Cons

* Less comprehensive/flexible than HTML GUI (but still more than enough for most requirements)
* Depending on advanced dynamic texture resolution, GUI may look a little blurry
* Possibly some performance considerations
* Can’t be used for fullscreen/native VR

### Babylon 3D GUI

#### Pros

* Supports fullscreen/native VR
* Tight integration with 3D scene
* Ability to optionally apply scene post processing effects to GUI as well

#### Cons

* Less comprehensive/flexible than both Babylon 2D GUI and HTML GUI


# 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.


Block	Input 1	Input 2	Input 3	Output	Notes
Block Add/Subtract/Multiply/Divide	Input 1 number	Input 2 number	Input 3	Output number	Notes
Block Add/Subtract/Multiply/Divide	Input 1 Vector2	Input 2 Vector2	Input 3	Output Vector2	Notes
Block Add/Subtract/Multiply/Divide	Input 1 Vector3	Input 2 Vector3	Input 3	Output Vector3	Notes
Block Add/Subtract/Multiply/Divide	Input 1 Vector4	Input 2 Vector4	Input 3	Output Vector4	Notes
Block Add/Subtract/Multiply/Divide	Input 1 Matrix	Input 2 Matrix	Input 3	Output Matrix	Notes
Block Add/Subtract/Multiply/Divide	Input 1 Matrix	Input 2 number	Input 3	Output Matrix	Notes
Block Mod/Pow/ATan2	Input 1 number	Input 2 number	Input 3	Output number	Notes
Block IsNan/IsInfinity	Input 1 number	Input 2 number	Input 3	Output boolean	Notes
Block Sqrt/Abs/Negate/Floor/Ceil/Round/Trunc/Exp/Log10/Log/Ln/Sin/Cos/Tan/ASin/ACos/ATan	Input 1 number	Input 2 number	Input 3	Output boolean	Notes
Block E/PI	Input 1 number	Input 2	Input 3	Output number	Notes
Block Random/Min/Max	Input 1 number	Input 2 number	Input 3	Output number	Notes
Block Equals/GreaterThan/GreaterThanOrEquals/LessThan/LessThanOrEquals	Input 1 number	Input 2 number	Input 3	Output boolean	Notes
Block Mix	Input 1 number	Input 2 number	Input 3 number	Output number	Notes
Block Scale	Input 1 Vector2	Input 2 number	Input 3	Output Vector2	Notes
Block Scale	Input 1 Vector3	Input 2 number	Input 3	Output Vector3	Notes
Block Scale	Input 1 Vector4	Input 2 number	Input 3	Output Vector4	Notes
Block Length	Input 1 Vector2	Input 2 number	Input 3	Output number	Notes
Block Length	Input 1 Vector3	Input 2 number	Input 3	Output number	Notes
Block Length	Input 1 Vector4	Input 2 number	Input 3	Output number	Notes
Block Normalize	Input 1 Vector2	Input 2 number	Input 3	Output Vector2	Notes
Block Normalize	Input 1 Vector3	Input 2 number	Input 3	Output Vector3	Notes
Block Normalize	Input 1 Vector4	Input 2 number	Input 3	Output Vector4	Notes
Block Cross	Input 1 Vector3	Input 2 Vector3	Input 3	Output Vector3	Notes
Block Dot	Input 1 Vector3	Input 2 Vector3	Input 3	Output number	Notes
Block Rotate2d	Input 1 Vector2	Input 2 number	Input 3	Output Vector2	Notes
Block Rotate3d	Input 1 Vector3	Input 2 Vector3	Input 3 number	Output Vector2	Notes

Available Data Nodes

Logic

Bitwise

Bitwise And

Bitwise Or

Bitwise Xor

Bitwise Not

Bitwise Left Shift

Bitwise Right Shift

Count Leading Zeros

Count Trailing Zeros

Logical

Logic And

Logic Or

Logic Not

Math