Immersive Web on your website

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

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

WebXR application development stack
ARCore Service
Java Helper
Library
Native App Java or NDK
AIDL
Core 
Process
Web App [ with WebXR Device API + WebGL]
Swift / Object-C
App
[ARKit API + WKWebview]User App 
Process
WebARonARkit / XRViewer WebARonARCore
Chromium 
[Native]
WebKitARKit
ARCoreSDK
ARKit Process
* maybe exist
Web
DaydreamSDK
Daydream Service

WebXR application development stack
ARCore Service
Java Helper
Library
Native App Java or NDK
AIDL
Core 
Process
Web App [ with WebXR Device API + WebGL]
Swift / Object-C
App
[ARKit API + WKWebview]User App 
Process
Chromium 
[Native]
WebKitARKit
ARCoreSDK
ARKit Process
* maybe exist
Web
DaydreamSDK
Daydream Service
Camera View .etcCamera View + SensorData Controller .etc
All you have to do is develop this part.

navigator.xr.requestDevice().then(device => {
// Resolves if an XRDevice is available.
onXRAvailable(device);
}).catch(error => {
// An error occurred while requesting an XRDevice or none is available.
console.error('Unable to retrieve an XR device: ', error);
});

xrDevice.supportsSession({immersive: true}).then(() => {
xrButton.setDevice(device);
});

xrDevice.requestSession({ immersive: true }).then((session) => {
xrSession = session;
});

xrSession.requestFrameOfReference('eye-level')
.then(xrFrameOfRef => {
xrSession.requestAnimationFrame(onFrame(time, xrFrame) {
// The time argument is for future use and not implemented at this time.
// Process the frame.
xrFrame.session.requestAnimationFrame(onFrame);
}
});

let pose = xrFrame.getDevicePose(xrFrameOfRef);
if (pose) {
// Draw something to the screen.
}

for (let view of xrFrame.views) {
// Draw something to the screen.
}

xrDevice.requestSession(sessionOptions)
.then(xrSession => {
// Create a WebGL layer and initialize the render loop.
xrSession.addEventListener('end', onSessionEnd);
});
// Restore the page to normal after immersive access has been released.
function onSessionEnd() {
xrSession = null;
// Ending the session stops executing callbacks passed to the XRSession's
// requestAnimationFrame(). To continue rendering, use the window's
// requestAnimationFrame() function.
window.requestAnimationFrame(onDrawFrame);
}

event.frame.session.requestHitTest(rayOrigin, rayDirection,
xrFrameOfRef).then((results) => {
if (results.length) {
addARObjectAt(results[0].hitMatrix);
}
});

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

https://peccu.github.io/ar-quicklook-usdz/

WebAssembly

DRACO

Poly

Immersive Web on your website

More Related Content

More from Hirokazu Egashira (14)

Recently uploaded (20)

Immersive Web on your website