Spatial XR Tech-Stack in 2024
Introduction
What’s XR (extended reality)
It’s an umbrella term for AR(augmented reality), MR(Mixed reality), VR(virtual reality) combined.
The game engines mostly support Mobiles and pc games via steam or other platforms, where webxr enbles you to build the xr for web browsers, mostly web browser share major share of device market so they are useful for making XR for everyone ! when beginning of XR journey to build it would be very confusing to use the right tool for the job, because the future of the project depends on it. unity and unreal are game engines, so in this section we will be only covering webxr.
What’s WebXR ?
WebXR is a Web Application Programming Interface (API) that allows users to access virtual reality and augmented reality devices in compatible web browsers.
Here is an exhaustive list of tools and there comparison:
Click here notion link
Tools supporting XR in browsers:
Three.js:
Three.js is one of the most popular javascript 3D libraries which is used to create 3D experiences within web browsers using WebGL. Three.js has API that provides a set of classes and methods for for creating and modifying 3D models, materials, camera perspectives, lighting shadows, animations. It have cross-platform and cross-browser compatibility. It can be used for games, simulations, interactive experiences.
Click here to: View_code Experience
babylon js:
Babylon.js, a JavaScript library, offers extensive examples for experimentation. It allows experienced developers to deeply customize rendering, making it ideal for creating intricate applications. It can be used for Architectural visualizations, product simulations. It’s feature-rich for 3D rendering and graphics.
Click here to: View_code Experience
Aframe:
A-Frame, built on Three.js, manages the rendering loop, enabling smooth VR experiences. It uses the Entity-Component-System for building functionalities and interactions. Your Three.js knowledge can be leveraged to create objects, while A-Frame handles their lifecycle and interactions.
A-Frame is a powerful framework on top of Three.js that provides a declarative, composable, reusable entity-component structure for Three.js.
Click here to: View_code Experience
Some honorable metions are:
react-xr: VR/AR with react-three-fiber
react-three-fiber: A React renderer for Three.js
tresjs: Declarative ThreeJS using Vue Components
cesium: An open-source JavaScript library for world-class 3D globes and maps
threlte: 3D framework for Svelte
Kodadot’s Plan for XR
Kodadot is using A-frame for its nft assets to view and interact with nfts. Also, we can experience them in a virtual gallery.
Get TouchstoneTheDev’s stories in your inbox
Join Medium for free to get updates from this writer.
So if you are beginner in XR aframe should be your choice, if you need to optimize performace go ahead and use threejs. if you’re not into coding, platforms like PlayCanvas or other meta-engines can be a great choice. They offer user-friendly interfaces and tools that allow you to create 3D content without needing to write code. Just remember, each platform has its own strengths and weaknesses, so choose the one that best fits your needs.
How to experience XR:
A] Browser’s
- Mozilla Mixed Reality
- Supermedium
- JanusXR
- Exokit
- Carmel
- Samsung Internet
- Helio
- Anarchy Arcade
- Metachromium
- Argons
B] Meta-engines
- minecraft, roblox (VR)
- sandbox, axie infinity (web3)
C] Devices:
- PlayStation VR2 (Sony Interactive Entertainment)
Tethered Headsets:
- Valve Index (Valve)
- HTC Vive Pro Series (HTC)
- HP Reverb G2 (HP)
- Pimax headsets (Pimax)
Other devices
- Spatial VR Headsets (e.g., Varjo XR-3, XTAL)
- VR Arcades and Platforms (e.g., Zero Latency, Survios)
- Custom and Open-Source Devices (e.g., FOVE, OSVR)
Smart glasses
- Microsoft HoloLens 2 (Microsoft)
- Magic Leap 2 (Magic Leap)
- Nreal Air (Nreal)
- Lenovo ThinkReality A3 (Lenovo)
Want to get involved? We are hiring!
As a growing team, we need to hire social capital to render our vision true. You and your friends can be part of it. Let us know if you know someone who would like to contribute to open-source web3 projects and change the world.
We are in it for open Metaverse
- Frontend Engineer — VueJS/Typescript
- Technical Product Manager
- Senior Business and Operations Manager
- Rust developer
