Stay Updated!

Sign up here for occasional updates, lesson plans, and thoughts on virtual worlds for education.
Sign up

Twitter feed

Early UI Experiments in Edorble WebVR with A-Frame

by Gabe Baker
Meet Orble, our new UI assistant

Quick Note: if you're in the online learning or training space and you have an idea for a 3D/VR application, you can hire us to build it for you. Read more here.

A few weeks ago, we released an experimental alpha build of Edorble called Edorble WebVR that runs right from a web browser and is compatible with lightweight mobile VR like Google Cardboard. We're excited to see the usage so far in such an early product, and we're improving Edorble WebVR all the time to make it more personal, playful, and powerful for online classes or meetings. This blog post will tell you about the new user interface in Edorble WebVR and the thinking behind it. We're sure this will be the first iteration among many, and the designs for it are just placeholders for what's coming.

User Interface Design in VR is challenging, especially when trying to support a wide range of hardware, input devices, and screens. With Edorble WebVR, the devices we prioritize are desktops, mobile devices, and lightweight mobile VR (Google Cardboard). We're going to be giving more dedicated attention to Rift and Vive soon. Why prioritize Mobile VR? Well, our dedicated Edorble application for Mac and PC is built with Rift and Vive in mind, so we wanted Edorble WebVR to provide an immersive experience for those with mobile VR headsets.

Up until now, our UI elements have been "in-world", meaning they are positioned as objects in 3D space. Take a look at the buttons that allow users to upload images and text. They are baked into the scene itself, positioned right next to the screens that display content. This makes sense for these buttons, because they relate to the nearby content and it makes sense that the user be close to the screen in order to change the content on the screen. Take a look:

This doesn't make sense for other buttons, though. For instance, we have a feature in Edorble WebVR that lets you pick a name tag. Right now, the user has to explore the world a bit to find the sign that has that nametag button, and then they can click the button and pick a tag. It gets the job done, but users should be able to change their nametag from anywhere in the world. In other words, there are behaviors that users should be able to do that don't have anything to do with where they are in 3D space. These are more general, universal behaviors, and we needed a way to make them accessible to users in a way that didn't hinge on their "in-world" location. So, we made a simple user interface linked to a tiny, floating orb that, although clearly in its infancy, we have big plans for. We're calling it "Orble", and Orble will not only be a gateway to a user interface, but also an AI-powered agent who can help you learn about Edorble, surface relevant 2D/3D content in your world, and be a conduit for voice-commands. For now, Orble has the very simple purpose of helping you change your nametag and letting you turn on/off fly mode.

We didn't want to make a UI that appears stuck on the screen at all times because in VR, this can have the effect of having something stuck on your glasses - it's really annoying unless you're using it, and it can get in the way of what you're looking at. So, Orble hovers below you at all times, and if you want to find it and pull up the UI menu, you just need to look down and click it (or look at it in Google Cardboard), and then two UI buttons appear. To make the buttons disappear, you just have to click or look at Orble again.


This is just an early UI experiment for us, and we'll be refining it as we continue to develop Edorble WebVR.

Have ideas for how we can make Edorble VR more useful for you? Let us know!