How to Render VFX and Post-Process Effects in 360 Degrees in Unreal Engine

How to seamlessly render VFX and Post-Process Effects in 180 and 360 Degrees in Unreal Engine such as Particles, Volumetric Fog, Dirt Masks, Water, Bloom, Lumen and others.

Last updated 2 days ago

Overview

When rendering from the 360 Camera/ Component, some VFX and post process effects have to be customised to ensure a seamless output.

In many cases, the issue is screen space effects that are used in Lumen for rendering speed optimisation and clash with the cube faces of the cameras that create the 180/ 360 output but there can also be issues with the behaviour of global illumination effects which need time to settle or work differently at different resolutions.

In almost all cases these seams can be dealt with via the tips below. In the extreme circumstances that they don’t you can use path-tracing which will render much more slowly but doesn’t suffer from screen space issues.

Lumen

When you are using Lumen for Global Illumination, seams can appear at the edges of the cubemap which renders the raw pixels of the 360 Camera. These steps should solve them:

360 Camera Settings

  1. Face Blend Percent: This will overscan the different cube faces and then blend them together at the edges to remove seams.

    1. Try this value at 2.5% and then increase as required:

      full-image
  2. Cube Face Rotation: Using the Cube Face Rotation settings can prevent seams by ensuring that elements that affect screen-space effects are always positioned inside a face (see guide in OWL 360 Camera docs): This is very useful for keeping a specific content feature within a single cube-face:

    1. For example, there is a clear seam at the bottom of the cylinder here:

    2. Using Show Debug Face Colors and Cube Face Rotation position the seams so that they do not cross the emissive material:

    3. Now the seams will be invisible:

Unreal Settings

These settings will have a significant impact on the Global Illumination in the scene and should only be used if the Face Blend Percentage doesn’t solve your issues.

  1. Hardware Ray-Tracing: Change this setting in your Project Settings. This can reduce seams because Lumen relies less on screen space effects to generate lighting:

  2. When camera movement or lighting changes are fast, some Global illumination seams can be caused by Lumen Final Gather Update Speed.

    • Raise the Lumen Final Gather Update Speed to decrease the time it takes Lumen Light changes to propagate to the final image at a performance cost:

  3. Local Exposure can cause global illumination seams:

    • Add the Console Variable r.LocalExposure with value 0 to Movie Render Queue to remove these.

    • You should test this in Editor first to check the impact on your lighting. You may need to make adjustments to get a similar image once the seams are gone.

  4. Turn off Screen Traces: This fixes a lot of interior seams caused by bounce lighting.

    • For the Post Process Volume or the 360 Camera Actor in your scene, search for Screen Traces, tick the left checkbox to enable the setting, then untick the checkbox to disable Screen Traces

  5. Remove Meshes (that cause seams due to Indirect Lighting) from Lumen using the Mesh Details panel to disable one of the following:

    • For Software Ray Tracing, untick Affect Distance Field Lighting.

    • For Hardware Ray Tracing, untick Visible in Ray Tracing.

    • You can also separate complex objects in your modeling software to ensure that Unreal Engine can shade them more accurately, which can improve Lumen reflections and reduce seams.

Super Resolution

  • Raising Screen percentage can be a way to increase visual clarity or crispness because it gives the anti-aliasing algorithm more pixels to select color and detail from.

  • This can can be used alongside high sample counts to balance fidelity and smoothness for the highest quality final output:

  1. Ensure that you are using TSR as your anti-aliasing method and then use the Console Variable r.Screen.Percentage and set this to a value >100 and <200:

  2. In this example, the left hand image is a 200% and the right 100% screen percentage. Both have 32 spatial samples. You can see a significant difference in the clarity of the foliage at the top of the image but in other places it’s much less obvious.

  3. Increasing screen percentage will significantly increase your render times and VRAM usage so should be used carefully.

Particles

  • Niagara systems and Cascade particles use Sprites that always face the camera which can create seams.

  • This can be fixed by making the particles Velocity Aligned instead of Facing the Camera.

You will need to make the changes below for all Particle Emitters in a system to reduce all seams. Mesh renderers do not need to be changed.

Niagara Systems

  1. Go to any of the Emitters in the system and in their Sprite Renderer section change the Alignment to Velocity Aligned:

    1. This means that the Sprites now turn based on their own velocity instead of always facing the camera.

    2. N.B. If you have large Sprites you will start to see that they are 2D as they rotate at a 90 degree angle to the camera, but with smaller particles this is invisible.

    3. Ensure that the Bounds of the particles are large enough that they are captured by all of the faces of the 360 Camera.

Cascade Systems

  1. Change the Screen Alignment in the Emitter section in Cascade systems to PSA Facing Camera Distance Blend:

Motion Blur

  • Increasing your Sample count can fix jagged edge geometry, Motion Blur and other distracting or unrealistic artefacts in renders.

  • Raising Anti aliasing Temporal Sample Count in Movie Render Queue Settings can help to average out lighting calculations over seam overlaps, and smooth out distracting artefacts.

  • A Temporal Sample Count of as low as 4 alongside DLAA with Motion Blur Separable ticked can give a smooth moving image in most scenarios.

  • Ensure that you preview any Anti Aliasing changes at a lower preview resolution before submitting a large render job to check that your changes are actually fixing your issues (so you don’t increase your final render time for nothing).

