Basic glow effect?

MuntyScruntFundle · July 12, 2017, 6:14pm

I have a routine which draws lines, basically elongating a pixel, or small sprite.

Is there an easy way to create a glowing effect around the line? I know I could stretch a round fading sprite, but the stretch elongates the entire sprite, when I’d really like more rounded edges.

I can see how I could build the effect out of 3 graphic files, 2 rounded ended rotated correctly, and one centre graphic cut to size from another.

That approach would be quite a chunk of work if there is an easy effect I could apply. I don’t hold out much hope as Monogame doesn’t at present support natives, so I can’t see why there would be any effects that could be applied.

Just musing really. There has to be a ‘call’ in the GPU for an effect like this, fog was put into DX many years ago, but I don’t have any idea how to expose it. I did play with DX coding around 15 years ago, that knowledge has long since gone mouldy!

Any ideas? Suggestions?

Thanks.

Alkher · July 13, 2017, 6:27am

Glow or bloom can easily be done with a shader. Kosmonaut has shared one here.
Basically you draw what you want to glow into a rendertarget, extract luminance compared to a treshold to not achieve only a blur but to extract high luminance pixels and then you blur this.
2 effects passes are in fact needed to achieve this post process effect

kosmonautgames · July 13, 2017, 6:56am

The idea with the sprite would work, too, but stretching can look wrong

MuntyScruntFundle · July 27, 2017, 6:56pm

Thanks guys, and sorry for not getting back sooner, only just had chance to look at this. That is definitely the easiest example I’ve found anywhere and it’s starting to make sense! A couple of questions before I start completely messing up my project…!

What does one edit an .fx file with? I don’t want to edit it, I just want to understand what’s in it.

And, I’m guessing, if you wanted to add a bloom to a single object, not the entire scene, you’d draw the target object to a render target, pass that on, draw it back?

I’ve read somewhere render targets can be a bit slow, is this something to keep a careful eye on?

Thanks again folks.

willmotil · July 27, 2017, 11:50pm

What does one edit an .fx file with?

I usually edit them right in visual studio, double clicking the file will open it.
Alternately you can use something like notepad++ i edit files in that sometimes.
(kinda like it because when i close and open it, it automatically pops up all the files i had previously opened)

Anything that will keep the character formating the same when editing it.

Alkher · July 28, 2017, 6:41am

With notepad++ if you choose this, set the language as c, or any descendant to have syntax highlighting

kosmonautgames · July 28, 2017, 7:26am

That’s exactly right. Alternatively if your object is 2D just drawing a “fake” bloom effect as a sprite on top is obviously much cheaper.

.fx files are written in HLSL. So if some commands are not clear just google (problem hlsl).
There are some HLSL plugins available for visual studio (by @tgjones for example) if you want syntax highlighting, but you can treat it like c code.

If you look for xna shader tutorials on google you’ll find all the info you need and a bunch of cool stuff

MuntyScruntFundle · July 28, 2017, 10:31am

There are always issues converting C# to VB. Usually I can get around them, but this one I don’t understand.
I can create the bloom class ok, but as soon as I try to initialise it I get the following. Surely VB shouldn’t care about the .fx file? However, if I run your example everything is fine, convert it to VB and it isn’t.

I guess I could compile your .cs and reference the file, but I’d sooner get it working internally.

Any ideas?

kosmonautgames · July 28, 2017, 11:01am

you need to set your graphicslevel to hidef. one sec

You can find this line in the Game1() constructor of the bloom sample.

Graphics.GraphicsProfile = GraphicsProfile.HiDef;

github.com

Kosmonaut3d/BloomFilter-for-Monogame-and-XNA/blob/master/Bloom Sample/Game1.cs

using System;
using System.Runtime.InteropServices;
using System.Text;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;

namespace Bloom_Sample
{
    /// <summary>
    /// This is a sample program to showcase the bloom filter
    /// 
    /// To implement this filter in your game you need the Bloomfilter.cs file 
    /// and the Bloom.fx shader file, 
    /// found in Content/Shaders/BloomFilter/Bloom.fx
    /// 
    /// Ideally you place this file in the same location relative to your root, but you can adjust the directory in BloomFilter.cs->Load()
    /// 
    /// You need to initialize a BloomFilter class and call Load(...) to make it load the shaders
    ///

This file has been truncated. show original

MuntyScruntFundle · July 31, 2017, 12:21pm

Ahh. Thanks kosmo. That’s got around the error perfectly.

I’m trying to get my head around the work flow and exactly how to get a texture drawn, and I’m trying to cut out a load of code, but of course I’m probably doing something very wrong.

If I have:

Spritebatch.Begin… blah
Call DrawPlayers(blah)
Call DrawAI(blah)

Laser as Texture2d=BloomFilter.Draw(ExampleLaser,xw,yh)
Spritebatch.Draw(Laser,blah)
Call DrawStars(blah)
Spritebatch.End

Where and how do I need to redirect the GraphicsDevice for the render target?

MuntyScruntFundle · July 31, 2017, 12:51pm

Edit: Sorted that, it was just as I thought it should be, I was doing something a bit dum!

However, I’m not getting any effect. What properties have to be set? I’ve found the presets, but these make no difference.

MuntyScruntFundle · July 31, 2017, 12:58pm

Another edit: I was doing something else pretty stupid!

However…!

Am I meant to pass the graphic I want to blur to the Draw routine? This feels obvious to me, but all I get is a blob of blur, no part of the original graphic survives. Is this correct?

kosmonautgames · August 28, 2017, 9:04pm

if you try the original files, you can set the different blur levels with mouse clicks on the screen. You can see how it works then.

Usually you get a blurred image and you put that on top of your unblurred one.