Non camera facing GreasedLine - DRAFT, so things can and probably will change:
https://playground.babylonjs.com/?snapshot=refs/pull/14184/merge
If you want to use a non camera facing line you have to use the ribbonOptions property.
There are two modes available to define the coordinates:
BABYLON.GreasedLineRibbonPointsMode.POINTS_MODE_POINTS
You just define a line with the points and with thedirection(it’ll be renamed toslope) you define the slope of the line thickness. Basically it thickens the line in the direction ofslopebywidth/2and to-slopebywidth/2.BABYLON.GreasedLineRibbonPointsMode.POINTS_MODE_PATHS
You have to define two paths with the same number of points. The right side of the line and the left side of the line. Thus you can define theslopeand thewidthusing these paths.
You can define more than two paths to create non-flat lines. In this mode you can’t use thewidthsproperty for altering the segment widths.
In both cases you need to set the cameraFacing material property to false. Defaults to true.
It uses CreateRibbonVertexData under the hood.
If you don’t need a double-sided mesh, set that option to false. Defaults to true.
const mesh = BABYLON.CreateGreasedLine("line-widths", {
points,
ribbonOptions: {
pointsMode: BABYLON.GreasedLineRibbonPointsMode.POINTS_MODE_POINTS,
direction: new BABYLON.Vector3(0, 0, 1),
width: 0.1,
doubleSided: true
},
}, {
cameraFacing: false,
})
All the features of the GreasedLine will be supported. You can check the current implementation status here:
More PGs:
Has an UV(?) issue?
Has an width issue: EDIT: fixed
PATHS mode, two paths - two edges of the line
PATH mode with 4, paths creating a non flat line (actually it’s not a line anymore) with dashing:
If you have any comments, please let me know, I’ll gladly and thankfuly use your ideas/improvements!
