Design and Build Virtual Reality on the Cheap

One feature of a lot of VR reporting these days is that it has focused on high-end rigs aimed at gamers. The Oculus Rift, HTC Vive, and similar systems cost several hundred dollars, and still require a secondary computer with high-end 3d graphics cards.

Now, let’s be real. Obviously, the average consumer won’t have this tech for several years. For the near-term, high-end VR headsets aren’t going to be in the home. Consumers will experience them at stores and theme parks, but won’t have their own rigs until they integrated with current digital television systems. There will be a ‘gamer’ market but it will remain small relative to console and (especially) casual games.

Do we have to wait? No. The immediate future for VR aimed at the masses, as opposed to specialized markets (such as gaming or at theme parks) is in smartphone-based VR, as seen in Samsung Gear and Google Cardboard.

And, in parallel with smartphone-based VR and AR, new web-based software packages  cost almost nothing. We have a perfect storm, with costs falling like a paralyzed falcon on both the consumer and production end.

The good news is that you can start to build VR on the cheap! In the following post, we’ll detail the steps you might take to get your own VR development pipeline going. As we do, we’ll see that this is truly a “new era” – the way we produce virtual worlds is changing along with the hardware and software for viewing it.

What Do We Need to Build Worlds?

A traditional 3D dev pipeline for games or animation would require a lot of players.

1. Illustrators
2. Modelers
3. Game Designers
4. Game programmers
5. IT (to support advanced hardware)

Each team member will typically use expensive software designed to run on desktops. Costs are in the hundreds to thousands per seat.

1. 3D modeling software licenses (expensive)
2. Helper programs and accessories (varies)

You’ll need VR-specific hardware

1. Oculus, Vive, or similar VR headsets (about $600 each)
2. High-end computers to support the headsets (about $1500 each)

To set up shop, you need tens, possibly hundreds of thousands to begin VR work using this “old school” strategy. Our low-cost VR pipeline, in contrast, will look like this:

1. A medium computer with a midrange video card
2. A web browser (free)
3. A couple of smartphones (expensive, but you may have them)
4. Cellphone VR housing (cheap)
5. A few low-cost (~$20) monthly software descriptions

Cheap, Cheap…below, we discuss these elements in greater detail.

Google Cardboard

If you haven’t gotten this yet, get it. Googles “out of the box” VR solution uses a smartphone inserted into a cardboard box with two adjustment lenses which blend stereo images into a wraparound world.

https://www.google.com/get/cardboard/

Typical costs for Cardboard clones are $10 or less (a bit more if you want plastic instead of cardboard)

Smartphones

One of the amazing features of the smartphone revolution is how sensors for motion and orientation got packed into the small form factor. Today, a typical smartphone packs the computing power of a $100k VR system from a decade ago.

Not all smartphones will work. At a bare minimum, the phone has to support 3D. In addition, for current web browsers the phone must also support WebGL, which in turn requires that OpenGL libraries are installed. Fortunately, new iOS iPhones are reasonably good at 3D, if the environment isn’t too complex. Ditto for Android phones. Windows Phones may support WebGL in the future (like the Microsoft Edge desktop browser does now)

A Workstation

You’ll also need a computer that has reasonably fast graphics. Since WebVR scenes are for the time being, relatively simple, you don’t need gamer power. In fact, working on too high-powered a workstation may be a problem – you’ll design in a way that locks out the typical consumer.

These would work…

You won’t need one of these right away…

Instead, you can use your Mac!

Macintosh computers tend to have weak 3D support (even at the high end) compared to Windows. Gamers avoid them. In fact, the Oculus itself won’t work properly on any Mac model – including the 5k macs. So, mac designers and developers are currently locked out of the VR world.

But they will handle web-based VR just fine.

Not everyone realizes that the Oculus and similar devices have to be plugged into a high-end computer to work properly. Smartphone-based VR, unlike the Oculus, doesn’t require that you plug in the headset to the computer.

A Web Browser

