Edge color + semi transparent tint using edge renderer or custom shader

[Leon]

I am currently using the edgeRenderer to get outlines for our apartment picker product.
but I don’t like the way it looks. it renders edges for each face, whilst I would like it to look more like a wireframe but with a tint.

here is a demo link

wec360°

The way we have implemented it is that we load a separate gltf with only hitboxes that we then tint with a semi transparent color based on the units status.

The criteria is that I want to be able to set the tint color and alpha value (when hovering I change the alpha a bit)
and I want to be able to set the edge color (when the unit is active the edges become white instead of the same color as the tint)

I’m currently looking into if I could create a custom shader to accomplish this, but I’m a noob when it comes to shaders so it’s going slow.

Can a custom shader have a separate alpha value for the tint and make the edges opaque?
Has anyone got a finished edge shader that I could use as a starting point?

Or is there a way to configure the edge renderer to look like a wireframe instead of doing each face?

[Cedric]

Did you try mesh highllighting?

Highlighting Meshes | Babylon.js Documentation

Maybe mixing it with the hitbox can give a rendering that will work.

[mawa]

May I just add that your project looks great I hope you’ll share the final version with us?

[carolhmj]

You can use the wireframe material too: Material | Babylon.js Documentation (babylonjs.com)

Transparent Box with Wireframe | Babylon.js Playground (babylonjs.com)