SlideShare a Scribd company logo
WebXR: Introducing Mixed Reality and the Immersive Web - Peter O'Shaughnessy - Codemotion Rome 2018
@poshaughnessy
@samsunginternet
The Physical & Digital worlds are
merging
XR
● Cross Reality?
XR
● Cross Reality?
● Extensible Reality?
XR
● Cross Reality?
● Extensible Reality?
● [Whatever You Want] Reality!
youtu.be/U-CpA5d9MjI?t=10m54s
XR
Real
Reality
Augmented
Reality
Mixed
Reality
Virtual
Reality
XR
Headset-based
Mixed Reality
VR headsets with
pass-through camera
Dedicated MR
headsets
@winston__chen
HoloLems via
Gizmodo
Magic Leap via
The Next Web
ARKitARCore
Mobile-based
Mixed Reality
ARCore & ARKit features
● Positional tracking
● Surface detection
● Light estimation
developers.google.com/ar/discover/ developer.apple.com/arkit/
ARKitARCore
● iOS 11
● iPhone 6s
and newer
● Android 7+
● Various devices
(Samsung S7, S8,
Pixel 1 & 2...)
Sothebys Curate
Golf Scope via
@Rengle820
By Abhishek Singh
But what about the
Web?
WebVR support
Platform
Browsers
Platform
Browsers
WebVR support
Experimental mobile AR browsers
WebARonARCore
Google AR
Mozilla WebXR Viewer
(ARKit)
WebARonARKit
The landscape is evolving fast
Sources: TechCrunch, CNET, Magic Leap
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
The Web lets people dive right in
Progressive Enhancement, by Arturo Paracuellos
And we can make use of
Progressive Web Apps
samsunginter.net/airhorn
● Location based
(GPS, compass)
● HTML + JS, but
needed native SDK
(Wikitude)
2011
● Marker based
● getUserMedia
(WebRTC)
● JSARToolkit
2012
● WebVR
● Oculus Rift DK
● Experimental
browser builds
2014
2017
● three.ar.js
● Experimental
browsers
(WebARonARCore,
WebARonARKit)
bit.ly/new-and-unusual-uses-of-vr
WebVR examples
vr.with.in aframe.io/a-painter/ learnbrite.com
Storytelling Art Education
threejs.org
aframe.io
babylonjs.com
Unity3D WebVR Assets
hacks.mozilla.org/2018/02/create-vr-on-the-web-using-unity3d/
Getting started with WebVR
aframe.io/docs/0.8.0/introduction/
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
github.com/immersive-web
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
WebXR
● AR not in initial release but “coming soon”
● Focus on phone-based AR first
bit.ly/webxr-slides-by-brandon-jones
Can be enabled in flags in Chrome (origin trial soon, maybe released Q4)
Warning
Spec in
development.
Libraries in flux.
immersive-web.github.io/webxr/
// WebVR
navigator.getVRDisplays(displays => { ...
// WebXR
navigator.xr.requestDevice().then(device => {
github.com/mozilla/three.xr.js/
github.com/mozilla/aframe-xr
mozilla.github.io/aframe-xr/examples/xr/basic/
mozilla.github.io/aframe-xr/examples/ar/hit_test
github.com/google-ar/three.ar.js (currently uses WebVR API)
WebARonARCore
WebARonARKit
Who wants to see a
dancing AR panda?
Here’s one we recorded earlier
youtu.be/jG7d520Umkc
Why/how did we do this?
why not?
three.ar.js
Thank you @diekus
Google Blocks and Poly
poly.google.comvr.google.com/blocks/
OBJ FBX
mixamo.com
WebXR: Introducing Mixed Reality and the Immersive Web - Peter O'Shaughnessy - Codemotion Rome 2018
bit.ly/don-mccurdy-mixamo-blender
WebXR: Introducing Mixed Reality and the Immersive Web - Peter O'Shaughnessy - Codemotion Rome 2018
FBX GLTF
github.com/Kupoman/blendergltf
<a-entity id="panda"
gltf-model="url(panda.gltf)"
animation-mixer="clip:Macarena;"
position="0 0 -3"
rotation="0 180 0">
</a-entity>
samsunginter.net/pandarena/
<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>
THREE.ARUtils.getARDisplay().then(display => {
if (display) {
arDisplay = display;
init();
} else {
THREE.ARUtils.displayUnsupportedMessage();
}
});
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);
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);
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);
// on touch start
arDisplay.hitTest(normalisedX, normalisedY);
// if hit
THREE.ARUtils.placeObjectAtHit(panda, hit,
moveEasingValue, applyOrientation);
github.com/SamsungInternet/PandaMacARena
samsunginter.net/PandaMacARena/
WebARonARCore
WebARonARKit
(untested!)
github.com/chenzlabs/aframe-ar logo-test.glitch.me/ar.html
by Ada Rose Cannon
Loading future...
@keiichiban
We’re at the beginning of a new
era of computing
“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...
@poshaughnessy
@samsunginternet
bit.ly/codemotion-webxr-2018
Thanks Codemotion! :)

