Awesome Open Source
Awesome Open Source

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

  • Render HTML to texture
  • Cross-app messaging
  • Automatic multiplayer with WebRTC
  • Immersive Web Payments API

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,508,638
Html (417,503
3d (2,575
Webgl (2,375
Threejs (2,040
Vr (1,097
Augmented Reality (1,010
Virtual Reality (663
Aframe (426
Webvr (344
Ar (328
Iframe (232
Webxr (204
Babylonjs (138
Related Projects