SlideShare a Scribd company logo
Making VR Webby
@diekus
@samsunginternet
Diego González-Zúñiga, PhD (@diekus)
Samsung Research UK
FrankenJS
Making VR Webby
Android browser. Chromium based. Standards compliant. Evergreen. PWA. WebVR
https://samsunginter.net/about
@samsunginternet
Making VR Webby
VR
Linkability
Shared context
User Choice
Asks your permission
Privacy-friendly
Accessible
Cross-Platform
Open
Low latency
Immersive
Can track orientation
Can track position
360 media
Different input methods
What difference does this make in traditional “non-traditional” experiences?
What difference does this make in traditional “non-traditional” experiences?
Making VR Webby
Making VR Webby
VRTranquilitie, collaboration between
NTU Singapore and Samsung Internet
Paris, June 2017
social
reach
ubiquitous/immediate
discoverability
idea behind WebVR
++->
headset**mobile*browserContent
socialreach ubiquitous/immediatediscoverability
WebVR
What is WebVR?
WebVR is a JavaScript API for
creating immersive 3D, Virtual
Reality experiences in your browser.
It provides access to VR devices.
socialreach ubiquitous/immediatediscoverability
VR Experience
Access to cloud data (noise pollution)
Physical Web (beacon)
QR Codes to different places
socialreach ubiquitous/immediatediscoverability
Physical Web
www.myVRapp.com
www.myVRshop.com
www.myVRgame.com
socialreach ubiquitous/immediatediscoverability
Google VR SDK
(iOS/Android/Unity)
Oculus Mobile SDK
Viveport SDK
(Android/Windows)
WebVR
Widest delivery network in existence: the Web
socialreach ubiquitous/immediatediscoverability
Cost of entry for simple experiences for consumers
translates to access to a browser in a device.
source: webvr.rocks
* Compatible with WebVR
socialreach ubiquitous/immediatediscoverability
socialreach ubiquitous/immediatediscoverability
-Hey! Check out this 360° pic I took on
my holidays!
-unlock phone.
-navigate home screen to get to App Store.
-open App Store.
-click on search.
-type the name of a 360° pic player.
-click install.
-wait till it downloads.
-search for app icon on home screen.
-click on app icon.
-load picture.
-view.
socialreach ubiquitous/immediatediscoverability
Making VR Webby
Hey! Check out this 360° pic I took on
my holidays!
Shares link.
socialreach ubiquitous/immediatediscoverability
You want to break free
• Pre-approved content.
• Closed environment.
• Only most downloaded apps are featured prominently.
• Restrictive policies.
• Huge amount of friction.
• No search engine discoverability.
“ ”
…Seriously?
Frictionless
• bit.ly/hollywood-bubble (back of the
Hollywood sign)
• bit.ly/penca-beach (relaxing beach in Costa
Rica)
• bit.ly/waterfall-cr1 (waterfall in Costa Rica)
• bit.ly/gardens-Singapore (Gardens by the
Bay Singapore)
socialreach ubiquitous/immediatediscoverability
socialreach ubiquitous/immediatediscoverability
https://metaverse.samsunginter.net
https://hungry-pandas.glitch.me
Networked A-Frame
WebRTC
PEERJS
Also available:
But wait… there’s more.
Web Audio
Different sources like media from page, live mic streams, oscillator sounds
Panning effects for spatialized sound
http://bit.ly/webaudio-api
Game Pad API
http://bit.ly/gamepad-api
Game Pad Extensions API
Progressive Enhancement
Content that adapts to the platform it
is displayed on is accessible and
elegant.
You can go from an ‘engaging’ magic window to a full 6-DoF experience.
-ise it.
From the browser to your home
screen to your headset.
Independent of network and
connectivity.
Frictionless experiences by design.
Preload Assets (Audio, Video)
http://bit.ly/begin-pwa
From a physical object to the browser
to your home screen to your headset.
What about the Web on VR?
2- New workflows1- New browsers 3- New axis
1- New browsers
2- New workflows
3- New axis
source: Josh Carpenter, Google
It’s not a brand “thing”, it’s a web
standards “thing”.
Accessible platform for creatives,
developers and makers
http://ava-dev1.glitch.me/
#AvaBeakerBurial
Collaboration with Archaeologist Maya Hoole,
Project Manager of the Achavanich Beaker Burial Project
The web has been around for 25
years. It’s not going anywhere.
-D.Appelquist
Making VR Webby
There has never been more
innovation in the web platform...
…but to foster it we need to keep it
open.
Collaboration, standards and
openness are key.
Web + VR =
• Democratize VR
• Help commoditization of VR
• Can use a flexible tech stack
• Enable innovative experiences
socialreac
h
ubiquitous/immediat
e
discoverabilit
y
Useful Links
• @samsunginternet
• samsunginternet
• /samsunginternet
• samsunginternet
• https://samsunginter.net
• https://github.com/samsunginternet
• https://medium.com/samsung-internet-dev
Making VR Webby
@diekus
@samsunginternet
Diego González-Zúñiga, PhD
Samsung Research UK
FrankenJS

More Related Content

Making VR Webby

