“Hello Space” with Glitch
Let’s understand the limitations of VR experiences running straight from your device. We will then look at a hosting alternative.
Launching ‘Hello World’ into space!
The background of the ‘Hello World’ example is a dull gray colour. What if we wanted to make it look like we were in space, in orbit above Earth? We need to replace the background colour with an image of space like in Figure 1. AFrame provides us with a simple primitive to achieve this:
<a-sky>
AFrame documentation states:
“The sky primitive adds a background color or 360° image to a scene. A sky is a large sphere with a color or texture mapped to the inside.”
Figure 1: Space Panorama (source: Pixabay)
Let’s save the space panorama image as spacepano.jpg to the same location as the ‘HelloWorld’ html file and add it to the scene by adding the following lines of code:
<a-assets>
<img id="spacepano" src="./spacepano.jpg">
</a-assets>
<a-sky src="#spacepano"></a-sky>
If you save and refresh the page, you will see that the dull background is replaced by black, but not our space panorama. Why did this happen? If you take a look at the Browser console (by pressing F12 for Firefox/Chrome), you will see a message like the one in Figure 2. Let’s understand what is happening here.
Figure 2: CORS restrictions on loading local assets alongside a local page
Virtual Worlds and WebXR
Virtual worlds include dynamic and custom assets like 3D models, textures, images. They also respond to customizable events from a variety of input controllers.
WebXR standards require support for all these features.
However, browser-based access to content requires additional privacy/security measures. When you load a virtual world via a local HTML file these measures (called CORS policy) are triggered. These measures prevent local assets from being loaded. A simple workaround is to host all the content on the same server. Normally, a hosting server will deliver a “production”/”live” public-facing VR application. While developing a VR application, and for the purpose of this course, access to a server can be difficult and costly. We will explore some simple server hosting alternatives. The first one is Glitch!.
What is Glitch?
Glitch is a collaborative programming environment that can be deployed in a browser. We can use Glitch to develop both dynamic and static webpages/apps. You can build fast, full-stack web apps in Glitch and deploy this to your web browser. Multiple collaborators can work on the same project on Glitch. There are no required setup or installation, and live changes can be seen by all collaborators on the web.
‘Hello Space’ with Glitch
Starting a new project
Before you can start a new project in Glitch, you have to create an account. Go to their website https://glitch.com/ to get started. Once account is created, click on “New Project”. You can use the default index.html file provided for you to write your code (or create a new file called hellospace.html). Copy over the code for our ‘Hello Space’ example to the file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FutureLearn-VR: Hello Space!</title>
<meta name="description" content="FutureLearn-VR: Hello Space!" />
<script src="https://aframe.io/releases/1.0.4/aframe.min.js "></script>
</head>
<body>
<a-scene background="color: #FAFAFA">
<a-assets>
<img id="spacepano" src="<TBD>">
</a-assets>
<a-sky src="#spacepano"></a-sky>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
</a-scene>
</body>
</html>
To add the spacepano.jpg, we need a couple more steps:
-
Upload spacepano.jpg by clicking ‘Assets’ on the left panel in Glitch and then use ‘Upload an Asset’. Once uploaded to ‘Assets’, click on it to open it inside a pop-up pane. Below the image you will see a full path to the asset (See Figure 3). Copy this path.
-
Set the path you just copied by replacing <TBD> in the code on line 12 of the html file.
Figure 3: Assets are hosted on a CDN. To access them, use the CDN link
Figure 4: Hello Space!
Viewing Glitch Project
In Glitch framework environment, you can view your project design by clicking the dropdown “Show” button and selecting to view the project either using a New Window tab or within the same working environment using Next to The Code (one showing the code and the other showing the project display by the side). Use the ‘Show App’ button in Glitch to view the ‘Hello Space’ example. It should look something like the one seen in Figure 4. Virtual worlds hosted via Glitch can be accessed from anywhere and using any device.
Reach your personal and professional goals
Unlock access to hundreds of expert online courses and degrees from top universities and educators to gain accredited qualifications and professional CV-building certificates.
Join over 18 million learners to launch, switch or build upon your career, all at your own pace, across a wide range of topic areas.
