Inspiration
Our journey began with the recognition that Augmented Reality (AR) technology was still blossoming and had immense potential, particularly in educational contexts. Inspired by L3 Harris's challenge to stimulate a lasting interest in STEM careers among school-aged children, we realized the power of visuals in the learning process. We aimed to harness AR's capabilities to offer kids a unique and interactive learning experience, thus planting the seeds of curiosity and passion for STEM fields early in their lives.
What it does
brainARcade transforms the traditional learning environment into an immersive AR experience, where children embark on educational scavenger hunts. Imagine a world where kids scan markers to discover planets in our Solar System or hunt for major computer components to visualize a complete setup. This interactive approach not only makes learning fun but also deeply engaging, fostering a hands-on understanding of complex concepts. To bring up the competitive spirit, a global scoreboard is visible and shows who has progressed the most.
How we built it
brainARcade was developed by integrating a combination of powerful technologies. The core AR functionality was brought to life using Ar.js, a lightweight library for AR on the web. Complementing this, we employed Three.js, a powerful JavaScript library that rendered our 3D models within the browser. For the front-end, we chose a simple yet robust combination of HTML/Bootstrap and JavaScript, ensuring both responsiveness and accessibility. To host our application, we opted for AWS Amplify, which provided us with a scalable and secure hosting solution. Furthermore, we integrated AWS Route 53 to manage custom domain names, offering a professional touch to our web presence.
Challenges we ran into
Our journey with brainARcade was filled with challenges. The technical difficulties of integrating Ar.js with Next.js led us to rethink our approach and adapt quickly. Another significant challenge was diving into 3D modeling using Blender. None of us had prior experience in this area, and Blender’s comprehensive and intricate toolset presented a steep learning curve. We dedicated substantial time and effort to overcome these challenges, often experimenting and learning through trial and error. Additionally, we faced challenges in integrating Flask with our existing project due to dependency errors. This obstacle required us to explore alternative solutions and approaches to backend development, but sadly we ran out of time.
Accomplishments that we're proud of
Our journey with brainARcade is marked by several achievements that we take pride in. First, successfully creating an engaging AR educational platform from scratch was a significant accomplishment. The integration of Ar.js with Three.js, allowing for the rendering of complex 3D models in a web browser, was a notable technical feat. Overcoming the challenges associated with learning Blender for 3D modeling and effectively employing AWS services for hosting and domain management were milestones that demonstrated our team's adaptability and commitment.
What we learned
The development of brainARcade was an insightful learning journey for our team. We explored the realms of 3D modeling with Blender, where we learned to create and animate intricate 3D models - a skill that was pivotal in crafting visually appealing AR experiences. The integration of Three.js with Ar.js expanded our understanding of web-based AR development, teaching us the intricacies of real-time 3D rendering in the browser and interactive AR scene creation. Additionally, working with AWS services like Amplify and Route 53 provided us valuable insights into cloud hosting, scalability, and domain management, enriching our backend development skills.
What's next for brainARcade
Looking ahead, we plan to enhance brainARcade with additional interactive features and more diverse educational content. This could include:
- Interactive Challenges such as quizzes and puzzles directly within the AR environment
- Expanded content to include more STEM subjects and topics
- Personalized Learning Paths using AI based on user performance and preferences
- Explore the integration between AR and VR to provide an even more immersive experience
- Setup a backend to hold user scores and statistics
Built With
- aframes
- amazon-web-services
- ar.js
- blender
- bootstrap
- css
- html
- javascript
- three.js
- vanta.js


Log in or sign up for Devpost to join the conversation.