🚀 WebAR Workshop – Creating an Augmented Reality Business Card

Technologies

This workshop will use:

• MindAR (Image Tracking)
• A-Frame (3D Web Framework)
• HTML, CSS and JavaScript

📋 Before the Class

Please complete the following setup before arriving:

• [ ] Install Visual Studio Code
• [ ] Install Google Chrome or Microsoft Edge
• [ ] Install XAMPP (Windows), MAMP (macOS) or LAMP (Linux)
• [ ] Have an account on Pinggy or ngrok - CRUCIAL FOR TESTING
• [ ] Bring a smartphone with a working camera
• [ ] Ensure your device battery is charged
• [ ] Verify you have Internet access on both laptop and smartphone

💻 Required Software

Visual Studio Code

https://code.visualstudio.com

Code editor used during the workshop.

Google Chrome

https://www.google.com/chrome

Recommended browser for development and testing.

Local Web Server

Windows

XAMPP

https://www.apachefriends.org

Linux & macOS

LAMP Stack

https://ubuntu.com/server/docs/how-to/web-services/install-apache2/

🛠 Technologies & Documentation

MindAR

Image Tracking library for WebAR.

Documentation:

https://hiukim.github.io/mind-ar-js-doc/

GitHub:

https://github.com/hiukim/mind-ar-js

A-Frame

Web framework for creating 3D and AR experiences using HTML.

Documentation:

https://aframe.io/docs/

Website:

https://aframe.io

Three.js

3D engine used internally by many WebAR projects.

Documentation:

https://threejs.org/docs/

Examples:

https://threejs.org/examples/

📂 Project Structure

project/
│
├── index.html
├── targets.mind
│
├── images/
├── models/
└── assets/

🎯 Tracking Image Guidelines

For reliable image tracking:

Recommended

✅ High contrast

✅ Rich visual details

✅ Sharp image quality

✅ Good lighting

Avoid

❌ Blurry images

❌ Large blank areas

❌ Simple logos

❌ Repetitive patterns

🔨 Creating a Tracking Target

MindAR Compiler:

https://hiukim.github.io/mind-ar-js-doc/tools/compile/

Steps

1. Select an image
2. Upload the image
3. Generate tracking data
4. Download the targets.mind file
5. Add the file to your project

📱 Mobile Testing

During the workshop we will use Pinggy or ngrok to securely access local projects from mobile devices.

https://pinggy.io

https://ngrok.com/

This allows testing WebAR experiences directly on smartphones without deploying them online.

Further instructions will be provided during the workshop.

📦 Free 3D Assets

Poly Pizza

https://poly.pizza

Free low-poly 3D models.

Sketchfab

https://sketchfab.com

Large collection of downloadable 3D models.

Khronos Sample Models

https://github.com/KhronosGroup/glTF-Sample-Models

Official glTF sample assets.

🎓 Expected Outcome

By the end of the workshop, every student should have:

• A functional WebAR project
• A generated targets.mind file
• A tracked image target
• A 3D object displayed in Augmented Reality
• A working experience accessible from a smartphone browser

⚡ Important Notes

• Complete all installations before the workshop.
• Bring your smartphone fully charged.
• Ensure your browser is updated.
• Keep all project files organized in a single folder.
• Arriving prepared will allow more time for AR development and experimentation.

We look forward to building your first WebAR experience.