Introduction to Immersive Web

Google XR ARCore/Daydream
EOL
ARCore

Advances in Web Technology
<video>
<canvas>
WebRTC’s getUserMedia();
WebGL three.jsvideo tag, canvas tag OpenCV + emscripten
WebVR

Advances in XR Technology [VR]

Advances in XR Technology [AR]
ARKit

Usage
<script src='webxr-polyfill.js'></script>

<script src='https://cdn.jsdelivr.net/npm/webxr-polyfill@latest/build/webxrpolyfill.js'> 
</script>
using a build tool (like browserify or webpack)
npm install --save webxr-polyfill
var polyfill = new WebXRPolyfill();
include it as a script tag, or use a CDN
Using
using script tags
import WebXRPolyfill from 'webxr-polyfill';
const polyfill = new WebXRPolyfill();
In a modular ES6 world

<script src=‘https://cdn.jsdelivr.net/npm/webxr-polyfill@latest/build/webxr-polyfill.js'></
script>
<body>
<header>
<details open>
<summary>Viewport Scaling</summary>
<p>
<a class="back" href="./">Back</a>
</p>
</details>
</header>
</body>

// initXR()
function initFallback() {
initGL();
document.body.appendChild(gl.canvas);
let fallbackHelper = new FallbackHelper(scene, gl);
fallbackHelper.emulateStage = true;
}
// initXR()
function onRequestSession(device) {
// Set up a mirror canvas
let mirrorCanvas = document.createElement('canvas');
let ctx = mirrorCanvas.getContext('xrpresent');
mirrorCanvas.setAttribute('id', 'mirror-canvas');
document.body.appendChild(mirrorCanvas);
device.requestSession({ exclusive: true, outputContext:
ctx }).then((session) => {
xrButton.setSession(session);
onSessionStarted(session);
});
}
// initFallback()
function initGL(compatibleDevice) {
if (gl)
return;
gl = createWebGLContext({
compatibleXRDevice: compatibleDevice
});
renderer = new Renderer(gl);
scene.setRenderer(renderer);
}

// fire ar initXR() and onRequestSession()
function onSessionStarted(session) {
session.addEventListener('end', onSessionEnded);
initGL(session.device);
session.baseLayer = new XRWebGLLayer(session, gl);
// Get a stage frame of reference, which will align the user's physical
// floor with Y=0 and can provide boundaries that indicate where the
// user can safely walk. If the system can't natively provide stage
// coordinates (for example, with a 3DoF device) then it will return an
// emulated stage, where the view is translated up by a static height
so
// that the scene still renders in approximately the right place.
session.requestFrameOfReference('stage').then((frameOfRef) => {
if (session.exclusive) {
xrExclusiveFrameOfRef = frameOfRef;
let boundsRenderer = new BoundsRenderer();
boundsRenderer.stageBounds = frameOfRef.bounds;
scene.addNode(boundsRenderer);
} else {
xrNonExclusiveFrameOfRef = frameOfRef;
}
session.requestAnimationFrame(onXRFrame);
});
}
// fire at initXR()
function onEndSession(session) {
session.end();
}
// fire at onSessionStarted()
function onSessionEnded(event) {
if (event.session.exclusive) {
document.body.removeChild(document.querySelector('#mirror-
canvas'));
xrButton.setSession(null);
}
}
// fire at onSessionStarted()
function onXRFrame(t, frame) {
let session = frame.session;
let frameOfRef = session.exclusive ?
xrExclusiveFrameOfRef :
xrNonExclusiveFrameOfRef;
let pose = frame.getDevicePose(frameOfRef);
scene.startFrame();
session.requestAnimationFrame(onXRFrame);
// Every XR frame uses basically the same render loop, so for the
sake
// of keeping the sample code focused on the interesting bits most
// samples after this one will start using this helper function to
hide
// away the majority of the rendering logic.
scene.drawXRFrame(frame, pose);
scene.endFrame();
}

// Start the XR application.
initXR();
})();

https://immersive-web.github.io/webxr-samples/

https://github.com/google-ar/WebARonARCore
https://github.com/google-ar/WebARonARKit

https://github.com/google-ar/three.ar.js

CD MD
CUI GUI
☓ ☓ ☓ ☓
 
☓
☓
☓
☓
 
☓
 
☓
 
☓

DTM

 
Install
Build

References
Immersive Web
• https://www.w3.org/community/immersive-web/
• https://github.com/immersive-web
• https://immersive-web.github.io/webxr/
• https://github.com/immersive-web/webxr-samples/
• https://immersive-web.github.io/webxr-reference/
• https://immersive-web.github.io/webvr/
• https://immersive-web.github.io/webxr-samples/
• https://github.com/immersive-web/webxr-polyﬁll
• https://github.com/immersive-web/webvr-polyﬁll
• https://immersive-web.github.io/webvr/spec/1.1/
• https://immersive-web.github.io/webxr/charter/
• https://webvr.info/

• https://blog.mozvr.com/progressive-webxr-ar-store/
• https://blog.mozvr.com/experimenting-with-computer-vision-in-webxr/
• https://blog.mozvr.com/experimenting-with-ar-and-the-web-on-ios/
• https://itunes.apple.com/us/app/webxr-viewer/id1295998056?mt=8
• https://github.com/mozilla-mobile/webxr-ios
• https://github.com/mozilla/webxr-polyﬁll
• https://github.com/mozilla/aframe-xr
• https://mozilla.github.io/aframe-xr/
• https://aframe.io/
Mozilla Web XR
References

• https://developers.google.com/ar/develop/web/quickstart
• https://github.com/google-ar/WebARonARCore
• https://github.com/google-ar/WebARonARKit
• https://github.com/google-ar/three.ar.js
• https://github.com/google-ar/WebAR-Article
• https://github.com/google-ar/three.ar.js/issues/82
• https://youtu.be/1t1gBVykneA
• https://www.chromestatus.com/feature/5680169905815552
• https://developers.google.com/ar/
• https://poly.google.com
Google WebXR
References

• https://designguidelines.withgoogle.com/ar-design/augmented-reality-design-guidelines/introduction-to-ar-arcore.html
• https://blog.google/products/google-vr/best-practices-mobile-ar-design/
• https://developer.apple.com/design/human-interface-guidelines/ios/system-capabilities/augmented-reality/
UI Guideline
Others
• https://www.khronos.org/openxr
• https://developer.apple.com/safari/whats-new/
• https://github.com/dontcallmedom/html5-augmented-reality
• https://github.com/google/draco
References

• https://github.com/jcmellado/js-aruco
• https://github.com/artoolkit/jsartoolkit5
• https://github.com/jeromeetienne/AR.js
• https://github.com/awe-media/awe.js/
• https://www.argonjs.io/
• https://facebook.github.io/react-360/
• https://github.com/facebook/react-360
• https://www.nativescript.org/blog/preview-of-augmented-reality-in-nativescript
• https://www.nativescript.org/blog/getting-started-with-augmented-reality-in-nativescript
• https://github.com/EddyVerbruggen/nativescript-ar
JavaScript Library for XR
JavaScript Framework for XR
References

Introduction to Immersive Web

Recommended

Recommended

More Related Content

What's hot

What's hot (6)

Similar to Introduction to Immersive Web

Similar to Introduction to Immersive Web (20)

More from Hirokazu Egashira

More from Hirokazu Egashira (18)

Recently uploaded

Recently uploaded (20)

Introduction to Immersive Web