BabylonJS MeshLine - a port of THREE.MeshLine

roland · December 1, 2022, 7:39pm

Thanks!

Sorry, not yet, but it is on my list.

EDIT: Already working on it

roland · December 2, 2022, 12:38pm

Here you go
The black ray intersects the red line and the given point marked with the black sphere.

Looking good but I need to do more tests though.

R.

waverider404 · December 4, 2022, 7:01pm

Amazing

roland · December 10, 2022, 6:03pm

Guys, just wanted to let you know I’m working on this whenever I can and I think finally it has a quite reliable raycast function.

R.

roland · December 12, 2022, 12:01pm

Guys I started to create something like the GitHub globe using GreasedLine .

Current status is:

Follow here if you are interested:

waverider404 · December 15, 2022, 9:03pm

@roland
Nice work!

I’m using this GitHub - RolandCsibrei/babylonjs-meshline at v2
and I noticed that when the camera zooms out, the line gets really big

roland · December 15, 2022, 9:27pm

Ok guys, one more screenshot of the possibilities of the GreasedLine before release
I rewrote some code once again to match the usage of the existing LineSystem (I’ve used same common parameter names) and I will rename the stuff to GreasedLineSystem.

Finally the code is able to draw multiple lines with each line segment differently coloured, each segment can have it’s own width so you can draw something like this in 1 draw call:

Arrows can be easily drawn by setting the line segment widths.

I’ve created convenience methods for creating the color and width tables so it’s much easier to draw, size and colorise the line segments.

roland · December 15, 2022, 9:28pm

Thanks dude

There might be still bugs. Can you make a screenshot?

waverider404 · December 15, 2022, 9:49pm

here
line scale

roland · December 16, 2022, 4:48am

Well, you are modifiying the line mesh with a gizmo. I tried to modify the scale using the scale gizmo provided by the Scene Explorer and it’s behaving ok. I suggest you to wait for the release version or you can send me the code snippet where you are generating the line and I will try to find out what’s wrong.

Thanks!

waverider404 · December 16, 2022, 8:37pm

This is an example, if you start zooming out, the shape of the line is barely visible

chuan-1996 · December 17, 2022, 3:00pm

Great!

roland · December 20, 2022, 12:50pm

Hi!

This is your code with the current GreasedLine stuff. Looks better:

https://demos.babylonjs.xyz/greased-line/hello/

Source code (new-builder branch):

github.com

RolandCsibrei/babylonjs-meshline/blob/new-builder/src/demos/hello.ts

import { GreasedLineMaterial } from './../GreasedLineMaterial'
import { GreasedLineBuilder } from './../GraesedLineBuilder'
import { ArcRotateCamera, Color3, Scene, Vector2, Vector3 } from '@babylonjs/core'

export function hello(scene: Scene, camera: ArcRotateCamera) {
  const points = []
  const data = getData()

  for (let i = 0; i < data.length; i += 2) {
    points.push(new Vector2(data[i], data[i + 1]))
  }

  let array = []

  for (let i = 0; i < 2500; i++) {
    const p = getPoint(points, i / 2500)
    array.push(new Vector3(p.x / 100 - 8, 0, p.y / 100))
  }
  bLine(array, scene, 0.7)

This file has been truncated. show original

roland · December 20, 2022, 12:55pm

Actually I was thinking about to introduce a visiblityStart parameter so you can limit the visibility of the line from the start - at what percentage to start to draw the line(the current visibility parameter affects the line only from its end, so it basically sets the length of the line - at what percentage to stop to draw the line) but this hack with dash solves this problem - nice hack, thanks

waverider404 · December 22, 2022, 12:26am

Whoa this is much better!!

Thanks !

roland · December 22, 2022, 12:52pm

Hi!
I’ve just added GeometryDraw to GreasedLine:

and created a utility function to draw curves from Blender:

r.

roland · December 28, 2022, 12:24pm

Hello buddies!

I put together a small Quasar/Vue/Vite app to demonstrate the capabilities and usage of GreasedLine. This is just for the few people in this thread this time. I will create docs for BabylonJS later ofcourse. It’s still in beta, some stuff will change under the hood however the main GreasedLineBuilder’s interface is 98% final

If you are tired of X-MASS and the food have a look at (navigate using the hamburger menu - sry not mobile friendly)

If you want to try it out yourself you can write your own code in src/pages/tools/TryPage and access it at http://localhost:9000/tools/Try

There is a bug in this version which creates should-be-temporary bounding spheres for ray picking but they are permanent for now They are disabled so not visible but the Scene explorer reveals their existence (Press SHIFT+CTRL+I to open the Inspector)

Install Quasar CLI - must be admin on Windows
npm i -g @quasar/cli @quasar/cli
Clone repo
Install dependecies
npm i
Run
quasar dev
Automatically opens browser at localhost:9000

You can use yarn as well.

r.

Live long and prosper my friends!

@labris what about to try to create some cool disco lasers for your project with GreasedLine?

Tested only on Mac/Chrome/Retina

carolhmj · December 28, 2022, 1:28pm

The docs look gorgeous and the demos too - love the Star Wars

DWork · December 28, 2022, 2:06pm

why is blurry i saw?

roland · December 31, 2022, 6:48pm

what’s your config? OS/Browser/GPU?

Thanks!

Topic		Replies	Views
Animated navigation path with GreasedLine Tutorials and tips	6	1005	November 7, 2022
Path Tracing with Babylon, Background and Implementation Demos and projects	40	16530	January 23, 2023
Faux thickness for lines using shader port from three.js Feature requests shader	3	378	August 29, 2023
BabylonJS 5 release Off topic	18	1665	February 11, 2022
BabylonJS MeshLine When the main version is direct？ Questions documentation , material	2	247	March 7, 2023

BabylonJS MeshLine - a port of THREE.MeshLine

Related Topics