3D Model Viewer for Inventory Systems

Ever since Unreal Engine 4.0 came out I’ve had an inventory tutorial on my blog. I’ve had several people ask me how to create a 3D model viewer for use in such a system. Regardless, this sample project is stand-alone from anything I’ve done previously. You can find the download link to the open-source repository on GitHub below.

Made with: Unreal Engine 4.11

modelviewer_overview

capture-site

Download on GitHub

How it Works

The primary asset for this project is BP_ModelViewer, containing the model to render to texture, a few lights and a SceneCaptureComponent2D. The capture component renders to a RenderTarget (RT_ModelViewerOutput) which you can sample as a texture in any other material.

It’s important to note that the lights in the Blueprint are using Lighting Channels. This is a new feature in 4.11, allowing you to set dynamic lights to only affect certain light channels. I’ve used this to filter out any Directional Light that may otherwise affect the lighting of this model.

On BeginPlay the mesh is moved outside of the default Skybox. This is to ensure we don’t render the sky material into the texture so we get a nice transparent background.

The Blueprint contains two important functions to use, SetMesh and Rotate. They don’t require much explaining.

Feature Set

The viewer is pretty straight forward with a simple set of features to give you a solid starting point to build the exact viewer for your own project.

Configurable Light Setup

You can set up your own lighting in the Blueprint by using any of the Light components. The default comes with 3 point lights, using channel 1 (instead of 0) so it only lights the model and does not affect the scene. The model is set to only receive light from lighting channel 1 so it is not affected by any other light (eg. Directional Light) in the scene.

modelviewer_lights

Auto focus

The model re-scales itself to a desired approx. size so it will always fit the viewport.

Rotate

The model can be rotated in local or world space.

Using the viewer in UMG

The project includes a simple Widget and UI Material to demonstrate how this viewer can be used for your own HUD. The output RenderTarget is nothing more than a Texture and can be used on other materials (see sample scene)

modelviewer_umg

Issues

  • There is a noticeable aliasing on the meshes. At the time of writing I did not have a solid AA solution for this yet.

References

Download on GitHub

14 Responses

  1. Thanks for this, it was very useful.

    For those people who require two (or more) different models viewed at the same time, on EventBeginPlay, the ModelViewer is moved to new location outside of skybox. Duplicate the BP and all of the Outputs. Change the location and make appropriate name changes in the duplicates to the duplicates. Repeat for more.

  2. Hey Tom, I remember trying something like this some time ago and it turned out the render to texture was pretty resource intensive and it wasn’t quite worth it. Did you notice any framerate drops doing this? Thank you.

    • Hi jignb,

      Running it locally on a 980 Ti, so that is not a good performance reference. There are more efficient ways of doing it, while I haven’t checked it out you could do it in a sep. Scene like the StaticMesh Editor so it would remove a bit of the rendering overhead.

      – Tom

  3. Hi Tom
    Awesome feature, but how did you managed to make the background translucent? The BP is outside the Sky_box, so must be something in the material, could not reproduce the same with your demo project =/

    • Yep! The background is translucent when you render it outside the skybox, check out the sample materials on how I used this opacity.

      – Tom

      • Hi Tom. Yes, but using your own project it doesn´t work, I needed to change the material to made them work and show up. but yet, the translucency does not work. It is strange

      • Tom, ok, it worked when I set the Scalability to EPIC… do you have any idea how to keep this working even in low level of scalability quality?

  4. I’m wondering…. Is doing this on a separate UWorld at all possible?. I find the solution of moving things into obscured places seems a little less elegant than desired. Just a thought.

    • Possibly, never checked, this is fairly isolated and easy to use. Not a lot to go wrong here.

      I’ll have a look at UWorld to see whats possible, the overhead and if its worth it.

Leave a comment on this post!