Extending Editor Viewports & Rendering In Slate Widgets

Overview : Written in UE5.4

In this article, we will look at extending the Static Mesh Editor Viewport by injecting our own realtime, simple profiling graph. We will focus on making the bulk of the system in plugin modules while making a few targeted modifications to engine source in order to expose hooks for our needs.

Result

The static mesh editor now renders a Frame Time Divergence profile graph. Moreover, the viewport's default scene has been replaced with a blank one and runs a turntable animation upon opening. In the preview below, the editor is being forced to hang for periods of time to demo the profiler.

Let's Begin

This article requires making strategic edits to the engine source code [ Install Instructions ].

Use UE5.4 build if compatibility with this article is desired.

Step 1: Plugin Module Structure

The plugin is in large part boiler plate apart from a few additions which are outlined in the following prerequisites section. Namely the delegate binding.

Step 2: Prerequisites

• Open the .plugin file and switch type from Runtime to Editor for both modules:

• Open the Build.cs files and match the following dependencies

We will now be making modifications to Engine Source.

• Engine Modification A: SMEE Build State

  Build.h - Add the following. I placed mine at the bottom of the file.

• Engine Modification B: Delegate Addition

  StaticMeshEditorModule.h - Add the following

• Engine Modification B Continued:

  StaticMeshEditor.cpp - Add the following

• Engine Modification C: Viewport Client Modifications

  For my purposes of rendering the bacteria seen in the video above, I wanted to make the following adjustments:

  • Remove mesh outline

  • Remove demo scene (i.e. skybox and floor)

  • Automate a turntable for all meshes opened in static mesh editor

  StaticMeshEditorViewportClient.cpp - Add the following:

This completes the engine source code changes.

Step 3: Module Setup .h / .cpp 

The module cpp and header files are all boiler plate with the exception of the following:

SMEEModule.cpp

Follow the code comments for breakdowns, notes, and suggestions.

Step 4: SMEEViewport.h/.cpp --- SMEE Module

The SMEEViewport source file implements container widget (and sub-widgets) in static mesh editor viewport. Slate details will not be covered in this article. However, further information can be found here. Follow the code comments for breakdowns, notes, and suggestions.

SMEEViewport.h

SMEEViewport.cpp

Step 5: SMEEWidgets.h/.cpp --- SMEECore Module

The SMEEWidgets source file implements numerous compound widgets which allow us to accomplish both simple and complex tasks with standardization. Follow the code comments for breakdowns, notes, and suggestions.

SMEEWidgets.h

SMEEWidgets.cpp

Step 6: SMEEData.h/.cpp --- SMEECore Module

The SMEEData source file represents a centralized location for information, utility functions and more. It is fairly lightweight for this demonstration.

SMEEData.h

SMEEData.cpp

Step 7: Build and Run

Build the project and run the editor. Once the project is loaded, double click any static mesh to open the static mesh editor. The widgets should now be rendering. If you would like to see the blank scene instead of the standard floor and skybox, toggle vertex colors on, then off again. Then choose either lit, unlit, or other shading mode.

---

Additional References

Slate Framework