Up next in 10
Make The Impossible Possible: Create Amazing 3D Games with Mixed Reality in Power Apps!
Nov 6, 2023
Power Apps has released Mixed Reality capabilities. It is now possible in Power Apps to build mixed reality applications.
With the built-in components, you can view an object in 3D or view the 3D model in Mixed Reality and measure distance, area and volume.
With these features, I built a Pokemon3D game app which is one of the finalists of the Power Apps Demo Extravaganza 2020 contest.
In this session, I want to inspire you about using Mixed Reality in your Power Apps and I'll give you the steps, tips and tricks and what kind of problem I have encountered, so you don't have to reinvent the wheel.
After this session, you can start building your Mixed Reality app.
About Speaker:
Michelle is a Microsoft 365 Consultant and an MVP of Business Applications. She has broad IT experience and has obtained several certificates in the IT sector. Since 2013, Michelle has focused on SharePoint Online and has subsequently deepened and broadened her knowledge of Microsoft 365. Now she can exactly advise for which purpose, which application(s) you can use within the Microsoft 365 suite to fulfill the wishes of the users.
Throughout the years, Michelle has already participated in many Microsoft 365 migration projects and has given many user adoptions training on SharePoint Online, Planner, Forms, and Microsoft Teams.
Michelle is an MVP of Business Applications. In her projects, she integrates the possibilities between Microsoft 365 and Power Platform. She also specializes herself in Power Automate and Power Apps.
Also, she makes an active contribution to the Power Platform community, is one of the leaders of PowerApps4Kids and participates in various Power Apps and Power Automate User Groups and speaks at conferences and Meetup meetings.
Conference Website: https://www.2020twenty.net/power-platform-virtual-conference/
C# Corner - Community of Software and Data Developers
https://www.c-sharpcorner.com
Show More Show Less View Video Transcript
0:00
I just want to introduce myself a little bit, but Simon, you did it already
0:08
I'm a Microsoft 365 consultant and also an MVP on business applications and I focus on
0:16
SharePoint Online, Microsoft Teams and also fascinated with all the things you can do with
0:21
our platform. In my daily life, I'm a consultant for a lot of customers, and then I introduce them how
0:31
to use Office 365, of course, and do some like adoption and migrations, but also like
0:40
how to use Power Automate to digitalize your digital process, your business processes
0:50
Over here you can see my Twitter handle and LinkedIn profile page, so feel free to get connected
0:59
And also if you have any questions about the mixed reality part on Microsoft Power Automate
1:06
or Power Platform, you can ask me. Here's a short agenda that I would like to show you
1:16
a little short introduction about mixed reality components and then I actually I want to do it
1:24
another something different this time I want to show and demo first so you can get an idea how
1:32
the mixed variety component works then we step over to some steps and tips how do it by yourself
1:40
and and then finally I show and Pokemon 3d app which I created together with my with my kids and
1:51
yeah I just want to evolve and ask them and and let them know more about power apps so maybe they
2:02
will they will try it once by themselves so let's get further here is an
2:13
introduction about mixed reality a blog about from from Microsoft it was
2:19
introduced in April 2020 and I joined the power apps community call in May and
2:30
And Risa Dorani showed us how you can create nice-looking 3D models in the Power App
2:39
So I was very interested in that. I did my try, too
2:47
The mixed reality component in Power Apps, you have actually four different parts
2:53
You have a few in 3D, a few in mixed reality. and you can also measure the actual size
3:01
and then paste the popups, the 3D model into the environment. But in this part of my demo
3:13
I only focus on the first two. And then I think it's good to show you a demo first
3:21
just to let you know to show this on on the screen I have to use my mobile device because
3:32
the laptop camera doesn't support mixed reality so it won't work on my laptop so every time if
3:42
you try this by yourself you have to publish the app to your power app and then try it on the mobile
3:49
device, let's say on your tablet or on your mobile phone. So to show this, I have to switch over to my, sorry
4:02
I do a mirroring. Just give me a second. And then I can show you my screen
4:14
If I get connected, then I can start mirroring my screen
4:28
Yes, there it is. So now you can see my mobile phone
4:36
I think, yeah. And then I switch over to PowerApp. I see there's a little delay, but no problem
4:48
I put my mobile phone on, and over here you can see a gallery
4:56
with a list of nice-looking Pokemon models
5:08
Let's say I want to use Squirtle. I select scrotal and then on the right hand side you can see this is on the
5:18
right hand side with the blue marker this is the fill in 3d model components
5:25
you see I can swipe I can zoom in I can rotate the screw the Pokemon the 3d
5:32
actually and if I press on view in mixed reality button then the 3d model will
5:45
show up I have to move over to the ground and swipe move it a little bit to
5:54
left and right and when I see the dots then it's the model is loaded let's try
6:03
oh here it is then I press press on the circle and then you see the 3d model pops up
6:12
I can create a shot and then um if I go back then actually I have to do a settings to grab the whole
6:23
photo and then I can do the next step. But this is a 3D model that you can load in PowerApps
6:36
And then with use of the camera, it will make it a nice looking mix variety
6:44
from a 3D model and the camera. So, I'm not sure, is there any questions so far
6:55
Yeah, good, I think everyone's enjoying your session. It looks so cool
7:04
Yeah, it's just a little bit about the question, is it a game
7:10
Yeah, I'm not sure, but I see it as a game possibility in Power Apps
7:18
So let me stop the screen sharing. And then sorry So I stop my screen sharing and then i can go back to my my um
7:40
my power power point slide okay um Okay. I go to the steps and the tips and then I can show it in Power Apps how I have created this
8:02
First of all, if you're using a Microsoft Windows laptop, then in the Windows Store
8:13
you have a 3D viewer, 3D builder and a paint 3D. It's a free software that you can install
8:20
and some are pre-installed already, but you can use those software tooling
8:28
to create your own 3D model or with a paint 3D, you can paint the colors on the 3D model that you created
8:38
Also, they have a lot of preloaded presets, 3D modeling. So let's say you want a 3D circle or a square block in 3D
8:53
then they are good to go. You can use it and then give it a color and save it
8:59
But it's important to save the 3D model as a GLB file extension, because that's the file type that Power Apps support
9:13
That's the first thing you have to do. So I also think the hardest part is to find or create your 3D model
9:24
That's the one. I download the 3D models from the internet, from free resources, so I'm not craning that by myself
9:37
Then the second step is to upload the 3D models to a source where PowerApp can communicate or locate the file
9:47
So it can be a SharePoint document library, it can be a OneDrive location or GitHub
9:54
In my case, I am using GitHub as a free source to save all my GLB files, the 3D models, and also the images
10:06
So I just load them into my Power App, and then I'm good to go
10:15
In the first part, you have to enable, if you open Power App Studio, you have to enable the Mixed Reality feature
10:24
But as I noticed, this is already generally available. So you don't have to go to the advanced settings and then enable this
10:33
But if you cannot see the mixed reality features in your Power App Studio
10:39
then you can enable this by the advanced settings experimental feature. Then insert the 3D model
10:51
In the media, you can scroll down and you can see View in 3D
10:59
And also, View in 3D components, the View in Mixed Reality component
11:06
There's a Mixed Reality Extra button. And if you click on that, you can choose a View in Mixed Reality
11:13
Finally, the last step is to set the right source where to link to the model from Internet
11:25
and also set the unit measurements. Let's say it's in centimeters or it is in meters and then
11:34
the object height, the width and even the depth if you want to. But in my case, I only have to
11:42
set the object width and the height. And standard, it is in meters
11:47
So the first time when I opened my 3D model, the Pokemon was larger than my house
11:53
So that was not my meaning. So I have to change the unit measurement to centimeters
12:03
and then put them, let's say, 30 or 40 centimeters by a high of 50
12:13
So that's the hardest part. Of course, the final step is to publish it on the app
12:24
Publish this to your PowerApp and then give it a try. If I switch over to the 3D model itself
12:35
here is the PowerApp Studio. And in the app on start, how I have done this is to create a set of the location, in this case my GitHub repository
12:51
And then I create a collection to store all my Pokemon models
12:59
Let's say I have here my GitHub. I upload all the GLB files and the PNG, the images
13:06
I upload them into my GitHub. I have an extra 3D model that I haven't in my gallery, and that's the eMoga
13:18
So I can just add an extra. I have here. I can upload one extra collection, extra item to my collection
13:32
and I reload my app and over here you can see I have Emoga into my power app
13:44
and here is the 3D model. The gallery is located its reference to my collection
13:53
Pokemon 3D models and over each item I have preload loaded in the images, the
14:05
settings, the height and the width. So the gallery show all the items and the
14:10
variables that it's available. On the right hand side here is the view in 3D
14:17
components and the most important thing to load this 3D model is the source. Now
14:25
if I go over to the source property, this will link up to the source that
14:35
I've preset. I set the variable to GitHub and then also with the selected
14:42
source, the selected source in this in this case is Emoga. So it will generate the whole link for me
14:50
And this is the whole link to Emoga. If I play this, I can click on Snivy, then Snivy will preload
15:00
it into the View In Mixed Reality component Also for Tyrant or Pikachu that the same logic Over here that on the mixed reality part
15:16
Here, in the media, sorry, in the insert, insert here we have the mixed reality button
15:26
And here, this is the view in mixed reality. That's the blue button over here
15:31
And the components is under the media. If scroll down, you can see field in 3D as preview
15:41
And then you can get these components in your Power App. The last thing I want to show before I go back to my slides
15:50
is if I press on the mixed reality, field image reality button, also the source is important
15:59
because this link to the source of your 3d model and on the right hand side
16:07
there is some properties about over here maybe a little bit as you can see here's the object width
16:17
and the object height and i have the unit measurements in centimeters as you see as you
16:25
might see on my collection, I have set a height and a width. So I can reference the correct
16:36
variables and parameters that I have to use. I referenced that together and then you're good to
16:45
go. So if I publish this, because I have now a new Emoga, I can save this and then I publish my
16:55
app again then my power app will load the new source and from then I can see the new
17:05
pokemon model over here here's my new pokemon model because of the time I just go further with
17:15
my presentation I'm not sure if there are any questions in the chat or not so I go further with
17:25
Okay
17:43
So over here, I show you all the tips and all the steps how you can create this
17:55
And my advice is to set your ideas into the app or see how you can fulfill the business needs if it's possible
18:11
And then I go further to the next part. That's the idea of my Pokemon 3D app
18:23
and as I mentioned before I joined the power platform community call in May and then I saw
18:32
Risa Dorani with an appstronaut and I was very impressed and I started thinking how I can do this
18:40
by myself just to to explore just to for experimental purpose but I started my search
18:48
on the internet for 3D models. And then I found very nice-looking 3D models Pokemon
18:56
And because my son is a big fan of Pokemon, I would like to give it a try
19:04
So I enabled the mixed reality feature, and then I just play it around, give it a try
19:12
And also, I am one of the leaders of Power Apps for Kids
19:16
I was thinking, hey, how can I combine all these things together
19:20
to get a more game-looking power app? So I combine all the things together and I create the app
19:34
And also I encourage my kids to play with power apps. So I ask them to try to test my app
19:45
and also ask them, hey, what kind of features I can put into my app
19:53
to make it more funnier. So they said, hey, mom, maybe you can do some animation into the app
20:03
or some sound effects. So the final app, we got our final version
20:12
But overall, we had a lot of fun playing with this app
20:17
And I think that's the most important part. Here, a little bit about the architecture about the app
20:26
Of course, we are using the Power App Studio to create a Canvas app
20:31
And I stored all the 3D models into GitHub. And then I also enabled a connector, OneDrive for Business
20:40
So I can save all the files, the photos that we have created with the mixed reality and camera device
20:49
We can save this in OneDrive. So to do this, we use Power Automate to grab all with JSON format to grab all the binary data
21:05
And then with the actions create a file, I saved it into OneDrive
21:12
That's the mechanic how I've achieved this. So, and how it looks like, let me switch over to my second demo
21:27
And just give me a second. go over to the stream and over here I put my code new code again and get connection
21:46
so over here you can see my screen again and then I go to my power app
22:03
over here I open my Pokemon 3d app oh I must I forgot to open my sound not sure
22:17
you can hear my sound that's great you see I have put in some animation and some sound and
22:27
And let's say I choose Pikachu. I select Pikachu. You hear the Pikachu voice as an extra feature I can move over the Pikachu and see And of course I can view Pikachu in real
22:49
I press on the Mix Relative button. And over here, I move it on the ground a little bit
23:01
And here you go. when I see the dots and the circle I can press on it and then it's ready go try
23:12
again and here is my Pokemon not sure why it's flying right away but I have to
23:22
start again this time I choose for Bulbasaur I press on Bulbasaur
23:31
And I load the maturity part, the 3D model again. Over here
23:43
And here is Bill Brassard. I can create a photo of Bill Brassard
23:51
Or let's say I want Bill Brassard to move. I can press on the 3D model
23:57
And then let's say on my chair right here. I then shoot and I can go back
24:06
The photos will be saved in another collection. And if I open this, it will enlarge the photo
24:15
So I can select the photo and say I can save this
24:20
If I go back and choose another one, this time chair mender
24:27
I can move it around again. Now I got enough images in my..
24:58
I view my images. Oh. It's weird. I missed all my image
25:07
But the first, last step I want to show... Sorry, I have to do it again
25:13
I have to do it again. Here's Jogosa. Let's make a shot
25:19
If it was a... I'll go back. Here's a photo
25:29
I can select and save this. And left-hand side, I have set a maximum of three selected photos
25:38
because it used the camera device on my mobile phone. And I got..
25:47
Sorry. I got an... Sorry. Where's my power app
25:56
Here. I saved this. Because the file on my mobile phone is very large
26:10
It's, I think, three or four megabytes per photo. So to reduce the uploading size and creating size
26:20
I have set a max of free photos into this app. And also I found some GIF animation
26:28
so you get the nice looking loading or saving part. So that also fill in the gap of the uploading and the processing part
26:40
So if I go back to my OneDrive in this case, If I go back to my run drive
26:48
then the app itself will create a Pokemon 3D folder automatically. And over here, you can see
26:58
the images that I've created. So that's the final part. Oh, sorry. Yeah
27:16
So that was my demo. But as you see, I have created a lot of 3D models with Pokemons and also saved this into OneDrive
27:32
And in my OneDrive folder, we have a lot of photos with 3D
27:37
and also with mixed real photo that I have to play with
27:43
So that's actually the 3D game that I have created. And I encourage everyone to give it a try
27:54
Just find you on the internet, there are a lot of resources. let's say you want Marvel, you think, let's say Spider-Man or Hello Kitty or anything you would like to play with
28:12
you can download the 3D models and then upload it into your Power App
28:19
And then you can ask your kids or children to play with and you will get some nice looking effects with this
28:27
Finally, in 2020, I also did my entry on demo extravaganza and I was one of the finalists
28:40
And finally, I got the third place of this. But yeah, it was very nice experiments and the experiences that you will get is very valuable
28:55
So next year I will try it again. And I also encourage everyone to give it a try
29:05
Over here is a link that you can download. I have uploaded my app into the Power App Kit Zone
29:15
It's over here, you can see. It's a little bit introduction, but over here you can download this
29:22
this Pokemon 3D app onto your laptop and then upload it into
29:33
the Power App Studio and then publish it into your mobile phone
29:40
and you can give it a try. Okay. And I think that should be
29:52
Over here, some resources and also the last link is the link that I have downloaded all the Pokemon 3D
30:01
So I also want to give kudos to them
#Online Media
#Consumer Electronics
#Virtual Worlds
#Engineering & Technology
#Virtual Tours
#Virtual Reality Devices
#Video Game Development
#Augmented & Virtual Reality