Volumetric Fog

Sometimes artifacts will occur only when the camera is moving, and the seams will clean themself up after a period of time. In this case you can use Anti-Aliasing to remove the seams.

  • Volumetric Fog can cause seams because volumetric effects are aligned to the camera frustum (the camera’s view) so the cubemap of cameras can have differences between them.

  • Directional Light and Sky Light settings can also cause seams with Volumetric Fog effects.

  • Follow these tips to remove seams:

  1. In the Details panel your Exponential Height Fog Actor set a value for Fog Density (we recommend to start with 4):

  2. Fix the color by going to your Sky Atmosphere Actor and changing the Rayleigh Scattering Color to grey or white:

  3. Make your fog more interesting by adding Volumetric Fog in the Exponential Height Fog Actor Details Panel:

  4. This may cause some seams in the shadowed areas where objects occlude the Light Sources in the scene which can be fixed by going to the Directional Light Actor and unchecking Light Shaft Occlusion:

  5. In more complex scenes where the actors cover the sun more or have more complex shadows you may have scenes caused by Ambient Occlusion.

    1. To fix these, add a Post Process Volume as described here, then go to Ray Traced Ambient Occlusion and set:

      • Enabled to True and

      • Intensity to 1:

    2. You will lose some lighting detail when enabling Raytraced Ambient Occlusion.

      • Some of the darker areas can be restored by increasing the Ray Tracing Ambient Occlusion Radius but this can have a smudgy effect on the shadows so should be used sparingly:

  6. If you don’t want to enable Raytraced Shadows, you can also try disabling the Cast Volumetric Shadow setting in the Skylight which will reduce the contrast in the volumetric shadows:

  7. With this these tips you can achieve seamlessvolumetric fog like this:

    full-image

Light Shafts

Light shafts are based on the sensation of having light leaking through a surface’s gaps from above in a dappled God Ray effect.

Because this is based on a light ray being above the head of the of the viewer, it can create seams in the 360 camera cube map because each faces sees the light ray differently.

There are two suggested solutions:

Face Blend Percent

  1. Add a Face Blend Percentage of 10 which will soften the edge of thelight shaft enough for the seam not to be visible

Fog Card Method

Fog cards are deterministic, meaning they will be the same every time a render is run.

This helps for art direction but also for tiled high resolution renders because will be no difference in the output for each tile.

  • If there is a light shaft or Fog Element that requires direct authoring such as a light shaft that shines on to a particular object, or a fog element that need to be deterministic Fog Cards can be a good way to create this:

  • Fog Cards are created using Translucent Materials on geometry such as planes.

  • The 2D nature of a material on a plane means that the fog effect can break if viewed from the side angle.

  • So these effects are most effective when used as many very subtle layers, from a distance or combined with a depth based opacity to make them fade when the viewer is close to the geometry.

  • Excellent fog card materials can be lifted from the Dark Ruins Megascans Sample Level and other free example levels:

  1. To create a simple fog card, add a plane to the scene.

  2. Create a new Material and set the Blend Mode to Translucent, use an Image Texture and connect the Alpha or R channel (if your fog is on a black background) to the Opacity output.

  3. Use a Color Ramp node to tweak the opacity.

  4. A flow map is a good way to add some subtle animation to a static texture.

    1. The material from the Megascans Sample Level has a great flow map example.

    2. Copy and pasting the nodes marked flow map, followed by the section marked Base Color can be a way to add a flow map to your own custom material.

    3. An example of a simpler animated fog card can be found here:

    4. Copy this material first:

    5. Then copy this material:

    6. Finally, replace any of the texture samples with your own Fog Texture.

    7. If recreating this material from scratch a flow map will need to be added, this is a simple noise texture.

  5. You can reference the Depth Fading Fog Cards section below to further improve this Fog Card Material.

Depth Fading Fog Cards

  • Fog cards will clip and cause unwanted harsh edges when passed through like in this image:

  • To fix this, create a distance based fade effect to control the opacity of the fog card as the camera passes through it.

  1. This Fog Material has a Dynamic Opacity and Depth Fade node setup that can be connected to an existing Alpha texture through an Multiply node:

  2. This gives parameters for depth fading which can be tweaked to create a subtle fade out to a fog card as the camera comes closer to it.

  3. Below is an example of some subtle fade parameters:

High Resolution Fog

In high resolution renders Volumetric Fog Pixels can become more visible.

This mostly occurs in light shafts but affects all volumetric fog in a scene.

  1. To reduce the visibility of these volumetric pixels, add a Console Variable for

    r.VolumetricFog.GridPixelSize.

    1. The default Value is 8 and should be lowered to reduce the size of the Fog Pixels for a more desirable visual result:

  2. Additionally, if Volumetric Fog or light shafts remain pixelated or unsmooth, raise the r.VolumetricFog.GridSizeZ console variable:

    1. The default value is 128 and this value should be raised to increase quality:

  3. These settings will have an effect on GPU overhead so should be used sparingly and incrementally increased until no more visual fidelity is found.

