Outline of ground does not behave as expected

Questions
#1

Hello! I am trying to do a simple outline on the ground mesh: Babylon.js Playground
I’ve set the following properties:

    ground.renderOutline = true;
    ground.outlineColor = new BABYLON.Color3.Red();
    ground.outlineWidth = 2;

and expected that I’d see an outline around the ground at twice the normal thickness. What actually happens, though, is it seems like a duplicate of the ground is created and its position is offset by 2. Am I misunderstanding how the outline is supposed to work?

Bonus question: I’m also applying a material to the ground with an alpha property set. It seems like the alpha property carries over the the outline as well; is there a way to separate the two?

#2

By default outlineWidth = 0.02, so your outline thickness is just 100 times higher, that is why it looks so strange.
If you want to double the ‘normal’ thickness, use ground.outlineWidth = 0.04;

1 Like
#3

Thanks @labris ! Changing the thickness to 0.04 did make it the right thickness, but it is still having the same issue that the outline is offset from the ground. Updated playground: https://playground.babylonjs.com/#ET649E#2

1 Like
#4

Outline doesn’t work well with grounds/planes or with boxes or anything box-like with hard 90-degree edges… HighlightLayer can be used with isStroke to produce an outline like below, although it behaves a bit differently. :slight_smile:

1 Like
#5

Hi @brittany just checking in, did Blake’s suggestion work for you? :smiley:

#6

@carolhmj Highlight layer didn’t quite work for our case, but the solution we arrived at is this and it’s working fine :slight_smile:

ground.enableEdgesRendering();
ground.edgesColor = materialColor.toColor4();
3 Likes