A-Frame GUI Component Framework

Inspiration

A-Frame is missing a GUI system of standard user interface elements enabling front-end, interaction, and web designers to build quick and easy VR interactions. To address this lack, we’re building an extendable open-source GUI component library for A-Frame. Our GUI framework is inspired by ReactVR’s interface elements and aims to follow its familiar Flexbox and CSS based approach. The goal is to create a comprehensive GUI Framework to help web designers with HTML/CSS background and 2D UI thinking to step into the 3D UI WebVR space without having to reinvent the wheel when building interfaces.

What it does

Our A-Frame GUI Component Framework lets you create a quick user interface panel and layout interface elements (buttons, toggles, labels, sliders, etc.). You can style the entire panel and/or every single interface element individually with a CSS-like syntax, and you can easily attach and interconnect functions and behaviors to the elements.

Besides styling the colors of the UI, you also have access to any font family you like, as long as you load it as a webfont in the document header. The default font is Helvetica, but our demo shows Fira Sans

For our icon button component we’re using the beautiful http://ionicons.com/ icon font library. Creating controls for a music or video player in VR is now a matter of minutes.

How I built it

We made conceptual drafts based on research about user interfaces in VR, and designed prototypes with Tilt Brush to define GUI proximity to the camera and interface proportions. We defined a baseline for a comfortable, readable font size, a dmm (distance independent millimeters) based on mobile screen resolutions. Then we created a component library following best practices of the A-Frame component system. Interface elements are animated A-Frame primitives and the text labels are HTML Canvas textures rendered on the fly.

Challenges I ran into

Challenges included figuring out the baseline font size for our UI elements (considering different phone screen resolutions and GPU rendering quality), defining the label dmm (distance independent millimeters) size, and implementing the Amper Music API for our demo page. Audio visualization example code was degraded and needed updating to A-Frame 0.5.0. Building enough interface components to create a meaningful use case presented yet another challenge.

What’s next for A-Frame GUI Component Framework?

Please have a look at our Project Slides on SlideShare.

We are going to build a few more interface elements, polish out some visual transparency bugs, and streamline the Javascript code before we turn this project open-source and let the community build out UI components for the framework.

We are also going to build a demo to poll font size preferences of users within VR to calibrate our baseline size and dmm values in order to improve our framework.

Built With

A-Frame, Javascript, HTML, CSS, Canvas, Amper API, tons of research on interface challenges in VR… and with a big passion for typography, layout design, and readability,