HDRI Backdrop Visualization Tool

It's often desirable to showcase a model in a visually rich context with minimal effort, and using a High Dynamic Range (HDR) image as a backdrop is a common technique to achieve this.The key benefits of using an HDR image as a backdrop for product visualization is that it's relatively quick to set up, it's customizable, and provides beautiful illumination and reflections. However, using an HDR image as a background is not sufficient on its own. For the result to be plausible, there needs to be a fake ground plane that acts as a shadow catcher to ground the object in the HDR image's environment when being lit, creating consistency between the place object for visualization with the background.

The HDRI Backdrop Actor enables you to do all of this and more, improving your product visualization workflow. It automatically handles the following:

• Background mesh (such as a sky dome or custom geometry)
• Ambient lighting from a Dynamic Sky Light
• Dynamic reflections
• Ground projection with shadow catching

Enabling HDRI Backdrop

Before you can use this Asset, you need to enable the HDRI Backdrop Plugin for your Project.

1. Open your Project in the Unreal Editor.

2. Click the Edit in the Main menu panel and select Plugins.

3. Under the Rendering category, locate the HDRI Backdrop Plugin and check its Enabled box.

   Click image for full size.

4. Click Restart Now to restart your Project and apply the changes.

   Click image for full size.

Workflow

1. Import a spherical HDR image that uses latitude and longitude into the Content Browser. You can do this by using the Import Button, Right-Click context menu, or Drag-and-Drop methods.

   Once imported, be sure to set the appropriate Maximum Texture Size and Mip Gen Settings for the HDR image in the Texture Editor. For additional information, see the HDR Image Setup section of this page.

   Use HDRI Haven's site to download some interesting HDR images for free, or you can use some of the ones available in that work well with the HDRI Backdrop Actor. Use the Content Browser's View Options to enable Show Engine Content and Show Plugin Content to display Cubemap Assets available for use. The engine includes some by default that are stored in the DatasmithContent Content/Textures folder.

2. Click the File in the Main menu panel and select New Level. Then, in the New Level window, select Empty Level.

   

3. In the Place Actors panel under Lights, click and drag the HDRI Backdrop asset into the Level Viewport.

   

4. With the HDRI Backdrop asset selected in your level, use the Details panel to set the following:

   Click image for full size.

   1. Cubemap: Choose a cubemap from the available options or drag one from the Content Browser onto this slot.

      Use the Mesh assignment parameter to select an appropriate mesh when using cubemaps that don't display well with a dome or spherical shaped mesh, such as a warehouse or boxed style space.

   2. Size: Adjust the value here to set the size of the mesh that the HDR image is being projected onto.

   3. Projection Center: Select the 3D gizmo to move the projection center to match your camera placement and adjust as needed to reduce skewing and stretching of the HDR image on the backdrop.

      See the HDRI Backdrop Settings section of this page for further details about these and other settings you can adjust.

5. Optionally, add a Light Source and set it to Movable if you want dynamic shadows in your visualization.

   Click image for full size.

HDR Image Setup

When you import an HDR image as an Unreal Asset, it isn't modified by the HDRI Backdrop Actor. You need to manually apply several settings in the Texture Editor first:

Click image for full size.

1. The Imported, Displayed, and Max-In-Game resolution of this HDR image.

2. The Mip Gen Settings should be set to NoMipmaps to use the full quality.

3. The Maximum Texture Size should match the larger resolution value of the imported HDR image — 4096 in this example.

If you do not change these values, your HDR image will not appear correctly. It will have low resolution and look muddy.

HDR Image Backdrop Mesh Setup

Not all HDR images are created equal and may require their own custom geometry to project onto. In the Editor, there are several backdrop meshes to choose from, in addition to the HDR images provided.

Before you can see the available Static Meshes in the asset selection drop-down window, you must first use the Settings to enable Show Engine Content and Show Plugin Content.

Click image for full size.

