Smooth transition between textures with GSAP

I need to make a transition between several textures using GSAP, I know how to do that via fragment shader but it’s not an option because I can only mix two textures that way and also I am looking for more flexible timing options. How do I change the value of the texture loaded by the TextureLoader from GSAP?

Animating texture data on the CPU will be hopelessly slow. Transitioning between different textures should be implement in shaders.

Any idea how to change between four or five textures from fragment shader? as mix() only allows two value transition.

I guess you are looking for:

You can apply the concept of this post when using more than three textures, too.

Yes, but this doesn’t actually do any transition between the textures but blends them together, even if you implement the transition (e.g using time uniform). Yes it makes a transition but the textures aren’t in their pure form (i.e they are kind of blended).

Put textures in an array and on each iteration set uniforms with items of desired indices.
For GSAP, use repeatXXX properties: https://jsfiddle.net/prisoner849/dns0xhkz/

5 Likes

My man!!
Works like charm.
Thanks.

@Lonely_Wanderer You’re welcome :beers: