Edu-AR

Homepage
Meeting
AR-Model
User viewing in AR
AR-Model

Inspiration

The COVID-19 pandemic has been a major setback for the education system, leading to the near-total closures of schools, universities and colleges. Those who enjoyed learning new things have been confined to their homes and their teachers are finding it difficult to resolve their queries due to the lack of resources. Students are limited to theory-based cramming and thus, are not able to gain any meaningful insights of the subject. Many topics which require a deep visualization, are not being covered thoroughly. Even when all the institutions were open, textbooks were not sufficient for deeper visualization of certain concepts. For example, a professor wants to teach his students about a car engine, or a biology teacher wants to teach his students about the human skeleton, or any other topic which requires a physical model, in the current time, it's not possible for the teacher to put across his insights to the students beyond a certain aspect.

What it does

Through our platform, educators can improve learning outcomes through increased engagement and interactivity. Augmented Reality in education features aspects that enhance the learning ability and other skills like problem-solving, collaboration, and creativity, to better prepare students for the future. Our platform will enable the teachers to improve the understanding of abstract, spatial geometric concepts through manipulation and multi-angle observation of virtual 3D objects for the students. Through our platform, user is able to collaborate with others on a video conference, along with the tools to visualize 3D models on multiple platforms. The model is also accompanied by a unique QR-Code which can be scanned through our smartphone app, allowing the user to view the same in Augmented Reality.

How we built it

We used many tools for building this project. Node.js, Socket.io, express.js and many other tools were used to implement a smooth collaboration meeting. We used the most popular frontend framework, React, to make a seamless user experience. React-native was used for the app development due to its cross platform compatibility, and Google-AR-core was also used to implement AR viewing capabilities.

Challenges we ran into

There were many challenges that we ran into.

The most prominent one was rendering the model in the browser itself. We had to go through multiple resources to find the suitable tools which could enable us to render the Model, without stressing the user’s computer. The selection of the model's format was also a tough choice. We went with the “gltf” file format as it was light-weight and easy to use.
One sneaky bug which we encountered was that the model being generated was static and could not be changed as per user’s will. Fortunately, one of our team members came up with a solution by using a small js-function which could render the model according to the user’s will without refreshing the page. It was resolved by targeting the “src” attribute of the model-viewer html tag.
We wanted to generate a QR-Code that could enable the user to instantly scan and view the model in AR, but that required us to create a mobile application. As previously we had no prior experience of app development, we had to go through multiple resources to create the same. To enable the QR-Code functionality, we had to go through the resources for both the generation of a QR-Code as well as scanning the QR-Code with the help of a mobile application. In the end, we preferred React-Native as our framework since it has cross-platform compatibility and has a multitude of resources online.
Another bug which creeped in was when the styling of different react components was being overlapped and merged together when they were being imported together into a single file. This was solved by assigning different classnames using BEM naming convention, to different div containers.

Accomplishments that we are proud of

There are many things we are proud of. Fact that we were able to render a 3D model without any major load on the user's browser and we were able to view the same model in AR using our mobile phones. Also, we built a scalable video chatting platform from scratch with screen sharing functionality. We are proud of the fact that we were able to complete the project and were able to add all the intended features that we had planed.

What we learned

We learned a lot from this project. From how to start a Video meeting, to how to render a 3D model in user's browsers. We also gained a lot of experience by collaborating together in this pandemic.

What's next for Edu-AR

Edu-AR is a complete platform for online learning. We plan to make it even better by adding tools like white-board for teachers and by improving UI Experience. We intend to make it the standard platform of online education.