Editor's Notes

  1. Presentation, Name, Work. Pleasure to be at this event
  2. Presentation, Name, Work. Pleasure to be at this event
  3. I work for Samsung. I am a senior engineer in the web advocacy team. But what exactly is Samsung Internet?
  4. It’s a browser. How many of you knew Samsung has a browser? Why does Samsung have a browser? As a hardware manufacturer, specific view of UX and privacy for our users Diversity attracts innovation and creativity. Part of this innovation goes into the way we can do VR. So following we will talk about 1) web and 2) vr.
  5. 3rd most used browser in Germany. 16.8% usage. This means that making sure it (and content) work fine is crucial. 3rd most used mobile browser in Europe. And North America.
  6. 3rd most used browser in Denmark. 16.8% usage. This means that making sure it (and content) work fine is crucial. 3rd most used mobile browser in Europe. And North America.
  7. A slide that allows to explain what makes the web webby and what makes VR VR-y (??) Certain things that a user expecxts from the web and from vr
  8. Now we question the audience, how does this change traditional (non-traditional) experiences. “Lets look at a fashion-tech exhibition for example.”
  9. Mention project VR Tranquilitie, as a collaboration we did with Galina Mihaleva fashion designer from Singapore.
  10. VR Tranquilities exhibited in Look Forward Fashion Tech festival in Paris. Over 4000 views to the associated WebVR experience. Cause everything looks sexier with a headset…
  11. Meant to be Criticism for noise pollution. Using cloud data to visualize noise pollution in different parts of the world. Consisted of LEDs in the dress that react to this data and a VR experience that also reacts to the data, in this case noisier places would translate in noisier VR experiences
  12. We had a unique challenge as we wanted to provide a VR experience that would be able to be experienced by as many people possible in the event. We had to democratize the VR experience
  13. Several factors that were at play gave WebVR an edge for the solution. We required: An exp that was immediate. Users had to be able to try it out themselves from their devices An experience able to reach the largest number of users. Sharing Liking Distribution Discoverability Ability to be social, not only through social media but also be able to enable interactions inside the VR world and in the physical world.
  14. How is this achieved? The idea behind webvr is to take immersive content and deliver it through a browser. All you need is a device (any device that supports a modern browser) and a optionally a headset. You can rely on magic window effect to engage with your users even without having a headset
  15. Among the benefits that we get with this is that is allows maximum discoverability, reach, immediate and social experiences .
  16. Lets take a look at discoverability. So back our example, we achieved maximum reach by creating a WebVR project, and boosted discoverability using two other web technologies. QR Codes (Shape Detection API) that link to different places in the experience. Physical Web, by putting a beacon in the dress that broadcasts the url to the vr experience
  17. Think of associated experiences to physical places. Theaters, museums, general info
  18. \lets now talk about reach. With WebVR you can create experiences that run across multiple devices, from a phone, to a high end headset with one codebase. No need to recompile or develop for specific platforms. All in the widest delivery network in existance.
  19. Breakdown of platforms, OSs and browswers that can play WebVR experiences Mention that the polyfill covers every other browser that does not support WebVR, including not modern ones like Safari.
  20. If apple is your cup of tea.
  21. Lets look at an example. FRICTIONLESS BY DESIGN
  22. Ideal scenario (bubble pic)
  23. Don’t even get me started.
  24. Lets focus on immediate now. And lets not talk about it. Let’s experience the frictionless design that WebVR has. Give it a *quick* try. Fancy visiting a waterfall in Costa Rica? Or maybe the back of the Hollywood sign in L.A.? Or the Gardens by the Bay in Singapore? Go on, browse to these addresses. Explain how the ubiquitous nature of the web is allowing everyone in the room to see this 360 experience.
  25. Finally lets check out how WebVR can enable social experiences, where experiences like Samsungs Metaverse or Hungry pandas provide a template for networking apps.
  26. Talk about how other web technologies that can enhance a webvr application, likle Web Audio, PWA, Physical Web, QR Code, Gamepad API…
  27. Explain the benefits of a PWA
  28. With everything weve seen today… we can go From a physical object to the browser to your home screen to your headset. …In under 30 seconds.
  29. Lets flip the coin. How can VR enhance the existing web? We have started to see 1-new browsers 2- new workflows 3- New Axis --worth looking at CSS 3D transforms?
  30. New browsers like Samsung internet and Oculus Browser for Gear VR, Chrome for DayDream
  31. New workflows, where you might be seeing a video on your phone, insert the phone into the headset and automatically play in 360 views
  32. And rethink how we can build semantics into depth. How to use VR to enhance the existing web.
  33. And the best thing is
  34. And at the same time it will be the best place for original content due to its accessible and democratic nature
  35. We think the web Will be the prefered distribution method for vr, the same way it became for video video nowadays.
  36. Well, at the moment
  37. Add philosophical thought.
  38. WebVR has the potential to democratize VR.
  39. Presentation, Name, Work. Pleasure to be at this event
  40. Presentation, Name, Work. Pleasure to be at this event
  41. Lets look at an example for an emerging technology. Lets move on to the second topic at hand, VR.
  42. VR has come a long way . While this is an example from 1993, virtuality
  43. we don’t look less dorky in 2017. This is an example of vr in a google cardboard. Im going to briefly talk about the current models that are being pushed by the industry regarding VR.