More Related Content

PDF
React js
PPTX
Flutter talkshow
PPTX
Introducing Swagger
PDF
Documenting your REST API with Swagger - JOIN 2014
PDF
Workshop 21: React Router
PPTX
Internship presentation
PPTX
React-JS.pptx
PPTX
reactJS
React js
Flutter talkshow
Introducing Swagger
Documenting your REST API with Swagger - JOIN 2014
Workshop 21: React Router
Internship presentation
React-JS.pptx
reactJS

What's hot (20)

PPTX
Introduction Node.js
PPTX
Introduction to React JS
PPTX
Top 10 RxJs Operators in Angular
ODP
Testing RESTful Webservices using the REST-assured framework
PDF
An Introduction to ReactJS
PDF
Overview of React.JS - Internship Presentation - Week 5
PDF
React
PDF
The New JavaScript: ES6
PPTX
The Ultimate Website Development Roadmap
PDF
Firebase slide
PPTX
React js programming concept
PDF
React Js Simplified
PDF
Event storming
PPTX
Firebase Overview
PDF
API for Beginners
PPTX
Full Stack Web Development.pptx
PDF
NextJS - Online Summit for Frontend Developers September 2020
PDF
Angular 16 – the rise of Signals
PPTX
Understanding react hooks
Introduction Node.js
Introduction to React JS
Top 10 RxJs Operators in Angular
Testing RESTful Webservices using the REST-assured framework
An Introduction to ReactJS
Overview of React.JS - Internship Presentation - Week 5
React
The New JavaScript: ES6
The Ultimate Website Development Roadmap
Firebase slide
React js programming concept
React Js Simplified
Event storming
Firebase Overview
API for Beginners
Full Stack Web Development.pptx
NextJS - Online Summit for Frontend Developers September 2020
Angular 16 – the rise of Signals
Understanding react hooks
Ad

Similar to WebXR: Introducing Mixed Reality and the Immersive Web - Peter O'Shaughnessy - Codemotion Rome 2018 (20)

PPTX
Building AR and VR Experiences for Web Apps with JavaScript
PPTX
PDF
Immersive Sydney - #WebXRWeek
PPTX
WebXR - Introduction and Workshop
PDF
Mobile Day - WebVR
PDF
PDF
Writing Virtual And Augmented Reality Apps With Web Technology
PDF
Writing Virtual And Augmented Reality Apps With Web Technology
PDF
Foundations of the Immersive Web
PDF
Toward webXR (POOS 2017)
PDF
WebXR: A New Dimension For The Web Writing Virtual and Augmented Reality Apps...
PPTX
Think beyond keyboard and screen xr day 2019
PPTX
eXtended Reality(XR) Basic introductions
PDF
Immersive Web apps using Three.js, WebXR, Web Audio and Tensorflow.js.pdf
PDF
Rapid Prototyping for XR: Lecture 5 - Cross Platform Development
PPTX
WebVR, an offspring of two worlds
PDF
Casper Fabricius (Cimmerse): The State of WebXR
PDF
Designing Interactive Web Based AR Experiences
PDF
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!
Building AR and VR Experiences for Web Apps with JavaScript
Immersive Sydney - #WebXRWeek
WebXR - Introduction and Workshop
Mobile Day - WebVR
Writing Virtual And Augmented Reality Apps With Web Technology
Writing Virtual And Augmented Reality Apps With Web Technology
Foundations of the Immersive Web
Toward webXR (POOS 2017)
WebXR: A New Dimension For The Web Writing Virtual and Augmented Reality Apps...
Think beyond keyboard and screen xr day 2019
eXtended Reality(XR) Basic introductions
Immersive Web apps using Three.js, WebXR, Web Audio and Tensorflow.js.pdf
Rapid Prototyping for XR: Lecture 5 - Cross Platform Development
WebVR, an offspring of two worlds
Casper Fabricius (Cimmerse): The State of WebXR
Designing Interactive Web Based AR Experiences
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!
Ad

More from Codemotion (20)

