# About external luminescence ，shadowBlur

**URL:** <https://forum.babylonjs.com/t/about-external-luminescence-shadowblur/53168>\
**Category:** Questions\
**Created:** [September 2, 2024, 9:53am UTC](https://forum.babylonjs.com/t/about-external-luminescence-shadowblur/53168 "2024-09-02T09:53:27Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Y.R.R](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/y.r.r/32/34387_2.png) [@Y.R.R](https://forum.babylonjs.com/u/Y.R.R)\
**Post date:** [September 2, 2024, 9:53am UTC](https://forum.babylonjs.com/t/about-external-luminescence-shadowblur/53168/1 "2024-09-02T09:53:27Z")

</div>

I want to achieve the effect of external glow, but I do not want to add background, how to set the external glow without adding background?

[Simple GUI in fullscreen mode | Babylon.js Playground (babylonjs-playground.com)](https://www.babylonjs-playground.com/#XCPP9Y#22205)

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [September 2, 2024, 5:26pm UTC](https://forum.babylonjs.com/t/about-external-luminescence-shadowblur/53168/2 "2024-09-02T17:26:42Z")

</div>

The glow is applied to the filled shape (the ellipse in your PG), not to the outline:

> <https://github.com/BabylonJS/Babylon.js/blob/master/packages/dev/gui/src/2D/controls/ellipse.ts#L56-L97>

It would be a breaking change to have it also for the outline, so I’m not sure what to do… cc @Deltakosh and @sebavan

Note that when we activate the shadow for the outline, the effect is rather weak:

| not enabled | enabled |
| --- | --- |
| ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/6/f/6f6ed5e99d962a1ecc43b5580d9097791b21c45d.png) | ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/5/9/592d666229bb19ba5cfe72383ab3197012215441.png) |

With a background color (your PG):  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/2/8265dd88669abba0c8b7947166e0c023aaecebbe.png)

---

<div class="post-metadata">

**Author:** ![Y.R.R](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/y.r.r/32/34387_2.png) [@Y.R.R](https://forum.babylonjs.com/u/Y.R.R)\
**Post date:** [September 4, 2024, 8:43am UTC](https://forum.babylonjs.com/t/about-external-luminescence-shadowblur/53168/3 "2024-09-04T08:43:15Z")

</div>

> [@Evgeni\_Popov](#):
>
> 当我们激活轮廓的阴影时，效果相当微弱

Can I have a PG?

 ![Snipaste_2024-09-04_16-43-16](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/4/2/42bf246e7c40945cf92130d6ce93acc989341e34.png)

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [September 4, 2024, 9:10am UTC](https://forum.babylonjs.com/t/about-external-luminescence-shadowblur/53168/4 "2024-09-04T09:10:38Z")

</div>

Here’s a PG, where `_localDraw` has been overriden:

> **[Babylon.js Playground](https://www.babylonjs-playground.com/#XCPP9Y%2322206)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

I commented lines 66-70 to enable shadow blur for the outline.

---

<div class="post-metadata">

**Author:** ![Y.R.R](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/y.r.r/32/34387_2.png) [@Y.R.R](https://forum.babylonjs.com/u/Y.R.R)\
**Post date:** [September 4, 2024, 11:08am UTC](https://forum.babylonjs.com/t/about-external-luminescence-shadowblur/53168/5 "2024-09-04T11:08:02Z")

</div>

> [@Evgeni\_Popov](#):
>
> [Babylon.js/packages/dev/gui/src/2D/controls/ellipse.ts at master · BabylonJS/Babylon.js · GitHub](https://github.com/BabylonJS/Babylon.js/blob/master/packages/dev/gui/src/2D/controls/ellipse.ts#L56-L97)

Thank you, I understand it, but if you want to give CreateImageWithCenterTextButton set outer glow, do not set the background color, only let him shine, I want to know how to do it, And I was not in BabylonJS/Babylon. Js/blob/master/packages/dev/GUI/SRC / 2 d/controls the ellipse. Ts# L56 - L97 find button in the same operation, can see my PG, thank you very much

[Simple GUI in fullscreen mode | Babylon.js Playground (babylonjs-playground.com)](https://www.babylonjs-playground.com/#XCPP9Y#22210)

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [September 4, 2024, 6:09pm UTC](https://forum.babylonjs.com/t/about-external-luminescence-shadowblur/53168/6 "2024-09-04T18:09:29Z")

</div>

In that case, `_localDraw` should be overriden this way:

> **[Babylon.js Playground](https://playground.babylonjs.com/#XCPP9Y%2322211)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes

@babylon I wonder if we should add a property to `Control` like **allowShadowBlurForOutline** that wouldn’t disable shadow blur after we filled the background and before we render the outline shape? At the time, it seems we always reset the shadow blur properties before rendering the outline with this kind of code:

```javascript
            if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
                context.shadowBlur = 0;
                context.shadowOffsetX = 0;
                context.shadowOffsetY = 0;
            }

```