# Weird effect when applying overlayColor

**URL:** <https://forum.babylonjs.com/t/weird-effect-when-applying-overlaycolor/24463>\
**Category:** Questions\
**Created:** [October 10, 2021, 8:15pm UTC](https://forum.babylonjs.com/t/weird-effect-when-applying-overlaycolor/24463 "2021-10-10T20:15:01Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![bartbutenaers](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bartbutenaers/32/14105_2.png) [@bartbutenaers](https://forum.babylonjs.com/u/bartbutenaers)\
**Post date:** [October 10, 2021, 8:15pm UTC](https://forum.babylonjs.com/t/weird-effect-when-applying-overlaycolor/24463/1 "2021-10-10T20:15:01Z")

</div>

Hi everybody,

Today I started implementing _ **overlay colors** _ in my application, but I get a very weird effect when I apply it e.g. to a simple box:

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/c/b/cb13cf7883de74d921d78ec553f0d40a95976902.png)

To prepare my question for this forum, I started copy-pasting code from my application to create a simple playground example. But in my [playground](https://playground.babylonjs.com/#0YG7IF#48) everything works fine, so I cannot reproduce the problem to show it 🙁

So there must be something else in my application that I have overlooked, and which I have not copied to my playground. But I don’t know where I could start looking…

Is there anybody that can give any tips of things that I could investigate? Perhaps anybody has ever seen such an effect before, and point me in some direction…

Thanks a lot !!!  
Bart

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [October 10, 2021, 8:34pm UTC](https://forum.babylonjs.com/t/weird-effect-when-applying-overlaycolor/24463/2 "2021-10-10T20:34:53Z")

</div>

Are you using the same version than babylon ??? we might have had an issue on the previous one.

---

<div class="post-metadata">

**Author:** ![bartbutenaers](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bartbutenaers/32/14105_2.png) [@bartbutenaers](https://forum.babylonjs.com/u/bartbutenaers)\
**Post date:** [October 10, 2021, 9:31pm UTC](https://forum.babylonjs.com/t/weird-effect-when-applying-overlaycolor/24463/3 "2021-10-10T21:31:06Z")

</div>

Hi @sebavan,

Thanks!!  
That is a very good question, because it indeed could explain why the playground would work fine…

It seems that I have installed locally _ **version 4.2.0** _:

```auto
C:\Users\Gebruiker\.node-red>npm list --depth=0
node-red-project@0.0.1 C:\Users\Gebruiker\.node-red
+-- @babylonjs/loaders@4.2.0
+-- babylonjs@4.2.0
+-- babylonjs-gltf2interface@4.2.0
+-- babylonjs-gui@4.2.0
+-- babylonjs-loaders@4.2.0
+-- ...

```

And when I select that version in the playground, it also still works fine.  
So it must be something else, most probably something very stupid …

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [October 10, 2021, 9:40pm UTC](https://forum.babylonjs.com/t/weird-effect-when-applying-overlaycolor/24463/4 "2021-10-10T21:40:45Z")

</div>

Yup it would repro in the playground if that was version only ☹

NW, we ll find it as soon as you can isolate the faulty behavior in the playground 🙂

---

<div class="post-metadata">

**Author:** ![bartbutenaers](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bartbutenaers/32/14105_2.png) [@bartbutenaers](https://forum.babylonjs.com/u/bartbutenaers)\
**Post date:** [October 11, 2021, 8:49pm UTC](https://forum.babylonjs.com/t/weird-effect-when-applying-overlaycolor/24463/5 "2021-10-11T20:49:47Z")

</div>

Do you know those moments when you think: “now I am definitely going to eat my shoes”…

After copy-pasting all my code line by line to the playground, I suddenly realized that the overlay color was working fine in my application. I had the issue with the _ **outline color** _ 🤬 🙈 😱

So the title of this post becomes _“Weird effect when applying outlineColor”_…

I can now reproduce it via this similar [playground](https://playground.babylonjs.com/#0YG7IF#49). Hopefully you can see what I am doing wrong.

Thanks!!

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [October 11, 2021, 9:08pm UTC](https://forum.babylonjs.com/t/weird-effect-when-applying-overlaycolor/24463/6 "2021-10-11T21:08:28Z")

</div>

LOL ok here is the answer [Render Outline - Buggy - #13 by Evgeni\_Popov](https://forum.babylonjs.com/t/render-outline-buggy/17938/13) and unfortunately there is no easy solution besides smoothing the meshes out ☹

---

<div class="post-metadata">

**Author:** ![bartbutenaers](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bartbutenaers/32/14105_2.png) [@bartbutenaers](https://forum.babylonjs.com/u/bartbutenaers)\
**Post date:** [October 11, 2021, 9:47pm UTC](https://forum.babylonjs.com/t/weird-effect-when-applying-overlaycolor/24463/7 "2021-10-11T21:47:04Z")

</div>

Thanks again @sebavan!  
That explanation is indeed illuminating.

So for a small width:

```auto
box.outlineWidth = 0.08;

```

Then the gap in the corners is becoming indeed less noticable:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/2/e/2e076700ad5a9d89df9fa95234c03c9f82cae937.png)

And when I apply the smooth function (‘borrowed’ from [here](https://www.babylonjs-playground.com/#1JBMJ3#17)) to my box, then the edges can indeed be thicker in my new [playground](https://playground.babylonjs.com/#0YG7IF#50):

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/6/7/6700697f7819b77a66c8c93268f5189d8fc5ff6e.png)

But with both workaround the edges in the middle don’t become red. I assume that is due to the same root cause, because those edges are entirely between two surfaces? But it is not clear to me how I can solve this…

I have never realized that a simple outline color could be so challenging, but I can imagine that the maths behind the scenes are quite heavy…

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [October 11, 2021, 10:39pm UTC](https://forum.babylonjs.com/t/weird-effect-when-applying-overlaycolor/24463/8 "2021-10-11T22:39:51Z")

</div>

> [@bartbutenaers](#):
>
> But with both workaround the edges in the middle don’t become red

Could you make a screenshot ??? I can not see it locally

---

<div class="post-metadata">

**Author:** ![Blake](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/blake/32/21509_2.png) [@Blake](https://forum.babylonjs.com/u/Blake)\
**Post date:** [October 11, 2021, 10:55pm UTC](https://forum.babylonjs.com/t/weird-effect-when-applying-overlaycolor/24463/9 "2021-10-11T22:55:09Z")

</div>

Hmm when you say “the edges in the middle don’t become red”, I wonder if the edges renderer is more what you’re looking for?

[https://playground.babylonjs.com/#0YG7IF#52](https://playground.babylonjs.com/#0YG7IF#52)

---

<div class="post-metadata">

**Author:** ![bartbutenaers](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bartbutenaers/32/14105_2.png) [@bartbutenaers](https://forum.babylonjs.com/u/bartbutenaers)\
**Post date:** [October 12, 2021, 6:29pm UTC](https://forum.babylonjs.com/t/weird-effect-when-applying-overlaycolor/24463/10 "2021-10-12T18:29:51Z")

</div>

> [@bartbutenaers](#):
>
> But with both workaround the edges in the middle don’t become red.

Hi @sebavan,  
Sorry I was not clear enough.  
I meant that the orange edges (which I have drawn manually in the below screenshot) are not visible in via a red outline color:

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/3/3/338c3a587b3846eee7432ffe8368ee50b9f1ff65.png)

> [@Blake](#):
>
> I wonder if the edges renderer is more what you’re looking for?

Evening @Blake,  
Thanks for the updated playground!  
That is indeed what I was looking for.

I assume that I have completely misinterpreted the use of the outline color: I was really convinced that an outline color could be used to achieve the same effect?

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [October 12, 2021, 6:47pm UTC](https://forum.babylonjs.com/t/weird-effect-when-applying-overlaycolor/24463/11 "2021-10-12T18:47:33Z")

</div>

nope it only outlines the shape of the object, think of it like selecting a model in a scene for instance 🙂

---

<div class="post-metadata">

**Author:** ![bartbutenaers](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/bartbutenaers/32/14105_2.png) [@bartbutenaers](https://forum.babylonjs.com/u/bartbutenaers)\
**Post date:** [October 12, 2021, 7:23pm UTC](https://forum.babylonjs.com/t/weird-effect-when-applying-overlaycolor/24463/12 "2021-10-12T19:23:37Z")

</div>

Ah ok now it makes sense 🙄  
I am going to mark Blade’s playground as a solution, although you have given a series of very clear answers to all my silly questions.  
Thanks a lot for all your help !!!