How to create RenderTarget transition using Shaders?

Questions
, ,
1

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:

2

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
3

Thank you a lot, Micheal!!

4

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?

5

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

6

you can create a transition from scene1 yo scene 2 having 3rd scene. Turn on scene 3, turn scene 1 off, turn on scene 2 on, turn off scene 3. Scene 3 needs to render on top of everything.