babylon101

Parametric Shapes


Parametric Shapes 101

These shapes or meshes are determined by parameters or mathematical data. They include lines, a system of lines, ribbons, tubes, extrusions, lathed shapes and irregular polygons. In the 101 course you will only meet lines and you will just use the MeshBuilder method rather than the older legacy Mesh method. How to create all the parametric shapes using either method and the advantages and disadvantages of both can be found by doing Further Reading.

Lines

Lines are a series of line segments in 3D where the end of one line segment is the start of the next segment. Lines are described by a series of points in 3D space.

These three points (0, 0, 0), (0, 1, 1), (0, 1, 0) will form two line segments.

These points are given by position vectors which in Babylon.js are constructed as Vector3 objects and are placed in order in an array to be passed to the CreateLines method.

var myPoints = [];

var point1 = new BABYLON.Vector3(0, 0, 0);
myPoints.push(point1);
var point2 = new BABYLON.Vector3(0, 1, 1);
myPoints.push(point2);
var point3 = new BABYLON.Vector3(0, 1, 0);
myPoints.push(point3);

//or possible the alternative

var myPoints =[
    new BABYLON.Vector3(0, 0, 0),
    new BABYLON.Vector3(0, 1, 1),
    new BABYLON.Vector3(0, 1, 0)
];

The array of points MUST then be passed to CreateLines with the points option

//creates lines
var lines = BABYLON.MeshBuilder.CreateLines("lines", {points: myPoints}, scene);

Playground Example of Lines -


Playground Example of a Spiral from Lines -

You can use dashed lines with CreateDashedLines and adding the number of dashes dashNb as an option.

Playground Example of a Spiral from Dashed Lines -


For CreateLines the options are

option value default value
points (Vector3[]) array of Vector3, the path of the line REQUIRED
updatable (boolean) true if the mesh is updatable false
instance (LineMesh) an instance of a line mesh to be updated null
colors (Color4[]) array of Color4, each point color null
useVertexColor (boolean) true if the alpha value of the former array must de used false

For CreateDashedLines the options are

options 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
dashBn (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

Updatable Option

Lines and Dashed Lines have an updatable option. When this is true it is possible to alter the data associated with each vertex of the Lines and so alter the path of the Lines. For more information see Updating Vertices.

Instance Option

Lines also have an instance option which means there is an alternative way to update the path of the lines just by passing a new set of points. For this to work the original lines creation must have the updatable option as true and the lines created are passed as the value of the option instance. The number of points in the array MUST stay the same.

Example :

//creates lines
var lines = BABYLON.MeshBuilder.CreateLines("lines", {points: myArray, updatable: true}, scene);

// updates the existing instance of lines : no need for the parameter scene here
lines = BABYLON.MeshBuilder.CreateLines("lines", {points: myNewArray, instance: lines});

Playground Example of a Spiral from Lines -


Most but not all parametric shapes have the instance option and so can have their mesh updated in this way.

Next Step

In the previous section, about set shapes, you saw that when created they sit on top of each other at the origin. That is often the case with parametric shapes as well. So its time to move on to position meshes where needed and also find out about rotation and scaling. Ready? Sure you are! Position, Rotation and Scaling

Further Reading

How to Create Parametric Shapes with MeshBuilder
How to Create Parametric Shapes Legacy Method
Advantages and Disadvantages