Request 4 part 1 : How To Create a 3D Widget

hello everyone welcome to our learning series of how to use unreal engine for architectural visualization another request that we have received is how to create a 3d widget into your scene so far all of our widgets that we have created have been displayed on the player screen for the 3d widget this is where you want to place different types of widgets inside your scene so the viewer of this presentation for example can interact and perform the function of that widget for our example here we have created a simple 3d widget where the player can move toward for example this sofa and see a small widget where you can display different types of sofa and even also rotate these sofas so they can inspect it before they replace it into the scene now in this first part we will be creating only the widget and and our next video we will show how to replace the surface so let's get started okay so the first thing we need to have is our different types of the sofa or the outdoor sofa as we have created here and the and for example for these sofas i have imported them or downloaded them from a website called minoti and this is basically a company where they publish the 3d model of their fur nature so this is very useful in terms if you want to choose which type of piece of furniture you want to put inside your model and refer it to the original manufacturer so it can help for example the client to choose if this is something that is suitable for his project so i will put also the website and the description below so i have imported uh three different types of outdoor software and i've also created the widget the same way we have learned how to create them in our widgets series and also this one is the widget switcher that we have also learned in our previous video and i will also put the link for that video so uh we it can be easy for you to reach if you have missed that video okay so the first thing we're going to do is create reactor and we're going to call this sofa1 sorry so inside this actor we are going to add a scene clean scene without anything drag it here and add 2d scene capture uh component and this is where the camera is going to capture the sofa so it can be displayed as 3d inside the widget next we're going to create a static mesh and we're going to call this sofa one and inside the static mesh panel here we're going to choose sulfur one and immediately we're gonna see it so make sure that they are not attached together so in case you wanna change the location of the camera uh you will not move the sofa with it also we can add a light so it can like do a custom light for the sofa inside the widget so i'm going to put like for example point light and then let's make sure that the sofa lighting channel had been set to one because zero is what we have inside our scene so if you put it to zero inside the widget you'll see that the sofa is lighting by the the sun uh as in the scene so also for the point light i'm gonna put it to one and let's just move it on top of the sofa and search for a suitable intensity value let's say for example okay 300 or something put it somewhere here and then for the camera i'm gonna position it like uh to the sofa and in the scene capture we're gonna create our render target so i'm gonna put it inside the 3d widget and call this sofa one underscore rt refer to render target okay so currently if you look at that render target that have been created we'll see that the resolution is a little bit off on the edges so i'm going to increase this to 10 24 so it can give us a better look of our sofa so if you have seen we need to bring this camera up a little bit sometimes it lags the preview a little bit so if you move the mouse you'll see uh immediacy immediately how the result will come okay let's compile this and then head to the next step we're going to create our sofa widget so this is basically just an image that we're going to replace later on with our render target but before that we have to create a material from the retina target so it can be applied inside the widget so i'm going to right click and create a material and let's keep it as a sofa one render render target material and then inside the material we need to prepare this to be suitable inside the widget so i'm gonna put it to translucent so we can uh ignore the black by also adding a minus one so the alpha can subtract uh the black color and that's what the rgb inside our missive let's compile let's head to the widget i'm going to choose our sofa one render target material and it will shows an error that this material need to be changed to a user interface materials so we can hit that and immediately we're going to see our uh widget our the sofa uh appear inside the origin so let's compile this we see an error that we need to create uh the nodes for that so let's start by creating our blueprints then for the sofa blueprint and the widget so for the sofa blueprint we're gonna go to the event graph and we're gonna create uh three custom events that can help us to rotate that sofa inside the widget so i'm gonna right click and custom and let's call this let's say for example start rotate let's duplicate it into another one and rotate and also for the last one let's put a mouse move okay for the start rotate we're going to add an input and we need this to be as a vector 2d and for the last one also the same and that's it so we need to create also two variables we're gonna call this can rotate so this is as a condition and another variable uh we're going to call it the start rotate location and we're going to make this as a vector 2d so let's compile this and we can see that the canva option is not ticked off so this is very important so i'm going to drag both of these variable and drag them as a set so we can connect them together so the start location so we're going to connect the start rotate this one and because this is a start rotate so we need to tick the condition and for this one we're gonna blink and rotate and we're gonna leave it as it is and from this one the mouse move we're gonna get the branch so we're gonna bring also the can rotate variable inside here so if it is uh true and i need also to add wallet notation okay so it already brought the sofa static mesh reference instead of dragging this and this is something cool about uh the updates and unread engine so from the mouse move we're gonna my we're gonna need to rename this so it can be actually more practical so let's call this for example mouse location and for this also mouse location and from this we're gonna need to get the mouse location so we're going to subtract the vector 2d and we're going to drag the start rotate location and from this we're going to break the vector so we can get the location we're going to need all only the uh x uh rotation because we using actually the yaw movements not uh the rule or direction so we're gonna multiply this also and let's keep the value by -1 so it can move from right to left and make rotator connect this to the z and then to the delta rotation last thing we're going to do is we need to drag also the set rotation start rotation and connect it here connect the target to our also mouse location and that's it for the sofa blueprint uh notes and now we're gonna move to the graph okay inside our event graph we're gonna create an event construct sorry about that okay and we want to cast this to our character player inside our scene where this player is actually the one that's gonna be able to rotate uh the sofa inside that widget so we we need to make sure that the name is arvis characters so cast to arc this character and then we're gonna get the player character and we need to spawn this uh sofa into the space so we don't wanna see actually the background that is being displayed and to do that we're going to use a spawn actor okay spawn actor from class and we're going to choose our sofa one and then we're gonna spawn this uh sofa by making transform and the location of the x is basically what we need to put so we're going to put this into a very high value because we don't want to see anything behind the sofa set displayed inside the widget so i'm going to put like six zeros as one million it's a very high number but this is to make sure that nothing will appear behind it and then we're going to create a variable from this node and let's call this sofa option 0 1 all right so this is for this part now we need to set up how the movements will appear inside our widget so as we have created three custom events inside our blueprints we need also to create three different functions inside the widget so we can choose from here sorry about that you can choose from here for example on mouse button down and also i need to delete this and also on mouse button up and on mouse move okay for the first one mouse button down we're going to create uh the first node which is the first one we have created start rotate so we're going to call that load start rotate and we need to get actually uh the sofa object reference to put it as the target for this notation so for the mouse location we're gonna create uh the location of the player i'm gonna get the player controller and then get mouse position scale by dbi and then make a vector we can drag it actually from here make a vector 2d and connect the x and y together so this is the first one for this uh we need to connect also the term value to handled so we want to handle this uh rotation and compile so we're getting a warning because we didn't actually finish uh the other uh blueprints or the notes for these blueprints so for the mouse button up we gonna just create our next custom event which is end rotate example and rotate and then we're gonna need only the sofa object reference and this also we want it to be handled okay let's go for the mouse movements okay for the mouse movements we need also the custom event which is mouse move and then we need to drag our sofa option and for the location we need the same thing we have done for the mouse down so i'm just going to copy this and bring it here connect it to the mouse location and for this one we need to put it as unhanded because we don't want the rotation to be activated while the most is moving so now that we have compiled we have finished our widget nodes now let's get uh start testing this and see how it's gonna go so next we're gonna create uh the rest of the widget for the other sofa options so i'm gonna pause the video and create the same thing i have done for the other uh two sofas so we can come back after that and continue with the rest of the tutorial okay so now that we have created our three widgets for the sofas and the main widget that we can attach it to the sofa to be displayed and the scene if we open this now we have our three different sofas and as a switcher inside the switcher so one of the problems that you always face during for the render target is that you'll always see some kind of like an error or maybe a bug i'm not sure so all what you need to do is just open the blueprints and just go to the viewport head over to the camera for example and just if you move the mouse over to this one you'll see that the render target have been adjusted so um we're hoping that this some this is something that's going to be adjusted but as you can see it's easy to fix so again it's the last one so we have our three different sofas ready to be uh attached so so the way to do this there are actually different ways to attach a widget into your scene so it can be a 3d widget you can do this using an actor but you will end up by choosing a screen display display for the widget or an object but the problem is it as a screen it will follow it will keep scaling up as the more you're gonna move far away from the widget so let's uh do it through this way we're going to attach it to the sofa so i'm going to convert sofa to a blueprint class so we're going to call this sofa 3d widget for example okay so we're going to need to add to add the widget to attach it to the sofa and let's choose our widget which have been named as main sofa widget main so for widget and it seems like we need to scale this down so let's put it for example as uh 300 300 by 300 or this is the problem actually when you scale it down it will start losing the content so let's kill it manually that just adjust it to its preferred location let's say for example it's going to be displayed here on the side so you can scale this up or keep it as it is okay a few things just to keep in mind make sure that you choose two-sided widget and also we're gonna take off the off screen this is something that was advised by unreal engine so in case you don't see the widget inside your scene uh just a precaution so um i guess we're okay now to compile and let's see if we can start the scene okay last thing we need to do is to create a widget interaction inside our player controller so the player can interact with the widget so we have done the same thing before with the vr uh widget when we attached the widget interaction to the motion controller so we're going to change the color to something like blue and show debug and for the interaction source let's put it as a mouse instead of the line trace and let's test this out and see okay so if we move to the widget see if we choose nothing is happening let's just check if the widget interaction is enabled receive hardware input this is very important to check sorry about that compile and let's try again so if we move again to the widget you can see that we can switch between the widget and also rotate these sofas uh so the viewer of this presentation can be able to change the sofa the only thing that is left is we need to adjust this widget to appear uh or to rotate as the player is moving around and this is can be done very easily by adding a few notes and the blueprints of that widget so we're just gonna need uh tick event and the widget and we're gonna get the wallet location of that widget first sorry and we're gonna get also the player uh location first we need to get the character and get actor location and we need to connect this to another code find look rotation fine look at rotation sorry so the start is going to be the widget and the target will be our player and we need to get from the deck set wallet rotation so this is our widget we can actually delete this and connect our widget to this and that's it so now we can compile and try again see if this is gonna work so if you move to the widget you can see that now start to rotate as the player rotate around the surface so this is the basic idea of how to set up a 3d widget using this method of course this can be another way of creating this so in our next tutorial we're going to show how we can achieve the function of the widget and how we can replace these sofas into our scene so i hope this video was uh clear and not confusing for you all and how to create this 3d widget if you have any questions please share it on the comments and thank you very much see you in the next video

Channel: THE IMAGENEERS

Views: 23,275

Keywords:

Id: 1rfHC3Xz6OM

Length: 21min 28sec (1288 seconds)

Published: Mon Sep 28 2020