Seamless Portals


This page uses a lot of gif images which may take some time to load.

Portals have always been a fascinating subject to me, especially when used to create non-euclidean spaces. I finally implemented my own system in Unreal Engine 4 and even wrote a tutorial on the subject: Creating Seamless Portals In Unreal Engine 4


Demo


Features

The portal system allows the player to view another space and walk to it:


Since the portal can look at another space, it can be used to create non-euclidean spaces. In this case a long corridor is hidden in a very small room:


The system also supports teleporting other actors. In this case small physics based balls that can bounce around. Velocity is of course preserved to make the transition seamless:

When other objects cross they produce a water ripple:


The portal system can be used to create mirrors too. Mirror can be walked through as well. It involves flipping horizontally the player screen after crossing as well as inverting control inputs to make the effect seamless:

The mirror system also handle custom actors which can only be present in one side:

The player is not visible in the mirror as a deliberate choice. This is to make the mirror look like a regular portal.


How It Works

Below are some technical details on how I achieved this portal system.


To make the transition seamless, the player can walk on the portal mesh which extends itself until they are teleported. It was made this way to workaround some UE4 limitations (such as not having the possibility to use a stencil buffer).


In order to improve the capture performance, the system use an off-center matrix projection. It means only a small portion of the screen is captured and the projection point of view has to be adjusted to take it into account. The system use fixed sizes and it jumps between them on the fly to adjust the Render Target resolution. If the portal is far away, this allows to render only a few pixels.


In order to compute the Render Target size, I needed to compute the portal size on screen. This required to clip the portal mesh against the camera view frustum. In the image below the spheres represent the corners of the portal volume in world-space, which follow the screen borders.


The water ripples are made with a water simulation which loop between three render targets: