Introduction

In this arti­cle we see how to gen­er­ate a WebGL stand­alone ver­sion of our project that can be run on browsers, that is to say a pro­gram that can be host­ed on a serv­er, for exam­ple in Itch.IO or in our own web page.

How to create a build for browsers from a Unity 3D project

We start by going to the File > Build Set­tings tab, this will open the "Build Set­tings" win­dow shown in Fig­ure 1. Here we can con­fig­ure some com­pi­la­tion para­me­ters, such as the scenes to be added and the tar­get platform.

Let's click on the "Add Open Scenes" but­ton to add the cur­rent scene to the com­pi­la­tion (a blank scene that comes by default). The scene placed in posi­tion 0 will be the one loaded at start­up, so if we have mul­ti­ple scenes we will have to reorder them accordingly.

To gen­er­ate a WebGL build for browsers, it is nec­es­sary to con­fig­ure Uni­ty to pro­duce this kind of builds. In the "Build Set­tings" tab is the list of tar­get plat­forms, there we must select the "WebGL" plat­form and then click on the "Switch Plat­form" but­ton. This will start the plat­form switch­ing process which may take a few min­utes, this process needs to be done only once, unless we need to switch between Win­dows or brows­er builds. In gen­er­al it is more com­fort­able to test on the oper­at­ing sys­tem itself and after mak­ing sev­er­al advances, pro­duce a WebGL com­pi­la­tion to upload it to Itch.io or to our own web page.

Once the plat­form change is done, the next step is to click on the "Build and Run" but­ton, this will dis­play a win­dow in which we will select the des­ti­na­tion fold­er to export the files of the game or appli­ca­tion. In my case I usu­al­ly cre­ate a fold­er called Builds in par­al­lel to the Assets fold­er of the project itself, but you can choose any fold­er you want, make sure you remem­ber where it is locat­ed so you can use the files later.

When we have cho­sen the des­ti­na­tion fold­er we click on "Select Fold­er" to confirm.

At this point the com­pi­la­tion process begins, which will take more or less time depend­ing on fac­tors such as the com­plex­i­ty of the project and the pow­er of our com­put­er, in fig­ure 5 we see the load­ing bar of this process.

When the com­pi­la­tion process fin­ish­es, as we com­piled with the "Build and Run" option, the appli­ca­tion opens auto­mat­i­cal­ly in our browser.

If we go to the fold­er that was cho­sen for the com­pi­la­tion we will find the game or appli­ca­tion files (fig­ure 8). These files can be uploaded to a web­site like Itch.IO or to your own serv­er and the game can be loaded direct­ly in the browser.

How to test WebGL builds made in Unity

In Fig­ure 6 we see the fold­er con­tain­ing the files that were gen­er­at­ed dur­ing the com­pi­la­tion. The file "index.html" would be some­thing like the exe­cutable of our game or appli­ca­tion. The prob­lem is that when we click on it to test we get the fol­low­ing message:

The mes­sage says that appar­ent­ly our brows­er does not sup­port the Uni­ty WebGL com­pi­la­tion, it tells us to upload the con­tent to a serv­er or try anoth­er browser.

To test a WebGL build, the fastest way is to recom­pile with the "Build and Run" option, since by doing this, Uni­ty auto­mat­i­cal­ly mounts a local serv­er to run the files.

For the WebGL com­pi­la­tion to work it def­i­nite­ly has to be mount­ed on a serv­er either local­ly, which can be mount­ed with appli­ca­tions like "Xampp", or it has to be mount­ed on a web serv­er, either from a third par­ty, for exam­ple on a page like "Itch.IO" or on your own web serv­er. I leave you a link to Hostinger, the serv­er with which I have been work­ing for years, a qual­i­ty ser­vice and with very good prices, in addi­tion to the facil­i­ty to scale the host­ing accord­ing to the growth of your web.

To upload the build to your own serv­er you need to do it by FTP access, Hostinger has a built-in FTP access in the con­trol pan­el, although I find it more con­ve­nient to use the FileZil­la appli­ca­tion to con­nect to the server.

Once access is estab­lished, the process is no dif­fer­ent than copy­ing files into your own PC, you cre­ate the fold­er where you want to put your com­pi­la­tion, upload the files and then the path to run the WebGL com­pi­la­tion is the URL from the root to the "index.html" file, which by the way you can name it what­ev­er you want, for exam­ple "Play.html".

Let's look at the fol­low­ing exam­ple to under­stand the path as a URL with­in our server:

https://gamedevtraum.com/GDT-Prototypes/go-to-hell‑5/index.html

It is a WebGL com­pi­la­tion made in Uni­ty, if you click on the link you can try it. Ana­lyz­ing the URL we see that the root fold­er is in GameDevTraum.com, from there when observ­ing the URL we see that we get in a fold­er called "GDT-Pro­to­types", inside that fold­er we enter in anoth­er fold­er called: "go-to-hel­l‑5", where final­ly our file "index.html".

Anoth­er alter­na­tive to know the URL of the file "index.html" is from the FTP access, we make right click on the file and prob­a­bly there is an option of "Copy URL", which in the case of FileZil­la, does not give us the exact URL, but if most of it, to that we make the nec­es­sary mod­i­fi­ca­tions to give us the exact URL.

Unity WebGL does not finish loading in the browser

It has hap­pened to me that when try­ing to open a WebGL com­pi­la­tion, the brows­er nev­er fin­ish­es load­ing it, it freezes in the Uni­ty load­ing screen. I have solved this prob­lem by remov­ing the com­pres­sion in the WebGL compilation.

To do so, go to Edit > Project Set­tings and the win­dow shown in Fig­ure 8 should open.

As we can see, in the left sec­tion we go to "Play­er" and then in the big win­dow on the right we go to the "Pub­lish­ing Set­tings" sec­tion, there we change the "Com­pres­sion For­mat" field to "Dis­abled" and we run the com­pi­la­tion again. This in my case has solved the prob­lem that a com­pi­la­tion of Uni­ty for browsers does not fin­ish loading.