CubeDraw: 360° from Paper to VR

The Annotated Reality Design for Novices project's CubeDraw explores a way for non-technical co-designers to express their ideas for a 360° world through paper-prototyping brainstorming approaches, and potentially work with a design partner with basic programming experience, to rapidly bring it to life.

Below is an example of how 360° storytelling or brainstorming in support of prototyping a VR/AR experience might get started. To start, the co-designers could take six squares of paper to brainstorm and then draw a "full" 360° scene as if on the inside of a cube or sphere (the following example shows guide lines on the paper for a sphere's ground and sky "true" lines)...

Next, scan each square in at 300dpi and use a simple image editing program to straighten each scan if needed, crop the scans to a 2400x2400 pixel image, quickly erase any "guide" lines if needed, and either use Hugin to turn those six individual images into an equirectangular image or use a free website to create such a 2:1 aspect ratio image...

Then the more programming-minded co-designer could pop it into a coordinate finding page to then work with their partner to determine where certain things are happening in 3D space. With that information, the more programming-minded person can then utilize something such as the A-Frame web framework and our Hotspots Library to create and modify an HTML/JavaScript template to construct a VR experience in which they can explore this prototype on tablets, smartphones, in an Oculus, etc.

In the above you can click and drag within image to explore 360-degree view that would exist in the VR headset and can center the gray gaze target over "info" buttons to find out more about what you see. If you are using a mobile device or Oculus, you can click here to see it that way (it might take a minute to load).

An offshoot of this approach is a browser-based app which supports the ability to do on-the-fly "scanning" of the six square and the generation of the equirectangular image, all on a mobile device which can be used as a "magic window" into the scene, or if done using a smartphone with gyroscope and compass can be used with a "cardboard" headset device and the phone.

With this app, the six squares of the drawing can be "scanned in" one at a time by setting up a dark-colored two-pocked folder as an easel

and photographing each of them in turn with the app
which loads them into a staging area

from which you can then generate the 360° experience right on the device.

Note that this app is meant to be more lightweight, and require no programming skills, so it does not support the addition of the "info" buttons.

For more information about this project, please contact Evan Golub