draft360

A WebXR Storyboarding Design Tool

Comment

Dev Post Summary

Inspiration

As a designer working in the XR space I found many challenges in conceptualizing XR experiences from traditional 2D UI design & prototyping tools. I would either have to sketch on paper or prototype in a chaotic workflow of VR/AR, Photoshop, Blender, Unity, etc. Even with these complex techniques, it was a hassle to port over and setup projects to actually share what the experience was like with with clients and developers before committing development resources.

This is why I wanted to create a 360VR Design tool that was built with webXR and accessibility in mind to help XR creators (VR filmmakers or AR environment designers, for example) draft up and communicate their vision quickly & intuitively.

What it does:

  • Create your key scenes however you want: this can be a 360 template grid, 360 CGI render, 360 photo, 360 snapshot from your favourite VR creation tool - you can import 360 content into the browser!
  • Annotate and sketch directly on the 360 photosphere & add image components;
  • Portals link to other scenes to create interactive prototypes;
  • Share URL to phones & VR headsets to preview;
  • Iterate earlier and create something awesome!

How we built it:

Designed initially in Figma + Chats + Coffee. We used the glitch.io framework to quickly prototype a web app using the A-frame library & Javascript. 360 VR Scenes were created in Blender3D.

Challenges we ran into:

  • Drawing and projecting to a 360 photosphere - the equirectangular projection can sometimes be confusing, and it was very hard to get the canvas to update. I had to access raw three.js internals and create a sphere geometry and a texture;
  • Data transfer and state management;
  • Deciding between converting a three.js code base and platform accessibility with A-frame;
  • Adapting input controls/paradigms from desktop, touchscreen tablet, mobile phone to AR or VR headsets;
  • Nreal at this time in writing does not support WebXR.

Accomplishments that we're proud of:

  • The focus of the use case and clarity of solution in problem solving;
  • It works on Desktop, Mobile, and some VR browsers;
  • The breadth of interactions and solutions we prototyped in trying to solve this problem of traditional 2D conceptualization workflows with new and emerging XR pipelines;
  • We created a companion Nreal prototyping app in Unity to showcase what the next generation of WebXR design/prototype;
  • Desktop version works really well with Surface Studio;

What we learned

  • Nreal does not support WebXR;
  • Glitch has interesting security proxy;
  • Glitch has interesting weblink based asset management;
  • Glitch makes collaboration very simple;
  • A-Frame's ECS model is hard to understand but usable;
  • How A-Frame works internally;
  • There are so many interaction paradigms for desktop, mobile, 3DOF/6DOF VR, MR, AR;
  • Sometimes code quality can be sacrificed for quick prototyping.

What's next for Draft360

The Nreal prototype shows a new and exciting workflow of taking pictures of real-world sketches. It also incorporates a voice recorder for sharing thoughts and ideas. We would love to extend webXR functionality when available.

Built With

Share this project:

Updates