Cross-platform AR/VR With the Web: WebXR with A-Frame, Angular, and Capacitor
This blog post is part of the second episode of the Out-Of-The-Box With Capacitor series on our YouTube channel and the second AR tutorial on the blog. You can find the previous video here and blog post here
For the longest time, creating immersive, adaptive, and interactive experiences was a time-consuming process. Developing these types of experiences usually meant using specific tools, testing on expensive hardware, and you were usually locked into an ecosystem unless you worked for a company with the means to create multiple versions of your immersive experience. However, with the advent of WebXR it’s becoming easier for developers to create AR/VR experiences in their applications and with the help of a tool like Capacitor it can run on many different platforms with a single codebase.
In this tutorial I’m going to show you how to use A-Frame, Angular, and Capacitor to create a cross-platform immersive experience that runs on iOS, Android, and devices like the Apple Vision Pro using the web with a single codebase. More importantly, If the device you plan to put this on supports WebXR then this tutorial will also work with your device!
Tutorial
- Create an Ionic-Angular Project
ionic start webXR blank --type=angular
- Install A-Frame into your project
npm install --save aframe
- Import A-Frame in polyfills.ts under Browser Polyfills
* BROWSER POLYFILLS
*/
import 'aframe';
/**
- In your component, import CUSTOM_ELEMENTS_SCHEMA from @angular/core and add it to the schemas section
import { Component, OnInit, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule, Location } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
@Component({
selector: 'app-webxr',
templateUrl: './webxr.page.html',
styleUrls: ['./webxr.page.scss'],
standalone: true,
imports: [IonContent, IonHeader, IonTitle, IonToolbar, CommonModule, FormsModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
- Add A-Frame HTML
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder
position="1 0.75 -3"
radius="0.5"
height="1.5"
color="#FFC65D"
></a-cylinder>
<a-plane
position="0 0 -4"
rotation="-90 0 0"
width="4"
height="4"
color="#7BC8A4"
></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
<ion-button fill="outline" style="position:absolute; top:40px; left:10px;" (click)="back()">Back</ion-button>
- Add, build, sync, and run on your platform of choice
ionic capacitor add ios
ionic capacitor add android
ionic capacitor build
ionic capacitor sync
//Works best if you run it on a physical device
ionic capacitor run ios
ionic capacitor run android
Optional: Running Project on VR Headsets
- To run on headsets like the Vision Pro/Meta Quest/etc. you can serve the application locally or deploy it to a server with certs enabled
//Run locally
ionic serve
- [Optional] If using the Vision Pro, enable WebXR by going to Settings->Apps->Safari->Advanced->Feature Flags and enabling WebXR Device API. (This should be enabled by default in VisionOS 2.0)
- Run the experience in the browser
- Click VR in the bottom right-hand corner to enter the experience
Conclusion:
While this is a basic immersive experience to get an understanding of how to create these types of apps and make them cross-platform there are a ton of ways to extend these experiences. With A-Frame it’s possible to add controllers, interactive components, and even animations to create rich experiences. I highly suggest taking a look at A-Frame’s documentation to find out how you can take your Capacitor apps to the next level!