How 2 Glow in 2D - Looking at the 2D Glow demo project

award

I was looking at the demo project for 2D glow on the godot-demo-projects repository. I was trying to figure out what all of the settings were which enabled the glow effect. I couldn't find any one place in the documentation that explained all of the separate requirements for 2D glow to work, but eventually I stumbled into getting it working like the demo. I thought I'd share my findings here.

In the demo project, we can see the effect glow can give us.

The "light" in this scene is all coming from the "Beach" Sprite2D. If we turn that sprite off...

then we see the dark scene without the glow

The Beach sprite is giving off this glow thanks in part to HDR color. Here we see the little triangle indicating that the sprite is being modulated using HDR colors:

If we look at the RAW values on those colors, we see that they have essentially "200%" of each color

I knew that the WorldEnvironment node was also playing an important part. As expected, "Glow" is turned on and some settings are adjusted:

The demo uses Additive blend mode which is important for the effect being shown off. I was surprised to see that HDR Threshold was at 1.0 since I had read that needed to be lowered to enable Glow in the 2D pipelines. I guess that is no longer the case! The other important thing to notice here is that they nudged up Bloom to 0.08. I didn't realize this at first, but all of the glow in the demo scene is actually supplied via bloom.

So I copied all of those settings, but my own poor little test scene still had no glow even with very bright objects.

I looked in project settings and found the HDR 2D setting, but oddly the demo has it turned off...

Turns out this is because the demo is only relying on bloom. Let's see what happens if we turn that on in the demo...

WOAH THERE! That's certainly not the ocean scene they were intending. It makes sense why they went with a different approach for this effect. Turning that bool on made no difference in my project, however.

Finally I came across the setting that was the missing piece of the puzzle:

background_mode: Canvas. This is what lets our glow actually glow! I added that change to my scene and...

Voila! We have glow! Well, we have bloom at least. It's not super impressive in this simple scene.

I wonder what would happen if I turned on that HDR 2D setting...

There we go! Nice 👌

award

If you're curious about that lightning-ish line, it's just a Line2D with a shader with a sawtooth wave. The code is

shader_type canvas_item;
render_mode blend_premul_alpha;

uniform float saw_period = 2.;

void fragment() {
	float x = UV.x / saw_period;
	float y = UV.y * 1.4 - .2;
	float saw = 2. * (x - floor(x + .5));
	saw *= sign(saw);
	saw = smoothstep(.8, 1., 1.0 - distance(saw, y));
	COLOR = vec4(2. * COLOR.rgb * saw, 2. * saw);
}

2. * (x - floor(x + .5)) is the important bit for creating a sawtooth wave.