The first-phase SVG campus map for Sam Houston State University, drawn in Illustrator to the university’s brand guidelines: 200+ locations in a clear, navigable structure.
05/ 20
Vision ARDubai postcardsbrought to life
An interactive web AR experience built with MindAR and Three.js. Point a phone at a Dubai postcard and the Burj Khalifa rises out of it, Rooey the mascot hops, waves and chats, and a griffin circles overhead. Tap Rooey’s speech bubble to visit Engage Sydney. No app to install.
- Year
- 2025
- Role
- Designer · Developer
- Client
- Vision by Disrupt (Engage)
Impact
- Image tracking on a postcard with MindAR
- Animated characters: Rooey’s hop → wave → chat loop and a flying griffin
- Rotating Burj Khalifa model
- Runs in the phone browser, no app
The challenge
Turn a printed postcard into something people want to point their phone at, and send them on to Engage Sydney, without asking anyone to install an app.
My approach
- Image-target tracking with MindAR, trained on the postcard
- 3D scene in Three.js: the Burj Khalifa with a slow rotation, loaded as GLB/FBX
- Character animation: Rooey plays a looping sequence (hop with arms raised → wave → stand and chat); the griffin flies a circle with flapping and tilt
- A tappable speech bubble that opens engagesydney.com.au
- A clean scanning interface, tuned for phones and tablets
The solution
- Point your camera at a Dubai postcard to start
- Burj Khalifa, Rooey and a griffin in AR
- Tap Rooey to visit Engage Sydney
- Works in Chrome, Safari and Firefox on mobile
Tools
- MindAR
- Three.js
- JavaScript (ES modules)
- HTML5/CSS3
- Blender
(Project)