[SOLVED] Gradually fade/switch between materials via programming?

One of the techniques I want to dig much more into is switching materials (which I know there is a tutorial sample for, if I can unpack it enough to learn how to trigger switches from one specific material to another, rather than through a sequence via intervals).

BUT: is there any way programmatically (or otherwise) to gradually fade from one material to another? I want to show a de-aging process of a car from rusty to brand new.

Any ideas? Thanks, all you geniuses!!

Hi @gnormanlippert,

So transitioning between two materials would need most likely two instances of the same model, where you gradually reduce the opacity of the first one and in parallel increase the second one.

Still that may not give you visually exactly what you are looking for.

A more advanced solution would be to use a custom shader and fade in/out the textures in question on the same material. I don’t have an example in mind, you can start studying how shaders work in PlayCanvas and check the mix GLSL method. That allows you to mix two color values (=textures) based on a numeric value.

Hope that helps!

https://developer.playcanvas.com/en/tutorials/?tags=shaders

2 Likes

Thanks-- I did end up cheating a little by simply switching entities toward the end of the animated transition and masking the switch with some strategic lighting effects. I’m super happy with the result. Thanks!

3 Likes

That’s looks super nice!

Just a remark really -
I just happened upon this question as I have a similar query, but more importantly - I tried out your project build link and have to say: your environment / world in this project is really awesome / gorgeous.
I felt like I was in the next series of Stranger Things… Also, for other’s wishing to try they will just get a blank loading screen unless they comments out a line in your loading script which is now causing an error when attempting to reference a website gif who’s ssl cert has expired on line 15: logo.src = ‘http://georgenormanlippert.com/title.gif’.

How did your project go in the end?

1 Like