Creating 3D Icons for your Mixed Reality UWP app

Microsoft has opened up the ability to have a 3D app launcher to all developers in the Fall Creator’s Update. In this blog post, I’m going to show you how to build your own 3D app launcher from scratch (accompanying YouTube tutorial video embedded below).

What is a 3D app launcher?

App Launchers

Up until now, you’ve only been able to have a regular 2D tile in the Start menu and the user could place a 2D frame of your app on a surface in the Cliff House (the Mixed Reality home) or on a surface in your HoloLens mapped area. Clicking the app frame would launch the app in the same frame.

If your app was a 3D app, then it would launch the immersive experience, but the launcher was just a 2D . The user wouldn’t be able to intuitively know that the application is an immersive app.  There are some apps that have 3D launchers, for example the HoloTour app that you see in this article’s featured headline image.

Wouldn’t it be nice if your immersive application had a 3D launcher, too? By the end of this blog post, you’ll be able to! To get started, let’s take a look at the model and how to build one yourself.

The Model

First thing you’ll need to understand is that Microsoft requires your model to use gITF 2.0 specification and more specifically, the binary format (.glb). To accomplish this, we are going to use Blender.

Blender is a modeling and animation application that is open source and free. You can choose to build your model directly in Blender if you’re familiar with it. Alternatively, build the model in another application but use the Blender gITF Exporter add-on, which is what I’ll show you today.

NOTE: If you already have an FBX model, jump to the Importing a Model section below

Building The Model From Scratch

To keep this tutorial simple, I’ll create a simple UVSphere in Blender and use a solid color texture. Creating complex models in Blender is a bit out of the scope of this post, however I cover doing it from scratch in this video (if the video doesn’t load, here’s the direct link).

Just be sure to read the next section, even if you followed the video, so that you’re familiar with the restrictions you’ll inevitability encounter while trying to use different models.

 

Importing a Model

Alternatively, you can import other model types, like FBX, into Blender. This is easy, as FBX importing is available out-of-the-box .Take following steps once you’ve opened Blender

  1. Select File
  2. Expand Import
  3. Select FBX
  4. Locate and load the file

One thing you’re going to notice is that model may not be visible in your area, it’s far too large and off center. To get it in your view, you can use the “View All” shortcut (Home key) or drill into the menu “View > View All” (this menu is underneath the 3D view area). Here’s a screenshot:

Now, look in the Outliner panel (located at the top right of Blender) and find the object named “root” this is the imported model. Then, to get the right editing options, select the Object properties button (see the red arrow in this screenshot).

Outliner and Object properties editor

Take note of the highlighted Transform properties, we’ll change those next. However, before we do, let’s review some of the guidelines Microsoft has set for 3D app launchers:

  1. The Up axis should be set to “Y”.
  2. The asset should face “forward” towards the positive Z axis.
  3. All assets should be built on the ground plane at the scene origin (0,0,0)
  4. Working Units should be set to meters and assets so that assets can be authored at world scale
  5. All meshes do not need to be combined but it is recommended if you are targeting resource constrained devices
  6. All meshes should share 1 material, with only 1 texture sheet being used for the whole asset
  7. UVs must be laid out in a square arrangement in the 0-1 space. Avoid tiling textures although they are permitted.
  8. Multi-UVs are not supported
  9. Double sided materials are not supported

With these in mind, let’s start editing our mesh, under the Transform section, take the following actions:

  1. Set Location to 0,0,0
  2. Set Scale to 1,1,1
  3. Now, lets re-frame the 3D view so we can see the model by using the “View All” shortcut again.

You should see that your model is now at the right place and close to the right scale. Now that you can see what you’re doing, make any additional tweaks so that your model meets #1 and #2 of the Microsoft guidelines.

Lastly, we need to check the model’s triangle count, there is a limit of 10,000 triangles for a 3D app launcher (you can see the triangle count in the top toolbar when the model is selected). Here’s what it looks like:

Mesh Triangle Count

If you need to reduce your triangle count, you can use the Decimate Modifier on your model. Go here to learn more on how to use Decimate (I also recommend checking out a couple YouTube videos on the topic, Blender is complex app).

I strongly urge you to go to this documentation and read all the model restrictions and recommendation, such as texture resolutions and workflow. If you use a model that doesn’t meet the guidelines, you’ll see a big red X like this:

Invalid Model

Now that your model is done, it’s time to export it as a gITF binary file.

Exporting GLB

By default, Blender doesn’t have a gITF export option, so you’ll want to use the KhronosGroup glTF-Blender-Exporter. Installation of the add-on is pretty straight forward, go here to read the instructions.

