Announcement

Collapse
No announcement yet.

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

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    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.



    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.
    Attached Files
    Last edited by ryanjon2040; 11-12-2014, 05:19 AM. Reason: Changed title

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

    Comment


      #3
      Really excellent! But shouldn't the topics title also read Coherent UI? :>
      KITATUS
      "Information shouldn't be behind a paywall, It should be free for all!"

      Comment


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

        Comment


          #5
          Originally posted by Bil View Post
          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
          Unreal Issue Tracker - Desktop App for Unreal Engine Issues
          Unreal Nexus - Create Share and Experience!

          Unreal Engine 4 World-Wide User Map

          [PLUGIN] Aws Gamelift Client Plugin
          [TOOL] Create your own binary release of UE4 from GitHub source
          [Marketplace] Vehicle Soccer Template
          [Marketplace] Objective Waypoint System
          My UE4 Tutorials and Misc Tools

          Lead Programmer at YetiTech Studios
          Your Friendly Neighborhood
          Satheesh PV (a.k.a RyanJon2040) | Twitter, Instagram, Facebook, LinkedIn, YouTube, Google+

          Comment


            #6
            Yes, change it please- "3D hologram menu tutorial Part 1 – Coherent-UI and UE4" will be better.
            Last edited by Bil; 11-12-2014, 05:19 AM.

            Comment


              #8
              Awesome tutorial! Would be cool to re-implement it using UGM once you have finished it using Coherent (Or even using a UCanvasRenderTarget2D to draw to it from BP or C++ like a canvas).
              Sr. Engine Programmer @ www.playspace.com - moritzwundke.com
              Remember: be polite and respect other peoples opinions - Join the Unofficial Unreal Discord Channel - Found a bug? Then use the Bug Report Form to get it fixed ^^

              Comment


                #9
                Hey guys, we uploaded the second part of our tutorial: "3D Hologram Menu with Coherent UI".
                Check it out: http://coherent-labs.com/blog/3d-hol...-edge-animate/

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

                Comment


                  #10
                  Originally posted by Bil View Post
                  Hey guys, we uploaded the second part of our tutorial: "3D Hologram Menu with Coherent UI".
                  Check it out: http://coherent-labs.com/blog/3d-hol...-edge-animate/

                  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.
                  Unreal Issue Tracker - Desktop App for Unreal Engine Issues
                  Unreal Nexus - Create Share and Experience!

                  Unreal Engine 4 World-Wide User Map

                  [PLUGIN] Aws Gamelift Client Plugin
                  [TOOL] Create your own binary release of UE4 from GitHub source
                  [Marketplace] Vehicle Soccer Template
                  [Marketplace] Objective Waypoint System
                  My UE4 Tutorials and Misc Tools

                  Lead Programmer at YetiTech Studios
                  Your Friendly Neighborhood
                  Satheesh PV (a.k.a RyanJon2040) | Twitter, Instagram, Facebook, LinkedIn, YouTube, Google+

                  Comment


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

                    SORRY EDIT :

                    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
                    Last edited by ChrisTm; 11-29-2014, 01:43 PM.

                    Comment


                      #12
                      Hey guys, you can download the mesh for the watch from here:

                      Comment


                        #13
                        Really innovative UI. Can't wait to see it fully implemented!

                        Comment

                        Working...
                        X