Marker-based WebAR
จับภาพกล่องบนโปสเตอร์ด้วย image tracking ในเบราว์เซอร์ ใช้ได้ทั้ง iOS และ Android ไม่ต้องติดตั้งแอป
ตัวอย่างงานทั้งหมด
WebAR & Health Education
DIABETES AR
Web AR สำหรับให้ความรู้เรื่องโรคเบาหวาน ใช้คู่กับอินโฟกราฟิก A3 ที่มี 6 หัวข้อ ส่องกล้องมือถือที่กล่องไหน โมเดล 3D เคลื่อนไหวของหัวข้อนั้น
Screens
ภาพตัวอย่างระบบจริง
หน้าแรก desktop — ปุ่มสแกน, QR และภาพเปิดเต็มจอให้สแกนจากหน้าจอ
หน้าแรกบนมือถือ — ปุ่มสแกนปุ่มเดียว
โปสเตอร์ A3 แนวตั้ง (2×3)
โปสเตอร์ A3 แนวนอน (3×2)
1. ตับอ่อนหลั่งอินซูลิน → พากลูโคสเข้าเซลล์
2. อินซูลินเป็นกุญแจ
เปิดเซลล์ เทียบภาวะดื้ออินซูลิน 3. ตัวละครแสดง
สัญญาณเตือน 6 ท่า 4. หลอดเลือด
เมื่อน้ำตาลสูงขึ้น พร้อมเครื่องวัด 5. ภาวะแทรกซ้อนที่หัวใจ ไต ตา และเท้า
6. จานสุขภาพ 2:1:1 และการออกกำลังกาย
Challenge
โจทย์และปัญหาเดิม
- โปสเตอร์และแผ่นพับเป็นภาพนิ่ง อธิบายกลไกในร่างกาย เช่น อินซูลินพากลูโคสเข้าเซลล์ ได้ยาก
- แอป AR ส่วนใหญ่ต้องดาวน์โหลดติดตั้งก่อน ผู้ใช้จำนวนมาก
เลิกใช้ก่อนได้เห็นเนื้อหา - ต้องใช้ได้ทั้ง iPhone และ Android ซึ่ง Safari บน iPhone ไม่รองรับ WebXR
- เนื้อหาทางการแพทย์
ต้องถูกต้องและเข้าใจง่าย สำหรับคนทั่วไป
Solution
สิ่งที่เราพัฒนา
โมเดล 3D เคลื่อนไหว 6 หัวข้อ
ตับอ่อน, เซลล์กับอินซูลิน, ตัวละครแสดงอาการ, หลอดเลือด, อวัยวะที่เกิดภาวะแทรกซ้อน และจานสุขภาพ แต่ละตัวเล่า animation เป็นลำดับขั้น
Lock & Interact
สแกนแล้วโมเดลล็อกกลางจอ วางโปสเตอร์ลงได้ ลากเพื่อหมุน จีบเพื่อซูม แตะ 2 ครั้งเพื่อรีเซ็ต
เนื้อหาเชิงลึกในแอป
แผ่นข้อมูลแต่ละหัวข้อ
โปสเตอร์ 2 แบบ + โหมด Desktop
โปสเตอร์ A3 แนวตั้งและแนวนอนพร้อม PDF สำหรับพิมพ์ บน desktop เปิดภาพเต็มจอให้ส่องสแกนจากหน้าจอ หรือสแกน QR เพื่อเปิดบนมือถือ
Asset Pipeline & CI/CD
สร้าง marker และโปสเตอร์จากเนื้อหาชุดเดียว มี regression test ด้วยกล้องจำลอง และ deploy อัตโนมัติผ่าน GitHub Actions
Tech Stack
เทคโนโลยีที่ใช้
Frontend & AR
Tooling & Deploy