# GreasedLine Disabing LookAt

**URL:** <https://forum.babylonjs.com/t/greasedline-disabing-lookat/43269>\
**Category:** Questions\
**Created:** [August 12, 2023, 5:02pm UTC](https://forum.babylonjs.com/t/greasedline-disabing-lookat/43269 "2023-08-12T17:02:20Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Calsa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/calsa/32/4330_2.png) [@Calsa](https://forum.babylonjs.com/u/Calsa)\
**Post date:** [August 12, 2023, 5:02pm UTC](https://forum.babylonjs.com/t/greasedline-disabing-lookat/43269/1 "2023-08-12T17:02:20Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [August 12, 2023, 11:31pm UTC](https://forum.babylonjs.com/t/greasedline-disabing-lookat/43269/2 "2023-08-12T23:31:57Z")

</div>

Hello!

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.

Thanks!

🖖

---

<div class="post-metadata">

**Author:** ![Calsa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/calsa/32/4330_2.png) [@Calsa](https://forum.babylonjs.com/u/Calsa)\
**Post date:** [August 13, 2023, 12:47am UTC](https://forum.babylonjs.com/t/greasedline-disabing-lookat/43269/3 "2023-08-13T00:47:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [August 13, 2023, 2:00am UTC](https://forum.babylonjs.com/t/greasedline-disabing-lookat/43269/4 "2023-08-13T02:00:07Z")

</div>

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`. 🕶

Let’s see if it works…

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [August 13, 2023, 12:07pm UTC](https://forum.babylonjs.com/t/greasedline-disabing-lookat/43269/5 "2023-08-13T12:07:42Z")

</div>

Hello!

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.

```auto
        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(
            "mesh",
            {
                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:

> **[Babylon.js Playground](https://playground.babylonjs.com/#H1LRZ3%23285)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

The same with a color table:

> **[Babylon.js Playground](https://playground.babylonjs.com/#H1LRZ3%23287)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

Mushroom like ribbon with animated dashing:

> **[Babylon.js Playground](https://playground.babylonjs.com/#H1LRZ3%23292)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

@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!

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [August 13, 2023, 11:51pm UTC](https://forum.babylonjs.com/t/greasedline-disabing-lookat/43269/6 "2023-08-13T23:51:31Z")

</div>

Now it works without hardcoded values:

> **[Babylon.js Playground](https://playground.babylonjs.com/#H1LRZ3%23301)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

EDIT:

Now the `colors` are working as well:

> **[Babylon.js Playground](https://playground.babylonjs.com/#H1LRZ3%23306)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

EDIT2:

And now works with non flat ribbons as well:

> **[Babylon.js Playground](https://playground.babylonjs.com/#H1LRZ3%23309)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![Calsa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/calsa/32/4330_2.png) [@Calsa](https://forum.babylonjs.com/u/Calsa)\
**Post date:** [August 14, 2023, 2:22am UTC](https://forum.babylonjs.com/t/greasedline-disabing-lookat/43269/7 "2023-08-14T02:22:08Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [August 14, 2023, 4:06am UTC](https://forum.babylonjs.com/t/greasedline-disabing-lookat/43269/8 "2023-08-14T04:06:52Z")

</div>

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`.

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/c/c/cc1758cb3586822a8848c5bd8b750f6b5656085a.jpeg)

```auto
    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,
    })

```

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [August 14, 2023, 8:51am UTC](https://forum.babylonjs.com/t/greasedline-disabing-lookat/43269/9 "2023-08-14T08:51:43Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [August 14, 2023, 11:08am UTC](https://forum.babylonjs.com/t/greasedline-disabing-lookat/43269/10 "2023-08-14T11:08:38Z")

</div>

Thanks!

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 😃 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 😛

Can you suggest a better name for that option?

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [August 14, 2023, 12:07pm UTC](https://forum.babylonjs.com/t/greasedline-disabing-lookat/43269/11 "2023-08-14T12:07:34Z")

</div>

> [@roland](#):
>
> Can you suggest a better name for that option?

Hum… no! 🙂

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

What you can try is to ask Chat GPT!

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [August 14, 2023, 12:28pm UTC](https://forum.babylonjs.com/t/greasedline-disabing-lookat/43269/12 "2023-08-14T12:28:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [August 14, 2023, 12:48pm UTC](https://forum.babylonjs.com/t/greasedline-disabing-lookat/43269/13 "2023-08-14T12:48:26Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [August 14, 2023, 12:58pm UTC](https://forum.babylonjs.com/t/greasedline-disabing-lookat/43269/14 "2023-08-14T12:58:20Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [August 14, 2023, 1:57pm UTC](https://forum.babylonjs.com/t/greasedline-disabing-lookat/43269/15 "2023-08-14T13:57:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Calsa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/calsa/32/4330_2.png) [@Calsa](https://forum.babylonjs.com/u/Calsa)\
**Post date:** [August 14, 2023, 2:10pm UTC](https://forum.babylonjs.com/t/greasedline-disabing-lookat/43269/16 "2023-08-14T14:10:36Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [August 14, 2023, 2:12pm UTC](https://forum.babylonjs.com/t/greasedline-disabing-lookat/43269/17 "2023-08-14T14:12:01Z")

</div>

> [@Calsa](#):
>
> POTA

What does this mean? 😉 Planet Of The Apes? 😃

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [August 14, 2023, 7:46pm UTC](https://forum.babylonjs.com/t/greasedline-disabing-lookat/43269/18 "2023-08-14T19:46:02Z")

</div>

> [@Calsa](#):
>
> But, can convert if I need to

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:

> **[Babylon.js Playground](https://playground.babylonjs.com/#61FKAG%239)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![bghgary](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bghgary/32/48532_2.png) [@bghgary](https://forum.babylonjs.com/u/bghgary)\
**Post date:** [August 14, 2023, 9:01pm UTC](https://forum.babylonjs.com/t/greasedline-disabing-lookat/43269/19 "2023-08-14T21:01:19Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [August 14, 2023, 10:10pm UTC](https://forum.babylonjs.com/t/greasedline-disabing-lookat/43269/20 "2023-08-14T22:10:52Z")

</div>

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`.

[Next page](https://forum.babylonjs.com/t/greasedline-disabing-lookat/43269.md?page=2)