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.

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

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.