
## Ribbon
The ribbon is a very versatile shape. Picture a ribbon in the real world with parallel wires running down its length. You can turn such a ribbon into a wide variety of shapes. Joining one long edge to its opposite you could form a tube and bend that into different shapes. This and more is possible with a Babylon.js ribbon. Instead of parallel wires a Babylon.js ribbon is formed from paths defined by an array of vector3s and how you define the paths determines the final shape. 

On creation the local origin of a ribbon is coincident with the world origin. It is not possible to give a position relative to the constructed shape as this depends on the data sets used.

## MeshBuilder
Usage :

```javascript
const options = {
    pathArray: myPaths, //[vector3 array, vector3 array, vector3 array......]
    updatable: true
}

let ribbon = BABYLON.MeshBuilder.CreateRibbon("ribbon", options, scene); //scene is optional and defaults to the current scene

options.pathArray: myNewPaths; //The length must equal the length of myPaths and myNewPaths[i].length === myPaths[i] for all i
options.instance = true;

// updates the existing instance of ribbon : no need for the parameter scene
ribbon = BABYLON.MeshBuilder.CreateRibbon("ribbon", {pathArray: myNewPath, instance: ribbon});
```

option|value|default value
--------|-----|-------------
pathArray|_(Vector3[][])_  array of array of Vector3, the array of paths **REQUIRED**
closeArray|_(boolean)_  to force the ribbon to join its last and first paths|false
closePath|_(boolean)_  to force each ribbon path to join its last and first points|false
offset|_(number)_  used if the pathArray has one path only|half the path length
updatable|_(boolean)_ true if the mesh is updatable|false
sideOrientation|_(number)_ side orientation|DEFAULTSIDE
frontUVs|_(Vector4)_  **ONLY WHEN sideOrientation:BABYLON.Mesh.DOUBLESIDE is an option** | Vector4(0,0, 1,1) 
backUVs|_(Vector4)_  **ONLY WHEN sideOrientation:BABYLON.Mesh.DOUBLESIDE is an option** | Vector4(0,0, 1,1) 
instance|_(LineMesh)_ an instance of a ribbon to be updated|null
invertUV|_(boolean)_ to swap the U and V coordinates at geometry construction time (texture rotation of 90°)|false

### Examples

Update of a ribbon: <Playground id="#F6JW5W#5" title="Updating a Ribbon" description="Simple example of updating a ribbon."/>

double sided ribbon not updatable: <Playground id="#F6JW5W#6" title="Create a Non Updatable Double Sided Ribbon" description="Simple example of creating a non updatable double sided ribbon."/>
double sided ribbon not updatable path lines in red: <Playground id="#F6JW5W#7" title="Create a Non Updatable Double Sided Ribbon With Red Path Lines" description="Simple example of creating a non updatable double sided ribbon with red path lines."/>  
open ribbon: <Playground id="#F6JW5W#8" title="Create An Open Ribbon" description="Simple example of creating an open ribbon."/>
with closePath true: <Playground id="#F6JW5W#9" title="Create a Ribbon with closePath = True" description="Simple example of creating a ribbon with closePath set to true."/> 
with closeArray true: <Playground id="#F6JW5W#10 " title="Create a Ribbon with closeArray = True" description="Simple example of creating a ribbon with closeArray set to true."/> 


## Mesh
Usage: 
```javascript
const ribbon = BABYLON.Mesh.CreateRibbon("ribbon", pathArray, closeArray, closePath, offset, scene);
const ribbon = BABYLON.Mesh.CreateRibbon("ribbon", pathArray, closeArray, closePath, offset, scene, updatable, sideOrientation, instance); //optional parameters after scene
```

More about ribbons on the next page


## Dashed Lines
Creates a contiguous series of dashed line segments from a list of points. You must set at least the _points_ option. On update, you must set the _points_ and _instance_ options properties and you should not change . Any other option will not be changed.
## MeshBuilder
Usage:
```javascript
const options = {
    points: myPoints, //vec3 array,
    updatable: true
}

let dashedlines = BABYLON.MeshBuilder.CreateDashedLines("dashedlines", options, scene);  //scene is optional and defaults to the current scene

// Update
options.points[0].x +=6; 
options.instance = lines;
lines = BABYLON.MeshBuilder.CreateDashedLines("dashedlines", options); //No scene parameter when using instance
```

option|value|default value
--------|-----|-------------
points|_(Vector3[])_  array of Vector3, the path of the line **REQUIRED** |
dashSize|_(number)_  size of the dashes|3
gapSize|_(number)_  size of the gaps|1
dashNb|_(number)_  intended number of dashes|200
updatable|_(boolean)_ true if the mesh is updatable|false
instance|_(LineMesh)_ an instance of a line mesh to be updated|null

The actual length of the dashes and gaps is determined by how many are set by the *dashNb* and then the ratio, of *dashSize* and * gapSize* rather than the actual size 
All of the following will produce equal sized dashes and gaps.
```javascript
dashSize = 1;
gapSize = 1;

dashSize = 1000;
gapSize = 1000;

dashSize = 876;
gapSize = dashSize;
```
### Examples
non updatable default dashed lines: <Playground id="#TYF5GH#1" title="Create Non Updatable Default Dashed Lines" description="Simple example of creating non updatable default dashed lines."/> 
non updatable dashed lines set options: <Playground id="#TYF5GH#2" title="Create Non Updatable Dashed Lines With Options" description="Simple example of creating non updatable dashed lines with options."/>
non updatable 'closed' dashed lines: <Playground id="#TYF5GH#3" title="Create Non Updatable Closed Dashed Lines" description="Simple example of creating non updatable closed dashed lines."/>
updatable example: <Playground id="#TYF5GH#4" title="Create Updatable Closed Dashed Lines" description="Simple example of creating updatable closed dashed lines."/>

Dashed lines are colored with a color property rather than a material.

```javascript
dashedlines.color = new BABYLON.Color3(1, 0, 0);
```

Colored Dashed Lines: <Playground id="#TYF5GH#5" title="Create Colored Dashed Lines" description="Simple example of creating colored dashed lines."/>

## Mesh
Usage:
```javascript
const dashedlines = BABYLON.Mesh.CreateDashedLines("dashedLines", vector3 array, dashSize, gapSize, dashNb, scene);
const dashedlines = BABYLON.Mesh.CreateDashedLines("dashedLines", vector3 array, dashSize, gapSize, dashNb, scene, updatable, instance); //optional parameters after scene
```

option	value	default value
option lines	value (Vector3[][]) array of lines, each line being an array of successive Vector3 REQUIRED	default value
option updatable	value (boolean) true if the mesh is updatable	default value false
option instance	value (LineMesh) an instance of a line system mesh to be updated	default value null
option colors	value (Color4[]) array of Color4, each point color	default value null
option useVertexAlpha	value (boolean) false if the alpha blending is not required (faster)	default value true

Creating A Line System

Line System

MeshBuilder

Examples