Project Details
Magoo AR Studio
º2024
Project Overview
A web-based 3D scene editor for augmented reality. Upload a target image from a real-world card, photo, or object, then arrange images, videos, 3D models, buttons, audio, and lights on top of it. Edit position, rotation, and scale, and set click actions to craft interactive messages. Scenes created in this studio can be brought to life in augmented reality using Magoo AR Viewer, which detects the target image and overlays the interactive 3D content directly onto it. Our founder contributed to this project as a full stack developer, building specific assigned features rather than working as part of a core team.
Challenge
Creating a Three.js scene capable of dynamically loading any element type — whether images, videos, audio, or 3D models. The challenge was building an active UI fully synchronized with the scene, allowing real-time modification of element properties, adding actions to those elements, and creating interactive lights. Another major challenge was converting and exporting that data so the scene could be recreated at any time. We also faced compatibility issues on iOS with video and image formats, which required specific handling.
Results
We created a web studio that is lightweight and fast, with no lag and highly customizable. It is fully compatible with iOS and works responsively on mobile devices. Scenes are recreatable and editable at any time. The experiences built in this studio can be viewed in augmented reality using Magoo AR Viewer, which detects the target image and overlays the interactive content directly onto the real-world object, card, or photo.