0 - Getting Started
Getting started with WebXR development requires, at bare minimum, a web browser and a code editor. The only major browsers currently without full WebXR support are Firefox and Safari, but any Chromium-based browser will do well (Chrome, Edge, Brave, etc). For code editing, a popular choice is VSCode, but if you already have a preferred editor feel free to use that instead.
For some web frameworks, you may not necessarily even need a separate code editor. If it's purely based on HTML and JavaScript, you can use online services like Glitch or Codepen that let you host and edit web projects directly on their site.
To get started with A-Frame, all you need to do is load A-Frame through a <script> tag. You can copy and paste the latest version below:
If you're using Node.js, you can add it through NPM:
npm install aframeWith that out of the way, we can move on to creating our Hello World in A-Frame!
To get started with babylon.js, all you need to do is include babylon.js through a <script> tag. You can copy and paste the latest version below:
If you're using Node.js, you can add it through NPM:
npm install babylonjsWith that out of the way, we can move on to creating our Hello World in babylon.js!
To get started with Godot, you first need to download the engine, which you can get at the official site here. You just need the standard version.
With that out of the way, we can move on to creating our Hello World in Godot!
To get started with JanusWeb, all that's needed is to include janusweb.js through a <script> tag. You can copy and paste the latest one below:
With that out of the way, we can move on to creating our Hello World in JanusWeb!
To get started with p5.xr, all you need to do is include both p5.js and p5.xr in <script> tags. You can copy and paste the latest version of both below:
With that out of the way, we can move on to creating our Hello World in p5.xr!
To get started with PlayCanvas, you first need to create an account on the PlayCanvas website. Once you do, you'll be able to create PlayCanvas projects in their entirely web-based editor. It's also possible to create PlayCanvas projects without using the web editor, but this will be covered more in the future.
With that out of the way, we can move on to creating our Hello World in PlayCanvas!
To get started with React XR, install both react-three-fiber and React XR through NPM:
npm install @react-three/fiber @react-three/xrThese tutorials will assume you already have at least some familiarity with React, so details such as build tools will be left to your discretion. For reference, the React XR projects on this site will make use of nano-react-app, which uses Vite under the hood, but feel free to choose whatever you are most familiar with (Webpack, Rollup, etc).
With that out of the way, we can move on to creating our Hello World in React XR!
To get started with Rogue Engine, download it from the official site here.
With that out of the way, we can move on to creating our Hello World in Rogue Engine!
To get started with three.js, you can load it through a script tag, but you'll need to load it with type="module", as three.js uses ES modules. You can place this <script> tag in your <body> to begin:
If you're using Node.js, you can add it through NPM:
npm install threeWith that out of the way, we can move on to creating our Hello World in three.js!
To get started with Unity, download Unity Hub from the official website. Once it's installed, select a version of Unity to install, making sure you add WebGL support before initiating the install. These examples will use the latest LTS version (currently Unity 2020), but you should be able to recreate these projects on newer or older versions as well, as long as they are newer than Unity 2019.
Once we have Unity Hub and a version of Unity installed with WebGL support, we need to use an exporter. The original WebXR exporter for Unity was previously maintained by Mozilla, but this is sadly no longer the case. Instead, we must rely on packages from the community. Two popular choices are this one from De-Panther and this one from Rufus31415. These examples will use De-Panther's, but feel free to experiment and see which one you prefer.
With that out of the way, we can move on to creating our Hello World in Unity!
To get started with Verge3D, download it from the official website. You'll also need to be using either Blender, 3DS Max, or Maya, as Verge3D functions as an integration with your 3D modeling software.
With that out of the way, we can move on to creating our Hello World in Verge3D!
To get started with Wonderland Engine, download it from the official website. You'll need to create a free account, after which you'll be able to get a license key to enter in the first time you launch the engine.
With that out of the way, we can move on to creating our Hello World in Wonderland Engine!
To get started with X3DOM, you can load it through a script tag. You can place this <script> tag in your <body> to begin:
With that out of the way, we can move on to creating our Hello World in three.js!