How to make a shader fade at the top? (3D)

[cardcraft]

Godot Version

v4.2.2.stable.official [15073afe3]

Question

I want to make a shader that fades out the opacity the closer to the top of the object it is. I managed to get something started using this

void fragment() {
	ALBEDO.r = UV.y;
	ALBEDO.b = 0.0f;
	ALBEDO.g = 0.0f;
}

But for some reason only the top isnt red (red used for testing)

I want to do this in a shader so I can add effects later, Is this possible?

[Sweatix]

Hmm… I mean, transparency is not controlled by the color channels. Right now you’re just fading the red channel based on the UV-position.

Transparency is achieved by first setting the Transparency property to Alpha, and then utilizing the alpha-channel to modulate how opaque the pixels are.

If I understand your question correctly, you should be using the vertex position instead of UV coordinates since UVs are used for texturing and will not always “point” to the top of the mesh.

Perhaps you should look at some beginner guides for writing shaders:

• Godot Docs Shaders Section
• The Book of Shaders by Patricio Gonzalez Vivo and Jen Lowe

[cardcraft]

I know that transparency isn’t in red. Just for debugging really, if I did something in vertex wouldn’t it look bad on low poly stuff?

[roc4u1000]

@cardcraft

if I did something in vertex wouldn’t it look bad on low poly stuff?

Depends on how you set it up in the shader, here is an example, which has some parameters and they are bound to the meshes true top and bottom, so you will always get a gradient result from bottom to top, and with the parameters you can control the gradient somewhat.

The shader code as an example, hopefully this can get you going and venturing deeper into what is possible.

shader_type spatial;
render_mode blend_mix;

instance uniform float model_height = 2.;
instance uniform float dissolve_start : hint_range(.0, 1.) = .0;
instance uniform float dissolve_length : hint_range(.0, 1.) = 1.;
instance uniform float gradient_bias : hint_range(.1, 5.) = 1.;
varying float vert_height;

void vertex() 
{
	vert_height = (VERTEX.y + (model_height / 2.)) / model_height;
}

void fragment() 
{
	float gradient_height = vert_height - dissolve_start;
	gradient_height *= 1. / (dissolve_length);
	gradient_height = clamp(pow(gradient_height, gradient_bias), 0., 1.);
	
	ALBEDO = vec3(1.0,1.0,1.0);
	ALPHA = mix(1.,.0,gradient_height);
}

I am still figuring out how to do some of these things in godot’s shaders, so what you see here could be done in different or better ways, for instance not even needing the model_height instanced parameter if there is some way to get the model bounds to extract the height, just not sure how to do that yet.

[cardcraft]

Woah! Thanks, how do you figure out this stuff In Gdshader? I swear I can’t find anywhere to learn

[Sweatix]

@cardcraft

…I swear I can’t find anywhere to learn

Bro…

@Sweatix

Perhaps you should look at some beginner guides for writing shaders:

• Godot Docs Shaders Section
• The Book of Shaders by Patricio Gonzalez Vivo and Jen Lowe

[cardcraft]

y’know, you make a good point

[roc4u1000]

Piggybacking off of @Sweatix 's post, a few other links that might help:

The asset library has some good ones, Shader Asset Library, you can check out snippets of code to explore and learn.

Which you can access in the editor directly also:

But also this forum thread about a youtube playlist of tutorials.

https://forum.godotengine.org/t/godot-4-shaders-a-list-of-video-tutorials/36500

[roc4u1000]

@cardcraft

how do you figure out this stuff In Gdshader?

The Visual Shader setup in godot is a good place to learn if you still want to learn shader coding, or you can just do them all in that setup.

But with the Visual Shader editor you can more easily try things out, even if it’s just simple things like ‘make a gradient from the bottom to top of this asset’, as the nodes have some helpful titles, and then once you get something that you like, you can check out the code it generates (look to the right of the Visual Shader editor window, it’s a piece of paper that has colorful lines on it).