How to build a custom mesh has the same looking as edgesRenderer result?

I want to build a mesh like edgesRenderer result.
Got the positions, normals and indices from edgesRenderer and build the mesh without problem. But the lines have something wrong…

The green one is the custom mesh. You can see triangles.

I cannot figure out how to draw a straight line?

More, can we have a round line-cap in the endpoint?At least looks like seamless.

Hi @yuqian - Maybe @sebavan has an idea?


The EdgesRenderer is a bit of a special case in the code as it has its own render function that works differently from the meshes rendering: Babylon.js/edgesRenderer.ts at master · BabylonJS/Babylon.js ( - very importantly, the EdgesRenderer uses a normal with 4 values instead of the other mesh normals with 3 values. And the “line” shader expects these special normals, which again won’t work with any mesh normals.

If I wanted to draw the edge lines without using the EdgesRenderer, I would probably just use the positions and indices to create a corresponding LineSystem.

1 Like

Oh it’s a bit beyond my knowledge.
But I cannot change LineSystem’s line width?
I want to have a edgesRenderer-like wireframe and glow it. And saving positions and normals instead of calculating them in realtime also speed up my scene.

BTW, I cannot find history topics about how to implement a edgesRenderer. Where does BJS’s edgesRenderer implement come from? Some algorithms?

Looking through the file history of the edges renderer, @Evgeni_Popov made one of the algorithms so maybe he can talk a bit about how it was done? :smiley:

A line is drawn as 2 triangles and the vertices of those triangles are moved along the normal so that it gives a thickness to the line: the 4th component of the normal is +1 or -1 depending on which direction the vertex must be pushed.

The applyToMesh function is expecting that the normals have 3 components only, so you should set the normal vertex buffer manually by calling setVerticesData:

Regarding the gaps at the edges, it’s a known side-effect of the method, I’m not sure if something can be done about this.


This sample will give me a good path to dig into the things under the hood.

1 Like

Also can play around with using a box thin instance for each line… It fixes the gaps for the box mesh in the PG at least. :grin: :beers:

Condensed and refined a bit, seems to work nice as the overlay too, at least for box-shaped meshes. :slight_smile:


Wow :beers:
I’d never think of a line as a… box! Genius!