Presentation at Digility 2018 about Immersive Web

1. Immersive Web
Diego González-Zúñiga, PhD
@diekus

2. Diego González-Zúñiga, PhD

3. ?
• Chromium Based
• Evergreen browser

4. 55.62% 25.43% 13.3%
https://samsunginter.net
@samsunginternet

5. Source: http://gs.statcounter.com/browser-market-share/mobile/worldwide
54.95% 17.27% 13.38% 5.09%

7. VR is out of
the Hype
Cycle

8. VR is out of
the Hype
Cycle
"cellphone-based VR will still have
the most users" (when compared to
other VR setups) – J. Carmack (2017)
"integrated" headsets that combine the
power of PCs with mobile portability will
be "the mainstream of the VR market in
the next few years – P. Lucky
is the future of XR mobile?
source: https://ihsmarkit.com/research-
analysis/virtual-reality-in-retail.html

9. What do we
expect from VR?
?

10. ??
?
?
?
??
• Position tracking
• Orientation tracking
• Spatial sound
• Immersive content
• Different inputs
• Low latency
Expectations from XR

11. • Many devices
• Limited by hardware
• Different performance
• Different Inputs
• Complex 3D format workflow
• Fragmentated development
pipeline
Real Reality - challenges

12. Real Reality - distribution
pre-approved
closed environment
wait several minutes
download 100s of MBs
experience you discard after 1
use

13. fast
Modern Effective VR
frictionless
Cross-
device progressive
accessible
immediate
social
democratic

14. Modern Effective VR
frictionless
Cross-
device
progressive
accessible
immediate
social
fast
web
• Push Notifications
• Works Offline
• Flexibility
democratic

15. Modern Effective VR
JavaScript
69.8%
web
Most commonly used
programming languages*
HTML
68.5%
CSS
65.1%
SQL
57.0%
Java
45.3%
*source: https://insights.stackoverflow.com/survey/2018/

16. Modern Effective VRweb
This specification describes support
for accessing virtual reality (VR) and
augmented reality (AR) devices,
including sensors and head-mounted
displays, on the Web
XR

17. Modern Effective VRweb
XR
WebVR 1.1
WebXR
var vrDisplay;
navigator.getVRDisplays().then(function (displays) {
if (displays.length > 0) {
vrDisplay = displays[0];
}
});
navigator.xr.requestDevice().then(device => {
onXRAvailable(device);
}).catch(error => {
console.error('Unable to retrieve an XR device: ', e
});

18. web
XR
• Discoverability
• Reach
• Accessible XR
• Immediacy
• Socialness

19. web
XRoculus
Gear VR
Windows Mixed Reality
Daydream
Cardboard
rift
Go

20. WebXR support
helios

21. WebXR support

22. Render scene
with WebGL
Send the rendered frame
To the headset
Get headset position
Position camera
in scene

23. WebXR
WebGL
Gamepad API
Web APIs
Web Bluetooth
Progressive
Web Apps
Web Audio

24. What does this
mean for XR and
the Web?
Does it change anything?
?

25. New Browsers
Desktop
browsers
Mobile
browsers
XR
browsers

26. New Browsers

27. New Workflows

28. New Workflows

29. New Workflows

30. Source: https://www.blog.google/products/google-ar-vr/augmented-reality-web-everyone/
New Workflows

31. New Axis

32. @BilyanaVacheva
New Axis

33. Creating WebXR
experiences
it’s almost like creating a website
!

34. WebXR
WebGL
Gamepad API
Frameworks
Web APIs
BabylonJS
A-Frame
Web Bluetooth
Simbol
Progressive
Web Apps
Web Audio
three.js

36. Progressive Enhancement

37. Progressive Enhancement
https://samsunginter.net/pixel_travel

38. New Asset Types
-GLTF file format for 3D models

39. pandapix
<a-entity a-layout="modifier:15;shape:circle" position="0 1.7 5" rotation="0 -5 0">
…
</a-entity>
bit.ly/panda-pix

40. pandapix
AFRAME.registerComponent('a-layout', {
schema: {
shape:{type: 'string', default: 'circle'},
modifier:{type:'int', default:4},
items:{type:'array', default:[]}
},
init: function(){
...
},
update : function(){
...
},
setCircleLayout : function(){
...
},
setGridLayout : function(){
...
},
setSpiralLayout : function(){
...
}
});

41. pandapix
init: function(){
this.data.items = this.el.children;
let curComp = this.el.components['a-layout’];
//set mutationObserver to the current element
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
for (var i = 0; i < mutation.addedNodes.length; i++)
curComp.refreshLayout();
});
});
observer.observe(this.el, { childList: true });
document.querySelector('a-scene').addEventListener('loaded', function(){
curComp.refreshLayout();
});
}

