Announcement

Collapse
No announcement yet.

[Tutorial] Live 3D Content in your HUD or UI

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

    [Tutorial] Live 3D Content in your HUD or UI

    My tutorial showing how to put live 3D content into a game's HUD or UI is finally done.

    I posted a preview of the tutorial a few weeks back, and thought that I'd have it done long before now. Some unexpected business travel put me off my pace, though, and I darn near forgot about it. Then Chance went and put the video in the Community Spotlight and that guilted me into getting off my butt and finishing it.

    I apologize for the audio in a few spots. I was running a 102° fever through part of the recording and was sick as dog. That resulted in lots of coughs and other distracting noises getting captured in the audio. I've edited most of it out, but a few coughs, sniffles, and other noises made it through. You may notice a few dead spots in the audio where I removed the sounds.

    It's a very long video, clocking in at more than an hour. I went very much step-by-step through the entire process, setting up dynamic materials for the character, building the little color change spheres, building the proxy character, and putting that character into the HUD and syncing it with the player character. I even included a short section on minimizing the performance impact of the SceneCapture2Ds. More experienced people may wish to skip the first few parts, so I've put in a marker so you can skip forward to the live content in HUD part.

    You can download the project right here.

    So, here it is. I hope it's helpful to some of you:


    #2
    Just a note - Kitatus pointed out that this approach doesn't yield a fully opaque character. If you want the character to be fully opaque, here's an alternative material you can use:
    Attached Files

    Comment


      #3
      Awesome work Jeff, been looking forward to this one!
      Storyteller - An immersive VR audiobook player

      Dungeon Survival - WIP First person dungeon crawler with a focus on survival and environmental gameplay ala roguelikes

      Comment


        #4
        Very nice, bookmarked it to sit down and go through when I get a chance. Nice work!
        Acclivity Game Studios. Making a BP FPS, Tutorial Series on Blog : On Unreal Wiki : Twitch

        Comment


          #5
          Originally posted by John Alcatraz View Post
          One real problem I found is that you can't use any Post Processing, so no Anti Aliasing, which makes it looks quite aliased. While you get a not-clean edge if you mask against a color, there you can use AA so the edge will be much smoother.
          (From your other thread on this) Did you get a chance to look into this and find a way around it?
          twitter: @NaveedHIQ

          Comment


            #6
            Originally posted by Naveed View Post
            (From your other thread on this) Did you get a chance to look into this and find a way around it?
            Naveed:

            I really haven't had a chance to look, but if I'm feeling better tonight, I'll try and take a look at it.

            Comment


              #7
              Hope you get well soon mate. Awesome work on that tutorial btw.
              twitter: @NaveedHIQ

              Comment


                #8
                Yeah that's really awesome. great work!

                Comment


                  #9
                  Naveed:

                  Did a little playing around, and found a few things. Neither Temporal AA nor FXAA work on the scene capture as you probably already know. But, there are some ways to improve the look.


                  First, if you change the render target's material from Translucent to Masked, you get slightly less noticeable aliasing around the edges of the character. You have to use the OpacityMask pin instead of the Opacity pin, and you still have to run it through a one-minus, but it does look nicer.

                  Another alternative, albeit a costly one if using a large render target, is to oversample. If you set the render target texture to 256x256 and then actually display it at 128x128, the downsample softens the edges in a way that's nearly identical to anti-aliasing. Unfortunately, you need to go at least 150% to really see the results.

                  Still looking at options, but let me know if either of those is a viable option for you.
                  Last edited by Kneebiter; 09-15-2015, 01:08 PM.

                  Comment


                    #10
                    It's long video, but it worths it to take more than hours to watch.
                    Awesome, Teff_lamarche! Your video is really helpful for me.
                    Thank you for your sharing!

                    Comment


                      #11
                      Nice video.

                      The great things is that you are only focusing on the making the thing working but also give some hint to implement it the right way like activate a rendertarget only when it's used.

                      Comment


                        #12
                        Originally posted by jeff_lamarche View Post
                        Still looking at options, but let me know if either of those is a viable option for you.
                        I will give these a shot, appreciate you taking the time to look into it.
                        twitter: @NaveedHIQ

                        Comment


                          #13
                          Hey Jeff, I really like your solution to this problem. However I found a problem with it.. You're consistently running at around 40%-60% performance.
                          You don't normally see this in PIE because it has it's own hard coded settings and FPS smoothing that stays relatively low, but if you unbound and unsmooth FPS you can easily see the issue.

                          I modified your project to show the issue. I got rid of the face, and only kept the Body on tab press. I also have the FPS unbound in Standalone.


                          Observe the following results
                          Without Capture
                          http://imgur.com/0A2VnhS

                          With Capture
                          http://imgur.com/JT2E48h

                          Full download:
                          https://www.dropbox.com/s/dl1j4pxzi7...Issue.zip?dl=0

                          Comment


                            #14
                            Thanks so much for the tutorial, it's fantastic.
                            I am having a problem though. When I go outside the sky sphere to drop the camera and the actor, they both appear black, like they are unlighted. Also, when I go into the Render Target, the actor does not have the transparency deal covering it. Thus, I am unable to get rid of the background when it shows up on the viewport. I'm using 4.8 if that makes a difference. I can't remember if when I started the project, which template I started in. I don't know if that matters

                            Comment


                              #15
                              This approach does not seem to work on UE 4.10.1. For some reason I get all white for the alpha channel of the render target. I also tried the project you've supplied and when I converted it to 4.10, it had the same problem. The current material returns opacity 1-x, and as x is always 1, the face/full body images are not visible at all. Tried removing the 1-x and feeding the x instead: the face with its background appears.

                              Comment

                              Working...
                              X