Building 3D apps with Net MAUI and Evergine | .NET Conf 2023

hello hello everyone welcome to this Nonet con session my name is kavier I'm software engineered at Microsoft in the donet ma team and I AMOM I am research director at playing concept and we are really excited to be here today in this session to talk about how you can combine and interact with 3D models from adonet Maui applications everin it's a crossplatform industrial Graphics engine and with the latest versions include support to donet Maui but first of all what is donet Maui donet Maui is the crossplatform framework in net to create applications for desktop and mobile with the following supported platforms Windows Mac OS IOS and Android we have support for other platform thanks to Partners like tyon from Samsung and the support for Android and iOS is using Don net for Android and iOS while in Windows is using wi y 3 and on Mac OS is using Mac OS Catalyst net Maui is an evolution from sharing forms and the approach is exactly the same it's using a bridge to mat from the exraction to Native controls but now is using an SDK style project it's a single project one project to manage all the platforms we have also support for Comm line and we can develop donet Maui applications using visual Studio for Windows or Visual Studio code using tooling like hoto and today in this session we are going to talk a lot about many times a lot about the 3D objects models how to integrate then in donet Mau applications how to H manipulate that objects and that's mostly because in the last year in the d ma team we we have a huge amount of request to have a 3D model visualization have the opportunity to create small games have the opportunity to uh create 3D controls etc etc for example imagine the following situations you have a product store application and you want to get the opportunity to see the product in every angle before bu the product or for example imagine a m with different stores and you have the list of stores but you also give the opportunity to see all the all in a 3D model with the different Flo and be able to uh see exactly what's the position of a specific store to directly to that location everything is an industrial crossplatform 3D engine developed in C everything is being used on Industries such as airospace architecture healthare energy or entertaining among others in this video you can see some examples like digital twm H viral training holographic events or industrial simulations H all of these projects are using ever right now one of the most important feature of everything it is so flexible to integrate with other technology so H you H can use it to enhance your both a new and existing application with 3D contact and now it is the in the latest version of everin you can use T Magi as well okay let's take a closer look at the everin architectures everything includes Bing pretty much any graphic Library D 11 12 open G bulam metal and with GL and coming soon with GPU to writing in cart evering is commit to keep Pace keeping Pace with the latest net version and tools ensuring the best possible experience for our users on top of this architecture everything include integration with a wide range of platform including Windows Androids Linux iOS web and in the other side AED reality and virtual reality platforms such as hollowland meta quest uh or Pico so you can use everything as a cross platform 3D tier to make your apps okay finally we are going to talk about the license everything is completely free to use with no license fees and no royalties okay making it suitable for both commercial and noncommercial project for the other side to be clear everin business model revolve around providing additional Service Such a priority support the engineering team provide assistant and technical support for any question or problem you have you may have using averaging another is the S code asset that gives you total asset to the evering sole and Professional Service that include training session one to1 ation proof of concept and new features according to your need um that is all but if you have any question you can check out the everin website uh or write email to info@ ever.com okay so far we have done a presentation of everin and donet Maui and also we know a little bit about the integration between them and I'm really excited to see how this work and see real go so let's go to pass to the first of or demos and for the first demo I am thinking about the following probably any donet Maui developer in the world knows this project because it's the project template every time that you create a new donet Maui project you see something like this where you have use a vertical stack lay out that you put every control one below the other and we have use an IM match some text h a single button that you increment a counter every time that you tap the button what do you thing if we take this 3D model and we replace the static match with this model okay it's a good idea maybe then the goal of this demo we are going to create a mobile app using Maui and include 3D asset H okay we are going to extend the usual okay Don with play project with this content okay okay let's go okay we're going to start once you install everything on your Windows PC okay the first one you see the averaging launcher uh averaging launcher provide you different functionality and allow you to um install different ever versions and you can create and dat uh projects and even you provide you a quick asset to this sample documentation and support okay um but we are going to start from the beginning so we click on the add new button okay now now we need to type our um uh project name my first okay my first project project okay we need to set the location the project and you select the the version of the averaging that you want to use okay and that part we need to select the platform or template that we want to use for the project so um here we need to find the Maui play okay and check this template for create our project okay and finally we click on the create button and everything in studio will be open okay that is the is everything Studio okay okay um maybe the first time is a lot of things so we are going to uh brief about the layout of the averaging okay here okay the thing okay but we are focus on the um left area of the layout okay the upper area we have the project Explorer project Explorer is similar to Windows Explorer you have a collection of folders okay here like a Windows Explorer and is where you store your asset for your project 3D as okay but is that different folder and you can make a a hierarchy of folders here okay when you select folder in the bottom part on the bottom area you can see the aset detail panels okay here we have different assets uh now we have the Thea exene okay it's created with the templ but we can add more assets uh if we click on the plus button or in the cont menu so we can create exent effect shaders comp Shader particle system material and so on okay this is this area and now we are focus on the other side okay the layout here we have the exene hierarchy okay the exene is that we are seeing now and an exene a single have a collection of entities and a single entity can be a camera a light in that case we simulate sound and atmosphere is the environment all this environment okay okay when we select uh entity in theing hierarchy in the bottom area to we can see the entity detail panel okay here we have all the information of the entity like the name the tag and a collection of components that components Define how the entity is okay so um for example is how is the behavior of the entity or the render or the yeah or the data that store this entity okay so now for our X demo we are going to create a folder here in our content name models okay and now we're going to okay here we have to drag and drop in as detail panel our uh 3D model okay and you can see how how the averaging Studio automatically import this asset okay and now we have uh geometry and we have all the asset Associated to the file okay like a material texture and so on okay if we click on the file we can see the model viewer okay and we can explore the the model that we are Lo in the aing studio okay and see it's great and now we are drag and drop to our scene okay now okay we can move our uh bot Don bot to our scene we can see the The Entity hierarchy of the model okay with the different part of the model okay here and yeah we can put our model in the center of the scene okay maybe here great okay and now we need to move our camera to move the B uh in front of the camera there remove the the okay now it's the here okay here and now okay we have our boat and remote maybe here to put the bot in front of the camera okay here great okay and now we want to um disable the the dynamic environment uh okay yeah and in our camera which remove the movement the Beav to move the camera um uh okay in the background color we want to select white color okay great okay now we have our Sim but finally we need to add a new component our uh BS entity okay we push the plus button here and find the spinner spinner component okay that component here allow us allow you to remove sorry the rotate the The Entity and different axis okay in our specific case okay we have to see the the local axis to the vertical okay is the set so in this angle say we set the velocity of the animation rotation so yeah we have now our scene complete we can compile the windows solution it's automatically from here and we see our s with our doet B rotating in the vertical axis pretty cool great great now we're going to uh jump to the visual H Visual Studio 2022 and open the ma solution okay this is the ma solution great the solution uh contain two projects the first project is a independent platform uh project with all relative to the averaging it's not necessary now and in the the other project is the Maui project with the usual playay of the of the the ma and here okay uh we have normal but with an extending additional things to this play for example we have the aing view everything view is a a control okay to to to integrate 3D canvas on any page of the Maui okay okay and for our samples okay we have a normal main page with a label on a averaging canvas okay for our example we need to H copy the typical or usual template of um of ma without the image of the Don pot okay here okay yeah we have the scroll with the typical text um the bottom okay here and we need to uh yeah create two column two rows the G okay here change that and now we have a two rows with the same side and we have first the C 3D canvas with everything and after that the scrub View with the usual element of the M plate okay but we have a a method to pick on with the button so we need to uh copy this method to here okay we going to copy the click okay here is the method and we need to add a um count sorry is uh prity in found okay okay great okay it's great okay and finally we are going to simulate our application like a half a asper radio similar to a mobile application so in the initialization of Windows which sets this size okay that's it so now we're going to build um a round our project yet um okay we have a sorry we have a fail here yeah fixed um we're going to see the so our Pro yet okay uming okay all right okay uh we have our uh done we template but now instead use a image we have a 3D model and that work like the template of Mai so it's great yeah now the template is even even better um now we are going to take a look to the more detail about the project no for how how everything was integrating on it okay we have seen the fce of for demos it's a hell War introduction and we have seen how we can replace the static imch from the donet Maui template for template using a 3D model and we have seen that uh we use the ever gen view that is a donet ma control that allow us to create a 3D combox where we can use integrate and Vis 3D cont but how it works so you can imagine that internally what is happening is that we are using handlers the handlers is the approach that donet Maui use to map between the distruction to every platform native part so in this case with evering what is happening in every platform is like we have a class in every platform that is mapping from the averaging view to in the case of Android an Android Surface View and we are going to use buan on iOS we are using again another class another evering view Handler using an swap chain using metal and on uh windows we are using direct X using a a swap chain panel now let's go to see the code but first of all let's do a quick reminder and a quick of notes about handlers as we said at the beginning of the session Don ma is an evolution of sharing forms and if you work it and develop it with suar fonts previously you probably know about the renderers the renderers was the approach that shamarin FS used in the past to uh map between the exraction controls and every native part this use in this way usually you create a custom control like for example a custom entry then you introduce the logic that you need in your control like V double properties commands Etc to consume the control is easy use use the shaml uh declaring a name spacing shaml and then use the control start using the properties Etc what happens h under the hood in this case is like you create a subclass of view renderer in every platform where you overwrite probably the on element chain method and the on element property chain meod that's was easy to use but at the same time create a lot of confusion most because we receive properties like old element or new element and sometimes you don't know hey where where should we create uh or subscribe to events and when where we must unsubscribe and release resource that we take to create n contol sometimes we we have this kind of Confusion And also we use the sport renderer attribute to register this renderer and in this way when your application start in the startup time Shaman forms use it reflection to register your renderers and be able to use all these the stuff in your application in D Maui all this change it mostly to fix all these problems that I mentioned before avoid the confusion with the on element chain avoid all these private methods and allow a bigger extensibility options and also remove stuff that impact negatively in the performance like for example the assembly scanning that Su forms use in combination with reflection and what we have now is custom handlers now we subclass from The View Handler class and we have direct methods uh with a naming that directly declares what it's going to happen in that method like for example create native view it's exactly the method where we are going to create the native view associated with every arct control we have a mapper that is at the end a dictionary of properties that respond to every property chain and we register the Handler with the ad Handler method let's go to visual studio to see this with with the evering handlers so we have the evering view it's a control that inherit from from the Maui View class we have a couple of properties the main properties the application property where we inject theing application that we created before in the Virgin studio and now in every platform I'm going to put the focus on Android but it's Prett is similar in the rest of the platforms we create a class that inherit from The View Handler like we have seen before in the view Handler we directly we can see that we are mapping the evering view asra control to the Android Surface view in this platform in Android we have the create method uh create platform view method where we are going to create instantiate the Android Surface View and then to every to every property chain we have a mapper that is mapping to a static method in this case map application and map application what is doing it's mostly creating all the necessary stuff initializing you know the the audio device this the Windows system and if we need more more stuff like setting the WID eight of the graphic contest Etc so we are internally instating everything necessary to display our 3D content finally we need to re register the Handler how we can do that well usually for single handlers we can create that directly in the Maui program class using the Builder the Maui app builder with some extension methods registering directly here the handlers a good recommendation is create an extension uh meod class mostly if you have several handlers and you want to pass in this meod different parameters to allow different configurations based on different versions Plus platforms or whatever you require in your application this is the good approach to do that and here is where we are using the ad Handler method to register the handle this is not using of course reflection this is not using assembly scanning and again like we have seen before we have now uh direct methods more easy to use and knowing when and how the properties are Mapp it and when and how we are creating our uh platform view in the previous demo we demonstrated how to create a donet ma application containing 3D content now I'd like to show you a more complex demo where users can interact with the 3D content from the donet Maui controls this demo is a Showcase of a e-commerce mobile application and how to communicate between the donet Maui application with the evergain 3D content yeah this is the design of our e-commerce mobile app in fact all all the image of this demo were automatically generated using AI today is crazy all regarding to thei yeah AI is everywhere we we we must include EI in the session just in a single slide anywhere but it was important okay uh okay we we have three different screen okay home or main screen usual and gallery view with the collection of sneakers and a product detail view where users can explore a product from different angles change its colors and side and add it to card so the third screen contain the 3D cvas and the user will be able to interact with it changing the color all right uh let's switch to visual studio 2022 okay we have our solution here with two projects the first one is the every independent platform uh project and the second is the Maui project and here view folder we have have our three different view Pages the home view Galler View and sneakers view okay and here in this view we can see uh our main GD with three rows and we have the 3D canvas with everything here and along we have a check box with the a command to color chain okay uh deploy the the projects okay here and this is the home view this is the gallery view okay and now this is the sneaker detail view okay and we can move um around the sneaker and in this area in the radio we can change the color of our sneaker okay okay but I really really love that uh that color swap animation and I have a question about that because we have seen the Shamel code that this this foror picker is made with the donet m controls and in some way you are communicating and sending a message to the 3D content to to change the color of the sneaker and and make an animation right yeah how that works how is that implemented yeah with J the VIS studio and here in the command okay we have a uh in the view model of The View okay here we have this command Okay color command and we we want to change the color we call to the controller service controller service part of the averaging application so you can resolve this service uh into the avering view so with that is the interface that you have to to to do something or to communicate something to averaging part okay if we move to the averaging project service we have the controller service okay here we have a different uh SC to to change the color because we we need to change the floor material the sneaker material and the background color of the camera so all this reability is from this uh this service and this is the interface with all component for example here we have custom component the camera where we and we we make the animation so the controller service call to the material of the floor material of the sneaker on the camera to play this animation and this is the the way the peline to to communicate between two two things know to to environments and okay okay so far we have seen a lot of code with different demos from a single demo a hello world where we have used the do M plate and include a 3D model step by step passing with a more complex demo where we communicate between a donet mai control and the everin 3D uh model and that's pretty cool but probably many of you have a question in mind and is is this ready for production and I'm pretty excited about this because you already have a customer history because you already are using evering integration with donet Maui including 3D content in a publ application right yeah brain brain is a mobile app for Android and iOS focus on Mental Health it provide users with the with a collection of psychological assignment tests that they can use to evaluate themselves all the user interface was creating using net Maui combining with a 3D virtual Avatar using all the powerful of everythingg when a user open the application he will be welcomed by this virtual Avatar and you can speaked with him to Achi that brain uses openi Technologies to add intelligence to the Avatar and Microsoft cognitive services to reproduce his humanik voice in this video you can see how all these Technologies fit seamlessly and that is all H we would like to share some interesting Resources with you and H we hope you enjoyed this session yeah we are excited to see what you can create mixing everg 3D content with donet ma applications hope you have enjoyed the session and happy recing see you soon bye bye

Channel: dotnet

Views: 5,928

Keywords: .NET

Id: vWAXrP69QX4

Length: 30min 1sec (1801 seconds)

Published: Thu Nov 16 2023