“WebXR” is the API formerly known as WebVR, upgraded to embrace the web’s potential not just for Virtual Reality, but for immersive Mixed Reality experiences. We can start exploring the possibilities now, using libraries like Mozilla’s WebXR Polyfill and Google’s three.ar.js, plus special development browsers that incorporate ARCore (Android) or ARKit (iOS). This talk will share how you can begin to blend the real world and the digital world as a Mixed Reality web developer - and a glimpse into the exciting future of the Immersive Web.

2. @poshaughnessy
@samsunginternet

3. The Physical & Digital worlds are
merging

4. XR
● Cross Reality?

5. XR
● Cross Reality?
● Extensible Reality?

6. XR
● Cross Reality?
● Extensible Reality?
● [Whatever You Want] Reality!
youtu.be/U-CpA5d9MjI?t=10m54s

7. XR
Real
Reality
Augmented
Reality
Mixed
Reality
Virtual
Reality
XR

8. Headset-based
Mixed Reality
VR headsets with
pass-through camera
Dedicated MR
headsets

9. @winston__chen

10. HoloLems via
Gizmodo

11. Magic Leap via
The Next Web

12. ARKitARCore
Mobile-based
Mixed Reality

13. ARCore & ARKit features
● Positional tracking
● Surface detection
● Light estimation
developers.google.com/ar/discover/ developer.apple.com/arkit/

14. ARKitARCore
● iOS 11
● iPhone 6s
and newer
● Android 7+
● Various devices
(Samsung S7, S8,
Pixel 1 & 2...)

15. Sothebys Curate

16. Golf Scope via
@Rengle820

17. By Abhishek Singh

18. But what about the
Web?

19. WebVR support
Platform
Browsers

20. Platform
Browsers
WebVR support

21. Experimental mobile AR browsers
WebARonARCore
Google AR
Mozilla WebXR Viewer
(ARKit)
WebARonARKit

22. The landscape is evolving fast
Sources: TechCrunch, CNET, Magic Leap

23. 69.8%
68.5%
Web technologies are
familiar to many
65.1%
JavaScript
HTML
CSS
Top 3 most popular technologies - Stack Overflow Developer Survey 2018

24. The Web lets people dive right in
Progressive Enhancement, by Arturo Paracuellos

25. And we can make use of
Progressive Web Apps
samsunginter.net/airhorn

26. ● Location based
(GPS, compass)
● HTML + JS, but
needed native SDK
(Wikitude)
2011

27. ● Marker based
● getUserMedia
(WebRTC)
● JSARToolkit
2012

28. ● WebVR
● Oculus Rift DK
● Experimental
browser builds
2014

29. 2017
● three.ar.js
● Experimental
browsers
(WebARonARCore,
WebARonARKit)

30. bit.ly/new-and-unusual-uses-of-vr
WebVR examples
vr.with.in aframe.io/a-painter/ learnbrite.com
Storytelling Art Education

31. threejs.org

32. aframe.io

33. babylonjs.com

34. Unity3D WebVR Assets
hacks.mozilla.org/2018/02/create-vr-on-the-web-using-unity3d/

35. Getting started with WebVR
aframe.io/docs/0.8.0/introduction/

36. Next: WebXR
www.w3.org/blog/2018/01/towards-the-immersive-web/
WebVR
Community Group
Immersive Web
Community Group
WebVR 2 API WebXR Device API

37. github.com/immersive-web

38. WebXR
bit.ly/webxr-slides-by-brandon-jones
● Not backwards compatible with WebVR
● But most WebVR apps “should port easily”
● And no need to upgrade straight away

39. WebXR
● AR not in initial release but “coming soon”
● Focus on phone-based AR first
bit.ly/webxr-slides-by-brandon-jones

40. Can be enabled in flags in Chrome (origin trial soon, maybe released Q4)

41. Warning
Spec in
development.
Libraries in flux.

42. immersive-web.github.io/webxr/
// WebVR
navigator.getVRDisplays(displays => { ...
// WebXR
navigator.xr.requestDevice().then(device => {

43. github.com/mozilla/three.xr.js/

44. github.com/mozilla/aframe-xr

45. mozilla.github.io/aframe-xr/examples/xr/basic/

46. mozilla.github.io/aframe-xr/examples/ar/hit_test

47. github.com/google-ar/three.ar.js (currently uses WebVR API)
WebARonARCore
WebARonARKit

48. Who wants to see a
dancing AR panda?

49. Here’s one we recorded earlier
youtu.be/jG7d520Umkc

50. Why/how did we do this?
why not?
three.ar.js
Thank you @diekus

51. Google Blocks and Poly
poly.google.comvr.google.com/blocks/

52. OBJ FBX

53. mixamo.com

55. bit.ly/don-mccurdy-mixamo-blender

57. FBX GLTF
github.com/Kupoman/blendergltf

58. <a-entity id="panda"
gltf-model="url(panda.gltf)"
animation-mixer="clip:Macarena;"
position="0 0 -3"
rotation="0 180 0">
</a-entity>

59. samsunginter.net/pandarena/

60. <script src="three.js"></script>
<script src="Projector.js"></script>
<script src="VRControls.js"></script>
<script src="GLTFLoader.js"></script>
<script src="three.ar.js"></script>

61. THREE.ARUtils.getARDisplay().then(display => {
if (display) {
arDisplay = display;
init();
} else {
THREE.ARUtils.displayUnsupportedMessage();
}
});

62. const loader = new THREE.GLTFLoader();
loader.load('panda.gltf', gltf => {
panda = gltf.scene;
mixer = new THREE.AnimationMixer( panda );
const clips = gltf.animations;
clips.forEach(clip => {
mixer.clipAction( clip ).play();
});
scene.add(panda);

63. const loader = new THREE.GLTFLoader();
loader.load('panda.gltf', gltf => {
panda = gltf.scene;
mixer = new THREE.AnimationMixer( panda );
const clips = gltf.animations;
clips.forEach(clip => {
mixer.clipAction( clip ).play();
});
scene.add(panda);

64. const loader = new THREE.GLTFLoader();
loader.load('panda.gltf', gltf => {
panda = gltf.scene;
mixer = new THREE.AnimationMixer( panda );
const clips = gltf.animations;
clips.forEach(clip => {
mixer.clipAction( clip ).play();
});
scene.add(panda);

65. // on touch start
arDisplay.hitTest(normalisedX, normalisedY);
// if hit
THREE.ARUtils.placeObjectAtHit(panda, hit,
moveEasingValue, applyOrientation);

66. github.com/SamsungInternet/PandaMacARena

67. samsunginter.net/PandaMacARena/
WebARonARCore
WebARonARKit
(untested!)

68. github.com/chenzlabs/aframe-ar logo-test.glitch.me/ar.html
by Ada Rose Cannon

69. Loading future...
@keiichiban

70. We’re at the beginning of a new
era of computing

71. “helps us ask the right questions,
find the right answers and start to
chart the course to a future we all
want to live in”
Leap Motion
Exploring now...

72. @poshaughnessy
@samsunginternet
bit.ly/codemotion-webxr-2018
Thanks Codemotion! :)