How to create "Fly Line"?

DWork · December 10, 2022, 7:10pm

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

roland · December 10, 2022, 9:04pm

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

DWork · December 10, 2022, 9:23pm

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

roland · December 11, 2022, 4:17am

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

DWork · December 11, 2022, 10:17am

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

roland · December 11, 2022, 10:45am

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.

DWork · December 11, 2022, 11:03am

roland · December 12, 2022, 3:33am

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…

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

RolandCsibrei/babylonjs-meshline/blob/fcaa9ae63da5a7ef6f28314fa77c9b2fb518af4e/src/demos/flyingLines.ts

import { GreasedLine, GreasedLinePoints } from './../GreasedLine'
import { ArcRotateCamera, Axis, Color3, Color4, GlowLayer, MeshBuilder, Scene, Vector3 } from '@babylonjs/core'
import { circle } from '../lineUtils'
import { GreasedLinePBRMaterial } from '../GreasedLinePBRMaterial'
import { GridMaterial } from '@babylonjs/materials'

export function flyingLines(scene: Scene, camera: ArcRotateCamera) {
  const engine = scene.getEngine()

  const diameter = 20

  camera.target = new Vector3(0, 0, 0)
  camera.alpha = -1.98
  camera.beta = 0.75
  camera.radius = 38.85
  camera.upperRadiusLimit = 300
  camera.minZ = 0.01

  scene.clearColor = new Color4(0, 0, 0, 1)
  scene.autoClear = true

This file has been truncated. show original

R.

roland · December 12, 2022, 11:59am

Starting to look cool

DWork · December 12, 2022, 1:26pm

Amazing! That’s so cool!

roland · December 12, 2022, 1:29pm

Wait for it

roland · December 12, 2022, 4:49pm

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

Source:

github.com

RolandCsibrei/babylonjs-meshline/blob/v2/src/demos/flyingLines.ts

import { GreasedLine, GreasedLinePoints, Xyz } from './../GreasedLine'
import {
  ArcRotateCamera,
  Axis,
  Color3,
  Color4,
  CubeTexture,
  GlowLayer,
  Material,
  MeshBuilder,
  PointLight,
  Scalar,
  Scene,
  ShaderMaterial,
  StandardMaterial,
  Texture,
  Vector3,
} from '@babylonjs/core'
import { circle } from '../lineUtils'
import { GreasedLinePBRMaterial } from '../GreasedLinePBRMaterial'

This file has been truncated. show original

Quick explanation:

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]
      },

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)
if the lineVisibility is at max, decrease alpha and lineVisibility as well until we reach a minimum and to the whole cycle again
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

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

DWork · December 13, 2022, 8:03am

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

roland · December 13, 2022, 11:20am

DWork · December 13, 2022, 12:26pm

It’s running well now.

1114257133 · June 6, 2023, 9:52am

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

mawa · June 6, 2023, 10:04am

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

1114257133 · June 6, 2023, 10:07am

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

1114257133 · June 6, 2023, 10:08am

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

1114257133 · June 6, 2023, 10:09am

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

Topic		Replies	Views
BabylonJS MeshLine - a port of THREE.MeshLine Demos and projects	313	11156	November 20, 2023
How to draw a tail in an optimized way Questions	21	602	August 1, 2023
Animated navigation path with GreasedLine Tutorials and tips	6	1107	November 7, 2022
Faux thickness for lines using shader port from three.js Feature requests shader	3	498	August 29, 2023
GreasedLine as a poor man's particle system Demos and projects	17	145	July 10, 2024

How to create "Fly Line"?

Related topics