Is GreaseLines more performant than edgeRenderer?

Questions
1

Hi!

I have an apartment picker where each apartment has a hitbox for it’s boundry.
Example

Up until now I have been using edgesRenderer
but there are some problems with it, the performance is not good, when we get up to having 500+ apartments in a model.
and secondly since our models are highly dynamic and is loaded from a custom built cms, i try to calculate the line width dynamically based on the scene size, which in some cases causes the line width to be a bit large which causes the edges to split, showing that it is not a line on the edge, but triangles for each side x 2.

Screenshot 2024-04-16 at 14.54.49
Screenshot 2024-04-16 at 14.54.49912×738 220 KB

So I’m on a quest to try to find a better way to draw the unit outlines.
When babylon 7 was released I saw that there is something new called greaselines.

Would grease lines be a better solution for me?
Would they be more performant than edgesRenderer?

When creating the greaselines using GreasedLineTools.MeshesToLines

can I specify that it doesn’t create lines for flat surfaces?
I would like it to behave the same way edges renderer works

2

Pinging @roland,

I do think performance-wise GreasedLine has better performance. They do serve different usecase though. I guess there is a way to achieve edge-rendering using lines, it will just require a bit of custom work :slight_smile:

1 Like
3

Here we go:

You can use the bound info to draw lines around your meshes as far as they can be “boxed”. All your meshes seems to fit this constraint.

1 Like
4

That looks promising, but it doesn’t answer my question if there is a way to create the points from a gltf mesh.

In three.js there is a helper called EdgesGeometry which seems to do what we need.

https://threejs.org/docs/#api/en/geometries/EdgesGeometry

const geometry = new THREE.BoxGeometry( 100, 100, 100 ); 
const edges = new THREE.EdgesGeometry( geometry ); 
const line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial( { color: 0xffffff } ) );

Does babylon have an equivalent?

5

You already answered you question here :slight_smile:

But let’s elaborate a bit more on this question then.

So we know there is:
https://doc.babylonjs.com/typedoc/classes/BABYLON.GreasedLineTools#MeshesToLines

which accepts a second parameter called predicate which is a callback function where you can decide whether to include the lines of the face being processed or not or to return an array of points whihch will be included a used to draw a line or lines:

    public static MeshesToLines(
        meshes: AbstractMesh[],
        predicate?: (
            p1: Vector3,
            p2: Vector3,
            p3: Vector3,
            points: Vector3[][],
            indiceIndex: number,
            vertexIndex: number,
            mesh: AbstractMesh,
            meshIndex: number,
            vertices: FloatArray,
            indices: IndicesArray
        ) => Vector3[][]
    )

p1,p2,p3 are the positions of the face being processed. We have a ton of information available so we can do I think whatever checks we need to decide which line gets included. We can calc the dot product of two vectors and according to its value include or drop the line:

Example for a box:

EDIT: this is not a full solution, it just shows how you can deal with predicates when using MeshesToLines

2 Likes
6

But IMHO the boundig box approach will be better in your case because your meshes may have a lot of faces which will match the predicate. In our digital twin app we create picker meshes in Blender. We position these picker meshes on the areas we want to be selectable and simply draw lines around the selected picker mesh.

2 Likes
7

Thanks for the examples, I will give it a go :smile:

1 Like
8

Finally had some time to do a lab on GreaseLines and edges.

I ported over the EdgesGeometry algorithm from three to babylon, so that you can select at what angle you want the edges to appear.

it also works with rotated meshes, because it’s based on the normals of each vertex. (i think)

And together with the new any excellent GreaseLine material I was able to get the look I was after.

The grease lines materials possibility to making the edges the same size independant of scene size and closeness to the camera also makes for a better experience.

I have not yet tested performance on larger scenes, but will report back my findings :slight_smile:

Screenshot 2024-05-24 at 09.13.22
Screenshot 2024-05-24 at 09.13.222448×1824 72.3 KB

4 Likes
9

This is very cool!

However there are some issues. Your code doesn’t work 100% correctly. Sphere is not rendered at all and other geometries has issues as well:

Sphere three.js:

Sphere babylon.js:

Once it will be perfect and it will perform better than the actual edge renderer it should be added to the babylon.js library! :muscle:

@Deltakosh @sebavan @Evgeni_Popov what do you think guys?

1 Like
10

It works, I simply had put 15° as the minimum angle for the lines, which was to high for a sphere.

1 Like
11

Did a simple stress test.

seems to be performing quite well

86ms to both create boxes and edges :slight_smile:

2 Likes
12

If you share a bunch of cases from simpler to bigger highlighting the perf gains, let s add it !!!

1 Like
13

Another Powered by GreasedLine production :saluting_face::sunglasses:

1 Like
14

Very well done! Thanks @Leon :heart_eyes_cat:

1 Like
15

I tried to create 5000 instances just out of curiosity (222 FPS):

EDIT: Calculating the edges buffer and draw all of them using one GreasedLine instance is even faster than instancing the edges geometry (310 FPS):

EDIT2:
And this way we can have different edge colors for each instance. Still using one GreasedLine mesh.

image
image1610×1666 185 KB

(works with MATERIAL_TYPE_SIMPLE too)

And with various widths as well:

image
image1660×1588 156 KB

5 Likes