Login to Construct Arcade

Learn WebXR Development

Get star­ted with Web­VR/WebXR Device API de­vel­op­ment.

Build­ing WebXR ap­plic­a­tions is not hard, but very re­ward­ing. Es­pe­cially (but not only) if you already 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­cuses on VR browser games de­vel­op­ment, this guide should be ap­plic­able to any oth­er ap­plic­a­tion as­well.


In­tro­duc­tion

This guide will give you a head start on how to build your own VR browser games (or any WebXR app for that mat­ter). As we don’t know your level of ex­per­i­ence, feel free to skip what you already know.

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

Web De­vel­op­ment

Build­ing a VR or AR ap­plic­a­tion or game for the browser is very sim­il­ar to build­ing any 3D ap­plic­a­tion for the browser. With the right tools, it can be like build­ing a web­site, though!

The ba­sic tech­no­lo­gies to build a web­site are HTML, CSS and of­ten JavaS­cript. With 3D con­tent on the web we need the flex­ib­lity of JavaS­cript, 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 browser is pos­sible with WebGL (“Web Graph­ics Lib­rary”). It al­lows the use of the GPU from with­in the browser. You do not have to be­come a WebGL ex­pert. In­stead you will likely use a frame­work which uses WebGL without you hav­ing to use it dir­ectly.

VR on the Web

Ef­forts to bring VR in­to the browser ori­gin­ally star­ted with the Web­VR API. Since then, Web­VR has been re­placed by the WebXR Device API, which will be en­abled in Chrome 79 (Decem­ber 13th 2019) by de­fault. Oth­er browsers will fol­low. This API also al­lows us­ing AR, while the pre­vi­ous only provided VR.

When chos­ing how to make your VR browser game, look out for WebXR sup­port rather than Web­VR sup­port, as your app may stop work­ing even­tu­ally, if it only sup­ports Web­VR!

Be­cause VR in the browser is still ex­per­i­ment­al, not all browsers sup­port it yet. We re­com­mend us­ing Moz­illa Fire­fox with Oculus Rift or Steam VR, Google Chrome on An­droid for Day­dream and Oculus Browser for Sam­sung Gear­VR, Oculus GO and Oculus Quest.

Find out more about browser sup­port on web­vr.info and cani­use.com. As well as WebXR also on cani­use.com.

What are Frame­works?

“Frame­works”, “en­gines” or “de­vel­op­ment plat­forms” help you build WebXR apps easi­er and faster. Frame­works con­tain a lot of JavaS­cript code that is needed of­ten for easy re­use.

En­gines on top of that of­fer tool­sets that may not even re­quire you to write a single line of code, but may be less flex­ible and less tailored to your spe­cif­ic WebXR app. They _can_ make the res­ult­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­tern­at­ives

It is pos­sible to build your game in an en­gine without us­ing web tech­no­lo­gies to fi­nally ex­port them to the web. Un­der­neath, these en­gines of­ten util­ize com­pil­a­tion to WebAssembly (e.g. via Em­scripten), which you can also use dir­ectly to build your VR browser game.

Frame­works and En­gines

