Learn VR Browser Game Development

You want to know how to start with We­b­VR/We­bXR De­vice API de­vel­op­ment?

Build­ing VR brows­er games is not hard, but very re­ward­ing. Es­pe­cial­ly (but not on­ly) if you al­ready know a pro­gram­ming lan­guage. Fol­low this guide to get an idea of where to find re­sources and avoid the most com­mon pit­falls.


In­tro­duc­tion

This page is meant to give you a head start in un­der­stand­ing how to build your own VR brows­er games. As we don’t know your lev­el of ex­pe­ri­ence, feel free to skip chap­ters which are al­ready clear to you. Let’s start off with the very ba­sics.

Web De­vel­op­ment

Build­ing a VR game for the brows­er is very sim­i­lar to build­ing any 3D game for the brows­er. With the right tools, it can be like build­ing a web­site, though!

The ba­sic tech­nolo­gies to build a web­site are HTML, CSS and of­ten JavaScript. There are many more tech­nolo­gies out there, but we don’t need more than that.

Graph­ics on the Web

Ef­fi­cient­ly dis­play­ing 3D graph­ics in a brows­er is done via We­bGL (“Web Graph­ics Li­brary”). It does that by al­low­ing the use of the GPU from with­in the brows­er. You prob­a­bly do not have to wor­ry about it or how to use it, though. In­stead you will like­ly use a frame­work which will use We­bGL with­out you hav­ing to.

VR on the Web

Ef­forts to bring VR in­to the brows­er orig­i­nal­ly start­ed with the We­b­VR API. (An API is a set of func­tions that you can use as a de­vel­op­er in your code via JavaScript for ex­am­ple.) Since then, We­b­VR has been ful­ly re­placed by the We­bXR De­vice API, which to this date is al­so still un­sta­ble and be­ing worked on. This API al­so al­lows us­ing AR, not just VR.

When chos­ing how to make your VR brows­er game, look out for We­bXR sup­port rather than We­b­VR sup­port, as your game may not be playable in the near fu­ture, if it on­ly sup­ports We­b­VR!

Be­cause VR in the brows­er is still ex­per­i­men­tal, not all browsers sup­port it yet. We rec­om­mend us­ing Mozil­la Fire­fox with Ocu­lus Rift or Steam VR, Google Chrome on An­droid for Day­dream and Ocu­lus Brows­er for Sam­sung GearVR and Ocu­lus GO.

Find out more about brows­er sup­port on we­b­vr.in­fo and ca­niuse.com.

To learn more about when to ex­pect brows­er sup­port for We­bXR De­vice API, check out this video:

What are Frame­works?

Frame­works or en­gines help you build your games eas­i­er and faster. JavaScript code that is re­quired in all games is al­ready writ­ten there for you to eas­i­ly re­use it. Frame­works con­tain a lot of this code.

En­gines on top of that of­fer toolsets that may not even re­quire you to write a sin­gle line of code, but are a lit­tle less flex­i­ble and less tai­lored to your spe­cif­ic game. That can make the re­sult­ing game big­ger (be­cause it con­tains un­nec­es­sary stuff), which means your game will take longer to load.

Al­ter­na­tives

It is pos­si­ble to build your game in an en­gine with­out us­ing web tech­nolo­gies and fi­nal­ly ex­port them to the web. Un­der­neath, these en­gines of­ten uti­lize com­pi­la­tion to We­bAssem­bly via Em­scripten for ex­am­ple, which—if you’re su­per hard-core and know C or C++—can al­so use di­rect­ly to build your VR brows­er game.

Frame­works and En­gines

The fol­low­ing ta­ble shows a list of frame­works and en­gines:

VR ready web game- and graph­ics frame­works
Frame­work/En­gine Pro­gram­ming Lan­guages We­bXR Dif­fi­cul­ty Web­site
A-Frame HTML/JavaScript ✓ Easy aframe.io
Uni­ty (JavaScript/C#) Easy uni­ty3d.com
Three.js JavaScript ✓ In­term. three­js.org
Mag­num C++ ✓ 1 Ad­vanced mag­num.graph­ics
Baby­lon.js JavaScript ✓ ? ba­by­lon­js.com
1
For We­bXR De­vice API sup­port please con­tact us.

A-Frame

One of our fa­vorites, since it makes set­ting up a scene very easy. On­ly lit­tle javascript is re­quired, most of the game is de­fined in HTML.

Sup­ports We­bXR.

Web­site: aframe.io

Uni­ty

The Uni­ty 3D en­gine is very pop­u­lar and sup­ports We­b­VR thanks to Mozil­la’s uni­ty-we­b­vr-ex­port plug­in. There are tons of learn­ing re­sources.

As this en­gine is not op­ti­mized for the web, you will end up with pret­ty large game sizes, which caus­es longer down­load times.

Web­site: uni­ty3d.com

three.js

A frame­work that wraps We­bGL and is su­per flex­i­ble, but a lit­tle low­er lev­el than frame­works like A-Frame (which is based on three.js).

They have quite a few We­b­VR ex­am­ples.

Web­site: three­js.org

Mag­num

A frame­work for C++ that sup­ports cross com­pi­la­tion to We­bAssem­bly via Em­scripten. Very low lev­el but can yield high­er per­for­mance and small­er game-sizes if done cor­rect­ly. It is ful­ly doc­u­ment­ed and well test­ed, mak­ing it high­ly re­li­able.

Check out their We­b­VR ex­am­ple.

Web­site: mag­num.graph­ics

ba­by­lon.js

A full en­gine writ­ten specif­i­cal­ly for the web. Learn how to set up We­bXR here.

Dis­claimer: We have no own ex­pe­ri­ence with baby­lon.js yet!

Web­site: ba­by­lon­js.com

Op­ti­miza­tion

VR brows­er games need to tar­get a wide range of de­vices: desk­top, stand­alone VR head­e­set and smart­phones. It is es­sen­tial to op­ti­mize prop­er­ly for the low­est per­form­ing de­vices you plan to sup­port.

There are a cou­ple of tools that will help you do so:

gltf-pipe­line

Im­prove and com­press glTF scenes.

Web­site: GitHub re­pos­i­to­ry

More op­ti­miza­tion stages for this tool can be found in the gltf-pipe­line-stages GitHub re­pos­i­to­ry.