Real-Time Unreal Engine 5 Car Configurator Tutorial with Pixel Streaming - UE 5.2

hello everyone and welcome to the developer series by eagle 3D streaming where we go over Unreal Engine projects to help provide some information on best tools tips practices for your pixel stream projects today I have with me morteza who is an Unreal Engine developer at Eagle 3D streaming morteza how are you today good day to you Quinton and good day to all of the viewers my name is monteza and I'm working as an Unreal Engine developer with eagle 3D streaming and today we are going over some tips for using car configurator and maybe other configurators in Unreal Engine and pixel strip absolutely so the game plan is morteza Will first hop into editor and go over some optimization strategies uh specific or they can be helpful for Car configurator Projects and then I will go over how you can prevent your image from pixelating when streaming using Eagle 3D streaming morteza all yours the best thing that can just bring out that oomph in your product is the lighting in your scene so the first tip that I have when you're using Unreal Engine for demonstrating or presenting your product is using Lumen Lumen is this new technology that under that epic developed it can make the workflow much easier and the lighting is just looks much more natural than the old way of page lighting so it is simple as that there is nothing to think about it and it doesn't need that much of a technical knowledge to use Lumen just enable it the engine will take care of everything so when you're working with lights you will need something to see how your lights are affecting the wood so what we have here is a chrome ball the way to create a chrome ball is very simple you just put a sphere in the map and you'll find a chrome ball material this is one of the epics uh the unreals default materials apply a crumble material to this and right here you can see in this mirror-like sphere All of the Lights as you can see I have one light here and there is another directional light that is our sun over there and also this car is applying some lighting I can see how these lights are affecting my world so for example if I turn off my erection light you'll see it just goes away from here as well it can be specifically useful when we're working with the skylights so if I turn off my Skylight in my uh outliner here you can see in my Chromebook the sky is not affecting the world anymore simple as that so one more thing that we have to talk about is Ray tracing this is the Big Talk everywhere in the gaming industry and of course in Unreal Engine and in product demonstration in the presentation as well so here we have a rectangular light a race light just to be short so just to show the difference between Ray traced shadows and normal Shadows I'll turn off that that direction light so the only light we have here is this red light as you can see in these Shadows over here let me just select this okay as you can see in these Shadows they look kind of too sharp it's almost black in this area that it comes gray and then there is no Shadows here all you have to do is to go to this go into settings of your light and just enable Ray tracing it is simple as that as soon as you do that you'll see this gradient of black to white or white to black as you wanted and the shadows will look much more natural and much more better but of course taking take that in mind that using Ray tracing of course needs higher spec graphic cards so it is something that you should be careful about so let's get to get rid of this lighting this rectangular light here and re-enable our directional light so we can see the scene when we're working with the scene something else that you should you should always be careful about you should always pay attention to is optimization and unreal already gives you all the tools that you need for optimizing optimizing your scene the most useful tools I'll first the first is the light complexity and the second one is the Shader complexity and we'll go over them so first of all we have live complexity when you turn it on the screen is not broken everything is working perfectly you have this bar over here that shows from black to white it shows how bad or how good your lights are so as you can see this area is considered good so what I'm looking at this this is considered a good lighting because it's blue this is getting into the bad area this is a light that is inside the trunk of this car uh it's a it's kind of a bad light in a bad place but it is not that bad so just try to keep your scene as simple as possible so there will be much pressure on your GPU and you know keep that fpsi another thing that we have to take note here is the Shader complexity so as you can see here we have this a green area of the ground the wheels are quite green most of the parts of the car are ready though and suppose White the green part again we have green to White from good to Bath when we're using reflective materials or when we are using in this case translucent materials for the glass this is to heavy on the GPU so try to use them as few as possible do not use too many translucent materials or reflective materials or even Wars do not use emissive materials because MSC materials can mess with your liking as well so that is all I have for the optimization there is one more thing that is important in the car configuration and that is the configuration part actually so in Unreal Engine we have this thing called variance manager all you have to do is to create a variant so we have we already have a car variant here see this one here so we have these different variant sets each variant set can change a different type of the chord so we have this part for Wheels if I change it you will notice that wheels will change there we go and you can also apply this to the color of the card so this can be done in the editor or in play mode as you can see in the you will see in the next part in the pixel streaming part you'll see that this change in materials can be done in runtime too how you can make it it is simple as that it is as simple as it can be you can use the auto capture once you enable it and you create a new variant here once you enable it you can change anything in the scene and it will automatically be captured so in this case I'm going to select the hood here and I'm going to apply a yellow material that I have already prepared simple as that now we have this is recorded here the hood material is going to be yellow when we apply this variant note that I'm only applying this to the hood not the hotel whole car so you'll see that whatever color we're using it will only change the hood color so let's play and see how it works there is a chrome ball over here so when you go into the colors we have the normal variants that are already that already exist in this project and then we go in this part you'll see that the only Yahoo changes color it is very simple to create new variants and epic has made it as simple as possible that is all I have to talk to talk about today I'll hand it to Quinton to talk about the pixel assuming part and she'll show you guys the ropes according thank you very much morteza that was very helpful and insightful okay folks so next step of course is we've got to get your project into the hands of your customers so first thing we'll need thank you very much morteza that was very helpful and insightful okay folks so next step of course is we've got to get your project into the hands of your customers so first thing we'll need to do of course is to upload your project to Eagle's platform check our documentation on how to do so and once you generate a streaming URL then you can begin streaming so of course one thing that we always want to be aware of is image quality and there's one key parameter the quantization parameter that's very important when it comes to this so for those of you who are curious It's a value that helps manage the quality of the video that's being sent over the internet if you sell if you set a low quantization parameter value then your video is going to be high quality with lots of detail but the file size is going to be larger on the other hand if you want to set a high quantization parameter value we also just call it QP because it's a lot easier to say then your video quality is going to be less so we can actually control the QP value directly from Eagle 3D streaming's control panel right here in my video demonstration we have a car the same car configurator and image quality is nice and sharp now what I'm going to do is I have a handy tool that will actually throttle bandwidth so what I'm doing right now is I'm actually going to simulate what it'll look like if we then play this application in a low quality environment so you can see I've reduced bandwidth and dun dun we have the fuzzy image of Doom which most customers especially if we're thinking about doing a car configurator where image quality is of the utmost importance this isn't going to be acceptable so the way that we can get around this is using our Eagle 3D streaming control panel and what we need to do is you'll first go into your config and go into the developer options and then you'll want to pass this parameter to your application so pixel streaming encoder Max QP and then specify the value now again a higher value means lower image quality so it is inverse which is kind of tricky to remember but basically the lower I set this value the more it forces webrtc to maintain image quality now of course we don't get this for free we do lose frames but in our experience we notice that clients prefer to maintain image quality over frame rate so that's how we provide this option of course if you need frame rate in your application just set a high QP value but I'm going to go ahead and set this to Five I'll click save and then I'll click broadcast and all this is doing is now it's updating my stream with my new QP value of five and then once once the application loads I'll again throttle the bandwidth and give a brief demonstration of us maintaining maintaining image resolution uh through the QP value so now I'll just go ahead and set that so that frame rate is bottled bottlenecked and we can see that now the clouds aren't moving as fast frame rate has dropped significantly but what has not happened is we didn't get a fuzzy image and that's because we're forcing webrtc which is a technology that pixel streaming uses to send your images to maintain image quality over frame rate that's our demonstration for today morteza provided information about how we can optimize your project in editor and I showed you how you can prevent a fuzzy image using Eagle 3D streamings control panel these videos are all about providing you the best possible information so please give us feedback on these videos what you would like to see ways that we can do it better because that's all we really care about is just making your pixel streaming projects awesome thank you everyone for joining us morteza thank you so much for being with us today I'm Quentin Anderson with eagle 3D streaming yes go for it with eagle 3D streaming yes um and we will see you on the next developer series thanks everyone bye thank you guys goodbye

Channel: Eagle 3D Streaming

Views: 3,606

Keywords:

Id: 5emquzcJIUQ

Length: 13min 46sec (826 seconds)

Published: Mon Jul 03 2023