exokitxr / exokit-web

Exokit WebXR engine for the browser
70 stars 18 forks source link
3d a-frame aframe ar augmented-reality babylonjs html iframe javascript metaverse threejs virtual-reality vr webgl webvr webxr

Exokit Web

Javascript WebXR metaverse engine

DemoDocsDiscordTwitterEmail List

Mozilla Hubs inside of Cryptovoxels XR Sites loaded together in shared grid Moving Solar System site above Moon Rider on grid with UI menu

Overview

Exokit Web is a Javascript library for composing multiple WebXR applications in a regular web page. It works in all web browsers, VR and AR headsets, with no dependencies.

index.html

import 'https://web.exokit.org/ew.js';

xrEngine = document.createElement('xr-engine');
xrEngine.src = 'app.html';

app.html

// Create WebXR session
session = await navigator.xr.requestSession('immersive-vr');

// Add Mozilla Hub
fooFrame = document.createElement('xr-iframe');
fooFrame.src = 'https://hubs.mozilla.com/VxGmqjU/fuchsia-winding-room?vr_entry_type=vr_now';
session.layers.push(fooFrame);

// Add A-Painter too
barFrame = document.createElement('xr-iframe');
barFrame.src = 'https://aframe.io/a-painter';
session.layers.push(barFrame);

See index.html for a full example.

Start example server

npm install
npm start

How to use

Import ew.js into your app:

<script type=module src="https://web.exokit.org/ew.js"></script>

In the top-level directory of your app, create the file sw.js with these contents:

importScripts('https://web.exokit.org/sw.js');

The boilerplate code has this set up already.

Finally, make sure you are serving your app over https:// (or localhost), which is required for Service Workers.

And that's it! Read the API Documentation.

Future directions