42. LOVE Sculpture
bit.ly/love-sculpture

43. LOVE Sculpture

44. LOVE Sculpture
AFRAME.registerComponent("fly", {
schema: {
stepFactor: { type: "number", default: 0.005 },
isFlying: { type: "boolean", default: true }
},
tick: function () {
if (this.data.isFlying) {
let newP =
this.el.components.camera.camera.parent.position.add(this.el.components.camera.camera
.getWorldDirection().multiplyScalar(this.data.stepFactor));
this.el.setAttribute('position', newP)
}
}
});is.data.stepFactor));
}
});
-Build, mix and match with components from the community

45. LOVE Sculpture
<a-assets>
<img id=“myImgId" src=“path/to/image.png">
</a-assets>
<a-image src="#myImgId" position="11.009 1.776 5.347"
rotation="0 90 0" scale="15 15 15"></a-image>
-Preload assets before using them

46. Ava
bit.ly/ava-vr

47. • Based in PNG images
• Using a ‘look-at’ component
• Structures built with help of online editor
• Explain sound in different browsers
Ava

48. • Depending on the browser, a ‘user gesture’
is required to start playing audio.
Ava - sound
https://bit.ly/webaudio-api

49. -ize it
• Manifest file + Service Worker
• Icon on home screen
• Add Offline capabilities
• True mobile VR experience

50. -ize it
• Minimal to No browser UI
• Small initial download size
• Notifications
• Data Storage
• Camera/Audio
• GPS/Location Services
• Bluetooth
{
"lang": "en",
"dir": "ltr",
"name": "pandapix",
"description": "fotos + pandes",
"short_name": "pandapix",
"icons": [ {
"src": "imgs/icon192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "imgs/icon512.png",
"sizes": "512x512",
"type": "image/png"
}],
"start_url": "./indexr.html",
"display": "standalone",
"orientation": "portrait",
"theme_color": "#3d3d3d",
"background_color": "#3d3d3d"
}

51. Creating WebXR
experiences
it’s almost like creating a website
!

52. Limitations
• Performance is still a bit lower than native XR
• Resolution is a bit lower than native XR
• AR is still experimental
• Specification is under development
• Size of assets on mobile connections might be too big

53. • AR on WebXR
• 5G for better, faster experiences
• New devices with growing capabilities
• Declarative Depth? CSS 3D?
Coming up next

54. Effective Mobile XR
• Accesible XR
• Linkability – The power of the URL
• Immediacy
• Democratic
• Bring designers and creative people to the development mix

55. Effective Mobile XR
• Explore new storytelling
• Play with depth and semantics of elements
• Progressive enhancement in a whole new dimension
• Allows you to explore and interact with data in new ways
• It’s ready now!*

56. Some Examples
Dance Tonite
LCD SoundSystem
/ Google
A-Painter
Mozilla
Renault Kadjar
Little Workshop
Dr. Who Time
Travel
BBC / goodboy

57. @diekus
@samsunginternetdanke
It’s time to start
creating for
everyone