Brain Waffle

Demystifying mental health and creating awareness with immersive VR experience

Comment 2

Inspiration

The inspiration for Brain Waffle comes from real-world problems faced by our teammates. Mental health is crucial for the overall well-being of any person, but our society does not give it equal importance as physical health. Research shows that one in three adults suffers from mental health issues such as depression. However, people often believe mental illness is not a “real” illness or cannot be treated effectively. Our project is an attempt to solve this issue by visualizing parts of the brain affected by various mental diseases as well as changes in the levels of chemicals in the brain.

What it does

Our project Brain Waffle provides an immersive VR experience using a 3D brain model to understand the different mental disorders. Users can view the specific brain regions and parts that are affected by certain disorders, their characteristics, and chemical imbalance. This will help people realize that mental illness is real and embrace the people suffering from mental illness. If the user doesn't have the VR headset, the application also runs in a normal browser. So, the users can use the VR feature on their mobile phones or they can even view it in a PC browser.

How we built it

We used WebXR for the immersive VR experiences on the web. We used three.js to leverage the WebXR API and to create 3D objects in VR. We used simple HTML, CSS, JS, and Bootstrap to build the front-end part of the website. We designed and edited the 3D models in blender. We first designed our application in Figma and built the experience and animations in three.js then used it in WebXR. Then we used snowpack as our build tool and hosted our site in Netlify.

Challenges we ran into

We ran into quite a few issues while building the project. Firstly, as only one of us had the VR headset, and we were working remotely, debugging and dev was very tedious. Even though we had very little time period, we attempted to have an organized codebase using the proper OOP concept in JS. But, managing class instances, objects, and constructors calls made things a bit difficult. . Additionally, we ran into JS Instance error in three.js.

Setting camera position in VR using three.js was difficult. So, we put the camera in a three.js group and changed the position of it. We wanted to make a 3D model inside our three.js application. For that, we needed to bake textures inside blender and since it was a long process, we postponed it for later. But, at the end moment, after baking the texture, it was not loaded in three.js. But luckily we did find a workaround.

Accomplishments that we're proud of

We are proud of what we were able to achieve in such a short time. We hope our project will be able to help people with mental illness, spread awareness, demystify mental health and even save lives.

What we learned

The whole 48 hours of the hackathon have been a fantastic experience for our team. Our project makes heavy use of three.js. We got to learn a lot about making use of this framework as well as other tools like Blender, Figma, davinci resolve, WebXR, and snowpack. We also used snowpack to build our project and our video clips were edited on davinci resolve.

What's next for Brain Waffle

We want to add information about more diseases in our application. Then we also want to make more 3D models that helps to make the experience more immersive and knowledgeful.

Built With

Share this project:

Updates