Bloom effect is not expected about gorgon

[Tape-Worm]

There are several problems with how you're doing this that make the effect break down.

1. You're loading your card image into the render target directly. The effect (like most effects) requires that you actually draw something into the render target. The way to fix this is to load the card image into a separate texture like so:
   
   Remove the image loading function (CardImage = Png.FromFile....), you don't need this.
2. Your bloom settings are not going to work. You need to lower your threshold and decrease your blur amount:
   
   Ultimately, you'll need to play with the settings to get the image you want.
3. In your idle function, instead of rendering the bloomRenderTargetView inside of the Render method, render your card like so:
   
4. Finally, when rendering the effect overlay, you need to use Additive blending:
   

All of that will yield this image as a result (your background image will be different than mine obviously):

In case there's anything I've missed, I've attached the code I used to create the bloom effect:
Issue_15.zip

Now, with all that said, this is an incredibly expensive operation just to render a single image with a bit of glow... I wouldn't be using bloom to do this, I'd alter the card image in Photoshop (or paint.net, gimp, etc...) to have a blur, and then draw it with additive blending. That should give you a very similar look with way better performance. Even with a video in the background (unless you're blooming the video too), this approach would be much, much better.

[Tape-Worm]

Because Bloom, like many effects, is a post processing effect meant to work on the full screen.

If you look up Bloom/Glow effects online, you'll see that every one of them uses the effect as a post processing effect on the full screen. It basically reads render target and filters for the brightest objects on the screen, then blurs it using additive blending.

Aside from that, you can use a smaller render target if you wish, but you may run into issues.

If you want bloomed sprites, you should render the sprites that you want bloomed in the Render() method of the effect.

Again, Bloom is not really a good method for just making sprites glow. It's really meant to enhance lighting for a scene. And, as I said, it's incredibly expensive to render. Using blurred images and additive blending is much more efficient and you can use them directly as sprites should you require that.

[Tape-Worm]

I don't really know. Gorgon uses WIC underneath the hood to do image conversion, so if it supports it, then Gorgon will too. The IGorgonImage object has a CanConvert function that will let you know if it can convert the format.

That said, you shouldn't be converting your images to 16 bit per channel, there's no real advantage to doing that. 16 bit per channel is mainly used for HDR rendering (typically for render targets), and it's quite wasteful to load all of your textures in that format as you get no perceptual difference in color depth since your monitor, most likely, is going to only output 8 bit per channel.

[Tape-Worm]

It's not really easy to control at that level. Again, Bloom (I mean the effect in general, this is not specific to Gorgon, Unity, for example, handles it in the same way) is meant for lighting, so it handles bright areas on the screen, and it doesn't do any kind of color matching.

If you follow the suggestion for blurred textures + additive, you can control the glow for whatever colors however you want in whatever paint program you like.

[Tape-Worm]

I manipulated the card image in Photoshop to have a better looking glow:

I isolated the red border easily using the magic wand tool on the purple inside, and cutting the body out and putting it on another layer, then blurring the border layer in Photoshop (you could do this in Paint.NET or Gimp as well).

Here's the glowing border I used:

[Tape-Worm]

I don't have the PSD file, and I'm not an artist. Just download Paint.NET or Gimp and play around with it until you get the result you want.

[thigiacmay]

Thank you so much! I am so glad that it works

1. You're right
2. You're right
   3, 4. But i dont know why it is _screen.Width and _screen.Height in this code? Why it is not _card.Wdith and _card.Height ?

_bloomTextur2DView = GorgonTexture2DView.CreateTexture(_graphics,
                                  new GorgonTexture2DInfo("Shadow Texture")
                                  {
                                      Width = (int)_screen.Width,
                                      Height = (int)_screen.Height,
                                      Binding = TextureBinding.RenderTarget | TextureBinding.ShaderResource,
                                      Usage = ResourceUsage.Default,
                                      Format = BufferFormat.R16G16B16A16_UNorm
                                  });

Why you used two GorgonTexture2DView (_card and _bloomTextur2DView ) for one texture? Why can not we use only _card object?

Can i use Bloomed texture like a GorgonSprite?

I'm sorry for my trouble to you, because i am learning your APIs in the Gorgon library.

Thanks

[thigiacmay]

Yes, Thank you, i will learn more about Bloom and Blur from your Api and will ask you more :))
One more question before you close this:
Is there any function in Gorgon that can convert GoronImage from BufferFormat.R8G8B8A8_UNorm to BufferFormat.R16G16B16A16_UNorm? Because cause I have RGB24 image from camera i captured, i have converted it to BufferFormat.R8G8B8A8_UNorm, now i want to convert it BufferFormat.R16G16B16A16_UNorm.

