Unity HoloLens UI Shader

When building for the Microsoft HoloLens there are a lot of new opportunities, challenges and designs when it comes to building a User Interface. But at the moment the field of view is quite limited and you (or at least I) don’t want to ‘cut off’ to many visuals on my screen. By cutting of visuals the view looks even smaller as you can see the ‘borders’ of the screen, this creates a narrow feeling. To reduce this I have looked at what Microsoft did for their UI designs.

To reduce this I have looked at what Microsoft did for their UI designs. The first time when you start up the HoloLens the installation/settings screen has a big 360 menu bar at the lower part of the screen, but it doesn’t have hard edges at the borders of the screen. Instead, the menu bar fades out. Or if you look at it from another perspective, the menu will light up at the place that is been looked at. In my opinion, this is one of the best solutions I have found. And best implemented at the installation/settings menu.

While working on a HoloLens project we had to implement a big menu with some diagrams on it. We tried some different designs but they all didn’t fit well. We ended up using the Curved UI asset from the Unity Asset Store (Great plugin!), with some small changes to the input we got it working, it looked great!… But still, something was not looking right and that was the cutoff at the borders of the screen, it did give a narrow feeling.

To solve this issue I created this a shader based on the idea that only the part looking at is visible. It consists of 2 components: the Shader and a small script. The script contains some settings and is adjusting the shader based on your position.

The shader works by using a (gradient) mask to highlight the part you are looking at and making everything else black. Since black is rendered transparent when viewed in the HoloLens, will this create the fade (and reduce alpha rendering for performance).

I had made a better version of the shader (with some more options etc.) but unfortunately, I lost it D: maybe I will re-create it again soon…