I have had pretty good success with shaders except when it comes to blurring. Most I have seen seem to make 4 or more copies of the screen and turn them somewhat transparent and offset. It kind of looks blurry but more like a prism effect than a real blur.
Does anyone know of any actual blur shaders?
The posting process errored when I made the original question and posted three times. Sorry, admins!
@Gramps said: The posting process errored when I made the original question and posted three times. Sorry, admins!
No worries, it happens. I removed the duplicate. Thanks for reporting, I appreciate it :smile:
Cheers, sir! Thanks for getting those.
Performing high-quality blurring in real-time is a relatively difficult task; Intel had a look at it in 2014. I'm not sure if this could be implemented in Godot 3's shader language though.
Ah yes, good job me... before going to sleep last night I posted the following as a reply to one of the archived double posts:
@Gramps said: Most I have seen seem to make 4 or more copies of the screen and turn them somewhat transparent and offset. It kind of looks blurry but more like a prism effect than a real blur.
That could well be describing either a method that is based on framebuffer mipmaps or instanced framebuffer copies offset to get a blur effect. For the former you can check an example in the demos repository.
@Calinou Hmm, I wondered. I've seen it quite a bit in other games and wanted to implement it for myself. I've seen a few examples in Godot but no working code. Any snippets I've seen so far don't actually work.
@Megalomaniak Yeah, I am using that method now. Kinda of does the trick but looks kinda crude as a blur. I'll check out the demo repo you linked and see if it works better. Cheers!
Instead of making copies of the frame and moving it, you can just get the same effect if you the the color of the current pixel, all the colors of the surrounding pixels and divide it by the number of pixels you used. Let me make a simple example. Let us say you are looking for the new color of pixel at (3, 5). You would take the color itself and the surrounding pixels on (2, 4), (3, 4), (4, 4), (2, 5), (4, 5), (2, 6), (3, 6), (4, 6) and sum all those. After that you divide by the number of pixels, in this case 9. You pixel shader makes this for every pixel and by that you get a blurred image. You could take only some neighbouring pixels, or the next outer neighbours, or just the ones on one side. That depends on the effect that you want to get. If you want, you can even take other pixels, not the ones which are direct neighbours but pixels which are further apart of your current pixel. With this solution, you can mimic the effect of making some copies and moving them around. I made a simple example using shader toy: https://www.shadertoy.com/view/wsXSR7
this method is a simplification of the gaussian blur. You can read that up if you want to extend it. It is really simple. Basically, you calculate a weighted sum of the neighbours colors. In most cases, you want the weight to scale with the distance from your center. Maybe just read the wikipedia article i linked. If you have any questions, feel free to ask.
edit: i extended my example. blur1 takes the direct neighbours. blur2 takes the direct neighbours and those direct neighbours and blur_with_size takes the number of 'neighbour levels' as parameter. The bigger it is the blurrier it gets.
Man, that looks way better than the one I have currently. Now I just have to figure out how to write the shader to do this! Cheers!
Try to start simple. If you need some help, check my example at shadertoys. Or ask here. I am no shader pro but i can try to help you.
Sounds good. I'll give it the ol' college try this week!
@Schorsch So I got your example working in Godot and it blurs great! My only issue is that the sprite the shader is on seems to be fixed at a given X,Y coordinate and it kind of stretches in all directions outside its boundary. Kind of hard to explain without images, which I'll add later. I think something is wrong though. Will also post shader code later too!
Hmm, maybe i get you wrong but is it that your sprite uses alpha channel and the shader makes pixels there where only the alpha should be? You could check the alphachannel of a pixel before rendering it. So if the original pixel is transparent, don't use your blur shader. Or just set every pixels alpha channel to it's original one. So just blur rbg and not the a channel. Maybe it is that? But maybe put an image here.
