How I built a content management system for WebVR using A-Frame
I had the idea of building a content management system for WebVR in 2015. I wanted to have a PHP-based system which I can put on any server and which makes it easy to manage and publish virtual reality websites. After some research I realised that such a system, tailored for virtual reality on the web, did not exist yet. That’s when IdeaSpaceVR was born.
Back then, I intended to use Three.js for the virtual reality part of the system. But when A-Frame was released, it was immediately clear to me that it would perfectly integrate into my system and that it would help me to speed up software development. After all, A-Frame is a web framework for building virtual reality experiences.
What is IdeaSpaceVR?
IdeaSpaceVR is an open source content management system tailored for publishing and managing virtual reality websites. IdeaSpaceVR is built on top of Laravel (a popular PHP framework) and the Blade template engine. It can be freely downloaded and installed on any server which can run PHP and a database. It implements the concept of virtual reality themes which are basically templates for virtual reality websites to be filled with content by users. IdeaSpaceVR exposes an API as well, so anybody can develop and share virtual reality themes.
How does it work?
In IdeaSpaceVR your create, manage and publish “Spaces”. These are like websites with a title and a URL. But unlike traditional websites, each space represents a virtual reality scene (or a page which embeds a virtual reality scene). You can view your space with a modern web browser on your smartphone, PC or via your head mounted display (HMD).
Each space you create is based on a virtual reality theme. A theme is a software package which defines what is shown in a virtual reality space and which type of content can be added and modified. If you know Wordpress or other content management systems then you are already familiar with the concept of themes.
A theme defines content types and field types. An example for a content type is “Photo spheres” or “Text notes”. An example for field types are “textfield”, “position” or “image”. These content types and field types define which content you can add when you create a new space and select a theme for it.
Example: Let’s say you want to publish a couple of photo spheres (360 panorama photos) with text annotations on your website. In IdeaSpaceVR, you would create a new space and select a virtual reality theme called “Photo spheres with text annotations”. You choose a title for your space, let’s say “360 Holiday Photos from my Trip to Italy”. And you would choose a URL path, let’s say “my-trip-to-italy”. Then you would upload all of your 360 photos for that space. The next step is to create text annotations and position and assign them to your photo spheres. Now you are ready to publish your space and that’s all. Any time you want to exchange photo spheres or add/remove text annotations you can simply edit your space.
What’s the role of A-Frame?
I am using A-Frame in many different parts within IdeaSpaceVR. On the one hand I use it for previewing assets and for some field types. On the other hand A-Frame is used in the “IdeaSpace 360” theme as well as in the “Starter Theme” (for developers). Although the theme API is independent from the virtual reality framework, I plan to release the next few themes using A-Frame as well.
Assets
There are 6 different asset types: “images”, “photo spheres”, “videos”, “video spheres”, “models” and “audio”. For all asset types (except audio) I use A-Frame in order to allow people to preview their asset, before adding them to a space.
I simply use the most basic A-Frame primitives for previewing assets (and it saved me a lot of development time instead of using Three.js directly): <a-image>, <a-sky>, <a-video>, <a-videosphere>, <a-obj-model>, <a-collada-model> as well as the ply-model loader from the A-Frame Extras Add-ons.
If someone uploads a 3D model, the software detects the model type on the server and generates the appropriate A-Frame primitive for previewing the model (<a-obj-model>, <a-collada-model> or ply-model loader).
Field Types
The field types in IdeaSpaceVR are covering all asset types as well as text, colour, date and some more. A field type which heavily relies on A-Frame is called “position”. This field type let people position objects in a space. Objects could be anything from text annotations, images to 3D models.
The following example shows how to position text annotations within a photo sphere.
After uploading a photo sphere, people can click on the “Attach” button and the following overlay window appears.
The UI elements on the right hand side control the photosphere (<a-sky>) on the left hand side. The label in the scene is using A-Frame’s text component. If someone selects a placeholder item from the select box and clicks on “Attach”, a new <a-entity> including a text component is generated and added dynamically to the A-Frame scene.
The label “[We met here 5 years ago]” is a reference to a content type called “Text Note”.
IdeaSpace 360 Theme
This theme is based on A-Frame and a couple of custom components. It has a navigation menu to select photo spheres and each photo sphere has hotspots which have text annotations.
The IdeaSpaceVR system is generating all A-Frame entities for this theme. That is: the initial state of the navigation menu, the initially shown photo sphere as well as its hotspots and text annotations.
There are a basically two custom A-Frame components at work:
- Loading of the thumbnail images of the navigation menu
- Loading of text annotations for each hotspot.
Both components load data via JSON from IdeaSpaceVR and update the scene. Take a look at a preview of the theme.
What’s next?
Developing virtual reality themes… I mean a lot of different and fun themes! ;-) Improving the IdeaSpace360 theme. And adding features to IdeaSpaceVR: adding support for VR controllers, support for glTF model upload, etc.
More information can be found at IdeaSpaceVR, Twitter and, of course, at A-Frame.
Peace!
