Get Started with Power Apps Mixed Reality Components

Published 05-03-2021 03:19 PM 775 Views
Microsoft

view-in-3d.png

 

When I joined the Mixed Reality (MR) community a little over a year ago, I hoped that we'd eventually get to a point where getting started in XR could be more approachable for people who were looking for a low code/no code route. There's a pretty steep barrier to entry for getting started with creating MR apps and experiences. For me, I had to learn a new programming language and game engine. I also needed access to the proper hardware. However, my hope was that this would all change (or at least get better) for future MR developers.

 

But why?

Well, I strongly feel that there's so much untapped potential just waiting to be discovered (or even uncovered) in the MR space. Every so often, I meet someone who's interested in getting started with MR but don't necessarily have access to all the 'required' tools. I often found myself suggesting that they'd build their app/experience then try in an emulator of some sort. However, testing on a computer in no way compares to actually testing on an MR device.

 

Well, I've finally found a solution -- or at least an option for folks who have access to a mobile device or tablet. Aside from a computer with an internet connection, there's no additional hardware required. There's also no need for a game engine or code editor. With that said, you could get started as soon as you're done with this post. As for the solution, drum roll please….

 

Power Apps! Yes, you can create an MR app with Power Apps! Power App is a low code/no code platform for creating apps. The Maker portal is a drag and drop platform that's great for creating apps without getting code involved. Of course, if you'd prefer to do some coding within PowerApps, there's always the option to do that as well.

 

Just last year, the Power Apps team announced new MR components that are available for use in your Power Apps apps! The components include the following:

 

  • View in 3D - Rotate and zoom into the model with simple gestures. Display a single model or let the user select from a gallery of 3D models.
  • View in Mixed Reality - See how a particular item might fit within a specified space. Overlays a 3D model or image onto the live camera feed of the device.
  • Measure in Mixed Reality - Measure distance, area, and volume. A 2D or 3D polygon is created to confirm how a certain sized object would fit within a space.

All 3D models used within Power Apps must be in .glb format. You could also include 2D images (.jpg or. png). Since I don't have a personal arsenal of 3D objects, I thought I'd find it difficult to find 3D models to use. Fortunately, we provide an open-source library of 3D models. If you happen to be running on Windows, you could also use Microsoft 3D Builder.

 

If you've never used Power Apps before, my best recommendation is to first work through the Power Platform learning path on Microsoft Learn. This learning path provides quite a thorough introduction to Power Apps. If you happen to already be familiar with creating apps in Power Apps, then dive right in to the Mixed Reality Power Apps components documentation.

 

If you're in search of detailed instruction or a sample app that uses some of the components together, check out my YouTube tutorial on how I created a sample interior decorating app.

 

Here is a list of resources to get you started:

 

Power Apps

Microsoft Learn: aka.ms/learn-powerplatform

Microsoft Docs: aka.ms/docs-powerapps

Mixed Reality Power Apps Components: aka.ms/powerapps-mr

Connectors: aka.ms/connectors

 

3D Models

GitHub: aka.ms/models

Microsoft 3D Builder

Unity Asset Store: assetstore.unity.com

 

Video Tutorial

YouTube: aka.ms/mr-powerapps

 

I'm always in search of new use cases for these features. Please comment below how you plan to use these features!

2 Comments
Regular Visitor

@April_Speight thanks for this inspiring article! I may have to go and build an app right now :smile:

Microsoft

@Ty_F_tyGraph  you're welcome! PowerApps takes a little bit getting used to if you're new to the platform. However, once you get over the hump of 'how does this thing work', you'll be well on your way to creating a lot of apps haha.

