How-to run a WebGL scene locally using localhost

vcard's picture

Once this was not an issue but now (for security reasons) Web pages including some special content, like WebGL scenes, don't run on a browser directly (with the standard settings) if they are located on your PC. They only run through a web server. To run them on your PC for testing or other purposes you need to start a web server locally, on Windows. If you are a Unity 3D user/develloper and have it installed in your PC it's quite easy and can be done with a single line of instructions!

  1. If you are a Unity 3D user you should know that this process is done by Unity, automatically, "when" you publish a game/scene choosing the "build and run" option.

Yet, when you are not in the “actual” process of publishing in Unity and … simply want to check any WebGL scene previously published on a folder or sent to you by someone … you can’t run the scene locally. You need to upload it to a web server and run it from there. Some scenes can be quite huge; will take time to upload and occupy precious space on the Web Server. Not practical for a quick look.

  1. You could try to configure your browser security but it's highly unadvised. You could also activate/install a web server on windows but that would imply changing windows configurations in a more permanent way. Otherwise, to "temporarily" run a WebGL scene/game on your PC you can manually start the web server included in Unity! Quite easy … one line of instructions!

0 – Context

  • Imagine a webgl scene located at folder:
    "C:\Users\vcard\Documents\Unity3D\Trabalhos de Alunos\Daniel_Ferreira-Trabalho RVW"
  • and you are using Unity 2020.3.22f1 located at:
    "C:\Program Files\Unity 2020.3.22f1"
  • and, finally, you want to run the local webserver on port "60606"

1 - First, start the Web Server on the folder where the WebGL scene is located.
To do it, Run on the Command Prompt window ( Figure 1 ) the following instructions line, including all the "":

"C:\Program Files\Unity 2020.3.22f1\Editor\Data\MonoBleedingEdge\bin/mono.exe" "C:/Program Files/Unity 2020.3.22f1/Editor/Data/PlaybackEngines/WebGLSupport/BuildTools/SimpleWebServer.exe" "C:\Users\vcard\Documents\Unity3D\Trabalhos de Alunos\Daniel_Ferreira-Trabalho RVW/" 60606

(obs: replace the colored content with your specific project and system addresses context)

The system will answer "Starting web server at http: Localhost:60606" ( Figure 1 ). keep the Command Prompt window open and proceed to the next step.

2 - Then, open your browser and write the address:  localhost:60606

If an index.html file is present in that WebGL folder, it will be launched! ( Figure 2 ).

Note that while this temporary Web server is up, the requests are shown in the command prompt window ( Figure 1 ). The web server shuts off when this window is closed.

Follow a discussion about this on:

Vitor Cardoso, 2021

Fig 1
Figure 1: the Command Prompt window showing the entire process!

Figure 2: the WebGL scene running locally