Use the asset selection box next to Mesh to choose an environment mesh to project the HDR image onto. This can be any Static Mesh, such as custom geometry you've created or one of the three that are provided in the engine.

Below, these examples demonstrate each Mesh backdrop included with the Engine:

HDRI Backdrop Settings

The following settings can be set, enabled, and adjusted from the Details panel of the HDRI Backdrop asset when selected in your level:

Projection Center

The Projection Center of the HDR image on the backdrop should be set to match the height of the camera used to capture the image.

Select the 3D gizmo to define the central location of the projection in 3D space:

Or, you can manually enter these values in the transform text boxes (however, for the smoothest interaction, it's recommended to use the 3D gizmo in the Viewport):

• Z (Height) should be approximately 90 centimeters (cm), which is the average height of a camera tripod used to capture the HDR image. However, the height depends on the height of the camera that was used to capture the image, so you may need a different value.
• X and Y enables you to offset the projection origin. In most instances, this shouldn't be changed.

Lighting Distance Factor

You can add your own lighting to your scene and adjust any of the parameters, however, there may be instances where the lighting and shadow intensity differs from the backdrop. The Lighting Distance Factor enables you to define the ground area around the camera to blend the scene's lighting and shadows to reduce these differences.

The Lighting Distance Factor value is a percentage of the Dome's Size value. A typical value would be around 0.5, or a little higher. Artifacts can happen if this is not used carefully. When set too high, a horizontal line will appear at the backdrop edge, and lower values will help to resolve these artifacts.

In instances where compositing shadows and ambient occlusion (AO) on the backdrop is not needed, you can set the value to 0.

Additional Notes

Below are some additional notes and suggestions when working with the HDRI Backdrop asset:

• Interaction with the Sky Light Actor

  When adding the HDRI Backdrop to your scene, it creates a dynamic Sky Light as a sub-component. If a regular Sky Light exists, it should be deleted. Otherwise, the scene will have multiple Sky Lights which will affect performance, quality, and the desired result in the scene.

• HDR Image Stretching

  To achieve the best result with minimal stretching, the Camera should be placed and looking around the origin of the projection. Adjusting the Projection Center reduces the stretching in favor of relative scaling.

• Ray Tracing Features

  The HDRI Backdrop works with all of Unreal Engine's light types along with supported Hardware Ray Tracing features. The HDRI Backdrop Blueprint includes a Sky Light component by default with Cast Ray Tracing Shadow enabled, which is the prerequisite to do proper image-based lighting (IBL) with ray tracing.

  Also, keep in mind, that additional Ray Tracing features can be enabled and set in a Post Process Volume, when adding one to your scene. You can control Ambient Occlusion, Global Illumination, Translucency, and Reflections.

• Intensity, HDR Content, and Exposure

  The HDR image is fed into and driven by a Sky Light. The content of the HDR image will greatly affect the brightness of the scene. The HDRI Backdrop asset doesn't attempt to perform normalizations of the pixel values in the HDR image to provide a stable intensity regardless of its content. This means that when you switch between different HDR images, you will need to adjust the Intensity since this is not handled automatically. However, this may be added in a future release.

• High Precision Normals

  Changing this G Buffer format option encodes the Default format at 16 bits per-channel. It produces higher quality reflections along smooth, high-poly geometry. When using the default format, you may see artifacts that present themselves as wavy reflections across these smooth, reflective surfaces.

  In the Project Settings under Rendering > Optimizations, use the GBuffer Format dropdown to select High Precision Normals.

  
  

• Reflection Capture Resolution

  Changing this value enables you to have high quality reflections from Cubemaps and HDR images projected onto the skydome and Reflection Capture Actors in the scene.

  In the Project Settings under the Rendering > Reflections category, set a power of 2 value for your desired Reflection Capture Resolution. This resolution will automatically apply to all reflection captures placed in your scene. For the Sky Light, you can set the maximum resolution value you want to use.

  
  

Additional Resources

• NASA's Juno 3D Model provided by "NASA 3D Resources."
• HDR Images provided by "HDRI Haven."