Weird effect when applying overlayColor

Questions
1

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

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 everything works fine, so I cannot reproduce the problem to show it :slightly_frowning_face:

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

2

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

3

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:

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 …

4

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

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

2 Likes
5

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 :face_with_symbols_over_mouth: :see_no_evil: :scream:

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

I can now reproduce it via this similar playground. Hopefully you can see what I am doing wrong.

Thanks!!

1 Like
6

LOL ok here is the answer Render Outline - Buggy - #13 by Evgeni_Popov and unfortunately there is no easy solution besides smoothing the meshes out :frowning:

1 Like
7

Thanks again @sebavan!
That explanation is indeed illuminating.

So for a small width:

box.outlineWidth = 0.08;

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

image
image914×511 7.03 KB

And when I apply the smooth function (‘borrowed’ from here) to my box, then the edges can indeed be thicker in my new playground:

image

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…

1 Like
8

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

1 Like
9

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

2 Likes
10

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

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?

1 Like
11

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

2 Likes
12

Ah ok now it makes sense :roll_eyes:
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 !!!

2 Likes