Any chance of getting this ported?
The idea is to use it with CreateLines
I believe it is here already, thanks to @roland - Creating A GreasedLine | Babylon.js Documentation
1 Like
My understanding is that this is a different technique. The link you gave draws lines as triangular meshes. The link i gave draws lines as lines but adds thickness with a vertex shader.
In other words, from this article explaining the differing techniques available… : Drawing Lines is Hard,
The BabylonJS implementation you linked does this: Drawing Lines is Hard
Whereas the three implementation does this: Drawing Lines is Hard
So that’s what I’m asking for, is a port of the second technique.
Your understanding is incorrect.
You can’t add thickness if you don’t have enough vertices. For a simple straight line which you can thicken on the GPU you need minimum of 4 vertices. Two at each end. Both of these two has the same initial position. The GPU recalculates the position of these vertices, moves them away from each other. The triangles are always there but initally they are 1 pixel wide. This is what GreasedLine exactly does.
If you were reading the article carefully, you had to notice this:
Like the last demo, we need to submit each point twice, with mirrored orientations so they are pushed away from each other. However, instead of computing the normal and miter length CPU-side, we do it in the vertex shader.
Both techniques presented in the article are basically the same, one calculates the vertices positions on the CPU the second on the GPU.
In addition GreasedLine has a second mode available (availabe as draft, so not merged into the library yet). It resembles the first technique from the article so you can draw lines like this:
More info here:
1 Like