BabylonJS - Parametric Shapes

Babylon.js - Parametric Shapes

Beyond the standard primitives like boxes and spheres, Babylon.js allows you to create complex meshes based on mathematical formulas or paths defined by sequences of points. These are often referred to as parametric shapes because their form is determined by parameters and equations rather than fixed geometry.

The MeshBuilder class provides several methods for creating these shapes, enabling you to generate lines, ribbons, tubes, extrusions, and more.

1. Lines and Dashed Lines

The simplest parametric shape is a line connecting a series of points. CreateLines generates a continuous line mesh, while CreateDashedLines creates a line with gaps.

Syntax

// Array of points (Vector3)
const myPoints = [
    new BABYLON.Vector3(0, 0, 0),
    new BABYLON.Vector3(5, 5, 0),
    new BABYLON.Vector3(5, 5, 5),
    new BABYLON.Vector3(0, 0, 5)
];

// Create a continuous line
const lines = BABYLON.MeshBuilder.CreateLines("lineMesh", { points: myPoints }, scene);
lines.color = new BABYLON.Color3(1, 0, 0); // Set line color

// Create dashed lines
const dashedLines = BABYLON.MeshBuilder.CreateDashedLines("dashedLineMesh", {
    points: myPoints,
    dashSize: 3, // Length of each dash
    gapSize: 1,  // Length of the gap between dashes
    dashNb: 200 // Approximate number of dashes (adjust for density)
}, scene);
dashedLines.color = new BABYLON.Color3(0, 1, 0);

2. Ribbon

CreateRibbon generates a flat mesh by connecting multiple paths (arrays of points) side-by-side. Imagine laying several strands of yarn next to each other – the ribbon fills the space between them.

Syntax

// Define multiple paths (each path is an array of Vector3)
const path1 = [new BABYLON.Vector3(-2, 0, 0), new BABYLON.Vector3(-2, 5, 0)];
const path2 = [new BABYLON.Vector3(0, 0, 1), new BABYLON.Vector3(0, 5, 1)];
const path3 = [new BABYLON.Vector3(2, 0, 0), new BABYLON.Vector3(2, 5, 0)];

const pathArray = [path1, path2, path3];

// Create the ribbon
const ribbon = BABYLON.MeshBuilder.CreateRibbon("ribbonMesh", {
    pathArray: pathArray,
    sideOrientation: BABYLON.Mesh.DOUBLESIDE // Make visible from both sides
}, scene);

const ribbonMat = new BABYLON.StandardMaterial("ribbonMat", scene);
ribbonMat.diffuseColor = new BABYLON.Color3(0, 0, 1);
ribbon.material = ribbonMat;

Ribbons are useful for creating walls, trails, or complex surfaces defined by parallel trajectories.

3. Tube

CreateTube generates a cylindrical mesh that follows a specified path. You define the path, the radius of the tube, and the tessellation (smoothness).

Syntax

// Define the path for the tube
const tubePath = [
    new BABYLON.Vector3(0, 0, 0),
    new BABYLON.Vector3(0, 5, 0),
    new BABYLON.Vector3(3, 5, 3),
    new BABYLON.Vector3(5, 5, 0)
];

// Create the tube
const tube = BABYLON.MeshBuilder.CreateTube("tubeMesh", {
    path: tubePath,
    radius: 0.5, // Radius of the tube
    tessellation: 64, // Number of segments around the circumference (smoothness)
    sideOrientation: BABYLON.Mesh.DOUBLESIDE
}, scene);

const tubeMat = new BABYLON.StandardMaterial("tubeMat", scene);
tubeMat.diffuseColor = new BABYLON.Color3(1, 1, 0);
tube.material = tubeMat;

Tubes are ideal for creating pipes, wires, rails, or any shape that follows a path with a consistent circular cross-section.

4. Extrusion (ExtrudeShape, ExtrudeShapeCustom)

Extrusion creates a 3D shape by taking a 2D shape (defined by points) and extending it along a path. ExtrudeShape performs a linear extrusion, while ExtrudeShapeCustom allows for scaling and rotation along the path.

Syntax

// Define the 2D shape (e.g., a star shape in the XY plane, Z=0)
const starShape = [
    new BABYLON.Vector3(0, 2, 0),
    new BABYLON.Vector3(0.5, 0.5, 0),
    new BABYLON.Vector3(2, 0, 0),
    new BABYLON.Vector3(0.5, -0.5, 0),
    new BABYLON.Vector3(0, -2, 0),
    new BABYLON.Vector3(-0.5, -0.5, 0),
    new BABYLON.Vector3(-2, 0, 0),
    new BABYLON.Vector3(-0.5, 0.5, 0),
    new BABYLON.Vector3(0, 2, 0) // Close the shape
];

// Define the extrusion path (e.g., extending along the Z axis)
const extrusionPath = [
    new BABYLON.Vector3(0, 0, 0),
    new BABYLON.Vector3(0, 0, 5)
];

// Create the extruded shape
const extrudedStar = BABYLON.MeshBuilder.ExtrudeShape("extrudedMesh", {
    shape: starShape,
    path: extrusionPath,
    sideOrientation: BABYLON.Mesh.DOUBLESIDE,
    cap: BABYLON.Mesh.CAP_ALL // Add caps to the start and end
}, scene);

const extrudeMat = new BABYLON.StandardMaterial("extrudeMat", scene);
extrudeMat.diffuseColor = new BABYLON.Color3(1, 0, 1);
extrudedStar.material = extrudeMat;

Extrusion is very powerful for creating custom 3D objects from 2D profiles, such as architectural elements, custom railings, or complex machine parts.

Combining Concepts

You can combine these techniques. For example, you could create a path using Curve3 (see the Curve3 chapter) and then use that path to create a Tube or Ribbon, allowing for complex, smooth parametric shapes.

Demo Description

Imagine a scene displaying the shapes described above: a red continuous line connecting several points, a green dashed line following the same path, a blue ribbon formed by three parallel vertical paths, a yellow tube following a curved path, and a magenta 3D star shape created by extruding a 2D star along the Z-axis. This would showcase the versatility of parametric shape generation in Babylon.js.