3D hologram menu tutorial Part 1 – Coherent-UI and UE4

Hey everybody,

Recently we had a poll in our forum about which game’s UI you would like to see recreated and the upcoming game The Division by Ubisoft was voted number one. In this tutorial we’ll show you how you can create 3D hologram menu similar to the watch in The Division with Coherent UI, 3DS MAX and UE4.

the divison.png&stc=1

On the picture below you can see the finished menu. In part 1 of the tutorial we’ll have a look at the setup of the level in UE4 and we’ll create the needed 3D objects in 3ds Max. In part 2 we’ll create the HTML UI itself using Adobe Edge and the Coherent Labs animation framework.


1. The “anatomy” of the project

The finished project consists of three 3D meshes and two Coherent UI views. The first mesh is a gengon that we’ll use to map the menu on. There is square mesh for the UI above the watch and a mesh for the watch itself. The two Coherent UI views are mapped on the gengon and the square meshes.


2. Model the 3d objects in 3ds max

We’ll use Autodesk’s 3ds Max to model the needed 3D shapes but actually the models are quite simple so if you don’t have 3ds Max you can use free alternatives like Blender.

2.1 Gengon

First we’ll create the gengon that will be used for the menu. To do this we’ll use the gengon tool (located under create/geometry/extended primitives) and it’s properties we’ll setup the size and number of sides.


2.2 Square

Then we’ll create the square mesh using the plane tool (located under create/geometry/standard primitives) and set the length and width to the same value.


2.3 Watch

Then we’ll create the mesh for the watch. We’ll skip the details about it’s modelling as this is out of scope for this tutorial but you can download it from here along with the other meshes.


Once the meshes are ready we’ll just export them as FBX files using the file/export menu.

3. Setup the level in UE4

For this tutorial we’ll use Unreal engine 4.

3.1 Setup the Coherent Labs FPS sample game

We’ll use the Coherent Labs FPS sample game as a base for our Unreal project. First we’ll remove all the objects but the floor as we don’t really need them.


3.2 Import the mesh files

Then we’ll import the FBX files for the meshes by dragging them to the Content browser window.


3.3 Create the material and add the Coherent UI component

The next step is to create the material and add the Coherent UI component to the meshes of the gengon and the square.

To create the material, right click in the content browser and choose new material. Edit it, add a Texture Object, convert this into a Texture Sample, convert it into a Parameter, rename it to “UITexture”, and connect it to the Material’s “Base Color”. Also make sure that the opacity of the texture is connected to the opacity of the material. Create an instance of the material.


Once the material is ready we need to add the Coherent UI component. To do this, right click on the gengon in the content browser and choose “Create blueprint using”. In components panel add the Coherent UI component and set the mesh to use the newly created material instance. Using the same methods we create a blueprint for the square mesh as well.


3.4 Add the blueprints and the watch to the level map

Now that we have the blueprints ready we drag and drop them from the content browser to the level map along with the watch mesh.


Then using the move and scale tools of the UE4 editor we’ll position the meshes and we have our level setup!


Stay tuned for part 2 of the tutorial where we’ll create the HTML UI itself using Adobe Edge and the Coherent Labs animation framework.

Awesome work Bil! I will be waiting for part 2 with anticipation. Keep up the great work!

Really excellent! But shouldn’t the topics title also read Coherent UI? :>

Thanks guys! Yes, I agree that the naming should have been more precise. I’m sorry about that.

Should i change the title like this: 3D hologram menu tutorial Part 1 – Coherent-UI and UE4

Yes, change it please- “3D hologram menu tutorial Part 1 – Coherent-UI and UE4” will be better.

Done. Title changed.

Awesome tutorial! Would be cool to re-implement it using UGM once you have finished it using Coherent :smiley: (Or even using a UCanvasRenderTarget2D to draw to it from BP or C++ like a canvas).

Hey guys, we uploaded the second part of our tutorial: “3D Hologram Menu with Coherent UI”.
Check it out: 3D HOLOGRAM MENU TUTORIAl PART 2 - Adobe Edge Animate - Coherent Labs

Unfortunately, I am a bit busy around Black Friday, but I will try to upload it on the forum next week!

Great Bil! Can you post a video that shows the end result? That would be cool. :slight_smile:

Very cool , that exactly i asked on UE4 twitch even,
Thank you


I am talking about Unreal Engine 4.6 release & his new 3D widget UMG for make something similar like this but your framework is really great too

Hey guys, you can download the mesh for the watch fromhere:

Really innovative UI. Can’t wait to see it fully implemented!