%3CLINGO-SUB%20id%3D%22lingo-sub-2304577%22%20slang%3D%22en-US%22%3EGet%20Started%20with%20Power%20Apps%20Mixed%20Reality%20Components%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2304577%22%20slang%3D%22en-US%22%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20image-alt%3D%22view-in-3d.png%22%20style%3D%22width%3A%20900px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F276494i0FD5B71EF36E7B52%2Fimage-size%2Flarge%3Fv%3Dv2%26amp%3Bpx%3D999%22%20role%3D%22button%22%20title%3D%22view-in-3d.png%22%20alt%3D%22view-in-3d.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EWhen%20I%20joined%20the%20Mixed%20Reality%20(MR)%20community%20a%20little%20over%20a%20year%20ago%2C%20I%20hoped%20that%20we'd%20eventually%20get%20to%20a%20point%20where%20getting%20started%20in%20XR%20could%20be%20more%20approachable%20for%20people%20who%20were%20looking%20for%20a%20low%20code%2Fno%20code%20route.%20There's%20a%20pretty%20steep%20barrier%20to%20entry%20for%20getting%20started%20with%20creating%20MR%20apps%20and%20experiences.%20For%20me%2C%20I%20had%20to%20learn%20a%20new%20programming%20language%20and%20game%20engine.%20I%20also%20needed%20access%20to%20the%20proper%20hardware.%20However%2C%20my%20hope%20was%20that%20this%20would%20all%20change%20(or%20at%20least%20get%20better)%20for%20future%20MR%20developers.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EBut%20why%3F%3CBR%20%2F%3E%3CBR%20%2F%3EWell%2C%20I%20strongly%20feel%20that%20there's%20so%20much%20untapped%20potential%20just%20waiting%20to%20be%20discovered%20(or%20even%20uncovered)%20in%20the%20MR%20space.%20Every%20so%20often%2C%20I%20meet%20someone%20who's%20interested%20in%20getting%20started%20with%20MR%20but%20don't%20necessarily%20have%20access%20to%20all%20the%20'required'%20tools.%20I%20often%20found%20myself%20suggesting%20that%20they'd%20build%20their%20app%2Fexperience%20then%20try%20in%20an%20emulator%20of%20some%20sort.%20However%2C%20testing%20on%20a%20computer%20in%20no%20way%20compares%20to%20actually%20testing%20on%20an%20MR%20device.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EWell%2C%20I've%20finally%20found%20a%20solution%20--%20or%20at%20least%20an%20option%20for%20folks%20who%20have%20access%20to%20a%20mobile%20device%20or%20tablet.%20Aside%20from%20a%20computer%20with%20an%20internet%20connection%2C%20there's%20no%20additional%20hardware%20required.%20There's%20also%20no%20need%20for%20a%20game%20engine%20or%20code%20editor.%20With%20that%20said%2C%20you%20could%20get%20started%20as%20soon%20as%20you're%20done%20with%20this%20post.%20As%20for%20the%20solution%2C%20drum%20roll%20please%E2%80%A6.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22http%3A%2F%2Faka.ms%2Fdocs-powerapps%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EPower%20Apps%3C%2FA%3E!%20Yes%2C%20you%20can%20create%20an%20MR%20app%20with%20Power%20Apps!%20Power%20App%20is%20a%20low%20code%2Fno%20code%20platform%20for%20creating%20apps.%20The%20Maker%20portal%20is%20a%20drag%20and%20drop%20platform%20that's%20great%20for%20creating%20apps%20without%20getting%20code%20involved.%20Of%20course%2C%20if%20you'd%20prefer%20to%20do%20some%20coding%20within%20PowerApps%2C%20there's%20always%20the%20option%20to%20do%20that%20as%20well.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EJust%20last%20year%2C%20the%20%3CA%20href%3D%22https%3A%2F%2Fpowerapps.microsoft.com%2Fen-us%2Fblog%2Fintroducing-mixed-reality-in-power-apps%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EPower%20Apps%20team%20announced%3C%2FA%3E%20new%20MR%20components%20that%20are%20available%20for%20use%20in%20your%20Power%20Apps%20apps!%20The%20components%20include%20the%20following%3A%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%3E%3CSTRONG%3EView%20in%203D%20-%26nbsp%3B%3C%2FSTRONG%3ERotate%20and%20zoom%20into%20the%20model%20with%20simple%20gestures.%20Display%20a%20single%20model%20or%20let%20the%20user%20select%20from%20a%20gallery%20of%203D%20models.%3C%2FLI%3E%0A%3CLI%3E%3CSTRONG%3EView%20in%20Mixed%20Reality%3C%2FSTRONG%3E%20-%20See%20how%20a%20particular%20item%20might%20fit%20within%20a%20specified%20space.%20Overlays%20a%203D%20model%20or%20image%20onto%20the%20live%20camera%20feed%20of%20the%20device.%3C%2FLI%3E%0A%3CLI%3E%3CSTRONG%3EMeasure%20in%20Mixed%20Reality%3C%2FSTRONG%3E%20-%20Measure%20distance%2C%20area%2C%20and%20volume.%20A%202D%20or%203D%20polygon%20is%20created%20to%20confirm%20how%20a%20certain%20sized%20object%20would%20fit%20within%20a%20space.%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CP%3EAll%203D%20models%20used%20within%20Power%20Apps%20must%20be%20in%20.glb%20format.%20You%20could%20also%20include%202D%20images%20(.jpg%20or.%20png).%20Since%20I%20don't%20have%20a%20personal%20arsenal%20of%203D%20objects%2C%20I%20thought%20I'd%20find%20it%20difficult%20to%20find%203D%20models%20to%20use.%20Fortunately%2C%20we%20provide%20an%20%3CA%20href%3D%22http%3A%2F%2Faka.ms%2Fmodels%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Eopen-source%20library%3C%2FA%3E%20of%203D%20models.%20If%20you%20happen%20to%20be%20running%20on%20Windows%2C%20you%20could%20also%20use%20%3CA%20href%3D%22https%3A%2F%2Fwww.microsoft.com%2Fen-us%2Fp%2F3d-builder%2F9wzdncrfj3t6%3Factivetab%3Dpivot%3Aoverviewtab%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EMicrosoft%203D%20Builder%3C%2FA%3E.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EIf%20you've%20never%20used%20Power%20Apps%20before%2C%20my%20best%20recommendation%20is%20to%20first%20work%20through%20the%20Power%20Platform%20%3CA%20href%3D%22http%3A%2F%2Faka.ms%2Flearn-powerplatform%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Elearning%20path%3C%2FA%3E%20on%20Microsoft%20Learn.%20This%20learning%20path%20provides%20quite%20a%20thorough%20introduction%20to%20Power%20Apps.%20If%20you%20happen%20to%20already%20be%20familiar%20with%20creating%20apps%20in%20Power%20Apps%2C%20then%20dive%20right%20in%20to%20the%20Mixed%20Reality%20Power%20Apps%20components%20%3CA%20href%3D%22http%3A%2F%2Faka.ms%2Fpowerapps-mr%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Edocumentation%3C%2FA%3E.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EIf%20you're%20in%20search%20of%20detailed%20instruction%20or%20a%20sample%20app%20that%20uses%20some%20of%20the%20components%20together%2C%20check%20out%20my%20%3CA%20href%3D%22http%3A%2F%2Faka.ms%2Fmr-powerapps%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EYouTube%20tutorial%3C%2FA%3E%20on%20how%20I%20created%20a%20sample%20interior%20decorating%20app.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EHere%20is%20a%20list%20of%20resources%20to%20get%20you%20started%3A%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CU%3EPower%20Apps%3C%2FU%3E%3C%2FP%3E%0A%3CP%3E%E2%80%A2%3CSTRONG%3EMicrosoft%20Learn%3A%20%3C%2FSTRONG%3E%3CA%20href%3D%22http%3A%2F%2Faka.ms%2Flearn-powerplatform%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Eaka.ms%2Flearn-powerplatform%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%E2%80%A2%3CSTRONG%3EMicrosoft%20Docs%3A%20%3C%2FSTRONG%3E%3CA%20href%3D%22http%3A%2F%2Faka.ms%2Fdocs-powerapps%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Eaka.ms%2Fdocs-powerapps%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%E2%80%A2%3CSTRONG%3EMixed%20Reality%20Power%20Apps%20Components%3C%2FSTRONG%3E%3A%20%3CA%20href%3D%22http%3A%2F%2Faka.ms%2Fpowerapps-mr%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Eaka.ms%2Fpowerapps-mr%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%E2%80%A2%3CSTRONG%3EConnectors%3A%20%3C%2FSTRONG%3E%3CA%20href%3D%22http%3A%2F%2Faka.ms%2Fconnectors%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Eaka.ms%2Fconnectors%3C%2FA%3E%3CSTRONG%3E%3CBR%20%2F%3E%3C%2FSTRONG%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CU%3E3D%20Models%3C%2FU%3E%3C%2FP%3E%0A%3CP%3E%E2%80%A2%3CSTRONG%3EGitHub%3A%20%3C%2FSTRONG%3E%3CA%20href%3D%22http%3A%2F%2Faka.ms%2Fmodels%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Eaka.ms%2Fmodels%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%E2%80%A2%3CA%20href%3D%22https%3A%2F%2Fwww.microsoft.com%2Fen-us%2Fp%2F3d-builder%2F9wzdncrfj3t6%3Factivetab%3Dpivot%3Aoverviewtab%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3E%3CSTRONG%3EMicrosoft%203D%20Builder%3C%2FSTRONG%3E%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%E2%80%A2%3CSTRONG%3EUnity%20Asset%20Store%3A%20%3C%2FSTRONG%3E%3CA%20href%3D%22http%3A%2F%2Fassetstore.unity.com%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3Eassetstore.unity.com%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CU%3EVideo%20Tutorial%3C%2FU%3E%3C%2FP%3E%0A%3CP%3E%E2%80%A2%3CSTRONG%3EYouTube%3A%20%3C%2FSTRONG%3E%3CA%20href%3D%22http%3A%2F%2Faka.ms%2Fmr-powerapps%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Eaka.ms%2Fmr-powerapps%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EI'm%20always%20in%20search%20of%20new%20use%20cases%20for%20these%20features.%20Please%20comment%20below%20how%20you%20plan%20to%20use%20these%20features!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-TEASER%20id%3D%22lingo-teaser-2304577%22%20slang%3D%22en-US%22%3E%3CP%3EPower%20Apps!%20Yes%2C%20you%20can%20create%20a%20MR%20app%20with%20Power%20Apps!%20Power%20App%20is%20a%20low%20code%2Fno%20code%20platform%20for%20creating%20apps.%20The%20Maker%20portal%20is%20a%20drag%20and%20drop%20platform%20that's%20great%20for%20creating%20apps%20without%20getting%20code%20involved.%20Of%20course%2C%20if%20you'd%20prefer%20to%20do%20some%20coding%20within%20PowerApps%2C%20there's%20always%20the%20option%20to%20do%20that%20as%20well.%3C%2FP%3E%3C%2FLINGO-TEASER%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2321996%22%20slang%3D%22en-US%22%3ERe%3A%20Get%20Started%20with%20Power%20Apps%20Mixed%20Reality%20Components%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2321996%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F568807%22%20target%3D%22_blank%22%3E%40April_Speight%3C%2FA%3E%26nbsp%3Bthanks%20for%20this%20inspiring%20article!%20I%20may%20have%20to%20go%20and%20build%20an%20app%20right%20now%26nbsp%3B%3CIMG%20class%3D%22lia-deferred-image%20lia-image-emoji%22%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Fhtml%2F%408341BD79091AF36AA2A09063B554B5CD%2Fimages%2Femoticons%2Fsmile_40x40.gif%22%20alt%3D%22%3Asmile%3A%22%20title%3D%22%3Asmile%3A%22%20%2F%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2327591%22%20slang%3D%22en-US%22%3ERe%3A%20Get%20Started%20with%20Power%20Apps%20Mixed%20Reality%20Components%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2327591%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F1000405%22%20target%3D%22_blank%22%3E%40Ty_F_tyGraph%3C%2FA%3E%26nbsp%3B%20you're%20welcome!%20PowerApps%20takes%20a%20little%20bit%20getting%20used%20to%20if%20you're%20new%20to%20the%20platform.%20However%2C%20once%20you%20get%20over%20the%20hump%20of%20'how%20does%20this%20thing%20work'%2C%20you'll%20be%20well%20on%20your%20way%20to%20creating%20a%20lot%20of%20apps%20haha.%3C%2FP%3E%3C%2FLINGO-BODY%3E
Co-Authors
Version history
Last update:
‎Apr 29 2021 03:37 PM
Updated by: