auraOS: A Web3 Spatial Interface
A prototype briefly exploring what a 100% mesh-based hand-tracked spatial interface could look and feel like when laced with Web3 concepts
00
problem
Current digital interfaces, largely designed for 2D screens, lack the intuitive spatial context needed to effectively manage and interact with the emerging concepts of Web3 such as decentralized assets.
solution
AuraOS explores a dedicated, mesh-based spatial operating system concept, leveraging natural hand-tracking and 3D UI elements to visualize and interact with Web3 assets and information within an immersive, intuitive environment.
About
I've always been a passionate advocate for the democratization of global value transfer ever since I discovered Bitcoin back in 2010. With the advent of Ethereum and its irrefutable proof that a blockchain can self-regulate and evolve through the use of a programmable virtual machine, the possibilities of how we transfer value and store data will forever change. It may take 10 to 20 years and there may be market crashes, fraudulent opportunists, code exploits and everything in-between, but I truly believe that these rough patches will get worked out and global innovators will naturally forge towards foundational blockchain network layers in order to build the trustless online future that civilization will need in the coming decades.
With this ideology in mind, I've been thinking a lot about what a spatial computing Web3 future could potentially look like. I've always wanted to create a 100% mesh-based spatial interface that is scalable, performant, and enjoyable to use, I figured now would be the time to try making one since hand-tracking 2.0 support just recently arrived to the Oculus UE4 4.27 branch.
auraOS Nav Bar

I designed all UI elements inside of Figma first and then I would import everything into Shaper3D for iPad as svg, extruded them, beveled them, and exported directly into Unreal Engine as fbx. From there I created a construction-script system where I would type in the exact same location coordinates from Figma into my UI component system, assign a theme type to them, and voila the layout would then match identically to what I designed in Figma.. but in 3D!
On top of all of this I created a foundational animation system that would dynamically animate UI elements and any associated icons, breadcrumbs, glow shaders, and more depending on their assigned UI Element type. And of course some fun, snappy, UI sounds for the cherry on top!

Fun fact: I created a MatCap shader for all UI components! That's right, the materials you see in the above picture are 100% unlit, meaning they are remarkably performant.
Dashboard Design

To take the concept even further, I wanted to have a dashboard that would allow users to access all of their relevant digital assets, view their location in the world they're currently residing in, communicate with friends, browse the internet, and listen to music; all with a vibrant, minimal, and XR friendly interface.
This is my design for a simplistic browser that would allow users to quickly navigate to favorited sites while they're traversing different worlds.
As much I wanted to continue with the implementation of this UI in the project, work unfortunately ended up getting in the way, leaving me little to no time exploring this further.
Altrek Aura
When creating this awesome UI system in Unreal, I ended up wondering "what is the conduit that powers auraOS?". To maximize the believability of a spatial interface in XR experiences, I typically advocate for physically believable "devices". Not only does it promote a better sense of presence and tactility in the virtual space and user story you're trying to convey, but it also opens up the door to a variety of really cool branding and revenue opportunities.
In this case, I ended up landing on a simplistic device I'm calling the Altrek Aura - powered by auraOS
year
2022
timeframe
1 week
tools
Unreal Engine, Meta Quest 2, Figma, Shapr3D
category
Personal Project
01
see also