Capsule3D | Devpost

main menu design
demo server
map design
character design

Inspiration

Over the past two years, many people’s social life has been greatly affected. We wanted to build something that brings people closer. There are many virtual meeting platforms out there such as Zoom, Google Meet, etc, but they lack many of the physical elements of face-to-face communication. We are set out to build something that can complement these meeting platforms, in 3D!

What it does

Capsule3D is a web-based platform for people to connect and come closer together, regardless of where they live. Users have an immersive 3D experience right within their browser - this means there are no additional downloads! :-). Users can create and join rooms, with a click of a few simple buttons. For the demo, room creation doesn’t work just yet - but everyone will be able to join the same room.

We are set out to build a platform that not only creates a safe place for people to socialize, but also allows people to engage in team meetings for business or education in 3D.

How we built it

With the initial design in place (using Concepts and Figma), we first modeled the character and a basic scene in Blender.

Then, we began with coding. We separated the project into three packages using a Yarn workspace: common, server, and ui. For the backend, we are using an Express server plus WebSockets. For the frontend, we are using Babylon.js for 3D rendering and React for the UI.

For the demo app, the backend is then deployed to Google Cloud and the frontend is deployed to Netlify.

Challenges we ran into

There were a lot of challenges that we ran into, but we are happy to say that they didn’t prevent us from completing the project.

Due to the difference in the time zone, it was a bit difficult to collaborate with other developers in the team. Although, we were able to work around the different time zones and communicate clearly.

There are also many technical challenges as well. There are two parts of the puzzle that we have to integrate: the 3D models from Blender to Babylon.js, and network communication between the backend and frontend. The Blender to Babylon.js export has been tricky since they use a different coordinate system! In Blender the Z direction is up but Babylon.js uses Y direction as up. There was also a lot of thinking to do to wrap our heads around some of the 3-dimensional calculations, but we were able to get everything working in the browser correctly.

There is also a networking layer to our project, which requires us to communicate a lot and make sure our protocol matches. The tricky part is that we weren’t able to plan everything in detail, and there were times where we realized that our initial design for the schema needs tweaking, and so it involved a lot of debugging. The good news is that we managed to overcome many challenges and finish the project on time.

Accomplishments that we're proud of

We are very proud that we are able to get this many things done in a short period of time. From brainstorming to building out the backend infrastructure and frontend application, we were still able to communicate clearly and integrate everything together nicely.

Furthermore, we believe that our project truly has the potential to make an impact on people’s lives. Using a minimalistic design, we strive to make the platform easy to use. Be excited to see us develop and polish this project over time after the hackathon!

What we learned

We learned to use Google Cloud in the project. None of us had any experience working with the Google Cloud Platform, but we were able to deploy our backend using Google App Engine. We also had minimal experience working in Blender and Babylon.js, but we were able to find plenty of online documentations and mentor help. More importantly, we also learned to collaborate with other people effectively.

What's next for Capsule 3D

A lot of things! We couldn’t have possibility develop this idea to it full potential in a weekend, but we’ve made great progress to start. Over the weekend we have built the core backend infrastructure, but we weren’t able to develop everything that we thought of given the time frame.

The possibilities are countless! There are still a lot more features that we would like to add (video calling, audio, sharing screen, etc.). In addition, it would also be great to have mobile support for the project as well.