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