Inspiration

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

Hardware

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).

Software

We used A-Frame a framework for virtual reality experiences, to develop Planet Reddit. It is built on top of the WebXR standard, which is so new, it's yet to be finalized!

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 used a combination of Typescript and Javascript to develop this web app.We deployed our web app with Netlify, an automated service that enables continuous deployment from Git. We used Google Cloud to store images of Reddit posts that we could fetch dynamically from our app.

Teamwork

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.

Share this project:

Updates