How We Created The Brained.io App - An Interactive Educational 3D Experience

Written by Amanda Connon-Unda

About nine months ago here at rangle.io a small team of developers were working on a new educational web app called brained.io. The team was particularly excited to build an Angular app that used 3D models from Verold Studio. Our developers working on the project said that Verold’s web-based software was very intuitive and they were keen to use it with future client work because it easily enables 3D integration for an app. Instead of coding everything from scratch, we discovered a powerful new tool.

Find the link to the source code at https://github.com/Verold/brained.io

Angular 2 Custom Training

The origins of the app

Our web application, in partnership with Verold studio, was conceptualized by Mihnea Moldoveanu at the Rotman School of Management in Toronto. Stefanie Hutka, a PhD candidate at the University of Toronto, provided us with the functional breakdown and descriptions of the brain, and Merry Wang created the 3D model of the brain for our app. The new app was intended to help people understand how the brain works and give them a basic tutorial in neuroanatomy, while avoiding the pitfall of making a resource that was either too superficial or too advanced to comprehend. We sought to create a tool that leveraged the graphics capability of a modern web browser to make our resource visually rich.

The functionality of Brained.io

Users can build a slide-show where each slide consists of a 3D model of the brain and supports text, images and videos. They can toggle through or highlight the Brodmann areas that the brain is made up off. The 3D model of the brain can rotate and transition between different camera angles as the viewer goes through the presentation.

How we built the app

“... using standard web technologies and the best emerging technologies such as HTML, CSS, Javascript and AngularJS... We started off by building the scaffolding needed for the 3D content: the navigation, login interface, user profiles, different views, and more.”

-Varun Vachhar, Lead Developer on Brained.io from rangle.io.

All the 3D content was provided by Verold, and the 3D model of the brain was built in a 3D modelling software such as Maya. Varun explained, “We imported it into the Verold software, styled it with textures, lighting and other effects, and then split it into multiple sections. This entire 3D package was then made available to us through a URL (a script tag) which we could include in our app.”

“Verold studio automatically downloads all the required files and builds the 3D model into our app. We could then talk to this 3D canvas using JavaScript - for example, showing or hiding : various Brodmann areas, rotating the brain, zooming in, or out.”

Insights into Using Verold Studio

“Working with 3D is quite complex and doing everything in code just makes things harder,” said Varun. “For desktop software we have tools such as Unity which provides a Graphical User Interface to set up the 3D scene, pick material, and use special effects, however now Verold Studio can give us the same experience on the web,” he explained... “It even allows us to take whatever we build in Verold and plug it into our apps. Brilliant!”

Here at rangle.io we see a huge potential with this new in-browser technology for building games, interactive experiences, music videos, 3D modelling and 3D printing apps, data visualization experiences and physical simulations. With Verold, even if you only have basic knowledge of how to build a website you can start creating 3D graphics and it’s much more approachable.

Verold Studio was developed by Toronto-based startup Verold Inc., and the company’s CEO, Ross McKegney said they’ve made “the ultimate tool for making cross-platform HTML5/WebGL games, as well as web applications for interactive journalism, medical visualization, storytelling for media or museum exhibits, interactive advertising, product displays and configurators, and many more… We want to empower web developers and agencies to build apps that they’re not able to build today.”

Watch Varun Vachhar share a case study on Brained.io at an AngularJS Toronto meetup in April 2014.