IdeAR: Enhancing University Education with Augmented Reality, Part 1

Posted by:
Peter Colla

October 30, 2023


In the ever-evolving world of education technology, innovation is key to keeping students engaged and making learning more interactive.  Augmented reality has emerged as a transformative force, taking education to the next level. While the concept of augmented reality isn’t brand new, its’ applications in education have been continuously evolving. One such innovative application is IdeAR, an augmented reality application tailored for university staff to annotate 3D models and share them with students, offering an immersive and engaging learning experience.

IdeAR’s arrival is a turning point in the narrative of education, where students are no longer passive observers but active explorers of knowledge.

What will we be covering today?

Welcome to the first part of this exciting two-part blog series! In part 1 of this series, we’ll be exploring the remarkable IdeAR and its transformative features in education. We’ll also explore the exciting realm of interactive web-based applications, with a close look at React and BabylonJS, two tools that have been redefining digital interactivity. In part 2, we’ll see how the Angular framework is being used to modernise IdeAR, taking it to the next level.

Origins of IdeAR: React and BabylonJS

IdeAR was initially conceptualized and developed in 2020 using React and BabylonJS, two powerful technologies known for their flexibility and capabilities in building interactive web-based applications. This combination allowed the creation of a user-friendly interface while harnessing the prowess of BabylonJS for rendering 3D models in a browser seamlessly.

Key Features of IdeAR

  • 3D Model Annotation: The core feature of IdeAR is the ability to annotate 3D models. University staff can add textual annotations to various parts of the model. You might be wondering, what’s so special about annotations? Imagine you’re studying human anatomy and exploring a 3D model of the human skull. Instead of just staring at a static image, IdeAR allows educators to add annotations to different parts of the skull, offering students deeper insights into the complex structure. This makes it more engaging and informative.
  • Model Sharing: Connecting Educators and Learners – Once annotated, the 3D models can be effortlessly shared with students. IdeAR makes the sharing process effortless, creating a direct line of communication between educators and learners. This sharing functionality isn’t just about sending files, it’s about creating a dynamic, engaging learning environment while making complex subjects more captivating.
  • Interactive Learning: Engage, Explore and Excel – Students can interact with the 3D models, exploring various parts and accessing annotations on-demand. It’s like having an expert by your side, ready to explain and clarify as you go. This interactive learning approach fosters engagement, enabling students to develop a deeper understanding of the subject matter.

IdeAR producer: Allowing for easy annotation of 3d models

IdeAR viewer: Creating an interactive learning

Why BabylonJS?

Let’s delve deeper into the benefits of using BabylonJS, especially in the context of the IdeAR application:

  • Powerful 3D Rendering: BabylonJS is renowned for its exceptional 3D rendering capabilities. What makes its 3D rendering so powerful is it leverages a high-performance graphics engine that can render complex 3D scenes and models efficiently. This is crucial for IdeAR, as it allows the application to handle intricate anatomical models or any other complex 3D structures with exceptional efficiency in educational settings.
  • Cross-Platform Compatibility: BabylonJS is designed to work seamlessly across various platforms and devices, including web browsers, mobile devices, and even virtual reality (VR) headsets. This compatibility ensures that IdeAR can reach a wider audience, from students accessing the app on their laptops to those using AR/VR devices for a more immersive experience.
  • Web-Based: Being a web-based framework, BabylonJS eliminates the need for need for additional software installations or specific system requirements; it’s all about ease of access. This is a significant advantage for IdeAR, as it lowers the barriers to entry for both educators and students. Users can access the application directly through their web browsers, making it more accessible and user-friendly. IdeAR’s decision to embrace direct web browser access is a significant step towards a more inclusive and accessible educational future.
  • Ease of Use: BabylonJS provides a user-friendly API that simplifies the process of creating and manipulating 3D scenes and objects. This ease of use is particularly important for IdeAR, as it allows us to focus on building educational features and interactions without getting bogged down in the complexities of 3D rendering.
  • Community and Documentation: BabylonJS has a vibrant and active community of developers, which means that there is a wealth of resources, tutorials, and forums available for assistance, ensuring that IdeAR’s team can find solutions to challenges and receive timely assistance.
  • Open Source: BabylonJS is an open-source project that’s in a constant state of growth and refinement. Developers can contribute to the framework and customize it to suit the specific needs of IdeAR. Additionally, open-source software often benefits from regular updates and improvements from the broader development community, that keep IdeAR at the forefront of educational technology.
  • Extensibility: BabylonJS is highly extensible, allowing developers to integrate additional libraries and tools seamlessly. This flexibility enables IdeAR to incorporate essential features like annotations, user interactions, and collaborative elements to enhance the educational experience further.
  • Performance Optimization: BabylonJS includes various performance optimization features,including support for hardware acceleration and efficient rendering techniques. These optimizations ensure that IdeAR can deliver a smooth and responsive user experience, even when handling large and complex 3D models. Learning remains uninterrupted and engaging, regardless of the complexity of the subject matter.


In summary, BabylonJS offers a robust and versatile framework that aligns perfectly with the goals of IdeAR. It’s powerful 3D rendering capabilities, cross-platform compatibility, ease of use, and active community support make it an excellent choice for building an augmented reality application focused on enhancing education through interactive 3D models and annotations. The next step in this journey is to modernise IdeAR using Angular, which will be covered in the next blog.

Post navigation

Join the conversation

Your email address will not be published. Required fields are marked *

back to top