Added Hubs/Spoke, FRAME, and VrLand
-
RE: The Big List of WebXR Creation Tools
@trevorflowers You know initially I was hesitant to add stuff like Hubs and Frame on here, but now that I've added the Cloud Platform category I think they might actually fit after all. Will add those along with some other things next time I update this.
-
RE: The Big List of WebXR Creation Tools
I'll also use a second post here to keep track of prospective creation tools, aka any tool where there has been some discussion/planning to incorporate WebXR support.
Prospective WebXR Creation Tools
Name Type Issue? PR? Notes Armory Engine 1587 No Prior versions had WebVR support, but even that no longer works due to changes in related things used by the engine Bevy Engine 115 2319 Work has stalled, needs to be picked up again Unreal Engine Engine 41 No There is work being done by Wonder Interactive to offer a proprietary solution to WebGL and WebXR export with Unreal Engine 4/5. There are currently no open-source efforts of this nature with any visible progress Webaverse Engine 2813 3189 Previously had WebXR support, but became non-functional and is in the process of being made functional again X3DOM Framework 1046, 1068 1235 There is an existing WebVR implementation that needs to be updated. I am currently working on this. -
The Big List of WebXR Creation Tools
The following is a list of just about every single thing you can use to create WebXR content that I'm aware of. I'll probably update this as time goes on, feel free to leave any suggestions of something you think should be on here.
WebXR Creation Tools
Name Type Built On Notes 8th Wall Cloud Platform WebGL AR-focused A-Frame Framework three.js -- AR.js Library WebGL AR-focused ATON Framework three.js -- babylon.js Engine WebGL -- echo3D Cloud Platform model-viewer/A-Frame/ar.js model-viewer used for "See on floor", A-Frame+AR.js used in marker tracking, A-Frame+jeelizFaceFilter used in face tracking Ethereal Engine Engine three.js -- FRAME Cloud Platform babylon.js Geared towards conferencing and galleries Godot Engine WebGL Requires additional setup to export Hubs Cloud Platform A-Frame Geared towards conferencing and galleries JanusWeb Framework Elation Engine -- Immersions Library babylon.js -- LÖVR Framework WebGL Requires additional compilation step (see WebXR section) model-viewer Library WebGL Limited interactivity nunuStudio Engine three.js Both web and native engine versions available p5.xr Library p5.js -- Playcanvas Engine WebGL Web-only editor React XR Library three.js -- Rhodonite Library WebGL -- Rogue Engine Engine three.js -- spacesvr Framework three.js/React XR -- Spoke Scene Editor three.js Used to author Hubs scenes three.js Library WebGL -- threlte Library three.js Renderer for Svelte Unity Engine WebGL Requires external exporter Verge3D Toolkit three.js Includes visual programming interface Virtual Maker Cloud Platform babylon.js Web-only editor VRIA Framework A-Frame Focused on data visualization VrLand Cloud Platform A-Frame Geared towards conferencing, galleries, and web3 vtk.js Library WebGL Focused on data visualization Wonderland Engine Engine WebGL -- WorldCore Engine three.js -- Zea Engine WebGL CAD-focused -
Neat monoscopic effect hack
I've been working on and off on a short narrative experience that I wanted to get experimental with, which ended up taking the form of projecting a monoscopic image intermittently during the experience that takes up your field of view (you can maybe tell from this already what kind of experience I'm making as far as comfort is concerned, heh). Anyhow, I feel like sharing, so here you go!
What I ended up doing is creating two planes with an image projected onto them, then figuring out the IPD of the user and positioning the second plane that same distance away. Below is the code I wrote in A-Frame to achieve this (minus some experience specific functions), though I'm sure it can be easily recreated in other frameworks after accounting for potential differences in camera implementations (A-Frame, for example, considers the left eye to be at the origin, hence me having to offset for the right eye).
AFRAME.registerComponent('overlay', { schema: { rightEye: { type: 'bool', default: false } }, init: function () { document.addEventListener('enter-vr', e => { if (!this.data.rightEye) return; // Need to set a short delay so we have a frame object to grab the session from setTimeout(() => { // Obtain the viewer pose so we can calculate the distance between both eyes const scene = e.detail.target; const xrSession = scene.frame.session; const refSpace = scene.systems['tracked-controls-webxr'].referenceSpace; xrSession.requestAnimationFrame((_, frame) => { const [leftEye, rightEye] = frame.getViewerPose(refSpace).views; const distance = this.calcDistance(leftEye.transform.position, rightEye.transform.position); // Round to 3 decimal places, this gives IPD in meters const ipd = Math.round((distance + Number.EPSILON) * 1000) / 1000; console.log(ipd); this.el.object3D.position.x = ipd; }); }, 100); }); }, calcDistance(leftPosition, rightPosition) { // Calculate distance in 3D space between both eyes const dx = rightPosition.x - leftPosition.x; const dy = rightPosition.y - leftPosition.y; const dz = rightPosition.z - leftPosition.z; return Math.sqrt((dx ** 2) + (dy ** 2) + (dz ** 2)); } });
-
The site is now live!
After more than a few days tinkering away, getting settings just right and installing plugins, etc, the WebXR Community Forum is finally live! Things should more or less be in order, but if you do happen to find something funky than please make a post on it in the Site Feedback category.
-
Links and Resources
The following are some useful links for general Wonderland Engine development:
-
Introductions
Hello! This is the thread where anyone (if they so choose) can introduce themselves to the members of the community. I'll go first:
My name is Daniel, though I'm more commonly referred to as m₂ (pronounced m-sub-2). I've been involved with WebXR since late 2020, when I created the WebXR Discord after finding there was no active spot where everyone seemed to be congregating. Since then, the server has grown to over 2100 members, but I've found that there are some who still feel left out by this focus on Discord, which is partially what prompted me to create the WebXR Community Forum. I view it as a sister community to the Discord, and in the future I'll be looking into ways to help these communities feel close-knit and able to add value to each other.
As far as development goes, I've dipped my toes into just about every engine, library, and framework out there right now, but my favorites would have to be A-Frame (and by extension three.js) and Wonderland Engine. I've worked on a lot of projects, but I've still got a lot of creative plans that have yet to be realized, and those are probably what excite me the most. You can check my signature for links to all my stuff and whatnot.
Looking forward to meeting everyone else that joins!
-
Links and Resources
The following are some useful links for general Unity development:
And for WebXR development with Unity:
- De-Panther's Unity WebXR Exporter - A fairly direct continuation of Mozilla's original WebXR exporter, but still actively maintained and updated.
- Rufus31415's SimpleWebXR Unity package - Another solution for integrating WebXR support into a Unity project, with support for integration with MRTK.
-
Posting Guidelines
This category is for work-related posts, whether that be users looking for work or employers looking to hire. Please follow the following guidelines:
- For those looking for work, do not post multiple threads advertising your services. One will suffice.
- For those looking to hire, do not post multiple threads unless you are offering substantially different positions across different projects.
- All posts must be WebXR-related. If you are not offering any WebXR-related services or are not hiring for a WebXR-related project, your thread will be removed.