Fade in animation of 3D object

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

Hi,

I want to build some kind of 3D City builder. For that I don’t want to create extra models for my buildings during construction time, so I had the following idea:

When a building is placed by the user I want to slowly start rendering the object from the bottom:

So if the object building phase is 25% complete, I want to show the bottom 25% of my Meshinstance and so on.

I think I have already seen some games that did this, but I am not able to find them right now.

I hope what I want to achieve is clear.

Is this possible to do in Godot? If yes, how?
Thanks in advance!

2
:bust_in_silhouette: Reply From: SIsilicon

For something like this, you would have to use a custom shader. Are you Ok with that? Good.

First your model is going to need an exact duplicate of itself. This model’s material shall be the one fading.

If your model is still going to be rendered physically based and you want to keep that, then just convert your current spatial material into a shader material. Ok now let’s enter the shader code.

We’ll be adding two new uniforms called clip_height and fade_offset. Any fragments above clip_height in world space will start to fade away. And fade_offset determines how far it will fade up into nothing.

uniform float clip_height = 0;
uniform float fade_offset = 0.1;

Now we only need to add code to the fragment shader. Preferably after everything else.

vec4 world_vertex = inverse(INV_CAMERA_MATRIX) * vec4(VERTEX, 1.0);
ALPHA = smoothstep(1, 0, (world_vertex.y - clip_height)/fade_offset);

That’s all concerning shader code. Now for the animation.

You should have an animationplayer in your tower instance scene. If not, add one. We will have three tracks in a new animation called fade_in. The first track changes the fading tower’s material’s clip_height uniform. It’s starting value should be tweaked until you can barely see it. And its final value should also make it so that the tower is completely visible. The next track determines said model’s visibility. Starts visible and ends invisible. Why? Because this model is now part of the transparency pipeline. And since your going to have a lot of buildings, it would be best to somehow make it opaque again to the render engine. That’s where the last track comes in. This final track shall switch the original model’s cast_shadow variable from shadows only to on. This effectively makes it invisible while the other model fades in, and then seamlessly convert itself from transparent to opaque.

Now it is up to you to play the fade in animation at the time the building gets placed.

#Vote n’ Select :wink:

Perfect answer, thank you so much!!

TobiLa | 2018-05-23 08:21

Is there a chance to enhance this so that I can define the clip_height with a %-value? That would be great :slight_smile:

TobiLa | 2018-10-30 07:15