Glow "effect" implementation

[st-pasha]

This thread is about the glow "effect" and the best strategy for applying it. This follows our discussion from PR #2129, moved here for better visibility (as that PR is now merged).

The GlowEffect which is currently in the main branch is useful in some circumstances, but has a number of deficiencies that need to be addressed. Those are:

• The term "effect" was misapplied here. The phrase "glow effect" is used in graphic design, so we kinda referred to it by the same name. However, in Flame the word "Effect" has a specific meaning: it is an animation that changes over time some property of a component. For example, MoveEffect, OpacityEffect. The "glow effect", however, is static: you add it to an object to make the object glow.

  • These kinds of visual effects we were calling Decorations so far, so perhaps we should consider changing GlowEffect into a GlowDecoration. Of course, this affects not only the name but also how the effect is applied.
  • Of course, you may want to have an actual effect that changes glow over time (say, pulsating glow) -- this may be called GlowDecorationEffect or something like that.

• The glow effect currently modifies an existing paint, which makes its correct application quite tricky. We should consider a glow effect that adds a glow instead.

• The glow is kinda weak -- we should investigate the possibility of making it stronger if needed.

This issue is a discussion to collect ideas/observations, and figure out the path forward.

CC: @dipakp2726, @spydon

[st-pasha]

Here's how different blur styles look like when applied to a white circle (blur radius = 10). The images, in order, are: no-blur, normal, solid, outer, and inner:

Here's the same picture, but when the original paint is of type "stroke", with the stroke width = 4:

We can see that the glow in both cases is pretty weak (especially in the second), and increasing the blur radius won't make it stronger...

[st-pasha]

One possibility to make the glow brighter is to draw the same paint several times. In this picture, I first show a single paint with blur, then 2 paints with blur, then 3 paints with blur (all with the same blur radius 10):

[st-pasha]

This picture is similar to the last one, but 3 blurs have different radii -- 30, 20 and 10:

[st-pasha]

Here I once again have only one glow for each circle. However,

• in the first image the glow is based on the circle of the same radius as the base;
• in the second image the blur mask is applied to a circle which has +10 radius compared to the base;
• in the third image the blur mask is applied to a circle with +20 radius.

This also creates the effect of stronger glow; the drawback, however, is that this technique can only be applied to shapes which we can easily "inflate": circles, rectangles, rounded rectangles. Possibly polygons.

[munsterlander]

Would this be possible to be applied to text?

[st-pasha]

Here are some experiments with text. As before, I have text with no blur, then normal, solid, outer, and inner blur styles. The blur radius is 5 in the first picture and 2 in the second:

As before, the main issue is that the glow is kinda weak.

[st-pasha]

In this experiment I'm once again using normal blur with radius 5; plus the text is then rendered a second time on top, using the original paint.

• first image uses the original paint with the blur mask;
• second image uses paint with style = PaintingStyle.stroke and stroke with 2;
• third image has stroke width 4;
• fourth image has stroke width 8:

Clearly, using stroke paint as the basis for glows works quite well when rendering fonts (definitely much better than with solid shapes).

[spydon]

Would this be possible to be applied to text?

One can also use other techniques to apply a glow to text, which can be seen here:
https://examples.flame-engine.org/#/Rendering_Text

[st-pasha]

One can also use other techniques to apply a glow to text, which can be seen here:
https://examples.flame-engine.org/#/Rendering_Text

Those are still the same techniques: apply a paint with MaskFilter.blur, then render the blurred text at some offset.

[spydon]

Those are still the same techniques: apply a paint with MaskFilter.blur, then render the blurred text at some offset.

Yeah, but not done manually, in your case you have a separate paint that you handle outside of the text style right?

[rexthecoder]

Just wanna join the Flame party 🎉

@st-pasha Can you elaborate on how you go about with the implementation and probably add some simple code? I am just joining the Flame party, so I am a bit lost. But I am interested in this discussion 😁

[sooxt98]

Im getting this on sprite component