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?
224651096fd842dea26db32c6ea10483

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.

R.

:vulcan_salute:

1 Like

:+1:

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.

R.

:vulcan_salute:

3 Likes

Starting to look cool :metal:

2 Likes

Amazing! That’s so cool!

1 Like

Wait for it :sunglasses:

1 Like

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

Source:

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.

R.

::vulcan_salute:

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

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

4 Likes

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

1 Like

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

2 Likes


这是基于babylon5.50.1版本写的飞线

1 Like

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 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 :sunglasses:

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

2 Likes

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

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

1 Like