Branick has spent the last few years working on videos and marketing content for BC. As we brainstormed some ideas, we thought it would be great to be able to walk around and experience all of campus in full 360.
What it Does
Explore the Heights allows users to immerse themselves in full 360 degree views of Boston College. Currently only available for Gasson Hall, viewers are able to walk around and explore the building. The experience is similar to Google Street view.
How We Built It
We began by planning out over 35 locations around Gasson that would each “location”. Each location would be a full 360 degree images of the surroundings. We used a Nikon D800 with an 8mm lens and a rotator. While at each position we would rotate the camera 90 degrees to capture four unique views. Additionally, each image was bracketed 5 times to account for varying lighting conditions. After shooting all of the properties we used an open source program (PtGui) to combine the images into an equirectangular image (basically a flattened sphere). These equirectangular images were then edited and compressed to allow faster render times. After completing this step, we then needed to “cube-map” these images into six smaller images. This is because web browsers render 3D spaces through cube-mapping and not by actually loading a 3D space. It’s more intuitive to think of it as a panoramic viewer. We then used Krpano, a semi-open source software package that allows browsers to render and link these panoramic images. After locally building the complete panoramic tour and linking all images together, we then needed to host it on the web.
For hosting we launched a Vapor 3 server on Heroku. Vapor 3 is a framework for Server Side Swift. Thanks to the type safety and memory efficiency of Swift, Vapor 3 is able to perform at rates only comparable to Go, often surpassing 100,000 requests/second. This high capacity, non-blocking IO framework allows Explore The Heights to serve tens of thousands of concurrent users.
Because most of our assets are static, we decided to host all content for each tour in Google Cloud Storage. We also wanted a way to easily update these scenes in the future without the need for a database or constant rebuilds. To overcome this, we built a dynamic wildcard router that would pull any content from Google Cloud Storage and instantly render the tour. In the future if we want to update the site, we can simply add additional locations to the route directory and the site will instantly be updated.
For security and caching purposes we decided to use CloudFlare, which gives our site a free SSL certificate, automatically caches public resources, and automatic security.
What We Learned
Organization is important! Without a proper method of tagging each image and keeping them in the right order, the entire project falls apart. In addition, we learned a lot about ways in which to optimize the site for high capacity work loads (storing assets on Google Cloud).
To begin, neither of us had ever implemented an entire system like this before. We had some experience at each stage, but not when it came to the complete hosting of a virtual tour. We began by only photographing the outside of Gasson and building a testing server for just a few locations. After ensuring we were able to host a small tour, we then continued with the photography throughout the entire building. We ran into significant challenges with the actual hosting of our tours and realized that our local machines were caching session variables from our testing environment, and any outside users were actually unable to access the site. This was about 30 minutes ago. After digging through our code we determined we weren’t properly storing session data in the memory and needed to reconfigure where this was being stored. After updating and rebuilding, the site now works well across all devices.
We plan on automating the entire workflow this summer and launching a virtual tour of the entire campus this fall.