Using highlight for fading?

Questions
1

Hello everyone,

I need to create a fading effect along the borders of a geometry, blending seamlessly with the background color.

My initial approach was to use the highlightLayer with the background color to achieve this effect. However, the result isn’t as pronounced as I needed.

Here’s a sample of what I’ve tried so far: https://playground.babylonjs.com/#J7OUQI#1

Additionally, I’ve noticed that the setEffectIntensity method has an inverted effect is this expected?

Could anyone suggest how to amplify this fading effect? Alternatively, are there more effective techniques or tools within BabylonJS that could achieve a better result?

Thank you in advance!

2

Hi, Escobar.

Do you mean you need more fade and softer edges?
You can adjust these parameters to increase the fade length:

hl.blurVerticalSize = 3
hl.blurHorizontalSize = 3
3

I’ve played with a custom implementation I’ve found in the forum
https://playground.babylonjs.com/#J7OUQI#2

The concerning blursize it seems that the quality becomes much worse with higher values.

4

I experimented with these parameters as well and found this set:

This setting provides a more suitable smoothness:

hl.intensity = 6;
hl.blurHorizontalSize = 1.5;
hl.blurVerticalSize = 1.5;
5

Thank you it is a pitty that there is no way to increase the samples for the blur (or at least I didn’t find how to do that) something like kernelsize.

6

You may try
hl.mainTexture.samples = 8;

7

Unfortunately it seems to have no effect :expressionless:

8

The kernel being fixed, you need to decrease the size of the texture to increase the size of the blur.

10

Sorry I didn’t understood it.

11

You should try to set a smaller texture ratio in your highlight layer so the intermediate texture for the blur will have less resolution resulting in the feeling of a larger blur.

1 Like
12

I am still thinking this won t really work for fade as it won t get dark enough… Maybe a material plugin would be better or relying on NME

13

I’ve tried with hl.mainTexture.resize but it seems to have no effect :pensive:

Btw. the quality seems ok to me but the issue on the sampling amount.

14

Unfortunately I didn’t found how to change the intermediate texture size yet :smiling_face_with_tear:

15

This wont animate nicely I guess :frowning: I think you would be better with a custom post process or material plugin

16

For future readers, this is the droid you were looking for:

Blurring the main texture before using the effect seems to work ok.

2 Likes