
## Extruded Shape
An extruded shape is created by defining a shape profile using vector3 coordinates in the xy plane and providing a path along which the profile will be extruded. You must set at least the _shape_ and _path_ options. On update, you must set the _shape_, _path_ and _instance_ options and you can set the _scale_ and _rotation_ options.

On creation the local origin of an extrusion 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.

The profile shape's local origin is (0, 0, 0) relative to its defining coordinates and it is the local origin that runs along the path during the extrusion.

When you need the appearance of a solid shape then there is an option to cap the ends. The caps are drawn by creating triangles from the Barycenter of the shape profile to the profile vertices, so that there are profile shapes that cause caps to not correctly fit the profile shape. In this case you can used CreatePolygon for the caps, however you do need to position and rotate these caps in addition to creating them.

When you need sharp mitred corners there is a utility function available [Extruded Shape with Mitred Corners](/toolsAndResources/utilities/Mitred)

## MeshBuilder
Usage :
```javascript
const options = {
    shape: myPoints, //vec3 array with z = 0,
    path: myPath, //vec3 array
    updatable: true
}

let extruded = BABYLON.MeshBuilder.ExtrudeShape("ext", options, scene);  //scene is optional and defaults to the current scene

// Update
options.shape = newShape;
options.path = newPath;
options.instance = extruded;
extruded = BABYLON.MeshBuilder.ExtrudeShape("ext", options); //No scene parameter when using instance
```

option|value|default value
--------|-----|-------------
shape|_(Vector3[])_  array of Vector3, the shape you want to extrude **REQUIRED** |
path|_(Vector3[])_  array of Vector3, the extrusion axis **REQUIRED** |
scale|_(number)_  the value to scale the shape|1
rotation|_(number)_  the value to rotate the shape each step along the path|0
cap|_(number)_ extrusion cap : NO_CAP, CAP_START, CAP_END, CAP_ALL|NO_CAP
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 an extruded shape to be updated|null
invertUV|_(boolean)_ to swap the U and V coordinates at geometry construction time (texture rotation of 90°)|false

### Examples
non updatable extrusion: <Playground id="#MR8LEL#2" title="Non Updatable Extrusion" description="Simple example of non updatable extrusions." image=""/>
update of extrusion including, shape, path, scale and rotation: <Playground id="#MR8LEL#3" title="Updatable Extrusion" description="Simple example of updatable extrusions." image=""/>
extrusion with open shape: <Playground id="#MR8LEL#4" title="Extrusion With Open Shape" description="Simple example of extrusion with open shpaes." image=""/>

spiral extrusion with straight path and rotation set: <Playground id="#MR8LEL#5" title="Spiral Extrusion" description="Simple example of spiral extrusion." image=""/>  

capped extrusion: <Playground id="#MR8LEL#6" title="Capped Extrusion" description="Simple example of capped extrusion." image=""/>
profile that does not cap correctly: <Playground id="#MR8LEL#7" title="Incorrectly Capped Extrusion" description="Simple example of inocrrectly capped extrusion." image=""/>


## Mesh
Usage:
```javascript
let extrusion = BABYLON.Mesh.ExtrudeShape(name, shape, path, scale, rotation, cap, scene);
let extrusion = BABYLON.Mesh.ExtrudeShape(name, shape, path, scale, rotation, cap, scene, updatable, sideOrientation, instance); //optional parameters after scene
```


## Surfaces, Mathematics and Ribbons
Mathematics is very useful for drawing surfaces in 3D space. Surfaces are often described by the following equation type *y = f(x, z)*, that is height of point on the surface is determined by the ground coordinate position below the point

For the moment take z as fixed, say *z = 6*. That means for that value of z *y = g(x)* for some function g. 

When x is changing in a linear way it is easy to write a direct equation, such as *y = x²* and to use Babylon.js to draw it path for a range of values of x. 

```javascript
const path = [];
for (let x = -5; x <= 5; x++) {
    let y = x * x
    path.push(new BABYLON.Vector3(x, y, 6))
}
```

Another way would be to use a separate parameter t, for example, and write *x = t*, and *y = t²*. This might seem a waste of time and extra work.
```javascript
const path = [];
for (let t = -5; t <= 5; t++) {
    let x = t;
    let y = t * t
    path.push(new BABYLON.Vector3(x, y, 6))
}
```

Where it is useful is when the change in x is not linear. Consider a circle or radius 5 for example. The direct equation is *x² + y² = 25*. How do you code that? Using the angle, a, as parameter gives

```javascript
const path = [];
for (let a = 0; a < 2 * Math.PI; a += Math.PI / 8) {
    let x = 5 * Math.cos(a);
    let y = 5 * Math.sin(a);
    path.push(new BABYLON.Vector3(x, y, 6))
}
path.push(path[0]); // close circle
```

When it is possible to write the equations using parameters *x = f(t)* and *y = g(t)* it makes coding easier. Assuming the functions f(t) and g(t) have already been coded.