You get to choose between two options to add it:

  • Option 1: Set Blender to use repo’s scripts folder (to stay in sync with the exporter’s development)
  • Option 2: Copying a folder into Blender’s folders (I chose this option, scroll down to where the author starts a sentence with “Otherwise”)

Finally, enable the add-on in Blender (last step in the instructions). Once the add-on is enabled, go ahead and export your model! You’ll see a glb option in the File > Export  list.

Here’s a screenshot:

Export as glb

 

Setting the 3D Launcher

Now that you have a glb file, it’s time to open your Mixed Reality UWP app in Visual Studio. Once it’s loaded, we need to add the glb file to your app’s Assets folder (right click on the folder and select “Add > Existing Item”). Once it’s been pulled in make sure you set the Build Action to Content (right click on the file, select Properties and change Build Action to content).

File’s Build Action

Lastly, we need to edit the app’s Package.appxmanifest file XML manually, to do this, right click on the file and select “View Code”. At the top of the file, add a new xmlns and also put it in the IgnorableNamespaces list


xmlns:uap5="http://schemas.microsoft.com/appx/manifest/uap/windows10/5"

IgnorableNamespaces="uap uap2 uap5 mp"

Next, locate the DefaultTile tag (under Application > VisualElements), expand it and add the MixedRealityModel option with your


<uap:DefaultTile ShortName="Channel9 Space Station" Wide310x150Logo="Assets\Wide310x150Logo.png" >
<uap5:MixedRealityModel Path="Assets\Dog.glb" />
</uap:DefaultTile>

Here’s a screenshot, with the additions highlighted:

Package.appxmanifest changes

Final Result

You can see the final result at the end of the video above. Keep in mind that I keep the triangle count down for this, but next time I’ll likely  increase it to 64 segments and 32 rings. Additionally, I’ll use a texture that can be mapped around a sphere (the Earth for example).

If you’re having trouble with your model and want to check your app settings with a known working mode, download the glb I created for here. I hope this tutorial was helpful, enjoy!

More Resources

Advertisements

“Cannot download Windows Mixed Reality software” error fix!

Did you just get a new Mixed Reality headset? Were you so excited that you ripped open the box and plugged it in only to to find that after setting up  your floor and boundaries that you got the following error:

Cannot download Windows Mixed Reality software

Screeching halt!

I spent a lot of time digging around the Hololens forums and long conversations on the Holodevelopers Slack and it seemed there was a wide variety of reason for this. However, after looking at my Developer Mode settings page (in Windows Settings), there was an incomplete dev package installation.

At this point, I suspected I needed to “side load” these packages, bypassing the on-demand download over network. I just didn’t know where to find it until… my hero,  and holographic Jedi, Joost van Schaik (@localjoost) had the same problem and found a fix for his. Joost followed a suggestion from Matteo Pagani (@qmatteoq) to use dism to install the packages manually.

I tweaked his solution (basically just found different packages) so that that it worked for a non-Insider Preview build and it worked!

Fix

It turns out that you can get the ISO file for the On-Demand-Features for your version of Windows 10 and install the packages manually.

Here are the steps:

1 – Go to the appropriate downloads page for your version of Windows 10

  • Go here if you’re running 1703 (Creator’s Update)
  • Go here if you’re running 1709 (Fall Creator’s Update)

2 – Download the Windows 10 Features on Demand file (ISO file) listed there. Note: There may be two ISOs offered for download, I found the cabs I needed in the 1st ISO.

2 – Mount the ISO file and make sure you see the following files (if you don’t, you got the wrong ISO):

2017-08-03_1200

3 – Open an elevated Command Prompt and run the following commands (replace “E:” with your mounted ISO’s drive letter)

— Install the holographic package (this is what the Mixed Reality Portal app is failing to download)

dism /online /add-package /packagepath:"[YOUR-DRIVE-LETTER]:\Microsoft-Windows-Holographic-Desktop-FOD-Package.cab"

— Then install the Developer Mode package

dism /online /add-package /packagepath:"[YOUR-DRIVE-LETTER]:\Microsoft-OneCore-DeveloperMode-Desktop-Package.cab"

 

Here’s a screenshot of the result

2017-08-03_1136

 

4 – Open the Mixed Reality Portal app again and bingo, success!!!

2017-08-03_1206

 

Underlying Cause of the Issue

After some discussion with the folks at Microsoft, it turns out that if your PC is using WSUS (Windows Update Service), which is normal for a domain-joined PC under a corporate domain policy, this can prevent the download of some components (like .NET 3.5, Developer Package and Holographic Package).

You can talk to your IT department and ask them to unblock the following KBs:

  • 4016509
  • 3180030
  • 3197985

 

BIG THANKS to Joost and Matteo 🙂

 

[Updated to add Matteo, fix some grammar and add the info about the KBs]