Easy cool vsual effect to apply to an existing image texture while a replacement image is loading?

I need ideas for an easy visual effect to apply to a MeshBasicMaterial texture that has an image attached to it. I need to do this because the user can change wall images in my ThreeJS world, and sometimes the image fetch can take as long as 10 seconds. I know I could overlay a spinner animation GIF but that seems really boring.

Can someone give me some ideas for a cool visual effect that I could apply to the current image while the new image is being fetched, to let the user know the image is being replaced? Some kind of shimmer or wavy something? I tried “pulsing” the opacity using a sin() function but it doesn’t look all that interesting and worse, you can see the void beyond the wall.

Any ideas? If you do, a code snippet would help if the coding expression is not intuitive. I’m much more of a coder than an artist.

Maybe some shader-based animation on the walls while the new image is loading?

Shadertoy is the perfect (re)source for inspiration.

1 Like

Thanks. Are all the code snippets I see at that great site ThreeJS compatible? Or are there some code constructs used in some of the examples that I need to watch out for because ThreeJS won’t be able to handle? Also, are the code samples shown at that site open source?

These shaders are not specifically made for Three.js, so most likely you might need to tweak them more or less to make them work in Three.js. I have never used code from Shadertoy in my work, so I don’t know how easy it is to accommodate them. Maybe some shaders could be easily used in Three.js, while others may need more work (as a coder you will have no problem with this). That’s why said Shadertoy is (re)source for inspiration, instead of (re)source for code.

As for the license, I think the Privacy Policy and Terms of Service page is clear.

1 Like

I have tried a few, there were only minor problems. They were solvable and I documented them.

See from Collection of examples from discourse.threejs.org

Little Shader Book … a bit more complicated …