# How to create "Fly Line"?

**URL:** <https://forum.babylonjs.com/t/how-to-create-fly-line/36444>\
**Category:** Questions\
**Created:** [December 10, 2022, 7:10pm UTC](https://forum.babylonjs.com/t/how-to-create-fly-line/36444 "2022-12-10T19:10:46Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![DWork](https://avatars.discourse-cdn.com/v4/letter/d/7993a0/32.png) [@DWork](https://forum.babylonjs.com/u/DWork)\
**Post date:** [December 10, 2022, 7:10pm UTC](https://forum.babylonjs.com/t/how-to-create-fly-line/36444/1 "2022-12-10T19:10:46Z")

</div>

The gif from threejs demo, the line seems always suitable for screen, maybe on pixels. How to create line like gif in BBL?  
 ![224651096fd842dea26db32c6ea10483](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/0/d/0d76e903b5b6f9320fc519a1d516a80f6cf6675f.gif)

---

<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:** [December 10, 2022, 9:04pm UTC](https://forum.babylonjs.com/t/how-to-create-fly-line/36444/2 "2022-12-10T21:04:41Z")

</div>

Are you interested in math only or in drawing lines that looking the same as seen in the GIF?

---

<div class="post-metadata">

**Author:** ![DWork](https://avatars.discourse-cdn.com/v4/letter/d/7993a0/32.png) [@DWork](https://forum.babylonjs.com/u/DWork)\
**Post date:** [December 10, 2022, 9:23pm UTC](https://forum.babylonjs.com/t/how-to-create-fly-line/36444/3 "2022-12-10T21:23:16Z")

</div>

I want to draw lines looking same as gif. Animation,trail, glow and the stable thickness (render on pixels?)

---

<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:** [December 11, 2022, 4:17am UTC](https://forum.babylonjs.com/t/how-to-create-fly-line/36444/4 "2022-12-11T04:17:51Z")

</div>

One of the possible ways would be drawing the line and apply an alpha gradient texture and just animate the `uvOffset`.

---

<div class="post-metadata">

**Author:** ![DWork](https://avatars.discourse-cdn.com/v4/letter/d/7993a0/32.png) [@DWork](https://forum.babylonjs.com/u/DWork)\
**Post date:** [December 11, 2022, 10:17am UTC](https://forum.babylonjs.com/t/how-to-create-fly-line/36444/5 "2022-12-11T10:17:32Z")

</div>

What about the line size? It doesn’t change according to distance of camera?

---

<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:** [December 11, 2022, 10:45am UTC](https://forum.babylonjs.com/t/how-to-create-fly-line/36444/6 "2022-12-11T10:45:50Z")

</div>

You can use tubes instead of lines.

> **[Creating Tubes | Babylon.js Documentation](https://doc.babylonjs.com/features/featuresDeepDive/mesh/creation/param/tube)**
>
> Learn how to create tubes in Babylon.js.

or you can play around with the still in development `GreasedLine` which I am currently working on [BabylonJS MeshLine - a port of THREE.MeshLine](https://forum.babylonjs.com/t/babylonjs-meshline-a-port-of-three-meshline/32924)

I always wanted to create a demo of these flying lines (like the GitHub globe had) so it will be a very good showcase for the `GreasedLine`. I might try to make something similar today.

R.

🖖

---

<div class="post-metadata">

**Author:** ![DWork](https://avatars.discourse-cdn.com/v4/letter/d/7993a0/32.png) [@DWork](https://forum.babylonjs.com/u/DWork)\
**Post date:** [December 11, 2022, 11:03am UTC](https://forum.babylonjs.com/t/how-to-create-fly-line/36444/7 "2022-12-11T11:03:03Z")

</div>

> [@roland](#):
>
> You can use tubes instead of lines.
> 
> [Creating Tubes | Babylon.js Documentation](https://doc.babylonjs.com/features/featuresDeepDive/mesh/creation/param/tube)
> 
> or you can play around with the still in development `GreasedLine` which I am currently working on [BabylonJS MeshLine - a port of THREE.MeshLine](https://forum.babylonjs.com/t/babylonjs-meshline-a-port-of-three-meshline/32924)
> 
> I always wanted to create a demo of these flying lines (like the GitHub globe had) so it will be a very good showcase for the `GreasedLine`. I might try to make something similar today.
> 
> - I had followed your forum, it’s seems to be the best example for bbl i found. I look forward to seeing you improve this feature 😃 😃 👍  
> R.
> 
> 🖖

👍

---

<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:** [December 12, 2022, 3:33am UTC](https://forum.babylonjs.com/t/how-to-create-fly-line/36444/8 "2022-12-12T03:33:57Z")

</div>

I was working on the `GreasedLinePBRMaterial` yesterday and now we can draw a line using dynamic widths and PBR capabilities so it will be easy to make it looking more cool. Glow is used here.

So these are the first steps, I will continue to improve it…

Using the `lineVisibility` property we can reveal the line smoothly.

The PBR material has a projection issue I am aware of and oh man, the quality of the demo code is just fast prototyping and testing shit 😃 Will be tied up later…

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

Couldn’t create a demo build, `vite` suddenly can’t find the typescript compiler… LOL Have to figure it out…

However if you want to have a look, clone, npm i, npm start will start the globe scene with the flying line v0.01.

> **[GitHub - RolandCsibrei/babylonjs-meshline at v2](https://github.com/RolandCsibrei/babylonjs-meshline/tree/v2)**
>
> v2

> <https://github.com/RolandCsibrei/babylonjs-meshline/blob/fcaa9ae63da5a7ef6f28314fa77c9b2fb518af4e/src/demos/flyingLines.ts>

R.

🖖

---

<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:** [December 12, 2022, 11:59am UTC](https://forum.babylonjs.com/t/how-to-create-fly-line/36444/9 "2022-12-12T11:59:05Z")

</div>

Starting to look cool 🤘

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

---

<div class="post-metadata">

**Author:** ![DWork](https://avatars.discourse-cdn.com/v4/letter/d/7993a0/32.png) [@DWork](https://forum.babylonjs.com/u/DWork)\
**Post date:** [December 12, 2022, 1:26pm UTC](https://forum.babylonjs.com/t/how-to-create-fly-line/36444/10 "2022-12-12T13:26:04Z")

</div>

Amazing! That’s so cool!

---

<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:** [December 12, 2022, 1:29pm UTC](https://forum.babylonjs.com/t/how-to-create-fly-line/36444/11 "2022-12-12T13:29:21Z")

</div>

Wait for 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:** [December 12, 2022, 4:49pm UTC](https://forum.babylonjs.com/t/how-to-create-fly-line/36444/12 "2022-12-12T16:49:55Z")

</div>

Hey!  
Not ready but I have to focus on the `GreasedLine` itself again (and it’s a birthday party today… 🍻 ) and it’s looking quite cool already.

**Have a look at it yourself:**  
[GitHub Globe like demo using GreasedLine](https://demos.babylonjs.xyz/greased-line/github-globe/)

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

Source:

> <https://github.com/RolandCsibrei/babylonjs-meshline/blob/v2/src/demos/flyingLines.ts>

Quick explanation:

1. Generate random rotated and length arcs using the `circle` method width increased widths and the front of the line

```auto
    const circlePoints = circle(EARTH_DIAMETER / 1.9, length, 0.05)
    // pw - point index - returns array of two numbers [upper_width, lower_width] at that point
    widthCallback: (pw) => {
        if (pw < points.length * 0.02) return [10, 10]
        if (pw < points.length * 0.05) return [8, 8]
        if (pw < points.length * 0.1) return [7, 7]
        if (pw < points.length * 0.15) return [5, 5]
        if (pw < points.length * 0.2) return [3, 3]
        if (pw < points.length * 0.3) return [2, 2]
        return [1, 1]
      },

```

1. rotate the lines and alter it’s material’s `lineVisibility` property, increase form 0 to 1 (0 - nothing from the line is rendered, 1 - the whole line is rendered)

2. if the `lineVisibility` is at max, decrease `alpha` and `lineVisibility` as well until we reach a minimum and to the whole cycle again

3. do this for every line

Any questions? Just ask.

R.

:🖖

**Please note, `GreasedLine` is still in alpha/prototype/fast and sometime shit cod. A lot of things will change so don’t rely on this code by any means.**

Tested on Mac.

EDIT:

Sun, Moon, Clouds, Debris added - see readme.md about the credits

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

[GitHub Globe like demo using GreasedLine](https://demos.babylonjs.xyz/greased-line/github-globe/) - refresh your browser please if you visited the page before

---

<div class="post-metadata">

**Author:** ![DWork](https://avatars.discourse-cdn.com/v4/letter/d/7993a0/32.png) [@DWork](https://forum.babylonjs.com/u/DWork)\
**Post date:** [December 13, 2022, 8:03am UTC](https://forum.babylonjs.com/t/how-to-create-fly-line/36444/13 "2022-12-13T08:03:14Z")

</div>

It seems that something wrong shader in browser? Chrome and Firefox also

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

---

<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:** [December 13, 2022, 11:20am UTC](https://forum.babylonjs.com/t/how-to-create-fly-line/36444/14 "2022-12-13T11:20:00Z")

</div>

> [@GitHub globe like scene with flying lines - Windows platform fix](https://forum.babylonjs.com/t/github-globe-like-scene-with-flying-lines-windows-platform-fix/36503/3):
>
> Hello! That it’s not the case on Mac. It works correctly. If I remove projection from the uniforms I get BJS - [11:33:34]: Error: VERTEX SHADER ERROR: 0:244: ‘projection’ : undeclared identifier ERROR: 0:247: ‘projection’ : undeclared identifier However I can confirm that on Windows machine I got the same error as you. A bug in BJS? Thank you! R. EDIT: To get the demo quickly running I am setting projection2 instead so it works on all platforms.

---

<div class="post-metadata">

**Author:** ![DWork](https://avatars.discourse-cdn.com/v4/letter/d/7993a0/32.png) [@DWork](https://forum.babylonjs.com/u/DWork)\
**Post date:** [December 13, 2022, 12:26pm UTC](https://forum.babylonjs.com/t/how-to-create-fly-line/36444/15 "2022-12-13T12:26:11Z")

</div>

It’s running well now. 😃 😃 👍 👍

---

<div class="post-metadata">

**Author:** ![1114257133](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/1114257133/32/46709_2.png) [@1114257133](https://forum.babylonjs.com/u/1114257133)\
**Post date:** [June 6, 2023, 9:52am UTC](https://forum.babylonjs.com/t/how-to-create-fly-line/36444/16 "2023-06-06T09:52:29Z")

</div>

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/5/b/5bf20d55a696751d65b121fb28d46398fb9383b4.png)  
这是基于babylon5.50.1版本写的飞线

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [June 6, 2023, 10:04am UTC](https://forum.babylonjs.com/t/how-to-create-fly-line/36444/17 "2023-06-06T10:04:06Z")

</div>

> [@1114257133](#):
>
> 这是基于babylon5.50.1版本写的飞线

Cool and then, a warm welcome to the Community,  
Did you use grease lines AND do you have a question?

There are a few rules in this forum. Not many, but some. If I can allow myself, there’s this rule where the forum is ‘english only’ and we all have to bend to this rule (knowing that english is also not my language). So may I ask you for your next posts (and I hope there will be many) to at least include the english version text?

Also, you can post any of your **results or achievements** in the #Demos and projects category. Where #Questions category, as its name suggests, is ment for **asking** about things and hopefuly get an appropriate answer from the team or community members.

Again, a warm welcome to the Forum and I hope you are enjoying your time with BJS.  
Meanwhile, have a great day 🕶

---

<div class="post-metadata">

**Author:** ![1114257133](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/1114257133/32/46709_2.png) [@1114257133](https://forum.babylonjs.com/u/1114257133)\
**Post date:** [June 6, 2023, 10:07am UTC](https://forum.babylonjs.com/t/how-to-create-fly-line/36444/18 "2023-06-06T10:07:15Z")

</div>

> [@roland](#):
>
> GreasedLine

This is a line with width composed of points drawn as faces and merged faces. It is still being tested, although I have given it many functions, such as width, height, color, texture, flow light dynamic effect, luminescence, etc. Currently, more compatibility is needed

---

<div class="post-metadata">

**Author:** ![1114257133](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/1114257133/32/46709_2.png) [@1114257133](https://forum.babylonjs.com/u/1114257133)\
**Post date:** [June 6, 2023, 10:08am UTC](https://forum.babylonjs.com/t/how-to-create-fly-line/36444/19 "2023-06-06T10:08:08Z")

</div>

This is my first time responding to a community question and I am still familiar with it

---

<div class="post-metadata">

**Author:** ![1114257133](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/1114257133/32/46709_2.png) [@1114257133](https://forum.babylonjs.com/u/1114257133)\
**Post date:** [June 6, 2023, 10:09am UTC](https://forum.babylonjs.com/t/how-to-create-fly-line/36444/20 "2023-06-06T10:09:15Z")

</div>

Next, I will try using a tube to implement a cool looking flying cable

[Next page](https://forum.babylonjs.com/t/how-to-create-fly-line/36444.md?page=2)