BabylonJS MeshLine - a port of THREE.MeshLine

[roland]

Hi my friends!

EDIT:
You can find the docs here. The examples released before July 2023 are obsolete.
Creating A GreasedLine | Babylon.js Documentation

I started to work on porting the THREE.MeshLine code to BabylonJS and the first version is already working. With MeshLine you can draw cool lines with a tons customizations available and all this happens on the GPU.

I’d like to ask the community to which way should I move on further? Do we want the MeshLine extend a Mesh? Now there is MeshLineBuilder.CreateMeshLine which returns a MeshLine instances which has a public mesh property. Do we need raycasting? Maybe do we want a MeshBuilder.CreateMeshLine function in the BabylonJS library? What customizations would you like to see?

This is an alpha release and I keep in mind that there is still a lot to do, for example:
I am planning to introduce an updatable: boolean parameter, I will make some changes to the code structure for sure, refactor variables, write some examples, docs.

Please have a look at the code:

GitHub - RolandCsibrei/babylonjs-meshline: MeshLine for BabylonJS

Example usage (or have a look here https://github.com/RolandCsibrei/babylonjs-meshline/blob/main/src/main.ts):

  const ml = MeshLineBuilder.CreateMeshLine('meshline', scene, {
    points,
    color,
    resolution: new Vector2(engine.getRenderWidth(), engine.getRenderHeight()),,
    widthCallback: (pw) => pw * 6,
  })

Supported parameters:

export interface MeshLineParameters {
  points?: Vector3[] | Float32Array | Geometry
  lineWidth?: number
  map?: Texture
  alphaMap?: Texture
  useMap?: boolean
  useAlphaMap?: boolean
  color?: Color3
  opacity?: number
  resolution?: Vector2
  sizeAttenuation?: boolean
  dashArray?: number
  dashOffset?: number
  dashRatio?: number
  useDash?: boolean
  visibility?: number
  alphaTest?: boolean
  repeat?: Vector2
  widthCallback?: WidthCallback
}

Thanks!

R.

[sebavan]

Nice why no making it a Babylon feature ??? it sounds pretty coool

cc @Deltakosh

[Deltakosh]

OH YES! Please

[roland]

Hey there @sebavan, hello @Deltakosh !

Yeah, let’s do it! I’ll need some mentoring regarding this so I don’t make something nonsense you’re not gonna like Can I get back to you guys the next week? I need some answers so I’ll prepare some questions for you.

Thanks!!

R.

[sebavan]

Please, NO RUSH and yes we ll gladly help you on anything you need

[carolhmj]

WOOOO! I agree this will make an amazing contrib

[roland]

@sebavan @Deltakosh

Hey guys!

As I’ve already mentioned I’m wondering just right now again what approach I should follow, should this be a Mesh instance or a custom class? If we choose the Mesh approach it will add a lot of complexity to the implementation because I will need to support everything a Mesh supports right now. For example materials, picking, transformations, etc. In fact MeshLine is heaviily relying on it’s custom vertex shader so the actual vertexData positions in the mesh are absolutelly different on what you get rendered so anything using vertexData positions will get wrong results. There is a rayCast method in THREE.MeshLine which can determine whteher a ray intersects with the line. I didn’t port it into BabylonJS yet but it could be used for ray collission/picking.

Honestly, I can’t imagine with my knowledge how could I make MeshLine fully compatible with a Mesh.

Regarding the fragment shader there are only a few things special.

Dashing::

And visibility (this should be renamed to not be confused with transparency) and it tells the shader what part from the beginning of the line will be visible.

So actually we could theoretically use the StandardMaterial or PBRMaterial shader and add support for these parameters.

But frankly, it would be much easier to go with the custom implementation in the beginning and not to extend the BabylonJS Mesh.

What are your thoughts?

Thanks a lot!

R.

EDIT:
I was thinking a bit more about using BabylonJS materials with MeshLine and I think if someone needs support for these then tubes will be a good replacement so I should no to bother with trying to get MeshLine working with BabylonJS materials. So MeshLine should be used really only for one reason, to draw lines In addition there is texture and alphaMap support on MeshLine so I think I will definitelly go with a custom implementation and no to try to fit in the BabylonJS Mesh scheme.

[Deltakosh]

I have no problem with it not being a Mesh but a GreasedLine (yeah I play too much with Blender)
I’m fine with the idea of having it being a custom class (And we can add support for raycasting on it as well)

[roland]

Ok!

My proposal is then to create a LineBuilder factory class with a method called CreateGreasedLine.

LineBuilder.CreateGreasedLine(name: string, options: GreasedLineOptions, scene: Scene)

interface GreasedLineOptions{
  points: Vector3[] | Float32Array
  lineWidth?: number
  map?: Texture
  alphaMap?: Texture
  useMap?: boolean
  useAlphaMap?: boolean
  color?: Color3
  opacity?: number
  resolution?: Vector2
  sizeAttenuation?: boolean
  dashArray?: number
  dashOffset?: number
  dashRatio?: number
  useDash?: boolean
  visibility?: number
  alphaTest?: number
  repeat?: Vector2
  widthCallback?: WidthCallback
}

type WidthCallback = (pointIndex: number) => number

We can add more line implementations to the LineBuilder class later.

You ok with this?

Thanks!

R.

[sebavan]

You could also simply export the creation function instead of a class depending of the need obviously as it will allow better tree shaking

[roland]

Yeah, sure

[roland]

Currently the implemention relies internaly on creating a Mesh, setting the vertexData positions, indices, uvs and applying a ShaderMaterial to it. Is there an advanced technique which allows to render the “mesh” without being a Mesh? I mean I just would like to pass the vertexData to some function and tell it to use specific shaders so I don’t have to create an instance of the Mesh class for internal use.

[roland]

Pretty weird looking stuff can be created by the widthCallback function:

[Deltakosh]

Man this is so good! I genuinely like it a lot

[tibotiber]

This is looking really cool @roland and I can see it replacing some of our use of ExtrudeShapeCustom at Smplrspace (Floor plan based data visualisation tool). We use that for polylines kind of data rendering, but it’s really hacky due to the lack of a better option, your MeshLine would probably be that better option . Ideally, it would support both shadow caring and the action manager .

[roland]

Animated navigation path with GreasedLine

Hi my buddies! Some of you already know that I started to work on this The MeshLine (new name GreasedLine) is still not in production but good enough for some hobby projects already. Here is an example of an animated navigation path using GreasedLine. Just mark the starting point on the navmesh with SHIFT+Left click and the target point with CTRL+Left click and the animated navpath will be drawn between the two positions. Example of the line drawing the navpath from floor 1 to floor 3 using…

[wudao]

three. Some functions in js are really easy to use. Can they be added to the Babylon version

[samuelgirardin]

@roland
I just did few experiments with the GreasedLine port. Really cool ! And true, we can do really weird looking stuff.

Babylon.js Playground

Babylon.js Playground

cheers

[jeremy-coleman]

drunk on Pluto

[Deltakosh]

Alright @roland! when will we see the PR for this great tool ? I’m super excited by the feature!