Creating a VR first-person shooter, live

posted in: webVR | 0

Now that hand controls have been added to the webVR API (thanks, Brandon Jones!) and we have them working in our framework (Andrea Magic!), we’ve been trying them out with the two easiest and obvious applications:

  1. A drawing program (see previous post)
  2. A first person shooter in which you shoot peachy rings that bounce across a giant jello floor and into a cake

While we’ve livestreamed most of the creation of both, I decided to edit down the stream for the second one to make it a really watchable demonstration of programming a VR first person shooter. It covers a tiny bit of vector math (by drawing in our own VR drawing program) and some simple physics (the peachy rings are affected by gravity, air friction, and bouncing on the floor), and is generally just a fun time.

So why peachy rings? Well, the previous post explains a little. And once we had webVR peachy rings, I needed to make a Multi-Sensory Peachy Ring Experience for the office lunch table, so I modified the original peachy dance to have more peachy rings that float around with random vectors, set them up on a couple phones in Wearality headsets (try it on your phone) and bought a 5-pound bag of peachy rings:

multisensory peachy ring experience

Once you have peachy rings moving along random vectors, you kinda start to think about how easy it would be to make those vectors not random. I figured I could modify it into a peachy ring shooter within a single twitch stream, so I did.

As you can tell from the video, making a first person shooter isn’t exactly my goal, but it’s an easy demo/test, and our peachy ring shooter does have some advantages for VR over a standard shooter:

  1. The peachy rings are big and slow enough to see them in VR with depth and head tracking
  2. Peachy rings bounce off of floors, highlighting the virtual floor which aligns with the real floor
  3. The parabolic arcs of gravity-affected peachy rings encourage tracking them with your head
  4. The first instinct of many people, when seeing small floating VR objects in abundance, is to eat them, and peachy rings are representational of an edible thing
  5. There is a cake. You can shoot peachy rings into the cake. This is important


The edited stream is on YouTube (or in the header above). The full original stream is on Twitch, if you want to dig in further. Look out for future streams on

The webVR site is at You can look around it on a phone or in a normal browser, but you’ll need a Vive plus special chromium webVR build if you want to shoot peachy rings.

Code is on github.

Vi Hart