Back to blog

Need a fast VR prototype? WebVR might be the answer.

by B-Reel's Barcelona team
October 13, 2016

As avid tech-experimenters, we look for any excuse to try something new.

WebVR, an exciting emerging technology, has been on our radar for a while.  WebVR allows a VR project to get up and running fast, and, while perhaps less production ready than Unity and Unreal, is a great tool for developers with a web background.  We decided it was the perfect medium for creating the first-ever (as we know it) digital VR Greeting Card/Game for a VR-obsessed colleague.

We used the experimental build of Chrome which implements the WebVR API (https://webvr.info/get-chrome) - expected to be integrated in the stable Chrome version for October - November 2016 (yay!). This opens a great new opportunity to distribute VR content across platforms.  It also allows for the creation of responsive VR apps that will work in cardboard mode for mobile, desktop based experiences and Vive/Oculus Room scale experiences within the same base-code.

The premise of our game is to reveal a hidden message by hitting objects and letters in a zero-gravity environment. As the player hits the correct letters they move to a fixed position, spelling out the message.

Building the Game

The first thing we needed was a physics engine for the project. We wanted some basic functionality like gravity and simple collisions but also the ability to apply forces to bodies. We tried Ammo.js but in the end we went for Cannon.js developed by Stefan Hedman which is a quite lightweight, simple to use and, unlike ammo.js that is a port from C++,  it's been developed in Javascript from the ground up.

We created a super simple environment (a floor a ceiling and some walls) to be able to test the zero gravity floating objects. Then we set up the experience to be played in VR with the HTC Vive. Once we had that, we created the functionality to be able to hit the objects with the VIVE controllers, represented as hands in the VR world.

Since Cannon.js uses the CPU for its calculations, we had to be aware about what kind and the amount of elements that are placed in the scene. It’s important to keep in mind that calculating the physics of a sphere is cheaper (in terms of CPU calculations) than a box. And the costs of a box will always be cheaper than using a complex mesh.

For instance, in our VR experience, physics of the balloon-like letters are calculated with their own bounding box, which in some cases can result in a strange behavior according the morphology of the geometry. To improve this we could go through different workarounds:

1 - Using a low poly mesh of the original geometry as a cannon convex mesh.

2 - Using a combination of several cannon boxes which probably would be cheaper but not that accurate.

With that we had the bones of our experience so we could build the fancy stuff on top of it.

The next step was to create the balloon typography. We checked if there was any balloon style alphabet available online to download for free. Unfortunately there weren’t any good ones in our budget range. We decided to build our own in Blender.

The naive approach would be to use blender’s built-in text tool and convert it to a mesh.

Unfortunately the resulting mesh isn’t great at all (either too dense or too sparse), and will give us terrible results later on. We thus had to rebuild every letter from scratch, with a better topology.

From there, the process is rather simple:

- Extrude the letter on the z axis.

- Scale all the vertices along the normals. (Fortunately, that’s exactly what blender’s Shrink/Fatten tool does. )

- Apply a subdivision surface modifier.

- Select loops of faces along the “folds”.

- Extrude those faces along the normals to create a bended balloon effect.

- Smooth the normals.

Considering the amount of characters, and the fact that everything except the folds at the end can easily be automated, we ended up writing a Blender script for it so we can automate the process. Once the alphabet was done, we needed to create the functionality that will send the letters to the correct position for the user to be able to read the message. In order to do that, we used the attractors and forces from the Physics Engine.

For displaying a message with the balloon letters we defined a grid of 3D positions (destinations) where the letters will move once they’ve been hit with the Vive controller. To accomplish that, we used the Cannon.js Spring class. This allowed us to generate the attraction forces between two Cannon.js bodies.

Because the 3D positions of the message grid are fixed on the 3D space, the other bodies (the balloon letters in our case) will move to the fixed one when a Spring between the two bodies is set up.

As a final touch for the experience we created a confetti effect, triggered once the message is completed. FUN

Our Conclusions:

- WebVR is great to create quick prototypes and experiments. But Unreal Engine & Unity are the real deal ( by now) when you want to build a complete VR game.

- If you have web experience is really easy to have something working.

- With WebVR you don’t need to publish the app to a store ( steam, oculus) so it is easier to share the experience

- The same code runs on different platforms ( desktop, mobile)

- Data sharing between the app and third parties is much easier. Any social network has a JS API nowadays.

PS. In the published code we tried to make the experience a little bit more fun & customizable for the users so we added a couple of extra functionalities. Like writing your custom message & define custom colors for the letters…. You can read more about how to do this in the README file of the repository. Have fun!

Download the open source project on GitHub: https://github.com/B-Reel/vr-madebymakers 

Experience location: https://github.com/B-Reel/vr-madebymakers

Related posts

VR is Ready for Consumers, Are You Ready for It?

A look at the capabilities (and limitations) of the current generation of VR devices.

Read more

Simulating Weight in VR

When designing for virtual reality, we can’t take anything for granted—even the most basic interactions.

Read more
See all of our blog posts