Web AR for diabetes education, used with an A3 infographic covering 6 topics. Point the phone camera at any box and that topic's animated 3D model locks to the centre of the screen, ready to rotate and zoom. It runs in the browser on both iOS Safari and Android Chrome with no app to install.
Desktop home — scan button, QR code and a full-screen target to scan from the screen
Mobile home — one scan button
Portrait A3 poster (2×3)
Landscape A3 poster (3×2)
1. The pancreas releases insulin → glucose enters cells
2. Insulin as the key that opens the cell, compared with insulin resistance
3. A character acting out 6 warning signs
4. Blood vessels as sugar rises, with a glucose meter
5. Complications in the heart, kidneys, eyes and feet
6. The 2:1:1 healthy plate and exercise
The challenge
Posters and leaflets are static images, which makes body processes such as insulin moving glucose into cells hard to explain.
Most AR apps must be downloaded first, and many users give up before they see any content.
It has to work on both iPhone and Android, and Safari on iPhone does not support WebXR.
Medical content must be accurate and easy for the general public to understand.
What we built
Marker-based WebAR
In-browser image tracking detects the boxes on the poster. Works on iOS and Android with no app install.
6 animated 3D topics
Pancreas, cell and insulin, a character showing symptoms, blood vessels, organs affected by complications, and the healthy plate. Each animation tells its story step by step.
Lock & Interact
After a scan the model locks to the centre of the screen, so the poster can be put down. Drag to rotate, pinch to zoom, double-tap to reset.
In-depth content in the app
An information sheet for each topic with more to read, based on guidelines from the Diabetes Association of Thailand and the ADA.
2 posters + desktop mode
Portrait and landscape A3 posters with print-ready PDFs. On desktop, a full-screen target can be scanned from the screen, or a QR code opens the app on a phone.
Asset Pipeline & CI/CD
Markers and posters are generated from a single content source, with regression tests using a simulated camera and automatic deploys through GitHub Actions.
