Intro to XR and 3D Graphics Workshop

A workshop created by Ashley Neall for PearlHacks 2024 – UNC-Chapel Hill's annual hackathon for women in CS!

An Introduction

This workshop introduces students to extended reality (XR) and specifically how to visually immerse users in XR experiences with 3D computer graphics. I begin with a conceptual overview of what XR is (based on my own definition and schematics), and then move into explaining some computer graphics concepts. The hands-on aspect of this workshop involves every workshop attendee creating their own web-based XR experience with A-Frame while using the Glitch IDE for accessible setup.

At the conclusion of this workshop, I encourage students to read the extra slides and explore linked resources as they complete their PearlHacks projects :) Feel free to reach out to me with any questions, and if this workshop has sparked an interest in XR and graphics, consider joining Carolina AR/VR!

For those interested, check out my personal website in XR as an example!

Pre-Workshop Setup

Please make sure to complete the following steps before attending the workshop, as you will not have time during the workshop:

1. Create a Glitch account. Follow this link and click 'Sign Up'.
2. Bookmark this repository (as you will be using the 3D assets and boilerplate code during the workshop).
3. Read this page.
4. (Optional) Explore A-Frame Docs to get ahead!

Workshop Outline

Since this workshop only lasts for an hour, this will help gauge what we will spend our time on:

1. Intro to XR and 3D Graphics presentation – 20 minutes
2. A-Frame - 30 minutes
   • Head to Glitch and remix this repository
   • Download the 3D models from this GitHub repository
     • Old Well created by Ashley Neall
     • Teapot created by Ashley Neall
     • Brick Floor created by Ashley Neall
     • Low-Poly Tree edited and optimized by Ashley Neall, created by Anthony Van Dosselaer
   • Use Don McCurdy's glTF viewer to test your glTF/glb models in the browser
   • Follow along to setup your scene
3. Questions + customizing - 10 minutes
   • Customize with more assets, materials, sound, custom shaders, and more!
   • Test in the browser (either via your laptop, PC, mobile device, or HMD)!

Post-Workshop Feedback and Resources

• Finalized repository (will post after the workshop)

A-Frame Coordinate System

Contact Information

Ashley Neall – aneall@unc.edu