Before and After in Realtime

Hallo everyone,

I want to create before and after slider but in real-time., something like this,
The Before After Image Slider component - Help Center - PandaSuite

So far I could not find any tutorial on it that is why I am posting it here. Is there anyone did this before?

Thank you.

You need an overlay, inside of which are two more overlays, each with an image.


In two overlays - set Clipping - Clip to Bound

Then you need to change the Transform in opposite directions of the image and the overlay it is in.
This way you will get a joint between two images.

1 Like

what if it is not between 2 images, but between 2 level or probably hiding objects when you drag the slider. For example empty apartment, with fully furnish apartment. You slide right is empty apartment, you slide left is fully furnished

Ultimately, there will be two images, but the image in them will be captured via Scene Capture 2D and projected onto the Render Target Texture.

In the Capture settings for an apartment - you can specify a “black list” (furniture), and in Capture for a furnished apartment - a “white list” (furniture only).

Then your “background” picture will be static, and you only need to move the “furnished” one.

I mean in realtime, it is starting with split 50:50 with slider in the middle, then the user can move around, when the user slide right, the apartment will be empty, when the user slide left, the apartment is furnished.

Scene Capture 2D works in real time, as a character camera.

If you want to split the ENTIRE screen this way, then you don’t even need a “background” image, it will just be rendered by the character camera. Just to hide the furniture in the main camera - you need to make the character the Owner of all furniture actors, and set the “Owner No See” flag in the furniture meshes compinents.

Furniture - will be captured by an additional Scene Capture 2D (which is tied to the main camera).

In its settings, you need to select Primitive Render Mode - UseShowOnly List, and fill the “Snow Only Actors” array with furniture actors.

The second option (if I’m not mistaken) is to use Custom Depth and Post Process Material, but I’m not that strong in this topic.