PDF
Fuzz-testing: A hacker's approach to making your code more secure | Pascal Ze...
PDF
Pompili - From hero to_zero: The FatalNoise neverending story
PPTX
Pastore - Commodore 65 - La storia
PPTX
Pennisi - Essere Richard Altwasser
PPTX
Michel Schudel - Let's build a blockchain... in 40 minutes! - Codemotion Amst...
PPTX
Richard Süselbeck - Building your own ride share app - Codemotion Amsterdam 2019
PPTX
Eward Driehuis - What we learned from 20.000 attacks - Codemotion Amsterdam 2019
PPTX
Francesco Baldassarri - Deliver Data at Scale - Codemotion Amsterdam 2019 -
PDF
Martin Förtsch, Thomas Endres - Stereoscopic Style Transfer AI - Codemotion A...
PDF
Melanie Rieback, Klaus Kursawe - Blockchain Security: Melting the "Silver Bul...
PDF
Angelo van der Sijpt - How well do you know your network stack? - Codemotion ...
PDF
Lars Wolff - Performance Testing for DevOps in the Cloud - Codemotion Amsterd...
PDF
Sascha Wolter - Conversational AI Demystified - Codemotion Amsterdam 2019
PDF
Michele Tonutti - Scaling is caring - Codemotion Amsterdam 2019
PPTX
Pat Hermens - From 100 to 1,000+ deployments a day - Codemotion Amsterdam 2019
PPTX
James Birnie - Using Many Worlds of Compute Power with Quantum - Codemotion A...
PDF
Don Goodman-Wilson - Chinese food, motor scooters, and open source developmen...
PDF
Pieter Omvlee - The story behind Sketch - Codemotion Amsterdam 2019
PDF
Dave Farley - Taking Back “Software Engineering” - Codemotion Amsterdam 2019
PDF
Joshua Hoffman - Should the CTO be Coding? - Codemotion Amsterdam 2019
Fuzz-testing: A hacker's approach to making your code more secure | Pascal Ze...
Pompili - From hero to_zero: The FatalNoise neverending story
Pastore - Commodore 65 - La storia
Pennisi - Essere Richard Altwasser
Michel Schudel - Let's build a blockchain... in 40 minutes! - Codemotion Amst...
Richard Süselbeck - Building your own ride share app - Codemotion Amsterdam 2019
Eward Driehuis - What we learned from 20.000 attacks - Codemotion Amsterdam 2019
Francesco Baldassarri - Deliver Data at Scale - Codemotion Amsterdam 2019 -
Martin Förtsch, Thomas Endres - Stereoscopic Style Transfer AI - Codemotion A...
Melanie Rieback, Klaus Kursawe - Blockchain Security: Melting the "Silver Bul...
Angelo van der Sijpt - How well do you know your network stack? - Codemotion ...
Lars Wolff - Performance Testing for DevOps in the Cloud - Codemotion Amsterd...
Sascha Wolter - Conversational AI Demystified - Codemotion Amsterdam 2019
Michele Tonutti - Scaling is caring - Codemotion Amsterdam 2019
Pat Hermens - From 100 to 1,000+ deployments a day - Codemotion Amsterdam 2019
James Birnie - Using Many Worlds of Compute Power with Quantum - Codemotion A...
Don Goodman-Wilson - Chinese food, motor scooters, and open source developmen...
Pieter Omvlee - The story behind Sketch - Codemotion Amsterdam 2019
Dave Farley - Taking Back “Software Engineering” - Codemotion Amsterdam 2019
Joshua Hoffman - Should the CTO be Coding? - Codemotion Amsterdam 2019

Recently uploaded (20)

PDF
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
PDF
MIND Revenue Release Quarter 2 2025 Press Release
PDF
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
PDF
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
PPTX
Group 1 Presentation -Planning and Decision Making .pptx
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
PPTX
A Presentation on Artificial Intelligence
PDF
Getting Started with Data Integration: FME Form 101
PDF
Diabetes mellitus diagnosis method based random forest with bat algorithm
PPTX
Machine Learning_overview_presentation.pptx
PPT
Teaching material agriculture food technology
PDF
NewMind AI Weekly Chronicles - August'25-Week II
PPTX
Tartificialntelligence_presentation.pptx
PPTX
SOPHOS-XG Firewall Administrator PPT.pptx
PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
PDF
Building Integrated photovoltaic BIPV_UPV.pdf
PDF
Accuracy of neural networks in brain wave diagnosis of schizophrenia
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
MIND Revenue Release Quarter 2 2025 Press Release
7 ChatGPT Prompts to Help You Define Your Ideal Customer Profile.pdf
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Mobile App Security Testing_ A Comprehensive Guide.pdf
Blue Purple Modern Animated Computer Science Presentation.pdf.pdf
Group 1 Presentation -Planning and Decision Making .pptx
Reach Out and Touch Someone: Haptics and Empathic Computing
A Presentation on Artificial Intelligence
Getting Started with Data Integration: FME Form 101
Diabetes mellitus diagnosis method based random forest with bat algorithm
Machine Learning_overview_presentation.pptx
Teaching material agriculture food technology
NewMind AI Weekly Chronicles - August'25-Week II
Tartificialntelligence_presentation.pptx
SOPHOS-XG Firewall Administrator PPT.pptx
“AI and Expert System Decision Support & Business Intelligence Systems”
Advanced methodologies resolving dimensionality complications for autism neur...
Building Integrated photovoltaic BIPV_UPV.pdf
Accuracy of neural networks in brain wave diagnosis of schizophrenia

WebXR: Introducing Mixed Reality and the Immersive Web - Peter O'Shaughnessy - Codemotion Rome 2018