How to Build Portal VFX in UE4?

VFX artist Niels Dewitte talked about the way he creates some awesome visual effects with Unreal Engine 4.

VFX artist Niels Dewitte talked about the way he creates some awesome visual effects with Unreal Engine 4.

Introduction

I’m a Belgian VFX artist. I studied Digital arts and entertainment majoring as a game developer, focusing most of my studies on the programming side of game creation. While I hugely enjoyed programming I also really liked art and from that, a love from VFX was born. VFX for me is a way to combine art and tech into one and being able to enjoy challenges from both.

About a year ago I graduated, and I decided to join a contest. Mostly as a way to practice my craft, but also hoping to get some eyes on my work and feedback. I ended up winning the contest and landing a job in a VR company called nDreams in the UK. My contract has ended a few months ago, so I’ve been doing some other projects as well as learning Japanese and I’m looking for new opportunities and interesting challenges.

Portal VFX

I had just finished my previous project, and while looking for inspiration for the next, I was thinking about how most portal (the game) is one of the only rare examples I know which actually shows you what is on the other end of the portal. I wanted to create something similar yet different. I decided to look into ways to spice it up, ways to further enhance the illusion.

1 of 2

In the game, there is essentially an extra camera in the world which follows the player’s movements relative to the entrance portal. This camera renders into its own render target, overwriting it whenever it detects movement. After that the shader on the portal samples into that texture depending on where it is on the screen.

I have not implemented this in a game, this was merely a study of what I could potentially achieve using this technique. To implement it, however, would not be difficult. Since the player is technically rendering in two places at the same time. The only thing that needs happening for this to work in the game. Is to realize when the player moves through and switch the player from one camera to the other.

Mirrors in games have several techniques that are being used currently. This technique is indeed quite close to one of the more expensive applications, although it is also quite hard to find games who use this technique.

The burning on the edges is actually just a really simple heightmap texture that is being scrolled with repeating UV’s and which smooth-steps over a procedural circle, the resulting value decides the opacity of the pixel.

The parallax is created using a technique in unreal called parallax occlusion mapping. Essentially it scales UV’s using a heightmap which functions as a z-offset and offsets the UV’s in x or y dependent on camera angle. After that, it discards the pixels which would be become occluded

Parallax occlusion mapping is most often used as a more feature-full version of a bump offset, in this case, I inverted the offset so it would move inwards and then extracted the UV changes and manipulated it further to create the flames.

The Slashing Effect

The setup is rather simple here actually. I have multiple textures scrolling over a circular mesh interacting with each other. Then a cookie is used to smooth-step through the resulting pixels and a simple lerp is used to color the pixels. After that, I layer multiple of these meshes on top of each other with different animations to create interest.

Only a simple low-cost material is used for all of the variations, giving me a lot of creative freedom.

The Kanji works slightly differently. I modeled out the kanji in 3ds Max and unwrapped it in such a way that it would reveal the parts as if I was drawing it. Multiple layers of those models are then used to create different parts of the effect.

Working with Unreal Engine 4

UE4 has an enormous range of powerful tools. With a bit of creativity, you can create most of what you want to create through a combination of cascade, materials, blueprints, and animation.

The biggest challenge is to find ways in which to convert an idea in your mind or on paper to the screen without literally making what your idea is. If you want to make fire, chances are your first thought would be to simulate fire. Unreal can’t simulate realistic fire, so your job is finding a way to make it look as if it was simulated without actually simulating it.

Often it helps to think in layers. In the case of fire, for example, you might want two directions of movement in your flame. Sparks outlining the edges and smoke, but not too much because otherwise, it might take too much attention. A simple material can help you create flames and give them direction, stacking a few on top of each other helps to create the variation you are looking for. Sparks could be created both through particles or through smart use of meshes and materials. Smoke is a difficult subject, depending on the style you might even have to fake volumetric lighting inside of the smoke, but that too can be achieved using smart use of the material editor.

The only thing that ends up lacking most of the time is input, which is where photoshop comes in. Essentially Photoshop is an easy way to edit an array of data. You can use it visually, but you can also use it to create just that, data.

Niels Dewitte, VFX Artist

Interview conducted by Kirill Tokarev

Join discussion

Comments 1

  • Steve

    Very nice! Do you know if this technique would work in VR?

    0

    Steve

    ·5 years ago·

You might also like

We need your consent

We use cookies on this website to make your browsing experience better. By using the site you agree to our use of cookies.Learn more