GreasedLine Disabing LookAt

@roland et al.

Is there a way of disabling GreasedLine’s lookat shader without disabling the rest of it; or if not completely disabling it, set it to look at a specific vector / axis?

I love its advanced features of the class, but I need the lines to stay flat along the X,Z axis.


Unfortunately it’s not possible. However you are already the second one requesting this feature. I was already considering to add an option which could turn off the camera facing feature. I will think about it once again more deeply how could I do it without loosing any of the features of GRL. I’ll keep you updated.



1 Like

That would be amazingly helpful. Thank you for considering it.

The main problem is that you need to somehow define onto what plane each line is projected to to add thickness to the line. You can’t make a thick line just by defining two points because the line doesn’t know in which direction should it have thickness. I hope you understand what I mean.

So there is no easy solution for your requirement. I believe it will be more easier to require point pairs instead of one point for each line coordinate (basically you’ll have to define one quad for each line segment). This way we are implicitly defining the width of the line at that coordinate and we can calculate the direction as well which we might want to move the vertices to to make the line thicker using the widths option. This means new type of input for the line and dropping the width option.

Unfortunatelly I don’t have time to work on this however I could try to create a quick proof of concept without supporting the widths option. I will use the fragment shader from GRL only (vertex shader will be the default one) and make a few modifications to the code which generates the mesh. I will call it FlatGreasedLine. :sunglasses:

Let’s see if it works…


It seems it can work. I’ve used a Ribbon to draw the mesh and applied a modified version of the GreasedLinePluginMaterial. The values are hardcoded for the given mesh for now.

        const myPoints = [
            new BABYLON.Vector3(.1, -6, 0),
            new BABYLON.Vector3(.1, 6, 0),

        const myPoints1 = [
            new BABYLON.Vector3(.1, -6, 1),
            new BABYLON.Vector3(.1, 6, 1),

        const mesh = BABYLON.MeshBuilder.CreateRibbon(
                pathArray: [myPoints, myPoints1],
                sideOrientation: BABYLON.Mesh.DOUBLESIDE

        const material = new BABYLON.StandardMaterial("", scene);
        const greasedLineMaterial = new GreasedLinePluginMaterial(material, scene, initialMaterialOptions);

        mesh.material = material

Flat ribbon - simulates a non camera facing line - with animated dashing:

The same with a color table:

Mushroom like ribbon with animated dashing:

@sebavan @Evgeni_Popov @Deltakosh
Guys, is it worth to create an universal wrapper class which can be used theoretically with any mesh (or maybe just for the Ribbon) and which will use the GRL Plugin material’s modified shaders so you can have dashing, colors, visiblity %, etc? Thanks!

1 Like

Now it works without hardcoded values:


Now the colors are working as well:


And now works with non flat ribbons as well:

1 Like

I don’t know if I should mark this as a solution… You keep making it more and more useful every time I check back and I don’t want you to stop! But, this should do the trick for now. Thank you.

Will this be merged into nightly in the next few days (weeks?) , or should I overwrite the default classes?

I believe, the guys will reply today and we will agree whether this gets into BabylonJS or not. In both cases I have to rename the classes. Do not mark it as a solution yet. Wait for the final solution please. It could be ready in a day or two on my side.

This is just a prototype. Thank you!

EDIT: I have to travel abroad for three days so the delivery will be delayed.

However I am almost ready. Two lines in non camera mode and with dashing. Pay attention to the ribbonOptions.

    const points1 =
                0, -2, 0,
                2, -1, 0.5,
                1.5, 0, 0,
                1, 1, 0,
                2, 2, 0
                0, 0, 0,
                0, 3, 0

    const mesh = BABYLON.CreateGreasedLine("line", {
        points: points1,
        ribbonOptions: {
            pointsMode: BABYLON.GreasedLineRibbonPointsMode.POINTS_MODE_POINTS,
            direction: new BABYLON.Vector3(0, 0, 1),
            width: 1,
    }, {
        cameraFacing: false,
        useDash: true, dashCount: 8, dashRatio: 0.25,

That looks great!

Is it not possible to add some options to the existing greased line material to use this new mode, to keep a single entry point to greased lines?

1 Like


I was thinking about to add an option called useRibbon: boolean.
If true the points will be required as an array of arrays (minimum of two to define two paths required to draw the a flat ribbon). I can calculate the slope at each pair of points from the paths so I can apply the widths table easily just moving the vertex to the direction of the slope. A few conditions in the GreasedLineMaterial and I can use the same class. So we can keep the single entry point.

The wrapper class could be used on any mesh, however one must define the counter tables (it contains the distance from the beginning of the line to a given vertex) manually but you could do dashed spheres for example :smiley: or dashed anything… But OK, let’s focus on the line aspect of GreasedLine for now. And the functionality for the Ribbon is half ready so I’m going to work on the useRibbon solution. But first I need my previous PR to be merged :stuck_out_tongue:

Can you suggest a better name for that option?

Hum… no! :slight_smile:

I’m very bad when it comes to find names for anything (classes, variables, functions, …).

What you can try is to ask Chat GPT!

1 Like

ChatGPT says:
useRibbon, ribbonMode, billboarded, cameraFacing. Nothing new :smiley:

I guess the first or second one will do it!

However, if you think that in the future a “any mesh” could be possible instead of a ribbon, then maybe a name without “ribbon” should be better…

So what about cameraFacing: boolean default true. I will explain in the docs that it uses a ribbon under the hood.

You ok with that?

That’s fine with me, but let’s ask @bghgary who is the king of naming :slight_smile:

1 Like

Camera Facing would make the most sense, its very descriptive, I know in my case I have everything set up to use use extruded lines instead of ribbon as calculating individual point positions can be a PITA if they are not on gridpoints. But, can convert if I need to. Still, selfishly, and any mesh would be awesome!

1 Like

What does this mean? :wink: Planet Of The Apes? :smiley:

You will not need to convert them. You just need to set a slope (a direction along which the line get thickness) and width, provide the line points and it will generate the paths for the ribbon.

I already started to work on it here:

I don’t know much about this code, but GreasedLineMesh seems to extend from TransformNode which already has a billboardMode property. What does this property do for GreasedLineMesh? Would it work to use this property somehow instead of a new option?

From the docs:

GreasedLine is a special type of line which uses a regular mesh with triangles to display a line of any width. It incorporates custom shaders designed to ensure that the mesh always faces the camera resulting in consistent thickness from all perspectives.

This is not exactly billboard mode but something similar.

Now I am introducing an option which will turn off this option. It uses a Ribbon under the hood to draw the mesh thus the proposed names for the option like useRibbon, ribbonMode.

I vote fore cameraFacing.