Portal Transition Effect using Level Streaming - The Gabmeister


Taking inspiration from Ratchet & Clank: Rift Apart, I experimented with a portal transition effect between maps using level streaming. I used Epic’s Infiltrator Demo and Zen Garden for the 3D environment assets. Additionally, I used Wraith from Paragon for the character model and Dynamic Flight for the character flight controls. In summary, here’s a diagram of the portal transition effect:

https://thegabmeister.com/wp-content/uploads/2021/06/PortalDiagram.jpg

Let’s take a closer look at what’s happening under the hood.

Level Streaming

Level streaming allows asynchronous loading and unloading of levels during play to decrease memory usage and create seamless worlds. You can find references in the Level Streaming documentation, particularly this guide which uses blueprints instead of level streaming volumes. Furthermore, Alan Willard talked about the different techniques that you can use to handle loading levels seamlessly in this video. The process of loading/unloading huge levels can cause obvious stuttering. To minimize impact on performance, you should consider creating multiple sublevels for your 3D models: Sublevels

https://thegabmeister.com/wp-content/uploads/2021/06/Levels.jpg

After setting up the sublevels, I then made a blueprint that does the loading/unloading between Infiltrator City and Zen Garden.

https://thegabmeister.com/wp-content/uploads/2021/06/image-5-1024x182.png

Take note that the order of these nodes is important. If you use a Sequence node or function nodes, this can potentially cause some of the sublevels to be loaded/unloaded out of order. This introduces some visual glitches caused by multiple light sources, reflection captures, and post-processing volumes being present at once.

If you encounter performance issues such as slow level streaming, follow Ben Zeigler’s guide on optimizing and debugging memory. Moreover, there are cases when you find assets which are not supposed to be loaded into memory. You can use tools such as the Reference Viewer and Size Map Window to dig down deeper. Lastly, it is best to debug on a packaged build due to the inaccurate numbers you get from testing in the editor.

Level Transition Zone

In the persistent level, I set up a transition zone which is hidden somewhere in the map. This is basically a big inverted sphere with a Cubemap material. Upon entering the portal, the player is teleported into the center of this sphere where he cannot see the environment assets. This allows me to unload the current level and load the next level without the player noticing.

https://thegabmeister.com/wp-content/uploads/2021/06/image-2-1024x558.png

Transition Zone

Shattered Dimension Hole

This effect is a mesh with 2 layers: the center which has a cubemap material, and the surrounding quad which has an emissive shattered glass texture.

Mesh in Blender