The fol­low­ing table 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 WebXR Dif­fi­culty Web­site
A-Frame HTML/JavaS­cript ✓ Easy aframe.io
Unity (JavaS­cript/C#) Easy unity3d.com
PlayCan­vas (JavaS­cript) ✓ Easy playcan­vas.com
Won­der­landEn­gine (JavaS­cript) ✓ Easy won­der­landen­gine.com
Three.js JavaS­cript ✓ In­term. threejs.org
Mag­num C++ ✓ 1 Ad­vanced mag­num.graph­ics
Babylon.js JavaS­cript ✓ ? babylonjs.com
1
For WebXR Device API sup­port please con­tact us.

A-Frame

One of our fa­vor­ites, since it makes set­ting up a scene very easy. Only little javas­cript is re­quired, most of the game is defined in HTML.

Sup­ports WebXR.

Web­site: aframe.io

PlayCan­vas

A cloud-based en­gine with VR and AR sup­port. Graph­ic­ally very im­press­ive and the visu­al ed­it­or makes it very easy to as­semble as­sets.

Web­site: PlayCan­vas

Won­der­land En­gine

An off­line visu­al ed­it­or that ex­ports an op­tim­ized bin­ary format and WebAssembly runtime with a JavaS­cript API for full flex­ib­lity. Cur­rently in de­vel­op­ment and not avail­able to the pub­lic.

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

Unity

The Unity 3D en­gine is very pop­u­lar and sup­ports Web­VR thanks to Moz­illa’s unity-web­vr-ex­port plu­gin. There are tons of learn­ing re­sources.

As this en­gine is not op­tim­ized for the web, you will end up with pretty large game sizes, which causes longer down­load times.

Web­site: unity3d.com

three.js

A frame­work that wraps WebGL and is su­per flex­ible, but a little lower level than frame­works like A-Frame (which is based on three.js).

They have quite a few Web­VR ex­amples.

Web­site: threejs.org

Mag­num

A frame­work for C++ that sup­ports cross com­pil­a­tion to WebAssembly via Em­scripten. Very low level but can yield high­er per­form­ance and smal­ler game-sizes if done cor­rectly. It is fully doc­u­mented and well tested, mak­ing it highly re­li­able.

Check out their Web­VR ex­ample.

Web­site: mag­num.graph­ics

babylon.js

A full en­gine writ­ten spe­cific­ally for the web. Learn how to set up WebXR here.

Dis­claim­er: We have no own ex­per­i­ence with babylon.js yet!

Web­site: babylonjs.com

Op­tim­iz­a­tion

VR browser games need to tar­get a wide range of devices: desktop, stan­dalone VR heade­set and smart­phones. It is es­sen­tial to op­tim­ize prop­erly for the low­est per­form­ing devices you plan to sup­port.

A-Frame Best Prac­tices

If you are work­ing with A-Frame, check out A-Frame’s op­tim­iz­a­tion guide

gltf-pipeline

Im­prove and com­press glTF scenes.

Web­site: Git­Hub re­pos­it­ory

More op­tim­iz­a­tion stages for this tool can be found in the gltf-pipeline-stages Git­Hub re­pos­it­ory.

Terms of Service

Welcome to Construct Arcade Website (the “Website”). ​You are advised to carefullyreview ​the terms expressly incorporated herein (​​“Terms” or “Terms of Service''), asthey collectively​ constitute a legally binding, electronic contract (the “Agreement”)between you (“You” or the “User”) and Vhite Rabbit GbR (“Vhite Rabbit" or the“Company”), Blarerstraße 56, 78462 Konstanz, Germany, upon your consent(defined below, section 2.2), hence affecting your legal rights and obligations.

1- Subject & Area of Validity

1.1 Vhite Rabbit offers online VR games and other services within the context ofonline gaming, including in-game purchases (the “Service”, collectively the"Services") solely for non-commercial entertainment purposes. These Terms ofService regulate your access to and use of the Services on this Website.

1.2 The User may access and play the online games on the Website without creatingan account (the “User Account”) and our Services are essentially free of charge withthe exception of certain purchasable services (the “Premium Services”, section 3)which are subject to additional rules.

2- Conclusion of Contract

2.1 You confirm to be at least 16 years old and have the legal capacity or to have obtained the consent of your legal guardian to enter into this Agreement.

2.2 When you create a user account, you agree and declare to be bound by this Agreement by clicking the “Create Account” button after you check the box containing the link to these Terms as well as the statement that you have read the Terms of Service. This shall allow you to access our Premium Services for purchase and use.

3- Premium Services and Usage Fees

3.1 The term “Premium Services” refers to the Services and contents on the Website, which require payment and creation of a user account for access and use, including but not necessarily limited to in-game purchases such as virtual currencies, certain virtual features and items (collectively “Virtual Assets”) within the context of our online games.

3.2 The User confirms that any data provided while creating a user account as well as during the process of payment (in particular bank account, credit card number, etc.) is complete and accurate.

3.3 Vhite Rabbit may, at its own discretion, introduce new Premium Services, remove the existing ones, render any existing free Service as a Premium Service, determine and make amends to the fees and payment options of the Premium Services.

3.4 Vhite Rabbit holds all the rights to the Virtual Assets provided in online games. Purchase of the Virtual Assets shall give the User only a non-exclusive right to use them as long as the respective game is available for use.

4- Disclaimer, Limitation of Liability and Termination

4.1 The Services provided by Vhite Rabbit are made available without any warranty or assurance that the Services will remain available for use. Vhite Rabbit reserves the right to modify or completely remove a Service at its own discretion, without any liability for any loss or damage arising from it, including reimbursement or compensation due to modification or removal of the Premium Services.

4.2 Vhite Rabbit shall not be liable for any interruption or malfunction of the Services arising from technical reasons including but not limited to maintenance work, updates and server issues, as well as all reasons beyond Vhite Rabbit’s control (force majeure, third party responsibility, etc.).

4.3 With the termination of this Agreement, the User loses the right to access our Premium Services for purchase as well as the right to use already purchased Premium Services. Vhite Rabbit shall not be liable for reimbursement or any other monetary claim arising from the termination of this Agreement for any reason.

5- Ownership of Intellectual Properties

5.1 The Services and all copyrightable content and materials related thereto including, without limitation, software, design, text, data, all visual and audio materials, logos and trademarks are the exclusive property of Vhite Rabbit.

5.2 The User agrees not to modify, distribute, copy, reproduce, publicly display,publish, create derivations from, or otherwise use, any materials or content related to our Services without our explicit prior written consent.

5.3 The User agrees and undertakes to indemnify Vhite Rabbit for all losses, damages and expenses incurred by the User’s breach of the terms in this section.

6- Governing Law and Jurisdiction

6.1 German law shall apply with the exclusion of the UN Convention on Contracts for the International Sale of Goods.

6.2 All disputes arising out of this Agreement or your use of our Services shall be resolved in the ODR platform provided by the European Commission as an alternative dispute resolution between consumers and online traders, accessible via http://ec.europa.eu/consumers/odr .

7- Amendments to The Terms of Service

7.1 Vhite Rabbit may amend this Agreement in case of legal changes, business or technical operations of the Company making such amendment necessary. The User will be informed of any amendments to this Agreement and asked to agree to them during the first login process after the amendments are introduced.

7.2 Failing to agree to any amendment shall result in the denial of further access to the Premium Services for purchase or use.

7.3 If any provision of this Agreement becomes invalid or unenforceable for any reason, this shall not affect the rest of the Agreement.

I confirm that I have read the Terms of Service above and agree to it*
Delete Account Continue