BabylonJS MeshLine - a port of THREE.MeshLine

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

2 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

last one for the road : https://playground.babylonjs.com/#LQVB2Y#14

5 Likes

Cool stuff buddy :slight_smile: I am creating showcases for GreasedLine. Can I add your creations to the demo? Credits will be given of course. If you have any other ideas they’re very welcome! :slight_smile:
Thanks :slight_smile:
:vulcan_salute:

Hey @Deltakosh!

I was working on optimalizations of the whole stuff and it got a full rewrite of the CPU part. Now the code is cleaner, faster and you can draw multiple lines with different widths in one draw call. I’d like to add support for different colors for the lines ofcourse in 1 draw call and it is missing positioning/rotation/scaling. Some GPU fragments needs to be added, depth buffer(?), fog(?)… I hope I can do the multicolor part and the pos/rot/scl part today. Maybe you can guys have a look at the code after I finish these tasks and review it.

I also added some SVG drawing capabilities to a separate utility class. I also created helper functions for drawing circles (ovals), arcs, grids, stuff to make the line more hires or lowres… However still tweaking them. I think full SVG support would be absolutely cool :slight_smile:

I hope (I have a shitload of regular work) I can manage all of this (wo full SVG support) this week, so please stand by :slight_smile:

Thanks!

r.

:vulcan_salute:

6 Likes

Starting to happen :muscle:

2 Likes

Multicoloring ready, at insane speeds…

Playing with widths and different z-offset for each country and the camera is rotated…

EDIT:

Translation - Rotation - Scaling added as well.

5 Likes

@roland , of course.

1 Like

@roland this is so coool !!!

1 Like

Thanks! Yes, it’s starting to be a really cool and powerful tool! There are so many use cases for it. I am preparing some demos and debugging the line routine at once. Just wait for it :sunglasses:

2 Likes

some “inspiration” :slight_smile:
.GitHub - rreusser/regl-gpu-lines: Pure GPU, instanced, screen-projected lines for regl
.GitHub - gl-vis/regl-line2d: Draw 2d polyline with regl

3 Likes