Login to Construct Arcade

Learn WebXR Development

Get star­ted with VR browser game 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.


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. But don’t worry, 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 is avail­able in the latest ver­sions of Chrome, Edge, Op­era and Oculus Browser. This API also al­lows us­ing AR, while the pre­vi­ous only provided 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 Google Chrome with Oculus Rift or on mo­bile, Meta­chromi­um for Steam­VR and Oculus Browser or Fire­fox Real­ity for Oculus Quest (1&2) and Oculus GO.

Find out more about browser sup­port on im­mers­iveweb.dev and 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.


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 Dif­fi­culty Web­site
A-Frame HTML/JavaS­cript Easy aframe.io
Babylon.js JavaS­cript In­term. babylonjs.com
Mag­num 1 C++ Ad­vanced mag­num.graph­ics
MetaVRse JavaS­cript ? Metavrse.com
PlayCan­vas JavaS­cript Easy playcan­vas.com
re­act-three-fiber Re­act/JavaS­cript In­term. git­hub.com
Three.js JavaS­cript In­term. threejs.org
Unity JavaS­cript/C# Easy unity3d.com
Won­der­land En­gine JavaS­cript Easy won­der­landen­gine.com
For WebXR Device API sup­port please con­tact us.


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.

Web­site: aframe.io


A re­act ren­der­er for threejs. Build your scene de­clar­at­ively with re-us­able, self-con­tained com­pon­ents that re­act to state, are read­ily in­ter­act­ive and can tap in­to Re­act’s eco­sys­tem. Sup­ports WebXR via re­act-xr.

Web­site: re­act-three-fiber


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

Web­site: babylonjs.com


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 WebXR ex­ample.

Web­site: mag­num.graph­ics


A cloud-based de­vel­op­ment plat­form for cre­at­ing WebXR ap­plic­a­tions. There is a lot of em­phas­is on sim­pli­city, so that even non-de­velopers can cre­ate 3D con­tent.

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

Web­site: metavrse.com


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


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 many WebXR ex­amples.

Web­site: threejs.org


The Unity 3D en­gine is very pop­u­lar and sup­ports WebXR thanks to De-Pan­ther’s unity-webxr-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

Won­der­land En­gine

A game en­gine de­signed for WebXR and 3D on the web. It provides an ef­fi­cient work­flow, helps man­age scene com­plex­ity, op­tim­izes your as­sets for you and its WebAssembly runtime op­tim­izes ren­der­ing spe­cific­ally for the web. Cus­tom com­pon­ents/gam­elo­gic are writ­ten in JavaS­cript.

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


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


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.

Web Op­tim­ized En­gine

In case you do not want to worry about manu­ally op­tim­iz­ing your app/game your­self, Won­der­land En­gine im­ple­ments vari­ous web spe­cif­ic op­tim­iz­a­tions that al­low you to fo­cus on your pro­ject in­stead of per­form­ance.

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