Long has mankind been confined to perusing social media on a tiny screen, swiping up and down. Low-cost Virtual Reality equipment like Google Cardboard will bring on a new era: experiencing it in an immersive virtual realms!
Our team found VR intriguing but had little experience with it up until now. Vandyhacks gave us the perfect opportunity to experiment with the latest and greatest in VR and build a virtual art gallery for a popular social media website, Reddit.
What it does
Put on a VR headset and look around: you'll find yourself standing on Planet Reddit. Up in the sky are planets for other social media sites like Facebook, Twitter, and Instagram. Tall buildings surround you, waiting to be explored. When you enter a building, you'll see an art gallery of posts from the frontpage of Reddit!
How we built it
A special thanks goes to MLH for the Oculus Rift we checked out for prototyping Planet Reddit. We ensured cross-platform support testing on other platforms including Google Daydream, desktop browsers (Chrome/Firefox), and mobile devices (iOS/Android).
Planet Reddit works on many compatible VR headsets. We used the Entity-Component System software architecture pattern integral to the A-Frame web VR framework in conjunction with the Three.js 3D library.
We divided major aspects of the project between our team members:
Aiden was tasked with graphics design and is responsible for the planets floating in the sky and our logo
Vishnu wrote React code for dynamically rendering building walls
Peter worked with Vishnu to debug and develop key components like the picture frames
Sameer worked on setting up continuous integration, Git repos, and improving developer ergonomics
Challenges we ran into
Planning the overall system architecture (namely, necessary classes and software structure)
Creating many of the assets from scratch (i.e. planets, buildings) in Blender
Implementing proper lighting effects
Cross-Origin Resource Sharing -- prevented us from directly accessing Reddit images in the web app
Finishing everything we planned to in a timely manner -- 2.5 days is a really short time!
Accomplishments that we're proud of
Project management - we laid out our system requirements with our "meet goals" and "reach goals" and assigned different team members to work on different parts of the project
Building a VR web app without much previous experience - We spent a lot of time researching potential strategies for implementing our goal without having to reinvent the wheel. We considered Unity, ReactVR, and other technologies before settling on A-Frame, created by the Mozilla team.
What we learned
Our team had little experience with animated 3D computer graphics prior to this project. Through completing this project, we gained experience in a variety of areas.
Using the A-Frame library
Writing in Typescript
Bundling code with ParcelJS
Enabling continuous deployment with Netlify
What's next for Planet Reddit
Our next steps include making the galleries interactive so you can upvote and downvote posts and interact with the greater Reddit community in real time. We'd also like to expand to other image-sharing based websites such as Facebook, Instagram, and Imgur. We would also increase the complexity of our current planet with features like massively-multiplayer, online viewing.