[Tape-Worm]

So, just to show you what I mean by using a blurred texture and additive blending:

All I did was blur the image sufficiently in Photoshop (However, I went too far with it, the square edges on the glow are my fault entirely - nothing to do with Gorgon). And then, instead of using bloom, I rendered the blurred image on top of my background and I also rendered the card image below the glow using default blending.

This will perform WAY better than the Bloom effect and, at this point, looks better - except for my screw up with the texture. It just requires that you do some image manipulation.

FYI, all of the images used are in R8G8B8A8_UNorm format. No 16-bit per channel textures used at all.

Here's the code I used to generate the image:
Issue_15_Glow.zip

[dominota]

Bloom effect with AdditiveBlend makes whole the card bloomed while i only want bloom the red border of card (event i SetData for card). Is there a way to do it? I mean, bloom exactly the color i want, not any color

Yes, I can convert from R8G8B8A8_UNorm to R16G16B16A16_UNorm but i does not help much.
I will try with blur effect

[dominota]

I manipulated the card image in Photoshop to have a better looking glow:

I isolated the red border easily using the magic wand tool on the purple inside, and cutting the body out and putting it on another layer, then blurring the border layer in Photoshop (you could do this in Paint.NET or Gimp as well).

Here's the glowing border I used:

Yes yes yes, that is what i expected with Bloom. But i will do with blur like you suggested.

I need card_glow.png file with size 1340x780 and rounded corners with this params, I created this template card like this (but i can not blur it)

var Card_Background = new D2D.SolidColorBrush(Graphics.D2D1Context5, new var SharpDX.Mathematics.Interop.RawColor4(0.6f, 0.5f, 0.6f, 0.7f));
var Card_Border = new D2D.SolidColorBrush(Graphics.D2D1Context5, new SharpDX.Mathematics.Interop.RawColor4(1.0f, 00f, 0f, 1f));
Size2 Card_Size_Main = new Size2(1340,780)
int border_witdh = 4;
int inner_offset = 10;
var Card_Bitmap = new D2D.Bitmap1(Graphics.D2D1Context5, Card_Size_Main, new D2D.BitmapProperties1()
            {
                PixelFormat = new D2D.PixelFormat(SharpDX.DXGI.Format.R8G8B8A8_UNorm, D2D.AlphaMode.Premultiplied),
                DpiX = 96,
                DpiY = 96,
                BitmapOptions = D2D.BitmapOptions.Target
            });
 Graphics.D2D1Context5.Target = Card_Bitmap;
Graphics.D2D1Context5.BeginDraw();
Graphics.D2D1Context5.FillRoundedRectangle(new D2D.RoundedRectangle() { RadiusX = 50, RadiusY = 50, Rect = new SharpDX.Mathematics.Interop.RawRectangleF(inner_offset , inner_offset , Card_Size_Main.Width - inner_offset , Card_Size_Main.Height - inner_offset ) }, Card_Background);
Graphics.D2D1Context5.DrawRoundedRectangle(new D2D.RoundedRectangle() { RadiusX = 50, RadiusY = 50, Rect = new SharpDX.Mathematics.Interop.RawRectangleF(inner_offset , inner_offset , Card_Size_Main.Width - inner_offset , Card_Size_Main.Height - inner_offset ) }, Card_Border, border_witdh , new D2D.StrokeStyle(Graphics.D2D1Context5.Factory, new D2D.StrokeStyleProperties() { DashStyle = D2D.DashStyle.Dash }));
Graphics.D2D1Context5.EndDraw();

Can you adjust your PSD and share with me the card_glow.png again? (it would be nice with your psd file too).

Thanks :))

[dominota]

Thank you so much! Please close this thread