Virtual reality (VR) is an interesting technological concept that has been gaining lots of traction in recent years. When compared to the daily tech of our modern life, being limited to the dimensions of the screens on our phones, tablets, computers, and TVs starts to feel a little outdated. Using a VR headset in conjunction with motion controls gives a sense of liberation and exciting possibilities.
From science fiction concepts in pop culture, to recent modern hardware and software offerings from big tech companies like Meta, Sony, and Apple, it is becoming apparent that this technology is moving away from an expensive hobby for VR enthusiasts and finally towards a mainstream consumer base.
Meta (formerly Facebook), who manage the greatest share of the VR hardware market, have made over $1.5 billion in software sales on their VR app store since 2019. They have sold over 20 million of their flagship standalone Quest VR headsets as of this year. On the Quest app store, 24 apps have earned over $1 million, 8 apps have earned over $20 million, 1 app has earned $2 million in less than 24 hours, and – most surprisingly – 1 app has managed to earn $1 million in less than an hour.
Sales of Meta’s Quest headsets and VR software are projected to grow exponentially. Tech companies such as Sony and Apple are eagerly announcing and releasing their own VR headsets and VR software titles. For these reasons alone, it is evident that VR is a lucrative platform for any company with a considerable digital presence to consider building applications for.
The potential for VR implementations of software across industries is limitless. Sectors such as education, gaming, healthcare, and social networking could massively change how they operate over the next 5-10 years through the use of VR. Many new concepts could soon become a daily norm in one’s digital life.
How does VR work when using websites?
Websites are another aspect of our digital life that could soon undergo radical change when viewed on a VR compatible device.
Using a web-browser inside a VR headset specifically is something that is widely supported by all of the most popular modern web browsers. Chrome, Edge, Firefox, Opera, and Safari all support something called the WebXR specification.
The WebXR specification originally named the WebVR specification was first officially drafted all the way back in spring 2014. It was a specification by an engineer from Mozilla, the organisation that created and maintains Firefox. It was renamed to WebXR and a new 1.0 specification was released in March 2016. The specification now covers XR (mixed reality) – a term used to cover both AR (augmented reality) and VR (virtual reality). Both technologies rely on similar core concepts and share common functionality.
This specification outlines how VR hardware such as headsets and motion control’s data can be used in conjunction with browsers. It provides developers with a lower level browser, tools and API’s – making these web experiences possible with this type of hardware.
A typical use case for websites using this specification is an end user being able to view a custom 3D environment from a first person perspective. Perceiving the environment as if it is naturally surrounding them as an alternative form of reality, hence the term “virtual reality”. Normal body movements such as moving your head or arms or contorting your body translates smoothly in realtime. This creates an optical illusion of existing within the virtual reality, in what is colloquially referred to as an ‘immersive experience’.
How can a web developer build a VR ready website?
Traditionally, 3D based applications are built using a dedicated piece of 3D game engine software. Examples include Unity or Unreal Engine used in conjunction with a 3D modelling program like Blender. Web developers creating traditional 2D websites typically won’t have any relevant experience useful to creating anything in this type of software. The learning curve for these software suites can be extremely steep.
The front-end aspect of most modern websites are written using React or Vue components. These are used in conjunction with a templating framework which produces the HTML markup. The web browser renders this as a web page visible to the end user.
In contrast to traditional React and Vue components that front-end developers write to produce HTML markup, working with a 3D environment has extra complexities. These include producing your own markup language and creating something that renders that markup into a 3D scene within the web browser.
The 3D scene rendering technology is also a precursor to being able to actually view an XR application as intended. This is because the underlying technology requires the same 3D scene to be rendered from 2 different angles. This is to reflect the way your eyes naturally observe 2 different images due to their position and angle adjacent from each other.
Only until very recently (2019) has there been any 3D/XR offerings that integrate natively with these frameworks. Old and existing dedicated XR frameworks have been cumbersome in areas that Vue and React already have strong points in.
A team of open source developers formed the React Three Fibre team and created a 3D framework built on-top of Three JS mixed with React referred to as R3F, and also offered XR as a first party package that works on top of R3F.
Tres JS is a vue based alternative to R3F, that is becoming the de facto Vue framework for building 3D websites. On top of this I myself have been building XR functionality and have decided to contribute to the first party XR package that will eventually be supported as part of the official Tres JS Ecosystem, (see the in progress package on X by going to @tresjs/xr).
VR website in action!
Here is an example of a VR web application built using Nuxt 3 + Tres JS viewed on a Quest 3 VR headset using the built-in Oculus web browser (a chromium based browser variant) controlled using touch plus controllers (handheld motion controllers).
This application contains the following features:
- A 3D canvas for all your 3D based assets to live in and for you to explore (Tres Canvas)
- A button to transform the page from a flat typical website into an immersive experience, button disabled on none VR devices (VR Immerse Button)
- The ability to teleport to different locations with the 3D space by using motion controls in combination with an analogue stick on either touch controller (Teleporter)
- A room component containing walls, floors, ceiling, a window, and a door with a door number, used to create a sense of enclosed/purposeful space (Room component)
- An avatar (floating head with googly eyes) intended to be a visible representation of the player, with customizable pupils colour, eyes colour, and head colour. The user’s name appears above the character’s head in 3D lettering
- A skybox – a flat image representing the sky (in this case a sunset) wrapping the 3D environment, giving the sense of a natural and expansive environment
- A fan-made 3D model of a Crash Bandicoot model loaded from a GLTF file into the environment. The GLTF file format is a JSON standard used in many 3D frameworks and optimised for the web.
This demo showcases many common techniques and strategies used by developers who specialise in developing 3D software. In this prototype everything is accomplished using Vue components and a single 3D model file. This should all feel vaguely familiar to a frontend developer, even if they have zero or very little experience working with 3D applications.
This prototype is an example of an exciting evolutionary step of what web based applications can be, and what frontend developers can accomplish.
What’s next?
With this prototype to draw inspiration and proof of concept code from, I am taking up the task of helping the Author of Tres JS (Alvaro Saburido) create a new first party package for the Tres Framework named @tres/xr. This package will extend the Tres Ecosystem. It will allow Vue developers to create VR and AR experiences much more easily, with less code and common XR functionality readily available.
For updates on this project, cutting edge developments in 3D and XR on the web, and peaking into the future of what metaverses will look like, check out Wade’s X account here!
For more information on the development work we complete here at Ultimate, head over to our development page!
