Glitch

By Alastair Beeson, Melvin He (2023)

What is Glitch?

Description

Glitch is a web-based platform that allows users to create, share, and remix code in real-time. It is designed to make it easy for users to experiment with code and collaborate with others on projects.

Key Features

Incredibly easy hosting service like Heroku
You can make React applications, Node Applications, Websites and more
Not limit to how many applications/websites you can host
Pretty fair data allowance
Interfaces well with Aframe components.
Best suitable for small to medium-sized projects
Built in tools like GitHub integration and popular frameworks & libararies

Download

Easily accessible at https://glitch.com/

Follow Tutorials Below for more detail.

Metrics

Accessibility: The estimated time for someone to create Hello World in VR

Beginner: No coding or graphics experience | 25 minutes
Intermediate: Some coding or graphics experience | 10 minutes
Advanced: Both coding and graphics experience | 5 minutes
Expert: A lot of experience with computer graphics, specifically with this software | <5 minutes

Power: The engine's power - i.e. how much one can do with this

Medium: Glitch is best suited for small to medium-sized projects, and may not be the best option for larger, more complex applications. Great for hosting and connecting with frameworks/libraries & GitHub

Usage: Evaluation of software's use for the following purposes

Game Design - Good. There are already several game templates accessible in Glitch. Som limitations may be in making a large scale game (great for small VR games).
Education - With the ability to create VR interfaces, host https for webVR, and produce access frameworks & libraries, Glitch could potentially be useful in producing educational content.
Science - Data Visualizations could be more easily integrated integrated the application. Extremely helpful for https for webVR to support collaboration.

Basic "Hello World" Tutorial

Register for an Account
Once registered, navigate to New Projects
Select your project type, in this case we recommend "glitch-hello-website" as this works best for A-Frame apps and makes things super simple
The project will come with stencil HTML and CSS pages
Make sure to delete any code in those pages
Paste the code below, sourced from A-Frame, into you empty index.html file:

<html>

<head>

</head>

<body>

<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>

</body>

</html>

Now if you use the preview window or your hosted app URL. If you see the scene below, congrats you have completed the Hello World of WebXR and A-Frame. This is an example that sets up a simple A-Scene with an A-Plane, A-Sky and several primitive shapes like A-Box, A-Sphere and A-Cylinder.

Lots of A-Frame components will come with example demos can you can easily upload and experiment with on websites like Glitch.

For more info on A-Frame Components, refer to A-Frame Components.