transparent shader for texture

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

Hi to make my texture its like bellow by using shader

enter image description here

Top to down postion for transparent

Well, what have you tried so far?

timothybrentwood | 2021-12-06 16:47

:bust_in_silhouette: Reply From: DaddyMonster

Make a shader material and then set the albedo by the y component of the uv and use a smoothstep to control.

shader_type canvas_item;

uniform float divide = 0.5;
uniform float blur = 0.1;

void fragment(){
    COLOR.w = smoothstep(divide, divide+blur, UV.y);
}

Then just send in your divide and blur values to control from the cpu.

so where is my texture?

it is just white to transparent, I need this gradient just execute for texture alpha channel

and how to rotate it 180 degrees?

DexterFstone | 2021-12-07 07:25

so where is my texture?

  • you haven’t put a sampler2D in there. Listen, easiest thing, revert the material back to having the texture. Then on the material dropdown choose “convert to shader material” and like magic you’ll see all the code written for you. Then just add this code into it and you’re done.

it is just white to transparent, I need this gradient just execute for texture alpha channel

  • that is on the alpha channel. Combine it with the above and the texture will fade.

and how to rotate it 180 degrees?

  • make blur negative.

The docs are extremely helpful here: CanvasItem shaders — Godot Engine (stable) documentation in English
Also, google “the book of shaders” and maybe spend a couple of days working through it to understand smoothstep and other essentials.

Finally, people help on this forum out of pure goodwill to other members, I’m sure you don’t mean to be rude or abrupt but maybe next time you can phrase your comments to maximise their courtesy, it will reflect well on you.

DaddyMonster | 2021-12-07 13:44