GreasedLineRibbon - a non camera facing version of GreasedLine

GreasedLineRibbon

You can use all the features of GreasedLine except sizeAttenuation which doesn't make sense to use in non camera facing mode. GreasedLineRibbon creates ribbon like geometry for the lines. If you want to create a GreasedLineRibbon just add the ribbonOptions property to the GreasedLineMeshBuilderOptions when using the CreateGreasedLine builder function or to GreasedLineMeshOptions when creating the GreasedLineRibbon manually.

Create a GreasedLineRibbon

The easiest, prefered and recommended way to create a GreasedLineRibbon is to use the CreateGreasedLine function:

javascript

function CreateGreasedLine(name: string, options: GreasedLineMeshBuilderOptions, materialOptions?: Nullable<GreasedLineMaterialBuilderOptions>, scene?: Nullable<Scene>)

The simplest usage is:

javascript

const line = BABYLON.CreateGreasedLine("name", { points, ribbonOptions: { } })

Basic usage

GreasedLineMeshBuilderOptions.ribbonOptions

If there is a ribbonOptions present a non camera facing ribbon like mesh will be created. It's an instance of the GreasedLineRibbon class. If you don't want to change the default values it's enough to pass an empty object as shown previously.

javascript

pointsMode: GreasedLineRibbonPointsMode;
direction: Vector3;
width: number;
facesMode?: GreasedLineRibbonFacesMode;
closePath?: boolean;
smoothShading?: boolean;

The default values are:

javascript

pointsMode = GreasedLineRibbonPointsMode.POINTS_MODE_POINTS;
direction = Vector3.UpReadOnly;
width = GreasedLineMaterialDefaults.DEFAULT_WIDTH; // 0.1
facesMode = GreasedLineRibbonFacesMode.FACES_MODE_SINGLE_SIDED;
closePath = false;
smoothShading = false;

If you are creating the GreasedLineRibbonMesh manually you have to take care of setting all the values yourself. In addition you have to set the cameraFacing option to false in GreasedLineMaterialOptions when creating the material manually.

pointsMode

There are two point modes available:

javascript

POINTS_MODE_POINTS = 0,
POINTS_MODE_PATHS = 1,

In GreasedLineRibbonPointsMode.POINTS_MODE_POINTS every array of points will become the center (backbone) of the ribbon. The ribbon will be expanded by width / 2 to +direction and -direction as well.

In GreasedLineRibbonPointsMode.POINTS_MODE_PATHS every array of points is one path. These will be used to build one ribbon.

Let's demonstrate both point modes. The gray mesh is the line ribbon itself and the white line is the center (backbone) of it:

Point mode POINTS_MODE_POINTS

The gray mesh is the line ribbon itself and the white lines are the paths which the line ribbon is built between:

Point mode POINTS_MODE_PATHS

A simple space track created using POINTS_MODE_PATHS. The red debug lines shows the paths. Track colors are created using a manually created texture. The red lines shows the paths which defines the edges of the ribbon.

Path mode

The same space track colorizeds by the colors property of the GreasedLineMaterial:

Path mode

You can have more than two paths to build line ribbons of custom shapes:

Point mode POINTS_MODE_PATHS with more paths

direction and width

This property is a normalized direction vector of the slope of the line in POINTS_MODE_POINTS. The line ribbon will be expanded to +direction and -direction from the center line defined by points by a value of width / 2.

You can change the default width by modifying the value of GreasedLineRibbonMesh.DEFAULT_WIDTH static property. This will not affect the existing line ribbons.

The widths option on GreasedLineMaterialBuilderOptions is not supported in POINTS_MODE_PATHS because in this mode you define the edges of the ribbon and not the center line.

Shows different direction modes

facesMode

javascript

FACES_MODE_SINGLE_SIDED = 0,
FACES_MODE_SINGLE_SIDED_NO_BACKFACE_CULLING = 1,
FACES_MODE_DOUBLE_SIDED = 2

Controls how the faces are created: In GreasedLineRibbonFacesMode.FACES_MODE_SINGLE_SIDED single sided with back face culling. Default value. In GreasedLineRibbonFacesMode.FACES_MODE_SINGLE_SIDED_NO_BACKFACE_CULLING single sided without back face culling. Sets backFaceCulling = false on the material so it affects all line ribbons added to the line ribbon instance. In GreasedLineRibbonFacesMode.FACES_MODE_DOUBLE_SIDED extra back faces are created. This doubles the amount of faces of the mesh.

Shows different face modes

closePath

If true, the line will be closed. Works in both pathModes.

Without closing the line ribbon path Automatically closing the line ribbon path

smoothShading

If true, normals will be computed when creating the vertex buffers. This results to smooth shading of the mesh. Doesn't work when closePath = true. colorMode mustn't be BABYLON.GreasedLineMeshColorMode.COLOR_MODE_SET and a lightsource must be present of course.

Without smooth shading With smooth shading

Example playgrounds

Simple examples Tie drone Tie drones army Lazy mode Recycle logo