# Extruding Shapes

> Learn how to extrude shapes in Babylon.js.

Source: https://doc.babylonjs.com/features/featuresDeepDive/mesh/creation/param/extrude_shape

## 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 this local origin that runs along the path during the extrusion.

When you need the appearance of a solid shape, 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 there are profile shapes for which the caps will not fit correctly. In this case, you can use 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](https://doc.babylonjs.com/toolsAndResources/utilities/Mitred).

Because the extrusion converts the path points to a Path3D, there are two anomalies that can occur for a given set of path points. The first is that the orientation of the normal to the path is undefined when the path is a straight line. The Path3D constructor will pick a first normal, which may not be the one needed. Use the firstNormal option to set the path normal at the first point. The second anomaly occurs when the path reverses itself from one point to the next; this causes the tangent at that point to become undefined. To apply a heuristic fix for this, use the adjustFrame option and set it to true.

## 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
closeShape|_(boolean)_ closes the shape, no need to push shape[0] to shape array|false
closePath|_(boolean)_ closes the path, no need to push path[0] to path array|false
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
firstNormal|_(Vector3)_ path normal of first point of path|null
adjustFrame|_(boolean)_ apply heuristic to adjust tangents of paths that reverse direction|false

### Examples
 - [Playground: Close Shape by Push](https://playground.babylonjs.com/#MR8LEL#2) - Closed shape extrusion.  

 closed using shape.push(shape[0])  

- [Playground: CloseShape is True](https://playground.babylonjs.com/#MR8LEL#738) - Closed shape extrusion.  

closed using closeShape: true  

- [Playground: Updatable Extrusion](https://playground.babylonjs.com/#MR8LEL#739) - Updatable extrusion.  

update of extrusion including, shape, path, scale and rotation  
  
- [Playground: Extrusion With Open Shape](https://playground.babylonjs.com/#MR8LEL#4) - Open shape extrusion.  

extrusion with open shape  
  
- [Playground: Spiral Extrusion](https://playground.babylonjs.com/#MR8LEL#5) - Simple example of spiral extrusion.  

spiral extrusion with straight path and rotation set:    

- [Playground: Capped Extrusion](https://playground.babylonjs.com/#MR8LEL#740) - Capped extrusion.  

capped extrusion   

 - [Playground: Incorrectly Capped Extrusion](https://playground.babylonjs.com/#MR8LEL#741) - Incorrectly capped extrusion.  

 shape profile that does not cap correctly  
 
  - [Playground: Extrusion firstNormal](https://playground.babylonjs.com/#5ICT41#8) - How setting firstNormal affects extrusion.
  
 setting first normal to control orientation

 - [Playground: Extrusion path reverses direction](https://playground.babylonjs.com/#5ICT41#6) - Correcting reversing extrusion path
 
 extrusion path reverses causing artifacts

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