Due to its availability to the average user, VR has become a ground breaking new technology that lends its self to be a power house of both entertainment and productivity. We decided to capitalize on this notion and build a tool that we would use. Coming from a web development background, it was a no-brainer to create an IDE that exploits all the virtual space in the user's favor. The name of the product comes from the verb to scry which is the practice of seeing/peering into a suitable medium hoping to catch a glimpse or receive messages from the future.

What it does

ScryVR places the user inside of a three-walled workbench environment. The user builds a web component at the component builder station, turns to face the main canvas, and places the web component for resizing and styling. Once the user is happy with the scaffolding they have built, they simply may exit VR and hand off a fully functional website template to developers to hook up services and send requests. This meets the developer in the middle with design by giving the designer the ability to pass off a functional template instead of just vector graphics images for the developer to implement.

How we built it

Our application relies on Firebase, Unity, and NodeJS, which holds the website (represented in JSON format), generates the VR environment, and runs the server for live website rendering, respectively. Unity renders a representation of the website on its canvas as the user constructs it. After every edit, the canvas packages its self up into a JSON object (serialized with in-house code), and is written to the Firebase database. The server is listening for changes and parses the incoming JSON object, creating desired components and styling as it goes, thus generating a usable Angular template.

Challenges we ran into

Our biggest challenge was defining the protocol our application used to talk between the unity instance and our nodejs server. The quickest and most obvious solution was to package a standardized JSON object that represented the entire website structure. We had to write our own serialization for Unity in order to roll a custom JSON object and we also had to write an large parser on the server side to convert the JSON into individual component files each with their own styles, partials, and sub-components linked together. Probably the biggest challenge to overcome was lack of time and copious amounts of sleep deprivation.

Accomplishments that we're proud of

We built a website in VR and accurately exported it to a usable angular SPA. For our first VR application, we've accomplished more than even we originally thought.

What we learned

Establish a standard of communication before any project. This has the potential to be detrimental to the project. If we had not planned this project far ahead of implementation, we would have had a largely incomplete product at the end of 24hrs. By communicating these standards, it allows all parties involved to understand what "language" everyone should be speaking to each other throughout the development life cycle.

What's next for ScryVR

ScryVR is in heavy need of polish and styling. Right now the workstation is a little rough around the edges and also generates a pretty basic webpage. However, the way we built it allows us to easily extend its functionality and make improvements at any time.

Share this project: