Bringing VR to the Web

Convert to Slide Deck


Virtual Reality has tradionally been the domain of the Desktop or Native App. New APIs give a two way benefit allowing VR content to be delivered quickly through the web platform whilst taking advantage of the many benefits the web offers.

This talk aims to discuss VR as a new platform, in the same way the mobile web was. What lessons can we learn from that era to avoid dividing the web and how can developers get involved to influence the way WebVR grows.

VR as a new platform

The current wave of VR has been around for a few years now and has had a wonderous start.

Of the most popular headsets there have been millions of GearVRs sold and Tens of Millions of Cardboard units.

This is only the beginning we will look back on VR today

– Slide –

As we do on mobile phones in the 80s

– slide –

Right now there are now 2 Virtual Reality web browsers, for browsing the web inside the headset, Samsung Internet for Gear VR Chrome for Daydream with more coming soon.

There are some new web apis for providing enhanced content for VR headsets

such as enabling the playing of 360 media

– slide –

and setting the environment.

Picture of me and dan

Old mobile phone

Video of Samsung Internet in Browser

360deg media being handled in the browser

The state of VR today (WebGL based)

There is a suite of new APIs for enhancing WebGL to access head tracking, and handling the distortion and multiple displays needed for VR headsets.

These are known as the WebVR APIs

Using these one can bring content from 3D to the web

As well as the obvious gaming applications this can be used for shopping, education, sports, health and travel

The web makes it ideal for single use throw away experiences with the aim of going viral or providing a low barrier for entry.

One can take advantage of the web’s powerful apis to enhance these experiences

There is a polyfill to allow these apis to be used on iOS and mobile chrome with a google cardboard.

VRDisplay.requestPresent({ source: myCanvas });

Copresence and Metaverse

Remote Copresence on the Web

Copresence: occurrence of two or more things together in the same place and time

P2P Via WebRTC

WebRTC is an Api to allow peer to peer messaging between browsers.

WebRTC primarily used for Video Chat now will probably become the primary method of delivering copresence. Allowing multiple avatars to share the same virtual space.

Explain how it can be used for Copresence with some code

WebVR Copresence by Boris Smus

How the web platform can enhance VR

The web as a platform has been delivering media content for years now.

There are many reasons Native platforms can be trump the web with regard to quality.

But this is a trade off we make for the many benefits we gain from the web.

– slide –

The web brings us the ability to reach a large audience across a wide variety of platforms,

We can take advantage of URLs and deep linking

The web also has access to many useful APIs which VR will bring to entirely new relevance.

Why do VR on the web?

“If visual fidelity was all that mattered we would be watching blu-rays not Netflix”

– Josh Carpenter

Expectations by being on the web

Even though one may be making something new and amazing, the wow factor for VR will wear off and users have a short attention span.

The lessons we’ve learnt in engaging uers on the web are still applicable here

Primarily reduce the barrier between the user and content.

Start fast. Each barrier to entry will lose a signifcant portion of your users.

The advantage of the web is that one link click takes you to the content but that advantage is lost easily.

Think of showing VR content the same way you would use video content,

Service Workers and Cache APIs

There are new APIs for advanced network control known as a Service Worker

Who here has used Service Workers Before?

Using the Service worker to cache assets, models etc

Work offline, reduce network usage, handle assets

Here we have a Service worker registered to cache all out intial assets so they work offline and are available quickly.

We can then send messages to the service worker to cache additional content as it is needed, e.g. the assests for the next level

this allows us to get started quickly and pull down additional assets in the background

Cross-origin Service Workers & Foreign Fetch libraries and assets common across VR experiences can be cached and made available quickly for a fast VR browsing experience.

The new Crossorigin Service Workers Foreign fetch will allow reusable VR components such as popular models or libraries to be cached on the client so have a large chance of not needing to be downloaded again.

// in the service worker
self.addEventListener('install', function(event) {'my-cache')
	.then(cache => cache.addAll([

self.addEventListener('fetch', function(event) {
	.then(function(response) {
        return response || fetch(event.request);
// in the service worker
self.addEventListener('message', function(event) {
	if ( === 'CACHE') {'my-cache')
		.then(cache => cache.addAll(;
// On the client
	action: 'CACHE',
	assets: [

Works across devices

until there is enough content that people are regularly browsing in a headset

People probably won’t have a head set to hand

Need to support cardboard and gearvr as well as htc vive and occulus rift

The potential future of VR in the web (Markup CSS3D)

The web isn’t just WebGL though we have 25 years of content already available

The web should start providing additional APIs to bring this content into the future

Should the web handle the concept of a persistent avatar to maintain a user across multiple domains or should that be left to the web platform?

Should html be able to mark up 3D models or should it be left up to WebGL?

What about the metaverse?

The idea of the metaverse is that of a persistent shared virtual space

Can this grow out of the web platform?

The Future?

.container {
	overflow-y: scroll;
	perspective: 600px;
	perspective: real3d; /* handle headset perspective?! */
	height: 100vh;
.container .hero {
	transform: translateZ(100px);

How to get involved in Standards to influence the future of VR

These discussions are happening today!

If anything in this talk has interested you then please get involved.

If you start now you will be able to shape the next medium of the web

I don’t know about you guys but I am pretty excited for our VR future.

Get involved in standards