Depth Based Post-Process Effects

Post Process Materials that use the Scene Depth buffer can cause visible seams due to each face having a different Screen Space Calculation.

This can be avoided by modifying the the Scene Depth input of the Post Process Material:

  1. Open your Post Process Material in the Material Editor and check if it is using the SceneDepth buffer:

  2. In the Material Graph, delete the SceneTexture:SceneDepth node:

  3. in place of the SceneTexture: SceneDepth node add the nodes shown in the image below:

    1. Add an Absolute World Position node (found by searching World Position) and a Camera Position Node:

    2. Add these two nodes as input A and B of a Subtract Node

    3. Add the result to the Vector 3 input of a Vector Length Node

    4. Add this new calculation as the input for the rest of the material logic to create a seamless Depth Pass-based material:

  4. If the Material’s output is unsmooth or jittering each frame, change the Post Process Material> Blendable Location of the Material to Scene Color Before DOF:

  5. The result is seamless depth-based post process materials:

Dirt Mask

Dirt Masks overlay a 2D image on to the screen, so won't work when enabled in the 360 Camera’s Post Process Settings, since the Dirt Mask will be applied to all cube faces identically, so the image will be repeated.

Instead use the method below:

  1. You can wrap the Dirt Mask texture around a Sphere:

  2. The position the Sphere around the 360 Camera:

  3. The viewer’s field of view will be significantly more zoomed in, so dirt masks will need to be more intensely packed together.

    1. Full image

      full-image
    2. Example field of view in VR headset (might need more dirt mask detail).

      full-image
  4. The viewer will also be free to look around the whole map, so dirt masks with a central focal point may not be as effective.

Bloom

Our seamless bloom algorithm is currently only available for our 360 Camera not Movie Render Queue. Until that is complete, please use the tips below.

Bloom can cause seams due to a disparity between the six camera faces arising from screen-space calculation mismatches.

  1. In most cases, adding a Face Blend Percentage of 5 can help (increase as you need):

  2. When the camera is moving quickly, seams may still be visible, this can be mitigated by adding temporal Anti Aliasing Samples.

  3. In the case of highly complex bloom, currently we would recommend adding bloom in post production software such as DaVinci Resolve or After Effects.

Water Reflections

Large bodies of water and other large reflective surfaces can cause visible seams.

It’s not always possible to totally fix this, but we can remedy it in most cases with these techniques.
If your seams are caused by moving water, then you may be able to use anti-aliasing to remove them.

First try these steps to see if they will stop seams in the water already in your scene:

  • In your Sky Light, set Cast Volumetric Shadow to off to stop any seams in the water caused by lighting.

  • In your Volumetric Cloud Actor Material double click the m.simpleVolumetricCloud and set the Wind Vector to 0,0,0,0 tu turn off seams caused by moving clouds.

If not, follow these steps:

  1. Open the Environment Light Mixer and create a Sky Light, Atmospheric Light, Sky Atmospheric, Volumetric Cloud, and Height Fog:

  2. Add a Water Material to a Ground Plane or Floor Mesh.

  3. For this example we will use the M_Water that comes with the Engine Content:

  4. Edit the Water Material so that when close to the camera it will have no reflection.

  5. This will result in a fade out rather than a harsh line in the reflections:

    1. Make a New Folder in your Content folder and call it Water:

    2. Navigate to the Water Material by clicking on it in the Outliner or Viewport then clicking the Browse to Assetbutton:

      full-image
    3. Copy and paste the Water Material into your newly created folder:

      full-image
    4. Rename this asset M_Water1:

      full-image
    5. Double click this Material to open it. You will see a Material Function, we need to copy this as well.

    6. Click on the Material Function MFAttr_Water. Then use the Browse to Asset button in the Material Expression Details panel.

    7. Once you have this asset located, copy and paste this into your new Folder and rename this MFAttr_Water1:

      full-image
    8. Now go into the M_Water1 Material and swap the new MFAttr_Water1 Material Function in:

    9. Double click the Material Function MFAttr_Water1:

    10. Add the Nodes in the image below and hook the Lerp B in to the Specular Output:

  6. Now you can create a Material Instance of your new Water Material:

  7. Add it to the Floor Plane (or wherever you need):

  8. You can change the MaxDistance and Offset so that you get a smooth fade from no specular to full specular reflections:

Waves

  1. We can use the same technique but for another Material Function within the new MFAttr_Water1 Material Function we created above

  2. Find the MF_Wave_3B_Normals Material Function in the MFAttr_Water1 Function and make a copy of it.

  3. Connect the new MF_Wave_3B_Normals2 to the left and right nodes (replacing the old one):

  4. Double click on MF_Wave_3B_Normals2 to open it, then add the below highlighted nodes and connect them into the 'A' Input of a Lerp, with the original output going to the 'B' Input of the Lerp.

  5. Copy the Wave Strength Parameter and rename it to Wave Strength0, then copy the Nim and MF_normal Strength nodes to result in the image below:

  6. You will now be able to control the wave Max Distance and Wave Offset to make the appearance of the waves dependant on their distance from the camera: