SlideShare a Scribd company logo
@fischaelameergeildanke.com #YGLFKyiv18
Writing VR and AR Apps 

with Web Technology
WebXR Device API
UX Design for WebXR
ReactVR ReactAR
WebXR
WebVR WebAR
Created by Laura Hernández from the Noun Project
Completely DigitalVirtual Reality
Virtual Overlay
Augmented Reality:
Virtual and Real World Coincide
Mixed Reality
WebXR
WebVR WebAR
WebXR Device API
Detect AR/VR Devices
9
Get Device’s Capabilities
Get Device’s Orientation/Position
Display Images With A Fitting Frame Rate
WebVR API
WebXR Device API
WebXR Device API
Supports Augmented Reality
11
Clean, Consistent, Predictable
Better Browser Optimizations
Unified Input Model
Lifetime of a WebXR App
Request XR Device
Reveal XR Functionality
Request XR Session
Run Render Loop
Request a XR Devices
navigator.xr.requestDevice().then(device => {
if (device) {
handleXRAvailable(device);
}
}).catch(error =>
console.error('Unable to request an XR device: ', error);
});
Request a XR Devices
navigator.xr.requestDevice().then(device => {
if (device) {
handleXRAvailable(device);
}
}).catch(error =>
console.error('Unable to request an XR device: ', error);
});
Check XR Session Support
let xrDevice = null;
function handleXRAvailable(device) {
xrDevice = device;
xrDevice.supportsSession({exclusive: true}).then(() => {
addWebXRButtonToPage();
}).catch((error) => {
console.log('Session not supported: ' + error);
});
}
Check XR Session Support
let xrDevice = null;
function handleXRAvailable(device) {
xrDevice = device;
xrDevice.supportsSession({exclusive: true}).then(() => {
addWebXRButtonToPage();
}).catch((error) => {
console.log('Session not supported: ' + error);
});
}
Check XR Session Support
let xrDevice = null;
function handleXRAvailable(device) {
xrDevice = device;
xrDevice.supportsSession({exclusive: true}).then(() => {
addWebXRButtonToPage();
}).catch((error) => {
console.log('Session not supported: ' + error);
});
}
Request a XR Session
function beginXRSession() {
let canvas = document.createElement('canvas');
let context = canvas.getContext('xrpresent');
document.body.appendChild(canvas);
xrDevice.requestSession({exclusive: true, outputContext: context})
.then(onSessionStarted)
.catch((error) => {console.log('requestSession failed: ' + error);});
}
Start a XR Session
let xrSession = null;
let xrFrameOfReference = null;
function onSessionStarted(session) {
xrSession = session;
xrSession.requestFrameOfReference('eyeLevel')
.then((frameOfReference) => {xrFrameOfReference = frameOfReference;})
.then(setupWebGLLayer)
.then(() => {xrSession.requestAnimationFrame(onRenderFrame);});
}
Start a XR Session
let xrSession = null;
let xrFrameOfReference = null;
function onSessionStarted(session) {
xrSession = session;
xrSession.requestFrameOfReference('eyeLevel')
.then((frameOfReference) => {xrFrameOfReference = frameOfReference;})
.then(setupWebGLLayer)
.then(() => {xrSession.requestAnimationFrame(onRenderFrame);});
}
Setup an XRLayer
let glCanvas = document.createElement('canvas');
let glContext = glCanvas.getContext('webgl');
function setupWebGLLayer() {
return glContext.setCompatibleXRDevice(xrDevice).then(() => {
xrSession.baseLayer = new XRWebGLLayer(xrSession, glContext);
});
}
Setup an XRLayer
let glCanvas = document.createElement('canvas');
let glContext = glCanvas.getContext('webgl');
function setupWebGLLayer() {
return glContext.setCompatibleXRDevice(xrDevice).then(() => {
xrSession.baseLayer = new XRWebGLLayer(xrSession, glContext);
});
}
Start a XR Session
let xrSession = null;
let xrFrameOfReference = null;
function onSessionStarted(session) {
xrSession = session;
xrSession.requestFrameOfReference('eyeLevel')
.then((frameOfReference) => {xrFrameOfReference = frameOfReference;})
.then(setupWebGLLayer)
.then(() => {xrSession.requestAnimationFrame(onRenderFrame);});
}
Start the Render Loop
function onRenderFrame(timestamp, xrFrame) {
let pose = xrFrame.getDevicePose(xrFrameOfReference);
if (pose) {
for (let view of xrFrame.views) {
// Draw something
}
}
// Input device code
xrSession.requestAnimationFrame(onRenderFrame);
}
Start the Render Loop
function onRenderFrame(timestamp, xrFrame) {
let pose = xrFrame.getDevicePose(xrFrameOfReference);
if (pose) {
for (let view of xrFrame.views) {
// Draw something
}
}
// Input device code
xrSession.requestAnimationFrame(onRenderFrame);
}
Start the Render Loop
function onRenderFrame(timestamp, xrFrame) {
let pose = xrFrame.getDevicePose(xrFrameOfReference);
if (pose) {
for (let view of xrFrame.views) {
// Draw something
}
}
// Input device code
xrSession.requestAnimationFrame(onRenderFrame);
}
Start the Render Loop
function onRenderFrame(timestamp, xrFrame) {
let pose = xrFrame.getDevicePose(xrFrameOfReference);
if (pose) {
for (let view of xrFrame.views) {
// Draw something
}
}
// Input device code
xrSession.requestAnimationFrame(onRenderFrame);
}
Exit the WebXR Session
function endXRSession() {
if (xrSession) {xrSession.end().then(onSessionEnd);}
}
function onSessionEnd() {
xrSession = null;
window.requestAnimationFrame(onDrawFrame);
}
Exit the WebXR Session
function endXRSession() {
if (xrSession) {xrSession.end().then(onSessionEnd);}
}
function onSessionEnd() {
xrSession = null;
window.requestAnimationFrame(onDrawFrame);
}
Writing Virtual And Augmented Reality Apps With Web Technology
Writing Virtual And Augmented Reality Apps With Web Technology
Fallback: Magic Window
let mwCanvas = document.createElement('canvas');
let mwContext = mwCanvas.getContext('xrpresent');
document.body.appendChild(mwCanvas);
function beginMagicWindowXRSession() {
xrDevice.requestSession({exclusive: false, outputContext: mwContext})
.then(OnSessionStarted)
.catch((error) => {console.log('requestSession failed: ' + error);});
}
On Page Load:
Magic Window
exclusive sessions are supported
Render a
"Start VR" Button
Progressive Enhancement
6DOF VR Headset
AR-ready Smartphone
3DOF VR Headset
Magic Window
Gyroscope
WebXR Polyfill
Static Image
Created by Hans Gerhard Meier, Bence Bezeredy, Laura Hernández, Anil, Sachin Modgekar, Ben Davis from the Noun Project
The Future: Augmented Reality
AR Session Hit Test AR Anchors
Using Markerless AR Today
ARKit
by Apple
ARCore
by Google
World/Motion Tracking Scene Analyzation Light Estimation
Using Markerless AR Today
ARKit
by Apple
ARCore
by Google
WebAROnARKit WebAROnARCore
Two Experimental Browser Apps
https://github.com/google-ar/WebARonARKit https://github.com/google-ar/WebARonARCore
https://aframe.io/
<script src="aframe.min.js"></script>
<script src="three.ar.js"></script>
<script src="aframe-ar.js"></script>
Markerless AR with A-Frame
<script src="aframe.min.js"></script>
<script src="three.ar.js"></script>
<script src="aframe-ar.js"></script>
Markerless AR with A-Frame
<script src="aframe.min.js"></script>
<script src="three.ar.js"></script>
<script src="aframe-ar.js"></script>
Markerless AR with A-Frame
<script src="aframe.min.js"></script>
<script src="three.ar.js"></script>
<script src="aframe-ar.js"></script>
Markerless AR with A-Frame
<script src="aframe.min.js"></script>
<script src="three.ar.js"></script>
<script src="aframe-ar.js"></script>
Markerless AR with A-Frame
<script src="components/intersection-marker.js"></script>
<script src="components/shadow-material.js"></script>
<script src="components/ar-pet.js"></script>
<script src="aframe.min.js"></script>
<script src="three.ar.js"></script>
<script src="aframe-ar.js"></script>
Markerless AR with A-Frame
<script src="components/intersection-marker.js"></script>
<script src="components/shadow-material.js"></script>
<script src="components/ar-pet.js"></script>
<a-scene ar>
<a-assets>
<a-asset-item id="pet" src="assets/scene.gltf"></a-asset-item>
</a-assets>
<a-entity light="type:directional; castShadow:true;"></a-entity>
<a-ar-pet></a-ar-pet>
<a-intersection-marker></a-intersection-marker>
<a-camera user-height="0" ar-raycaster></a-camera>
</a-scene>
Markerless AR with A-Frame
<a-scene ar>
<a-assets>
<a-asset-item id="pet" src="assets/scene.gltf"></a-asset-item>
</a-assets>
<a-entity light="type:directional; castShadow:true;"></a-entity>
<a-ar-pet></a-ar-pet>
<a-intersection-marker></a-intersection-marker>
<a-camera user-height="0" ar-raycaster></a-camera>
</a-scene>
Markerless AR with A-Frame
<a-scene ar>
<a-assets>
<a-asset-item id="pet" src="assets/scene.gltf"></a-asset-item>
</a-assets>
<a-entity light="type:directional; castShadow:true;"></a-entity>
<a-ar-pet></a-ar-pet>
<a-intersection-marker></a-intersection-marker>
<a-camera user-height="0" ar-raycaster></a-camera>
</a-scene>
Markerless AR with A-Frame
<a-scene ar>
<a-assets>
<a-asset-item id="pet" src="assets/scene.gltf"></a-asset-item>
</a-assets>
<a-entity light="type:directional; castShadow:true;"></a-entity>
<a-ar-pet></a-ar-pet>
<a-intersection-marker></a-intersection-marker>
<a-camera user-height="0" ar-raycaster></a-camera>
</a-scene>
Markerless AR with A-Frame
<a-scene ar>
<a-assets>
<a-asset-item id="pet" src="assets/scene.gltf"></a-asset-item>
</a-assets>
<a-entity light="type:directional; castShadow:true;"></a-entity>
<a-ar-pet></a-ar-pet>
<a-intersection-marker></a-intersection-marker>
<a-camera user-height="0" ar-raycaster></a-camera>
</a-scene>
Markerless AR with A-Frame
Writing Virtual And Augmented Reality Apps With Web Technology
Markerless AR with A-Frame
AFRAME.registerComponent('intersectionmarker', {
init: function () {
let mark = document.createElement('a-sphere');
mark.setAttribute('radius', '0.02');
mark.setAttribute('color', 'tomato');
this.el.appendChild(mark);
}
});
Markerless AR with A-Frame
AFRAME.registerComponent('intersectionmarker', {
init: function () {
let mark = document.createElement('a-sphere');
mark.setAttribute('radius', '0.02');
mark.setAttribute('color', 'tomato');
this.el.appendChild(mark);
}
});
Markerless AR with A-Frame
AFRAME.registerComponent('intersectionmarker', {
init: function () {
/* … */
let raycaster = document.querySelector('[ar-raycaster]');
raycaster.addEventListener('raycaster-intersection', function (e) {
mark.setAttribute('position', e.detail.intersections[0].point);
mark.setAttribute('color', 'lightseagreen');
});
}
});
Markerless AR with A-Frame
AFRAME.registerComponent('intersectionmarker', {
init: function () {
/* … */
let raycaster = document.querySelector('[ar-raycaster]');
raycaster.addEventListener('raycaster-intersection', function (e) {
mark.setAttribute('position', e.detail.intersections[0].point);
mark.setAttribute('color', 'lightseagreen');
});
}
});
Writing Virtual And Augmented Reality Apps With Web Technology
UX Design for WebXR Apps
Do Not Apply 2D Patterns
No Established Patterns Yet
UX Design Best-Practises
Add Feedback, Respond Immediately
Add Feedback
It was the pioneer days; people had to make their own interrogation rooms. Out of
cornmeal. These endless days are finally ending in a blaze. When I say, 'I love you,'
it's not because I want you or because I can't have you. It's my estimation that every
man ever got a statue made of him was one kind of sommbitch or another. Oh my god you
will never believe what happened at school today. From beneath you, it devours. I am
never gonna see a merman, ever.
It was supposed to confuse him, but it just made him peppy. It was like the Heimlich,
with stripes! How did your brain even learn human speech? I'm just so curious.
Apocalypse, we've all been there; the same old trips, why should we care? Frankly, it's
ludicrous to have these interlocking bodies and not...interlock. I just don't see why
everyone's always picking on Marie-Antoinette. You're the one freaky thing in my freaky
world that still makes sense to me. You are talking crazy-person talk.
Writing Virtual And Augmented Reality Apps With Web Technology
It was the pioneer days; people had to make their own interrogation rooms. Out of
cornmeal. These endless days are finally ending in a blaze. When I say, 'I love you,'
it's not because I want you or because I can't have you. It's my estimation that every
man ever got a statue made of him was one kind of sommbitch or another. Oh my god you
will never believe what happened at school today. From beneath you, it devours. I am
never gonna see a merman, ever.
It was supposed to confuse him, but it just made him peppy. It was like the Heimlich,
with stripes! How did your brain even learn human speech? I'm just so curious.
Apocalypse, we've all been there; the same old trips, why should we care? Frankly, it's
ludicrous to have these interlocking bodies and not...interlock. I just don't see why
everyone's always picking on Marie-Antoinette. You're the one freaky thing in my freaky
world that still makes sense to me. You are talking crazy-person talk.
Writing Virtual And Augmented Reality Apps With Web Technology
UX Design Best-Practises
Add Feedback, Respond Immediately
Guide Users with Gaze Cues
Add Gaze Cues
UX Design Best-Practises
Add Feedback, Respond Immediately
Guide Users with Gaze Cues
Provide Information in Context
DoDon’t
Presence
Interpretability
Usefulness
Delight
Beau Cronin
https://medium.com/@beaucronin/the-hierarchy-of-needs-in-virtual-reality-development-4333a4833acc
Comfort
Presence
Interpretability
Usefulness
Delight
Beau Cronin
https://medium.com/@beaucronin/the-hierarchy-of-needs-in-virtual-reality-development-4333a4833acc
Comfort & Safety
Comfort and Safety in AR
There is No Optimal AR Environment
Comfort and Safety in AR
There is No Optimal AR Environment
Consider a User’s Movement
https://giphy.com/gifs/hyperrpg-vr-ouch-3oKIPAKenYskqXzYnC
Comfort and Safety in AR
There is No Optimal AR Environment
Consider a User’s Movement
Avoid Fatiguing your Users
Comfort and Safety in VR
Do Not Trigger Phobias
Writing Virtual And Augmented Reality Apps With Web Technology
Comfort and Safety in VR
Do Not Trigger Phobias
Do Not Move Things Fast Towards the Camera
Writing Virtual And Augmented Reality Apps With Web Technology
Comfort and Safety in VR
Do Not Trigger Phobias
Do Not Move Things Fast Towards the Camera
Respect a User’s Safe Space
https://www.reddit.com/r/VRFail/comments/4s7nc1/friend_loses_his_vrginity_and_then_some_crappy/
https://www.techradar.com/
https://www.reddit.com/r/VRFail/comments/4p9zgj/pool_shot/
Prevent Simulation Sickness
Do Not Move the Horizon or the Camera
Do Not Use Acceleration
https://web.colby.edu/cogblog/2016/05/09/2451/
Prevent Simulation Sickness
Do Not Move the Horizon or the Camera
Do Not Use Acceleration
Avoid Flicker and Blur
Add a Stable Focus Point
@fischaelameergeildanke.com #YGLFKyiv18
Respect Your Users!
Test Your Product on a Diverse Audience.
@fischaelameergeildanke.com #YGLFKyiv18
Get Involved!
https://github.com/immersive-web/webxr

More Related Content

What's hot

Angular js meetup
Angular js meetupAngular js meetup
Angular js meetup
Pierre-Yves Gicquel
 
AngularJS - Overcoming performance issues. Limits.
AngularJS - Overcoming performance issues. Limits.AngularJS - Overcoming performance issues. Limits.
AngularJS - Overcoming performance issues. Limits.
Dragos Mihai Rusu
 
PWA 與 Service Worker
PWA 與 Service WorkerPWA 與 Service Worker
PWA 與 Service Worker
Anna Su
 
Ajax Rails
Ajax RailsAjax Rails
Ajax Rails
hot
 
Browsers with Wings
Browsers with WingsBrowsers with Wings
Browsers with Wings
Remy Sharp
 
Instant and offline apps with Service Worker
Instant and offline apps with Service WorkerInstant and offline apps with Service Worker
Instant and offline apps with Service Worker
Chang W. Doh
 
Asynchronous Programming with JavaScript
Asynchronous Programming with JavaScriptAsynchronous Programming with JavaScript
Asynchronous Programming with JavaScript
WebF
 
Building scalable applications with angular js
Building scalable applications with angular jsBuilding scalable applications with angular js
Building scalable applications with angular js
Andrew Alpert
 
Using ReactJS in AngularJS
Using ReactJS in AngularJSUsing ReactJS in AngularJS
Using ReactJS in AngularJS
Boris Dinkevich
 
Micro app-framework
Micro app-frameworkMicro app-framework
Micro app-framework
Michael Dawson
 
How to build an AngularJS backend-ready app WITHOUT BACKEND
How to build an AngularJS backend-ready app WITHOUT BACKEND How to build an AngularJS backend-ready app WITHOUT BACKEND
How to build an AngularJS backend-ready app WITHOUT BACKEND
Enrique Oriol Bermúdez
 
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS featuresIntro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
Andreas Bovens
 
Google Play Services Rock
Google Play Services RockGoogle Play Services Rock
Google Play Services Rock
Peter Friese
 
Get Ahead with HTML5 on Moible
Get Ahead with HTML5 on MoibleGet Ahead with HTML5 on Moible
Get Ahead with HTML5 on Moible
markuskobler
 
[AngularJS] From Angular to Mobile in 30 minutes
[AngularJS] From Angular to Mobile in 30 minutes[AngularJS] From Angular to Mobile in 30 minutes
[AngularJS] From Angular to Mobile in 30 minutes
Globant
 
Service Worker - Reliability bits
Service Worker - Reliability bitsService Worker - Reliability bits
Service Worker - Reliability bits
jungkees
 
Javascript Memory leaks and Performance & Angular
Javascript Memory leaks and Performance & AngularJavascript Memory leaks and Performance & Angular
Javascript Memory leaks and Performance & Angular
Erik Guzman
 
2011 05-23 metrics-agilasverige-english
2011 05-23 metrics-agilasverige-english2011 05-23 metrics-agilasverige-english
2011 05-23 metrics-agilasverige-english
Mårten Gustafson
 

What's hot (18)

Angular js meetup
Angular js meetupAngular js meetup
Angular js meetup
 
AngularJS - Overcoming performance issues. Limits.
AngularJS - Overcoming performance issues. Limits.AngularJS - Overcoming performance issues. Limits.
AngularJS - Overcoming performance issues. Limits.
 
PWA 與 Service Worker
PWA 與 Service WorkerPWA 與 Service Worker
PWA 與 Service Worker
 
Ajax Rails
Ajax RailsAjax Rails
Ajax Rails
 
Browsers with Wings
Browsers with WingsBrowsers with Wings
Browsers with Wings
 
Instant and offline apps with Service Worker
Instant and offline apps with Service WorkerInstant and offline apps with Service Worker
Instant and offline apps with Service Worker
 
Asynchronous Programming with JavaScript
Asynchronous Programming with JavaScriptAsynchronous Programming with JavaScript
Asynchronous Programming with JavaScript
 
Building scalable applications with angular js
Building scalable applications with angular jsBuilding scalable applications with angular js
Building scalable applications with angular js
 
Using ReactJS in AngularJS
Using ReactJS in AngularJSUsing ReactJS in AngularJS
Using ReactJS in AngularJS
 
Micro app-framework
Micro app-frameworkMicro app-framework
Micro app-framework
 
How to build an AngularJS backend-ready app WITHOUT BACKEND
How to build an AngularJS backend-ready app WITHOUT BACKEND How to build an AngularJS backend-ready app WITHOUT BACKEND
How to build an AngularJS backend-ready app WITHOUT BACKEND
 
Intro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS featuresIntro to @viewport & other new Responsive Web Design CSS features
Intro to @viewport & other new Responsive Web Design CSS features
 
Google Play Services Rock
Google Play Services RockGoogle Play Services Rock
Google Play Services Rock
 
Get Ahead with HTML5 on Moible
Get Ahead with HTML5 on MoibleGet Ahead with HTML5 on Moible
Get Ahead with HTML5 on Moible
 
[AngularJS] From Angular to Mobile in 30 minutes
[AngularJS] From Angular to Mobile in 30 minutes[AngularJS] From Angular to Mobile in 30 minutes
[AngularJS] From Angular to Mobile in 30 minutes
 
Service Worker - Reliability bits
Service Worker - Reliability bitsService Worker - Reliability bits
Service Worker - Reliability bits
 
Javascript Memory leaks and Performance & Angular
Javascript Memory leaks and Performance & AngularJavascript Memory leaks and Performance & Angular
Javascript Memory leaks and Performance & Angular
 
2011 05-23 metrics-agilasverige-english
2011 05-23 metrics-agilasverige-english2011 05-23 metrics-agilasverige-english
2011 05-23 metrics-agilasverige-english
 

Similar to Writing Virtual And Augmented Reality Apps With Web Technology

WebXR: A New Dimension For The Web Writing Virtual and Augmented Reality Apps...
WebXR: A New Dimension For The Web Writing Virtual and Augmented Reality Apps...WebXR: A New Dimension For The Web Writing Virtual and Augmented Reality Apps...
WebXR: A New Dimension For The Web Writing Virtual and Augmented Reality Apps...
GeilDanke
 
Drones, Flying robots and Javascript
Drones, Flying robots and JavascriptDrones, Flying robots and Javascript
Drones, Flying robots and Javascript
Laurent Eschenauer
 
WebXR if X = how?
WebXR if X = how?WebXR if X = how?
An Introduction to WebVR – or How to make your user sick in 60 seconds
An Introduction to WebVR – or How to make your user sick in 60 secondsAn Introduction to WebVR – or How to make your user sick in 60 seconds
An Introduction to WebVR – or How to make your user sick in 60 seconds
GeilDanke
 
Hacking Reality: Browser-Based VR with HTML5
Hacking Reality: Browser-Based VR with HTML5Hacking Reality: Browser-Based VR with HTML5
Hacking Reality: Browser-Based VR with HTML5
Tony Parisi
 
Web vr creative_vr
Web vr creative_vrWeb vr creative_vr
Web vr creative_vr
Oscar Marin Miro
 
Getting Started with Web VR
Getting Started with Web VR Getting Started with Web VR
Getting Started with Web VR
Saurabh Badhwar
 
Introduction to WebVR Autodesk Forge 2016
Introduction to WebVR Autodesk Forge 2016Introduction to WebVR Autodesk Forge 2016
Introduction to WebVR Autodesk Forge 2016
Tony Parisi
 
Up And Running With Web VR Fall 2014
Up And Running With Web VR Fall 2014Up And Running With Web VR Fall 2014
Up And Running With Web VR Fall 2014
Tony Parisi
 
Building AR and VR Experiences for Web Apps with JavaScript
Building AR and VR Experiences for Web Apps with JavaScriptBuilding AR and VR Experiences for Web Apps with JavaScript
Building AR and VR Experiences for Web Apps with JavaScript
FITC
 
Building Applications Using Ajax
Building Applications Using AjaxBuilding Applications Using Ajax
Building Applications Using Ajax
s_pradeep
 
RESTful Web Applications with Apache Sling
RESTful Web Applications with Apache SlingRESTful Web Applications with Apache Sling
RESTful Web Applications with Apache Sling
Bertrand Delacretaz
 
Casper Fabricius (Cimmerse): Building WebXR Applications in Practice
Casper Fabricius (Cimmerse): Building WebXR Applications in PracticeCasper Fabricius (Cimmerse): Building WebXR Applications in Practice
Casper Fabricius (Cimmerse): Building WebXR Applications in Practice
AugmentedWorldExpo
 
Василевский Илья (Fun-box): "автоматизация браузера при помощи PhantomJS"
Василевский Илья (Fun-box): "автоматизация браузера при помощи PhantomJS"Василевский Илья (Fun-box): "автоматизация браузера при помощи PhantomJS"
Василевский Илья (Fun-box): "автоматизация браузера при помощи PhantomJS"
Provectus
 
The Art and Science of Shipping Ember Apps
The Art and Science of Shipping Ember AppsThe Art and Science of Shipping Ember Apps
The Art and Science of Shipping Ember Apps
Jesse Cravens
 
Node.js and Selenium Webdriver, a journey from the Java side
Node.js and Selenium Webdriver, a journey from the Java sideNode.js and Selenium Webdriver, a journey from the Java side
Node.js and Selenium Webdriver, a journey from the Java side
Mek Srunyu Stittri
 
Event-driven IO server-side JavaScript environment based on V8 Engine
Event-driven IO server-side JavaScript environment based on V8 EngineEvent-driven IO server-side JavaScript environment based on V8 Engine
Event-driven IO server-side JavaScript environment based on V8 Engine
Ricardo Silva
 
Introduction to Immersive Web
Introduction to Immersive WebIntroduction to Immersive Web
Introduction to Immersive Web
Hirokazu Egashira
 
Realtà aumentata ed Azure, un binomio imbattibile
Realtà aumentata ed Azure, un binomio imbattibileRealtà aumentata ed Azure, un binomio imbattibile
Realtà aumentata ed Azure, un binomio imbattibile
Alessio Iafrate
 
BlackBerry DevCon 2011 - PhoneGap and WebWorks
BlackBerry DevCon 2011 - PhoneGap and WebWorksBlackBerry DevCon 2011 - PhoneGap and WebWorks
BlackBerry DevCon 2011 - PhoneGap and WebWorks
mwbrooks
 

Similar to Writing Virtual And Augmented Reality Apps With Web Technology (20)

WebXR: A New Dimension For The Web Writing Virtual and Augmented Reality Apps...
WebXR: A New Dimension For The Web Writing Virtual and Augmented Reality Apps...WebXR: A New Dimension For The Web Writing Virtual and Augmented Reality Apps...
WebXR: A New Dimension For The Web Writing Virtual and Augmented Reality Apps...
 
Drones, Flying robots and Javascript
Drones, Flying robots and JavascriptDrones, Flying robots and Javascript
Drones, Flying robots and Javascript
 
WebXR if X = how?
WebXR if X = how?WebXR if X = how?
WebXR if X = how?
 
An Introduction to WebVR – or How to make your user sick in 60 seconds
An Introduction to WebVR – or How to make your user sick in 60 secondsAn Introduction to WebVR – or How to make your user sick in 60 seconds
An Introduction to WebVR – or How to make your user sick in 60 seconds
 
Hacking Reality: Browser-Based VR with HTML5
Hacking Reality: Browser-Based VR with HTML5Hacking Reality: Browser-Based VR with HTML5
Hacking Reality: Browser-Based VR with HTML5
 
Web vr creative_vr
Web vr creative_vrWeb vr creative_vr
Web vr creative_vr
 
Getting Started with Web VR
Getting Started with Web VR Getting Started with Web VR
Getting Started with Web VR
 
Introduction to WebVR Autodesk Forge 2016
Introduction to WebVR Autodesk Forge 2016Introduction to WebVR Autodesk Forge 2016
Introduction to WebVR Autodesk Forge 2016
 
Up And Running With Web VR Fall 2014
Up And Running With Web VR Fall 2014Up And Running With Web VR Fall 2014
Up And Running With Web VR Fall 2014
 
Building AR and VR Experiences for Web Apps with JavaScript
Building AR and VR Experiences for Web Apps with JavaScriptBuilding AR and VR Experiences for Web Apps with JavaScript
Building AR and VR Experiences for Web Apps with JavaScript
 
Building Applications Using Ajax
Building Applications Using AjaxBuilding Applications Using Ajax
Building Applications Using Ajax
 
RESTful Web Applications with Apache Sling
RESTful Web Applications with Apache SlingRESTful Web Applications with Apache Sling
RESTful Web Applications with Apache Sling
 
Casper Fabricius (Cimmerse): Building WebXR Applications in Practice
Casper Fabricius (Cimmerse): Building WebXR Applications in PracticeCasper Fabricius (Cimmerse): Building WebXR Applications in Practice
Casper Fabricius (Cimmerse): Building WebXR Applications in Practice
 
Василевский Илья (Fun-box): "автоматизация браузера при помощи PhantomJS"
Василевский Илья (Fun-box): "автоматизация браузера при помощи PhantomJS"Василевский Илья (Fun-box): "автоматизация браузера при помощи PhantomJS"
Василевский Илья (Fun-box): "автоматизация браузера при помощи PhantomJS"
 
The Art and Science of Shipping Ember Apps
The Art and Science of Shipping Ember AppsThe Art and Science of Shipping Ember Apps
The Art and Science of Shipping Ember Apps
 
Node.js and Selenium Webdriver, a journey from the Java side
Node.js and Selenium Webdriver, a journey from the Java sideNode.js and Selenium Webdriver, a journey from the Java side
Node.js and Selenium Webdriver, a journey from the Java side
 
Event-driven IO server-side JavaScript environment based on V8 Engine
Event-driven IO server-side JavaScript environment based on V8 EngineEvent-driven IO server-side JavaScript environment based on V8 Engine
Event-driven IO server-side JavaScript environment based on V8 Engine
 
Introduction to Immersive Web
Introduction to Immersive WebIntroduction to Immersive Web
Introduction to Immersive Web
 
Realtà aumentata ed Azure, un binomio imbattibile
Realtà aumentata ed Azure, un binomio imbattibileRealtà aumentata ed Azure, un binomio imbattibile
Realtà aumentata ed Azure, un binomio imbattibile
 
BlackBerry DevCon 2011 - PhoneGap and WebWorks
BlackBerry DevCon 2011 - PhoneGap and WebWorksBlackBerry DevCon 2011 - PhoneGap and WebWorks
BlackBerry DevCon 2011 - PhoneGap and WebWorks
 

Recently uploaded

CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSECHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
kumarjarun2010
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
ldtexsolbl
 
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
Priyanka Aash
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
KAMAL CHOUDHARY
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc
 
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and OllamaTirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Zilliz
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Networks
 
Figma AI Design Generator_ In-Depth Review.pdf
Figma AI Design Generator_ In-Depth Review.pdfFigma AI Design Generator_ In-Depth Review.pdf
Figma AI Design Generator_ In-Depth Review.pdf
Management Institute of Skills Development
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
Steven Carlson
 
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Kunal Gupta
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
Zilliz
 
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
Priyanka Aash
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
ssuser1915fe1
 
July Patch Tuesday
July Patch TuesdayJuly Patch Tuesday
July Patch Tuesday
Ivanti
 
WhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring AppsWhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring Apps
HackersList
 
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
313mohammedarshad
 
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Muhammad Ali
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
Safe Software
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
Matthias Neugebauer
 

Recently uploaded (20)

CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSECHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
CHAPTER-8 COMPONENTS OF COMPUTER SYSTEM CLASS 9 CBSE
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
 
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
 
Recent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS InfrastructureRecent Advancements in the NIST-JARVIS Infrastructure
Recent Advancements in the NIST-JARVIS Infrastructure
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
 
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and OllamaTirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
Tirana Tech Meetup - Agentic RAG with Milvus, Llama3 and Ollama
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
 
Figma AI Design Generator_ In-Depth Review.pdf
Figma AI Design Generator_ In-Depth Review.pdfFigma AI Design Generator_ In-Depth Review.pdf
Figma AI Design Generator_ In-Depth Review.pdf
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
 
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
 
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
 
July Patch Tuesday
July Patch TuesdayJuly Patch Tuesday
July Patch Tuesday
 
WhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring AppsWhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring Apps
 
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
 
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
 

Writing Virtual And Augmented Reality Apps With Web Technology

  • 1. @fischaelameergeildanke.com #YGLFKyiv18 Writing VR and AR Apps 
 with Web Technology
  • 2. WebXR Device API UX Design for WebXR ReactVR ReactAR
  • 4. Created by Laura Hernández from the Noun Project
  • 7. Virtual and Real World Coincide Mixed Reality
  • 9. WebXR Device API Detect AR/VR Devices 9 Get Device’s Capabilities Get Device’s Orientation/Position Display Images With A Fitting Frame Rate
  • 11. WebXR Device API Supports Augmented Reality 11 Clean, Consistent, Predictable Better Browser Optimizations Unified Input Model
  • 12. Lifetime of a WebXR App Request XR Device Reveal XR Functionality Request XR Session Run Render Loop
  • 13. Request a XR Devices navigator.xr.requestDevice().then(device => { if (device) { handleXRAvailable(device); } }).catch(error => console.error('Unable to request an XR device: ', error); });
  • 14. Request a XR Devices navigator.xr.requestDevice().then(device => { if (device) { handleXRAvailable(device); } }).catch(error => console.error('Unable to request an XR device: ', error); });
  • 15. Check XR Session Support let xrDevice = null; function handleXRAvailable(device) { xrDevice = device; xrDevice.supportsSession({exclusive: true}).then(() => { addWebXRButtonToPage(); }).catch((error) => { console.log('Session not supported: ' + error); }); }
  • 16. Check XR Session Support let xrDevice = null; function handleXRAvailable(device) { xrDevice = device; xrDevice.supportsSession({exclusive: true}).then(() => { addWebXRButtonToPage(); }).catch((error) => { console.log('Session not supported: ' + error); }); }
  • 17. Check XR Session Support let xrDevice = null; function handleXRAvailable(device) { xrDevice = device; xrDevice.supportsSession({exclusive: true}).then(() => { addWebXRButtonToPage(); }).catch((error) => { console.log('Session not supported: ' + error); }); }
  • 18. Request a XR Session function beginXRSession() { let canvas = document.createElement('canvas'); let context = canvas.getContext('xrpresent'); document.body.appendChild(canvas); xrDevice.requestSession({exclusive: true, outputContext: context}) .then(onSessionStarted) .catch((error) => {console.log('requestSession failed: ' + error);}); }
  • 19. Start a XR Session let xrSession = null; let xrFrameOfReference = null; function onSessionStarted(session) { xrSession = session; xrSession.requestFrameOfReference('eyeLevel') .then((frameOfReference) => {xrFrameOfReference = frameOfReference;}) .then(setupWebGLLayer) .then(() => {xrSession.requestAnimationFrame(onRenderFrame);}); }
  • 20. Start a XR Session let xrSession = null; let xrFrameOfReference = null; function onSessionStarted(session) { xrSession = session; xrSession.requestFrameOfReference('eyeLevel') .then((frameOfReference) => {xrFrameOfReference = frameOfReference;}) .then(setupWebGLLayer) .then(() => {xrSession.requestAnimationFrame(onRenderFrame);}); }
  • 21. Setup an XRLayer let glCanvas = document.createElement('canvas'); let glContext = glCanvas.getContext('webgl'); function setupWebGLLayer() { return glContext.setCompatibleXRDevice(xrDevice).then(() => { xrSession.baseLayer = new XRWebGLLayer(xrSession, glContext); }); }
  • 22. Setup an XRLayer let glCanvas = document.createElement('canvas'); let glContext = glCanvas.getContext('webgl'); function setupWebGLLayer() { return glContext.setCompatibleXRDevice(xrDevice).then(() => { xrSession.baseLayer = new XRWebGLLayer(xrSession, glContext); }); }
  • 23. Start a XR Session let xrSession = null; let xrFrameOfReference = null; function onSessionStarted(session) { xrSession = session; xrSession.requestFrameOfReference('eyeLevel') .then((frameOfReference) => {xrFrameOfReference = frameOfReference;}) .then(setupWebGLLayer) .then(() => {xrSession.requestAnimationFrame(onRenderFrame);}); }
  • 24. Start the Render Loop function onRenderFrame(timestamp, xrFrame) { let pose = xrFrame.getDevicePose(xrFrameOfReference); if (pose) { for (let view of xrFrame.views) { // Draw something } } // Input device code xrSession.requestAnimationFrame(onRenderFrame); }
  • 25. Start the Render Loop function onRenderFrame(timestamp, xrFrame) { let pose = xrFrame.getDevicePose(xrFrameOfReference); if (pose) { for (let view of xrFrame.views) { // Draw something } } // Input device code xrSession.requestAnimationFrame(onRenderFrame); }
  • 26. Start the Render Loop function onRenderFrame(timestamp, xrFrame) { let pose = xrFrame.getDevicePose(xrFrameOfReference); if (pose) { for (let view of xrFrame.views) { // Draw something } } // Input device code xrSession.requestAnimationFrame(onRenderFrame); }
  • 27. Start the Render Loop function onRenderFrame(timestamp, xrFrame) { let pose = xrFrame.getDevicePose(xrFrameOfReference); if (pose) { for (let view of xrFrame.views) { // Draw something } } // Input device code xrSession.requestAnimationFrame(onRenderFrame); }
  • 28. Exit the WebXR Session function endXRSession() { if (xrSession) {xrSession.end().then(onSessionEnd);} } function onSessionEnd() { xrSession = null; window.requestAnimationFrame(onDrawFrame); }
  • 29. Exit the WebXR Session function endXRSession() { if (xrSession) {xrSession.end().then(onSessionEnd);} } function onSessionEnd() { xrSession = null; window.requestAnimationFrame(onDrawFrame); }
  • 32. Fallback: Magic Window let mwCanvas = document.createElement('canvas'); let mwContext = mwCanvas.getContext('xrpresent'); document.body.appendChild(mwCanvas); function beginMagicWindowXRSession() { xrDevice.requestSession({exclusive: false, outputContext: mwContext}) .then(OnSessionStarted) .catch((error) => {console.log('requestSession failed: ' + error);}); }
  • 33. On Page Load: Magic Window exclusive sessions are supported Render a "Start VR" Button
  • 34. Progressive Enhancement 6DOF VR Headset AR-ready Smartphone 3DOF VR Headset Magic Window Gyroscope WebXR Polyfill Static Image Created by Hans Gerhard Meier, Bence Bezeredy, Laura Hernández, Anil, Sachin Modgekar, Ben Davis from the Noun Project
  • 35. The Future: Augmented Reality AR Session Hit Test AR Anchors
  • 36. Using Markerless AR Today ARKit by Apple ARCore by Google World/Motion Tracking Scene Analyzation Light Estimation
  • 37. Using Markerless AR Today ARKit by Apple ARCore by Google WebAROnARKit WebAROnARCore Two Experimental Browser Apps https://github.com/google-ar/WebARonARKit https://github.com/google-ar/WebARonARCore
  • 39. <script src="aframe.min.js"></script> <script src="three.ar.js"></script> <script src="aframe-ar.js"></script> Markerless AR with A-Frame
  • 40. <script src="aframe.min.js"></script> <script src="three.ar.js"></script> <script src="aframe-ar.js"></script> Markerless AR with A-Frame
  • 41. <script src="aframe.min.js"></script> <script src="three.ar.js"></script> <script src="aframe-ar.js"></script> Markerless AR with A-Frame
  • 42. <script src="aframe.min.js"></script> <script src="three.ar.js"></script> <script src="aframe-ar.js"></script> Markerless AR with A-Frame
  • 43. <script src="aframe.min.js"></script> <script src="three.ar.js"></script> <script src="aframe-ar.js"></script> Markerless AR with A-Frame <script src="components/intersection-marker.js"></script> <script src="components/shadow-material.js"></script> <script src="components/ar-pet.js"></script>
  • 44. <script src="aframe.min.js"></script> <script src="three.ar.js"></script> <script src="aframe-ar.js"></script> Markerless AR with A-Frame <script src="components/intersection-marker.js"></script> <script src="components/shadow-material.js"></script> <script src="components/ar-pet.js"></script>
  • 45. <a-scene ar> <a-assets> <a-asset-item id="pet" src="assets/scene.gltf"></a-asset-item> </a-assets> <a-entity light="type:directional; castShadow:true;"></a-entity> <a-ar-pet></a-ar-pet> <a-intersection-marker></a-intersection-marker> <a-camera user-height="0" ar-raycaster></a-camera> </a-scene> Markerless AR with A-Frame
  • 46. <a-scene ar> <a-assets> <a-asset-item id="pet" src="assets/scene.gltf"></a-asset-item> </a-assets> <a-entity light="type:directional; castShadow:true;"></a-entity> <a-ar-pet></a-ar-pet> <a-intersection-marker></a-intersection-marker> <a-camera user-height="0" ar-raycaster></a-camera> </a-scene> Markerless AR with A-Frame
  • 47. <a-scene ar> <a-assets> <a-asset-item id="pet" src="assets/scene.gltf"></a-asset-item> </a-assets> <a-entity light="type:directional; castShadow:true;"></a-entity> <a-ar-pet></a-ar-pet> <a-intersection-marker></a-intersection-marker> <a-camera user-height="0" ar-raycaster></a-camera> </a-scene> Markerless AR with A-Frame
  • 48. <a-scene ar> <a-assets> <a-asset-item id="pet" src="assets/scene.gltf"></a-asset-item> </a-assets> <a-entity light="type:directional; castShadow:true;"></a-entity> <a-ar-pet></a-ar-pet> <a-intersection-marker></a-intersection-marker> <a-camera user-height="0" ar-raycaster></a-camera> </a-scene> Markerless AR with A-Frame
  • 49. <a-scene ar> <a-assets> <a-asset-item id="pet" src="assets/scene.gltf"></a-asset-item> </a-assets> <a-entity light="type:directional; castShadow:true;"></a-entity> <a-ar-pet></a-ar-pet> <a-intersection-marker></a-intersection-marker> <a-camera user-height="0" ar-raycaster></a-camera> </a-scene> Markerless AR with A-Frame
  • 51. Markerless AR with A-Frame AFRAME.registerComponent('intersectionmarker', { init: function () { let mark = document.createElement('a-sphere'); mark.setAttribute('radius', '0.02'); mark.setAttribute('color', 'tomato'); this.el.appendChild(mark); } });
  • 52. Markerless AR with A-Frame AFRAME.registerComponent('intersectionmarker', { init: function () { let mark = document.createElement('a-sphere'); mark.setAttribute('radius', '0.02'); mark.setAttribute('color', 'tomato'); this.el.appendChild(mark); } });
  • 53. Markerless AR with A-Frame AFRAME.registerComponent('intersectionmarker', { init: function () { /* … */ let raycaster = document.querySelector('[ar-raycaster]'); raycaster.addEventListener('raycaster-intersection', function (e) { mark.setAttribute('position', e.detail.intersections[0].point); mark.setAttribute('color', 'lightseagreen'); }); } });
  • 54. Markerless AR with A-Frame AFRAME.registerComponent('intersectionmarker', { init: function () { /* … */ let raycaster = document.querySelector('[ar-raycaster]'); raycaster.addEventListener('raycaster-intersection', function (e) { mark.setAttribute('position', e.detail.intersections[0].point); mark.setAttribute('color', 'lightseagreen'); }); } });
  • 56. UX Design for WebXR Apps
  • 57. Do Not Apply 2D Patterns
  • 59. UX Design Best-Practises Add Feedback, Respond Immediately
  • 61. It was the pioneer days; people had to make their own interrogation rooms. Out of cornmeal. These endless days are finally ending in a blaze. When I say, 'I love you,' it's not because I want you or because I can't have you. It's my estimation that every man ever got a statue made of him was one kind of sommbitch or another. Oh my god you will never believe what happened at school today. From beneath you, it devours. I am never gonna see a merman, ever. It was supposed to confuse him, but it just made him peppy. It was like the Heimlich, with stripes! How did your brain even learn human speech? I'm just so curious. Apocalypse, we've all been there; the same old trips, why should we care? Frankly, it's ludicrous to have these interlocking bodies and not...interlock. I just don't see why everyone's always picking on Marie-Antoinette. You're the one freaky thing in my freaky world that still makes sense to me. You are talking crazy-person talk.
  • 63. It was the pioneer days; people had to make their own interrogation rooms. Out of cornmeal. These endless days are finally ending in a blaze. When I say, 'I love you,' it's not because I want you or because I can't have you. It's my estimation that every man ever got a statue made of him was one kind of sommbitch or another. Oh my god you will never believe what happened at school today. From beneath you, it devours. I am never gonna see a merman, ever. It was supposed to confuse him, but it just made him peppy. It was like the Heimlich, with stripes! How did your brain even learn human speech? I'm just so curious. Apocalypse, we've all been there; the same old trips, why should we care? Frankly, it's ludicrous to have these interlocking bodies and not...interlock. I just don't see why everyone's always picking on Marie-Antoinette. You're the one freaky thing in my freaky world that still makes sense to me. You are talking crazy-person talk.
  • 65. UX Design Best-Practises Add Feedback, Respond Immediately Guide Users with Gaze Cues
  • 67. UX Design Best-Practises Add Feedback, Respond Immediately Guide Users with Gaze Cues Provide Information in Context
  • 71. Comfort and Safety in AR There is No Optimal AR Environment
  • 72. Comfort and Safety in AR There is No Optimal AR Environment Consider a User’s Movement
  • 74. Comfort and Safety in AR There is No Optimal AR Environment Consider a User’s Movement Avoid Fatiguing your Users
  • 75. Comfort and Safety in VR Do Not Trigger Phobias
  • 77. Comfort and Safety in VR Do Not Trigger Phobias Do Not Move Things Fast Towards the Camera
  • 79. Comfort and Safety in VR Do Not Trigger Phobias Do Not Move Things Fast Towards the Camera Respect a User’s Safe Space
  • 83. Prevent Simulation Sickness Do Not Move the Horizon or the Camera Do Not Use Acceleration
  • 85. Prevent Simulation Sickness Do Not Move the Horizon or the Camera Do Not Use Acceleration Avoid Flicker and Blur Add a Stable Focus Point
  • 86. @fischaelameergeildanke.com #YGLFKyiv18 Respect Your Users! Test Your Product on a Diverse Audience.