Hi all,

I have been spending so much time trying to replicate a basic effect similar to these:

Glowing line or Tron lines or More tron lines

I've tried to use blurring using the shrink, horizontal and vertical passes, expand technique but the results of my implementation are crappy.

I simply want my custom, non-textured 2d polygons to have a glow around them, in a size and color I can define. For example, I want to draw a blue rectangle using 2 triangles and have a glow around the shape.

I am not sure how to best achieve this and what technique to use. I am prototyping an idea so performance is not an issue, I just want to get the pixels properly on the screen and I just can't figure out how to do it!

It seems this effect has been done to death by now and should be easy, but I can't wrap my head around it, I'm not good at shaders at all I'm afraid.

Are the Rastertek blur or glow tutorials the way to go? I'm using DirectX 11.

Any tips or suggestions would be greatly appreciated!

The technique that you've described (downscale + blur passes) is pretty standard for achieving the effect that you want. Could you perhaps explain what looks bad about your current implementation? It's possible that you have a simple bug that you could fix, or that some simple tweaks could give you better results. If you could get some screenshots or a video, that would probably be helpful.

Hey MJP. I should have sent a picture, of course.

The problem is when I scale the shape back up, as in this picture, the edges look very coarse. The left is a simple polygon, on the right is the same polygon, downscaled, blurred H + V then upscaled.

Since you mentioned that this is the way to achieve the effect I want, I suspect I have something wrong with the code, maybe when I expand the smaller texture. I also wish the blurred border would be much larger to give a better effect. As it stands, it looks to be just a few pixels.

I used an online kernal calculator to create the kernel values: 0.000229, 0.005977, 0.060598, 0.241732, 0.382928

Should I be setting a special filter in DX11 when I scale the texture back up?

Are you using bilinear filtering when you downscale and upscale? It looks to me like you downsampled to 1/4 size in each dimension with point filtering, which is giving you that "blocky" look due to the aliased edges. So to start of I would make sure that you're using bilinear filtering for your sampler states when you're performing the scaling passes. 

It also looks like your blur is pretty narrow, which isn't helping you to get that "glowy" look that you want. I assume that those kernel weights are from a Gaussian function, and you're applying them to the 9 texels in the neighborhood of the center pixel that you're processing? That should give you as decent amount of blurring, but you may want to tweak the sigma parameter of the Gaussian to get a wider-looking kernel. It also looks like your weights aren't integrating to 1, which is why the resulting image is darker than the source image. You can correct for that by summing up your weights, and then multiplying your result by 1 / sumOfWeights.

You may also want to read through this article, which has a good overview of how to do an efficient blur for a bloom/glow effect.

Thanks for the detailed answer. I added bilinear filtering and the blocky look is finally gone.

I believe I was using less than 9 weights, probably more like 5 or 7, which makes sense as to why the edges would be narrow. The Intel article you linked looks very interesting and I'll go through it right away.

Quote

It also looks like your weights aren't integrating to 1, which is why the resulting image is darker than the source image. You can correct for that by summing up your weights, and then multiplying your result by 1 / sumOfWeights.

That explains the darkened resulting texture. I will try that!

I re-read the Rastertek tutorial this morning and they simply set the Alpha value of the pixel shader resulting color to 1.0f. This seems fine for their demo, but if I want to merge the blurred texture on my scene, should I simply leave the alpha as is at the exit of the shader?

Sincere thanks for sharing your knowledge. You helped get me back on track and it is more appreciated than you think  

On 7/2/2018 at 4:19 PM, Eric F. said:

I re-read the Rastertek tutorial this morning and they simply set the Alpha value of the pixel shader resulting color to 1.0f. This seems fine for their demo, but if I want to merge the blurred texture on my scene, should I simply leave the alpha as is at the exit of the shader?

That depends on how you combine the blurred texture with your scene. The two simplest ways to do that are to combine in a pixel shader, or use alpha blending. Doing it in a shader is more flexible, but requires an additional render target that will contain the result of combining the two images. Doing it with alpha blending is less flexible (you have to use fixed-function blend equations), but allows you to modify the "main" render target in-place. Even if you use hardware alpha blending, you may not need the alpha value at all. The typical alpha blend equation looks like this:
 

(SrcColor.rgb * SrcColor.a) + (DstColor.rgb * (1 - SrcColor.a))

Where "SrcColor" is what comes out of your pixel shader, and DstColor is what's in your render target. This is basically doing a linear blend of SrcColor and DstColor, similar to doing lerp(SrcColor.rgb, DstColor.rgb, SrcColor.a) in a shader. But that's usually not what you want for a glow effect, which is usually composited with a straightforward additive operation. In that case you don't need to use the alpha value in your blend equation at all, so it won't matter. You may still want to multiply your glow texture by some scale factor before combining it with your scene, but you can do that very easily by just multiplying it with your pixel color in the shader.