Blur Effect gradation

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By ReiKisaragi

Hi.
I recently started shader.
I want gradetion-blur

Can it be done as shown in the figure below?

This was created with image editing software

Sorry, I’m not good at English

Your image is not visible to me. It is forbidden by Google

clemens.tolboom | 2021-08-03 09:16

thx.
I Fixed.

ReiKisaragi | 2021-08-03 09:20

Still get same error. Have you tested this in private window (as in not logged into Google)?

Failed to load resource: the server responded with a status of 403 ()

clemens.tolboom | 2021-08-03 09:27

ok…
how’s this?

ReiKisaragi | 2021-08-03 09:30

Still no image. I give up.

clemens.tolboom | 2021-08-03 11:21

:bust_in_silhouette: Reply From: AlexTheRegent

Add TextureRect to your scene, set expand to to true and make your TextureRect fill whole screen. Then set texture of this rect to any image (even default icon.png will work). After it, add material to this TextureRect and add next shader:

shader_type canvas_item;

void fragment() {
	vec4 color = texture(SCREEN_TEXTURE, SCREEN_UV, SCREEN_UV.x * 3.0);
	COLOR = color;
}

Here 3.0 is the blur factor: the bigger this value is, the blurrier image will become on right side of the screen. This should give you result similar to your image.

P.S. Here’s the link to the image in this post (got it from page source using inspect tool) https://drive.google.com/file/d/13pLOPcojFHA_pUkCASTRX5AUit5l2znt/preview