```javascript
const path = [];
for (let t = -5; t <= 5; t++) {
    let x = f(t);
    let y = g(t);
    path.push(new BABYLON.Vector3(x, y, 6))
}
```

Having constructed one path to draw a circle at *z = 6* do the same across a range of *z* values and use the many paths to create a ribbon.

```javascript
const paths = [];
for (let z = -6; z <= 6; z++) {
    const path = [];
    for (let a = 0; a < 2 * Math.PI; a += Math.PI / 8) {
      let x = 5 * Math.cos(a);
      let y = 5 * Math.sin(a);
      path.push(new BABYLON.Vector3(x, y, z))
    }
    path.push(path[0]); // close circle
    paths.push(path)
}
```

Again we can use a parameter for *z*
```javascript
const paths = [];
for (let t = -6; t <= 6; t++) {
    const path = [];
    for (let a = 0; a < 2 * Math.PI; a += Math.PI / 8) {
        let x = 2 * Math.cos(a);
        let y = 2 * Math.sin(a);
        let z = t;
        path.push(new BABYLON.Vector3(x, y, z))
    }
    path.push(path[0]); // close circle
    paths.push(path)
}
```
Makes a tube: <Playground id="#F6JW5W#18" title="Math-Based Ribbon Tube" description="Simple example of creating ribbon tube with math." image=""/>

We can also use the *z* parameter with *x* and *y*
```javascript
const paths = [];
for (let t = -6; t <= 6; t++) {
    const path = [];
    for (let a = 0; a < 2 * Math.PI; a += Math.PI / 8) {
        let x = 2 * Math.cos(a) + t / 2;
        let y = 2 * Math.sin(a) + t * t / 4;
        let z = t;
        path.push(new BABYLON.Vector3(x, y, z))
    }
    path.push(path[0]); // close circle
    paths.push(path)
}
```

Makes a U tube: <Playground id="#F6JW5W#19" title="Math-Based Ribbon U-Tube" description="Simple example of creating ribbon U-tube with math." image=""/>

and surfaces get more interesting if the change in z is not linear
```javascript
const paths = [];
for (let t = 0; t < Math.PI; t += Math.PI / 32) {
    const path = [];
    for (let a = 0; a < 2 * Math.PI; a += Math.PI / 32) {
        let x = 4 * Math.cos(a) * Math.sin(t);
        let y = 4 * Math.sin(a) * Math.sin(t);
        let z = 4 * Math.cos(t);
        path.push(new BABYLON.Vector3(x, y, z))
    }
    path.push(path[0]); // close circle
    paths.push(path)
}
```

a sphere: <Playground id="#F6JW5W#25" title="Math-Based Ribbon Sphere" description="Simple example of creating ribbon sphere with math." image=""/>

## More examples
It is hard to stop playing  
A ribbon of parabolas: <Playground id="#F6JW5W#22" title="Math-Based Ribbon Parabolas" description="Simple example of creating ribbon parabolas with math." image=""/>  
parabolas scaled: <Playground id="#F6JW5W#21" title="Math-Based Scaled Ribbon Parabolas" description="Simple example of creating scaled ribbon parabolas with math." image=""/>  
parabolas with some trigonometry: <Playground id="#F6JW5W#23" title="Trigonometry-Based Ribbon Parabolas 1" description="Simple example of creating ribbon parabolas with trigonometry." image=""/>
parabolas and more trigonometry: <Playground id="#F6JW5W#24" title="Trigonometry-Based Ribbon Parabolas 2" description="Simple example of creating ribbon parabolas with trigonometry." image=""/> 

## Paths to Try
You could choose a known math curve from these sites
http://en.wikipedia.org/wiki/List_of_curves  
http://www.mathcurve.com/courbes2d/courbes2d.shtml  
or others.  
When you feel more comfortable, create you own.  


  
  

option	value	default value
option path	value (Vector3[]) array of Vector3, the path of the tube REQUIRED	default value
option radius	value (number) the radius of the tube	default value 1
option tessellation	value (number) the number of radial segments	default value 64
option radiusFunction	value ( function(index, distance) ) a function returning a radius value from (index, distance) parameters	default value null
option cap	value (number) tube cap : NO_CAP, CAP_START, CAP_END, CAP_ALL	default value NO_CAP
option arc	value (number) ratio of the tube circumference between 0 and 1	default value 1
option updatable	value (boolean) true if the mesh is updatable	default value false
option sideOrientation	value (number) side orientation	default value DEFAULTSIDE
option frontUVs	value (Vector4) ONLY WHEN sideOrientation:BABYLON.Mesh.DOUBLESIDE is an option	default value Vector4(0,0, 1,1)
option backUVs	value (Vector4) ONLY WHEN sideOrientation:BABYLON.Mesh.DOUBLESIDE is an option	default value Vector4(0,0, 1,1)
option instance	value (LineMesh) an instance of a tube to be updated	default value null
option invertUV	value (boolean) to swap the U and V coordinates at geometry construction time (texture rotation of 90°)	default value false

Creating Tubes

Tube

MeshBuilder

Examples

Mesh