Tweaking a glow shader to make it look better

Question

I have a simple game and and subjects of it are these little lines. It is targeted for iOS and android so it has a HUGE range of processors that it could run on, right now.

I am trying to add realtime glow to them for two reasons

1. I am trying to hide the fact that I don't have the rendering time to process anti-aliasing on most devices.
2. The subject of the game is supposed to be pure light, ergo that picture should look like those things are pure light.

I have been tweaking a separable gaussian blur shader for quite awhile and I have came up to a point of frustration, I just can't get it to look right, perhaps the issue is I am trying to futilely hide the jagged edges of the light meanwhile not making the light look blurry.

My biggest problem is all the variables involved in making it look its best.

I am very new to graphics/rendering and I am in no way an artist. Perhaps the most frustrating thing about rending to me is all the variables that seem to be involved. With glow I have seen so many possible changes.

• A. Add blend mode, screen blend mode, or some other concoction
• B.Weighting the blur, and normal differently before combination
• C. The Sigma of the gaussian bell function (I have been using this confusing calculator but it doesn't seem to give the same values I see other people have in)
• D. Scalars on the "x" values sent to the sigma function
• E. Sample scale (making the blur radius smaller or larger)
• F. Changing the resolution of the glow buffer

How does one find the "best looking" constants when working with so many variables like this?

I am also having issues because the time between me making a tweak and seeing it is a long that its hard to see changes, I would do it in shader toy however I can't load up this image or procedurally generate one like it.

Right now I am really stuck on the sigma of the gaussian bell curve kernel, especially because I am coding in the numbers rather then the formula because I need the processor speed. Can you suggest a good sigma to use?

Answer 1

Sigma and kernel size of Gaussian filter

Regarding how to choose the sigma and the kernel size (pixels) of the Gaussian: you set the sigma based on how wide of a blur you want (judging it visually) and then choose the kernel size based on the sigma. It's a game of finding a kernel size that captures enough of the (mathematically infinite) bell curve to look good, while not being too expensive.

As a rule of thumb, the kernel size should be at least 6 times the sigma. Then the kernel extends out to 3 sigmas in each direction, which is enough to cover almost all the weight of the mathematical bell curve. It's also nice to round up the pixel size to the next odd number so the filter will be symmetrical. So for example, with sigma = 1.5 px, you'd use a 9-pixel filter; with sigma = 2.0 px, use a 13-pixel filter, etc.

Alternatively, if you have performance limitations that control how big a kernel size you can use, then divide by 6 to get the maximum sigma you can get away with. (Note that sigma can be fractional, as it's just an input to the bell curve equation.)

By the way, a trick to get better performance on large Gaussian blurs is to downsample the image, perform a smaller blur, then upsample. For instance, to get an effective 13-pixel blur, you could downsample the image by 2x (using bilinear filtering), then perform a 7-pixel blur, and then upsample (using bilinear filtering). It will look almost as good as the 13-pixel blur, but will be considerably faster.

Creating a good-looking glow filter

A common trick with these is to use multiple Gaussians of different radius, added together. It makes a better glow effect than any single Gaussian by itself. For example, here's a mockup in Photoshop created with three layers additively blended together. The three Gaussians are of size 3px, 5px and 11px (corresponding to sigma = 0.5px, 0.83px, 1.83px respectively).

You can also add even larger Gaussians to further increase the apparent radius of the glow. This is how the standard "bloom" effect is implemented in 3D game engines.

If performance is a concern, the smallest Gaussian can be replaced by a copy of the unblurred original image; the resulting effect will look sharper, not so soft, but will still have a glow surrounding it. As mentioned previously, larger Gaussians can be done by downsampling, blurring, and upsampling; and the upsampling can be done using hardware bilinear filtering, folded into the pass that blends the layers together.

Jaggies

You'll notice that jaggies are still visible in some areas of the above image. Unfortunately, blurring is not very effective at hiding jaggies unless the blur radius is quite large. There's no easy way to use a post-process get rid of jaggies: the best way to avoid them is not to render them in the first place. :)

I hear you that you can't use MSAA for performance reasons, but may be another option. Depending on how you render the glow trails, you might be able to slightly increase their size, and write a shader that applies a gradient to fade out the color within a couple pixels of the edge. That should help them look smoother. Here's a shadertoy that demonstrates a 1px-wide edge falloff used for antialiasing a procedural shape.