AR Basics

Explore & Discover

Augmented reality layers digital stuff on top of the real world — like Pokémon GO dropping creatures onto your street, or Snapchat filters sticking a hat on your head. Open your phone's camera and try three free AR apps: Google Lens (already on most Androids), Ikea Place (place furniture in your room), and Snapchat's AR filters. For each one, notice: what real-world thing is it tracking — your face, a flat surface, a specific image? How does the digital layer respond when you move? Then watch two YouTube videos: search "how does AR tracking work" and "WebXR explained for beginners." You don't need to understand all of it yet — just get curious about what's happening under the hood. You're ready for the next step when you can name three different things AR can track and explain why tracking matters for making AR feel convincing.

Learn the Basics

The fastest way to build AR without installing anything is WebXR — augmented reality that runs right in a browser. Go to A-Frame (aframe.io), which is a free, open-source framework built by Mozilla. Work through their basic Hello WebVR example, which you can edit live in Glitch.com. A-Frame uses HTML-like tags to place 3D objects in a scene — a box, a sphere, text — and you can see them in your browser. Then check out AR.js (ar-js-org.github.io/AR.js-Docs) which adds real camera AR on top of A-Frame. It's free and works in mobile Safari and Chrome. Read through their Getting Started page and run one of their examples on your phone. You're ready for the next step when you've run an AR.js example on your actual phone and a 3D object appears anchored in your real room.

Build Your First Project

Build your first real AR project: a digital museum exhibit about something Utah-related. Pick a topic — Bonneville Salt Flats, ancient dinosaur fossils found in Utah, or the Great Salt Lake's shrinking shoreline. Create a Glitch.com project using A-Frame and AR.js. Your exhibit should have at least one 3D model (grab free GLTF models from Sketchfab.com), a text label that appears when you look at a marker, and an image of your topic. AR.js uses printed black-and-white Hiro markers that you can print for free — the AR content appears when your phone camera sees the marker. Print two different markers and make each one show different information. You're ready for the next step when you have a working AR experience that shows different content on two different printed markers.

Experiment & Iterate

Now make your exhibit interactive and more polished. Add click/tap events to your 3D objects — in A-Frame, you use the cursor component and click event listeners to make things happen when a user looks at or taps an object. Make at least one object play an animation when tapped (A-Frame has a built-in animation component). Then try markerless AR using AR.js image tracking mode — instead of a printed marker, your AR content appears when the camera sees a specific real-world image, like a photo or a logo. Test your project with different lighting conditions and backgrounds. AR breaks in weird ways — low light, moving too fast, plain white surfaces. Document what breaks and why. You're ready for the next step when your AR experience has interactive elements that respond to user input and you've tested it under at least three different conditions.

Advanced Techniques

Go deeper with 8th Wall (8thwall.com) — they offer a free trial and it's the most powerful browser-based AR platform used by real companies. It supports face tracking, world tracking (no markers needed), and image targets. Alternatively, explore Spark AR Studio (free from Meta) which powers Instagram and Facebook AR filters — you can build a face filter and submit it to Instagram for real users to try. Pick one platform and build something technically impressive: a face filter that reacts to your expressions, or a world-tracking experience where a 3D object walks around your room using the actual floor. Watch tutorials on YouTube for whichever platform you choose. You're ready for the next step when you've built an AR experience using a professional-grade tool that uses either face tracking or markerless world tracking.

Final Project Showcase

Create a complete AR experience designed for a specific real audience — younger kids at your school, visitors at a Utah state park, or shoppers at a local small business. Think about why AR makes this better than a regular webpage or poster. Build it with your best tool (A-Frame+AR.js, 8th Wall, or Spark AR), make it look polished, and write a one-paragraph pitch explaining the problem it solves. If you used Spark AR, submit your filter to Instagram. If you used A-Frame, host it on Glitch and generate a QR code (qr-code-generator.com) that links to it — then print the QR code and put it somewhere public. Document your process with screenshots or a short screen recording. You're ready for the next step when you have a complete, polished AR project designed for a real audience, hosted publicly, and documented with a written pitch and visual proof it works.