Learn WebXR Development

Get start­ed with We­b­VR/We­bXR De­vice API de­vel­op­ment.

Build­ing We­bXR ap­pli­ca­tions 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. This guide will help you find re­sources and avoid the most com­mon pit­falls.

While this site fo­cus­es on VR brows­er games de­vel­op­ment, this guide should be ap­pli­ca­ble to any oth­er ap­pli­ca­tion aswell.


In­tro­duc­tion

This guide will give you a head start on how to build your own VR brows­er games (or any We­bXR app for that mat­ter). As we don’t know your lev­el of ex­pe­ri­ence, feel free to skip what you al­ready know.

Let’s start off with the very ba­sics.

Web De­vel­op­ment

Build­ing a VR or AR ap­pli­ca­tion or game for the brows­er is very sim­i­lar to build­ing any 3D ap­pli­ca­tion 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. With 3D con­tent on the web we need the flex­i­b­li­ty of JavaScript, but frame­works like A-Frame will get you a long way with just HTML.

Graph­ics on the Web

Dis­play­ing 3D graph­ics in a brows­er is pos­si­ble with We­bGL (“Web Graph­ics Li­brary”). It al­lows the use of the GPU from with­in the brows­er. You do not have to be­come a We­bGL ex­pert. In­stead you will like­ly use a frame­work which us­es We­bGL with­out you hav­ing to use it di­rect­ly.

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. Since then, We­b­VR has been re­placed by the We­bXR De­vice API, which will be en­abled in Chrome 79 (De­cem­ber 13th 2019) by de­fault. Oth­er browsers will fol­low. This API al­so al­lows us­ing AR, while the pre­vi­ous on­ly pro­vid­ed 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 app may stop work­ing even­tu­al­ly, 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, Ocu­lus GO and Ocu­lus Quest.

Find out more about brows­er sup­port on we­b­vr.in­fo and ca­niuse.com. As well as We­bXR al­so on ca­niuse.com.

What are Frame­works?

“Frame­works”, “en­gines” or “de­vel­op­ment plat­forms” help you build We­bXR apps eas­i­er and faster. Frame­works con­tain a lot of JavaScript code that is need­ed of­ten for easy re­use.

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 may be less flex­i­ble and less tai­lored to your spe­cif­ic We­bXR app. They _can_ make the re­sult­ing app big­ger (be­cause it con­tains stuff you are not us­ing), 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 to 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 (e.g. via Em­scripten), which you 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
Play­Can­vas (JavaScript) ✓ Easy play­can­vas.com
Won­der­lan­dEngine (JavaScript) ✓ Easy won­der­lan­dengine.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

Play­Can­vas

A cloud-based en­gine with VR and AR sup­port. Graph­i­cal­ly very im­pres­sive and the vis­ual ed­i­tor makes it very easy to as­sem­ble as­sets.

Web­site: Play­Can­vas

Won­der­land En­gine

An off­line vis­ual ed­i­tor that ex­ports an op­ti­mized bi­na­ry for­mat and We­bAssem­bly run­time with a JavaScript API for full flex­i­b­li­ty. Cur­rent­ly in de­vel­op­ment and not avail­able to the pub­lic.

Web­site: Won­der­land En­gine

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.

A-Frame Best Prac­tices

If you are work­ing with A-Frame, check out A-Frame’s op­ti­miza­tion guide

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.