EdgeRenderer supplement or alternative

I really like how the edge renderer looks on the ‘vertices instead of indices’ setting. I’m using it on a voxel world. The problem is, as I’ve added more and more voxels to the game, the edge renderer takes longer and longer to start up. After the game is started, it runs at max fps.

I don’t know what the slow part actually is… scanning the mesh for vertices? Adding lines to the scene?

Does anyone know of a way that I could speed up the process? Maybe I could compute something once and save the edges to a file somehow (not sure how). Or maybe a similar effect as a shader? I don’t know how to write a shader, but if someone tells me that this has a solid chance of producing an edge renderer that can run on slow machines I would learn shaders to accomplish it.

EdgeRenderer making things look awesome:


BTW the whole world is 9 meshes, and I may merge it into 1 later. So all of the stuff any of the screenshots is essentially one mesh. The texture is only a few bytes storing colors, and they get stretched across the appropriate faces.

Adding @nasimiasl for the shader part, I bet he could come up with some trickery.

One way I could think about would be to store the fact that you need a line or not in a special attributes and use derivatives on the interpolated values to draw the line or the shaded color ?

2 Likes

how much bet on the table ?

Less than 2 hours for you :wink:

if we had tiny tiny sample in PG o can try :smiley:

Is this kind of playground convenient for your try? https://www.babylonjs-playground.com/#XLANPB#1

The EdgesRenderer computes the precise geometry required to draw quad faces. That process is a bit expensive

If you want I can add a serializer to the EdgesRenderer so you could load/save it

2 Likes

(yep sorry I’ve posted the playground with the edgesRenderer test on it, it was only for nasimiasl to have a default quick and tiny scene with kind of architectural type of meshes)

https://www.babylonjs-playground.com/#1TYWYB#194
https://www.babylonjs-playground.com/#1TYWYB#195

for now i recommended geometry way

4 Likes

@nasimiasl you are genius! :+1:

1 Like

Is that difficult? Maybe I should try myself, I don’t want to consume your time.

That looks nice! Makes me want to learn shaders. How did you learn?

Thanks for the offer. This is quite easy actually. You will need to make sure that the the mesh.Parse and mesh.serialize will take the edges rendering info into account