Radial Spatial UI Grid Component

While most Spatial User Interfaces (SUI) actually benefit from classic, flat layouts, they fall short within immersive experiences in some contexts:

• Large presentations
• Organizing 3D content

There exist plenty of solutions for these problems. For example, larger presentations can often be curved to wrap around the viewer. 3D content can utilize stencil-shaders to exist within wells of a 2D UI layout.

However, for a couple of projects, I felt a SUI layout element which not only coexisted with the content which it arranged, but also conformed spatially to the viewer, might offer some compelling benefits. Inspired by Apple’s visionOS, I implemented a surface blur to increase content contrast, without completely obscuring the environment.

Current Features:

• Blurs the background (even in VR)
• Distributes icons evenly on a grid with standard spacing controls
• Allows for rendering icons without using stencil-shaders
• Can deform other (properly) prepared mesh objects for different border styles
• Bends the shape based on arc/radial math inputs, making it fully animatable
• Masks Icons using Alpha or Alpha Clipping, with parameters for different styles

Below are two layout examples. Various, but not all, Icon features are shown.

Initial tests confirm the component is expensive to render on lower end VR platforms; This is due to the current blur implementation, as well as the dependence upon the opaque render buffer. The blur needs optimization regardless, but alternate techniques will need to be employed for lower-end VR/AR.

All the vertex deformation is performed on the shader level to improve performance, so shape collision is not currently possible. The component distributes trigger colliders to accommodate this.

The Icon elements supply optional slots for:

• The 3D Icon itself
• A title
• An amount
• A description
• A standard “mobile-style” red notification badge
• A base/platform object
• A frame/bubble object