WebXR and You

Learn how your website can be adapted for Virtual Reality


WebVR banner image

How does WebXR Turn Websites into Virtual Reality Platforms?

Virtual Reality can be added to any website using the new WebXR API. If you work with HTML, CSS, and JavaScript, you can create a 3D virtual reality interface using non-proprietary, public-domain web standards as part of your larger responsive design strategy. It's the best way for web designers, developers, and web agencies to avoid missing out on the world of VR.

WebXR is accessed using JavaScript, standard in desktop and mobile browsers. This means that WebXR can be embedded directly into standard websites. In contrast, it is not possible to embed Unity or Unreal VR within web pages - they must be provided in app stores. This is WebXR's "killer feature" - any website can have a VR interface added to it using WebXR. WebXR can fit into an expanded Responsive Design strategy, with support for mobile VR, VR headsets, as well as standard 2D monitors.

Here are a few examples of UX and code work in WebXR


Applications

These are exampes of WebVR or WebXR projects coded directly in HTML, CSS, and JavaScript.

WebVR-Mini

WebVR Mini logo

This project demonstrates my skills in JavaScript. It implements a pure vanilla WebVR/WebXR system, no frameworks, built completely from scratch in JavaScript.

Designed as a testbed to try new WebXR concepts, as well as a basis for teaching students WebXR coding. WebXR Mini is unique in supporting embedding VR windows in standard web page layouts. Most VR frameworks "grab" the entire screen, and are incompatible with standard web page layouts. Full source on my Github Site.

UX in VR For a Real-Estate App

Legend3D UX in VR App logo

I helped Eric Elder Legend3D's VR division develop a WebXR-based real estate app for a major online client in real estate. My roles included concept development, "UX in VR" experience design, selection of appropriate JavaScript libraries and frameworks, finding WebXR developers, monitoring the dev process, and user testing and QA on the final product. I worked closely with developer Sean McBeth, whose group did the coding for the site using their Primrose VR framework.

WebXR Code Snippets

Robots that Jump Blog

Access my Github site to find additional coding for WebXR, including Feature Detectors, sample WebXR apps using THREE.js and WebXR-Polyfill, and 3D object file loaders. There's lots of useful code snippets in the various WebXR apps I've developed which you can apply in your own projects.

Features

  • Pure vanilla ES6 JS coding from scratch
  • Supports WebXR 1.1. Spec
  • Allows embedding VR into standard web page layout
  • Supports responsive design for VR windows (unique!)
  • Works with VR-capable browsers, Samsung Gear, and Google Daydream
  • Fullscreen fallback when VR mode is not available
  • OBJ 3d file loading, materials support

Features

  • Defined specifications for a VR real estate app
  • Determined best WebVR framework for app (PrimroseVR)
  • Oversaw developers
  • UX Testing for completed app
  • QA Testing on app code and function

Virtual Reality Research & Publications

Here are a few publications I've authored that will help you get up to speed on WebXR and virtual reality in general. Study them, then contact me to develop your strategy for entering the VR scene.

The WebXR API

WebVR API presentation first slide

This presentation describes the main features of the WebXR API from a programming perspective, as well as giving a larger context for web-based virtual reality. It considers features of design in WebXR, and includes a special experience design "UX in VR" section. A good intro for learning how WebXR works.

WebXR Business Case

WebVR Business case first slide

This presentation is targeted specifically at design agencies producing websites and web-based services who would like to enter the virtual reality scene. It includes strategies for adding VR to existing web content, as well as a checklist of what to tell your boss when you're trying to get the green light for start virtual reality at your agency, company or other group.

Los Angeles WebXR Meetup

WebVR Meetup.com group Logo

I created the Los Angeles WebXR meetup (300+ members in July 2017) as a group for designers, UXers, and developers to exchange concepts, promote products, and demo cutting edge VR projects in the Los Angeles area. Frequently hosted by UploadLA, the main VR site in the greater Los Angeles area.


Advantages of WebXR

Awesome WebVR (Github archive)
responsive design layout comparing the historical web to WebXR.

I'm an Expert in WebXR Design, Development, and Project Management!

I've coded in WebXR since the original WebVR standard was developed, and can advise on the use of immersive media, as well as migration from existing apps and sites. For "UX in VR" to Design to hardcore coding, Contact me!


Other Immersive Media Projects: UX Diagrams | Language Learning App | WordPress