How to create RenderTarget transition using Shaders?

Hello, everyone!

I’m studying Three.js, specifically WebGLRenderTarget, to create a website with impressive transitions between scenes.

I’ve reached a point where I can switch between scenes, but now I’m facing a new challenge. I’m trying to apply a shader effect when transitioning between scenes, but I haven’t been successful so far.

I’ve pushed all the code to a GitHub repository because I want to share this once it’s done. I haven’t found any similar examples using Three.js—only with React Three Fiber (R3F), and I couldn’t use the R3F content as a reference to achieve my goal.

Repository: GitHub - CarlosHenriqueMkt/threejs-rendertarget-transition

To explain better, I created two scenes and two buttons that show the respective scene when pressed. I want to apply a shader transition each time I click to switch between scenes.

Shader: Shader - Shadertoy BETA

Can anyone give tips to achieve this goal?

Thank you! :slight_smile:

Here is a example that does what you’re asking for: https://www.dm.unibo.it/~casciola/three.js-master/examples/webgl_postprocessing_crossfade.html

And a video tutorial that uses the same concept to do something new:

1 Like

Thank you a lot, Micheal!!

I tried a lot to make the same effect but based in click events and I’m getting a lot of bugs. Do you know any content using the same logic but with transitions triggered but clicks?

I’m looking for something like what happens in this website: