How to create "Fly Line"?

The gif from threejs demo, the line seems always suitable for screen, maybe on pixels. How to create line like gif in BBL?

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

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

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

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

You can use tubes instead of lines.

or you can play around with the still in development GreasedLine which I am currently working on BabylonJS MeshLine - a port of THREE.MeshLine

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.



1 Like


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 :smiley: Will be tied up later…

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.




Starting to look cool :metal:


Amazing! That’s so cool!

1 Like

Wait for it :sunglasses:

1 Like

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

Have a look at it yourself:
GitHub Globe like demo using GreasedLine


Quick explanation:

  1. Generate random rotated and length arcs using the circle method width increased widths and the front of the line
    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.



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.


Sun, Moon, Clouds, Debris added - see about the credits

GitHub Globe like demo using GreasedLine - refresh your browser please if you visited the page before


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

1 Like

It’s running well now. :smiley: :smiley: :+1: :+1: