BabylonJS MeshLine - a port of THREE.MeshLine

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:

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!

:vulcan_salute:

R.

23 Likes

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

cc @Deltakosh

3 Likes

OH YES! Please :smiley:

1 Like

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 :smiley: Can I get back to you guys the next week? I need some answers so I’ll prepare some questions for you.

Thanks!! :vulcan_salute:

R.

3 Likes

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

3 Likes

WOOOO! I agree this will make an amazing contrib :smiley:

1 Like

@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 :slight_smile: 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.

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)

2 Likes

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.

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

2 Likes

Yeah, sure :slight_smile:

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.

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


6 Likes

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

3 Likes

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 :tada:. Ideally, it would support both shadow caring and the action manager :wink:.

2 Likes
1 Like

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

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

cheers

13 Likes

drunk on Pluto

1 Like

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

2 Likes