By Alastair Beeson, Melvin He (2023)
What is Glitch?
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:
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.