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.
Avoid interstitials redirecting users to different devices or platforms
Avoid long loading
Work on desktop but enhance into VR
Think of showing VR content the same way you would use video content,
Content is buffered, not loaded all in one go
Content is visible on the page straight away
Content quality improves with bandwidth and device power
< 3s Acceptable
< 1s Good
< 0.5s Ideal
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 workerself.addEventListener('install',function(event){caches.open('my-cache').then(cache=>cache.addAll(['texture.jpg','model.gltf','engine.js']));});self.addEventListener('fetch',function(event){event.respondWith(caches.match(event.request).then(function(response){returnresponse||fetch(event.request);}););});
// in the service workerself.addEventListener('message',function(event){if(event.data.action==='CACHE'){caches.open('my-cache').then(cache=>cache.addAll(event.data.assets));}});
// On the clientnavigator.serviceWorker.controller.postMessage({action:'CACHE',assets:['/level2.gltf','level2-sounds.wav']})
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
