Drawing in WebVR

Drawing in WebVR

posted in: webVR | 0

Vi here, and it’s my turn to do a quick update.

We’re currently working on a website with a basic 3d drawing tool (and livestreaming the process, as seen in the gif below). If you’ve got a Vive, get webVR working and try it yourself.

drawing in webVRIf you’ve done any sort of drawing/sculpting in VR, you know just how incredibly magical it is. I feel like a child scribbling, mesmerized by the power of turning simple hand motions into a semi-permanent visual object.

Besides being so compelling in VR, a simple drawing program is super easy to make, and you can even see us making it live on twitch.tv/vihart. What we’ve got isn’t fancy, but the ratio between how fun it is to use and how long it took to make is ridiculous.

Those would be great reasons to make a drawing program if we were looking to create a product or make the next hit VR thing (as many companies have figured out already), and as far as I’m aware no one has done one on the web yet. But we’re researchers, so that’s not the reason we’re working on it.Clem and Toto website

We’re working on this tool so that we can use it for other projects.

Specifically, I recently found a website my cousin and I made in early 2000 and forgot about a long time ago. It’s a treasure-trove of my own early attempts at self-expression on the web, participation in memes, and attempts at communication with the outside world. It is so honest, so free of social media glut and modern expectations, so pure!

As we’re reinventing the web again with webVR, I decided as a design exercise to try making a webVR version of this website as if I were still that carefree 11-year-old having fun with my cousin.

First, I took the same art assets and created a simple mock-up of the index, a cubic room wallpapered with that same cloud wallpaper and floating clouds that are obviously just pretending to be cloud-shaped but actually cubes:

original on the left, webVR on the right
original on the left, webVR on the right


For the Peachy Ring Dance, I made simple bouncing toruses textured with something I drew in paint using the same default colors and aesthetics as the original.

peachy ring dances

Original on the left, webVR on the right

But when I tried to think of how to remake other pages, I ran into the problem that the original has all these great drawings made in paint or KidPix, and I wanted VR drawings in that style, which means I needed the VR equivalent of Paint, which does not exist.

Oh, there’s a dozen VR drawing tools out there that one might compare to Paint, but the thing about Paint is that it is not a closed environment for playing in—it’s a tool that lets you create drawings and then use them elsewhere. I tried to find an existing tool for Vive that would let me export my 3d drawing as an obj rather than storing it in a special format that can only be viewed within that same drawing program, and I couldn’t. If one exists, do let me know, but I figured it would be easier to make our own.

Andrea has been adding hand controls to our webVR framework (which hopefully she’ll talk about next week), so with her help, it was easy to get basic drawing working. Add some colors and brush sizes, and I’m ready to create a website header just as gorgeous as the original from 2000!

Screenshot from twitch.tv/vihart livestream
Screenshot from twitch.tv/vihart livestream


The drawing tool and website remake both use the same webVR framework, so as a first approximation of save functionality all I had to do was log the state of the paint-blobs and copy them over to the other website.

Clem and Toto VR header

The beautiful thing about this whole process is that we created a tool to be used, not to be marketed or sold, and so we didn’t have to guess about what we think people would want in a product or worry about beating the competition. One of the aesthetics of our group is building our own tools, which both gives us control over the tool we need and makes the tool more useful than it would be if it were designed for an imaginary audience.

During one of the live programming sessions there was this great moment when I started explaining to the viewers how I wanted to make a cart full of paint buckets and tools, and usually I would have gone to another program to sketch it out in 2d, but I realized I could sketch it out in proper 3d right in the very drawing program we were working on! I know this is going to come in handy for future streams on other projects, as well.

sketching the tool cart during live stream
sketching the tool cart during live stream


I can’t wait to be able to stick drawing functionality into all of our webVR pages so that we can mark them up, sketch out ideas, and generally just follow the aesthetic of working as directly as possible with the thing we’re making.

And it’s already finding secondary applications with performance art motion capture dance by Emily:

We weren’t intending to make a product, but it’s compelling enough that we might try to polish it up a little to make it more useable to other humans. Or you can fork it on github and do it yourself!

Vi Hart