Bridging the Gap between VR and Web Interface Design

Lochlan Wansbrough Lochlan Wansbrough

Here at Work at Play, I knew that in order to blaze a trail through the growing field of Virtual Reality (VR), our team of web and app developers needed to leverage many of the tools with which we are familiar.

Using concepts such as “Layers”, “Images”, and “Text”, we are now able to build 3D interfaces with the same level of ease and visual fidelity we’ve come to expect from our web and mobile applications.

Before I can describe our solution in detail, it’s important that I outline the problem that VR poses. VR attempts to close the gap between the world we live in, and the worlds that exist in our computers. These digital worlds often present themselves as games, but they can also translate into useful 3D tools for business, and social applications as well.

VR apps provide new immersive gaming opportunities, as in the storytelling title, Vrse. Photo credit:  Android Authority.
VR apps provide new immersive gaming opportunities, as in the storytelling title, Vrse. Photo credit: Android Authority.
VR apps also provide new immersive platforms for many business markets, including real estate. Photo credit: BeRealE
VR apps also provide new immersive platforms for many business markets, including real estate. Photo credit: BeRealE

The main idea behind VR is an imagined, 3D space which enables its user to work or play within it. Interaction is absolutely a critical component of VR — without great interactions the magic of VR is lost.

The solution I settled on is one that bridges the gap between web interface design, and VR interface design. (How these two pieces relate from a User Experience perspective is something we’re still actively researching.) The tool, which I’ve aptly named “React Three UI”, allows us to harness the powerful, intuitive nature of React while creating 3D interfaces for VR web applications. React Three UI leverages two other libraries: the first is React Three, which allows us to easily create 3D objects by bridging the gap between React, and that of the second library, THREE.js. By combining these libraries, we’ve been able to define a declarative API for building UI in 3D space.

Inserting a smartphone into the effective, no-frills Google Cardboard viewer. Photo credit: Slash Gear
Inserting a smartphone into the effective, no-frills Google Cardboard viewer. Photo credit: Slash Gear

This experiment has not come without its own set problems. One critical aspect of VR is the need to keep all parts of the application performant in order to provide the smoothest experience possible. It’s typically suggested that VR applications run at least 90fps in order to properly immerse the user, and prevent them from developing motion sickness. React Three UI currently struggles to achieve these numbers while animating layers of its UI. I believe optimization that will allow us to reach our target frame rate is possible.

VR applications need to run at least 90fps in order to prevent users from developing motion sickness. Screenshot credit: VR Roller Coaster
VR applications need to run at least 90fps in order to prevent users from developing motion sickness. Screenshot credit: VR Roller Coaster

As tools improve over time, optimization will be within our grasp. There’s a lot of work ahead of us should we choose to pursue this approach, but the prospect alone makes me all the more excited for the future of virtual reality.

Here at Work at Play, we put a great deal of effort into designing and developing new and engaging experiences for our clients and their customers. As we hone our skills in an increasing number of industries, we also want to continually produce higher quality products under tighter deadlines.

Having the right tools for the job can have a profound impact on our ability to adjust to these requirements. Developing better tools means we (the engineers) can be more productive, thus enabling us to say “yes” to more designs that push the limits of our technical abilities.