WebVR is not fully supported yet on any browser, desktop or mobile. The WebVR spec enabling VR in browsers has just come to 1.0 version, and it will be a year or two until it becomes fully “native code” in standard browsers.

However, web browsers have the great feature that they can be “polyfilled”.  A polyfill is a JavaScript library that adds functions to a web browser, essentially upgrading it to a future version. And for WebVR, there is a great duo of libraries created by Boris Smus and other developers. You can find the polyfill for WebVR on GitHub.

https://github.com/borismus/webvr-polyfill

Smus has also created WebVR Boilerplate – a starter project for web-based VR.

https://github.com/borismus/webvr-boilerplate

You can check out samples at the following link:

https://toji.github.io/webvr-samples/

And there’s a WebVR slack channel with other projects at http://webvr.slack.com.

Samsung Gear

Cardboard is a good start, but its hand-held nature doesn’t provide the full VR experience. At ~$100 US, Gear is a the premium device for smartphone-based VR. It’s a good compromise between working with a low-end Cardboard system and an expensive VR console. The “powered by Oculus” on the side of GearVR is misleading – this is smartphone-based virtual reality.

http://www.samsung.com/global/galaxy/wearables/gear-vr/

One problems with Gear VR in the past was the lack of support for web browsing, However, help is on the way, as the new Samsung VR app will support WebVR 1.0

http://uploadvr.com/samsung-vr-internet-app/

Building in 3D

Up to the present, creating 3D models for virtual worlds required expensive software that in turn required high-end computers to run fast enough to use. However, with the rise of the “web app” sites are coming online that allow you to develop 3D in the browser for little to nothing.

An example of this new generation of web-based modeling softwar is Clara.io, which is free for personal use, and $25 for professional use.

https://clara.io/

Compare that to the mongo bucks charged for a single installation of Maya or 3Ds max!

The user interface will be familiar to those who’ve worked with desktop software:

Yes, the above interface is simply a web page. HTML5, CSS3, and JavaScript can now create an interface for designers comparable to desktop apps costing 10-100x as much.

The Clara site even has some 3D models you can play with, if your not a 3D modeler!

https://clara.io/library

Game Programming in the Browser

Game programming for consoles and PCs typically requires high-end developers skilled in squeezing out the last bit of power from a system CPU. Typically, they program in a mix of C++ or C#, with sections of machine language inserted where necessary.

In contrast, web browsers use standard and universal JavaScript for building 3D engines and libraries. Most libraries today use ES 5, which was standardized in 2009, which is universally supported by desktop browsers and all smartphone browsers.

Currently, there are two libraries for 3d in widespread use on the web. THREE.js and Babylon.js. Out of the two, THREE is for more general modeling, while Babylon has a feel more similar to traditional game engines. Support for VR is further advanced in THREE.js, but both platforms will provide good support by mid-2016.

This year JavaScript libraries will be updated to take advantage of programming features found in ECMA2015. Compared to the ES5 standard, the new JavaScript spec has features that will be familiar to traditional game programmers, especially the “class” and “extends” keywords. In the past, the use of “prototypes” in JavaScript was confusing to some, but with ECMA2015 there will likely be an influx of game programmers working with the new features of the language.

360 Video on the Cheap

What about authoring video? 360 video is a great way to stick a toe into the VR ocean. You may have looked and seen prices in the $50,000 range. Well, there are lots of cheaper solutions for starting up, like 360fly

https://360fly.com/

We’re talking about $400 US at Best Buy.

Too much? For the most basic 3D video, you can use the same smartphones you’re using in your headsets, like Splash, an app that converts your cellphone into a 360 video camera

App store: https://itunes.apple.com/us/app/splash/id1057262494?ls=1&mt=8

This app takes numerous pictures of the surroundings, which are reconstructed into a static 3D scene. The 3D environment can be viewed as a scrolled wraparound world (similar to the old QuickTime VR) or in stereo for a true VR experience using Google Cardboard.

Get Busy

There are tools out there, and they are cheap relative to traditional workflow. If you’re interested in VR, it’s time to start creating on the cheap!