Better Loading Indicator in WebGL

IT WORKED but...
I now understand that when I tried this, it was done in conjunction with the template found at the begging of this topic. Because, before the loading problem, my main goal was to be able to show the loading progress as a percentage.
So The ".htaccess" works perfectly. But going back to my main goal, it doesn't work with that percentage loader. I understand that's out of your scope and I'll have to learn more about it or talk to those guys for the complete solution.
Like always thanks for the great and clear help!!

 

This is awesome, thank you so much!

 

Thank you! This should ship with Unity!

 

hi Alex,
apparently for me it was b) , the build is no longer working, using the .htaccess you posted above, failing with "unknown compression method in UnityLoader.js"
However using the previous .htaccess (from Unity 5.3) my build is generally working, and i also made sure that the hosting server responded with "Content-Encoding: gzip" in the HTTP Response header when i download Release/webgl.jsgz
Despite of that i am still getting the warning from UnityLoader.js in the browser Console: "Decompressed Release/mygame.datagz in 225ms. You can remove this delay if you configure your web server to host files using gzip compression".
What can i do? I hope you can help, thanks for your efforts!

 

This was the missing part for me - that could not find anywhere on the web !!!
Wasted almost all day by trying to fix that progress bar issue and compression warning!

Thanks for the info!

 

If you wanted a complex but low bandwidth progress animation would a gif or video be best and could you control the speed/progression of the animation so it relates to the loading speed of your game?

 

Alex, thanks a ton for willing to look into this. Indeed i get Encoding:gzip for every single file in my Release folder. I made sure there are no other .htaccess files interfering in parent directories. Here's the link to my project:
http://realisticaquarium.com/client/webgl
I'm pretty lost here, e.g. i haven't understood when and why access will be redirected to different files. The only .js file in my exported Project is UnityLoader.js.
Best greetings, ponx

 

Thanks a million for your help and your very good explanations, Alex! Thats good news, all in all! I'll switch to Unity 5.5 as soon as possible to make use of the Publishing settings (5.4.2 doesn't include it yet i figured). However i just unpacked the contents of a regular compressed build, uploaded it and the progress bar worked just as you said!
I'm not sure if i should ask my web hoster to disable static compression for me (it was rather tedious to make them enable gzip in the first place ). So good to know there's a fallback option! Thanks again!

 

This thread was very helpful, thanks!

I've been playing around with getting this to work with a unity app hosted on S3. It seems to be pretty much working now, so thought I'd share what I did:

1. Turned Data Caching off in the unity build settings

2. Renamed the Release/XXXgz files to just Release/XXX before uploading them to S3

3. For each of the Release/XXX files on S3, added a metadata tag of Content-Encoding:gzip

4. Also changed the Content-Type for the two Release/*.js files to application/javascript

I'm using the CustomProgress template from BabilinApps. I now get the download bar, and I see the correct progress numbers being updated as the app downloads (bytes downloaded / bytes total). BTW, also using Unity5.5.

 

Just wanted to add, that we had an issue with gzip encoding and the header. Although everything is setup fine, the client still downloaded the fully unpacked file - not the gzip. The header also included "Transfer-Encoding:chunked". Both Apache and nginx seemed to failed. But our actual problem was: the antivirus program.

Our antivirus program activated something like "Check application specific protocol" which internally somewhat mistrusts every zipped file. Deactivating this option solved our problem.

 

Guys, does anyone have the loading bar script that was linked in the first post?
Link is dead.

 

Just noticed this, here it is.

 

Thank you!

 

Can anyone confirm this is working on Unity 5.6.0f3? I'm trying to implement this and my web GL export just sits at full bar and displays "Loading..."

This is what I did:
1. Took the contents of the zip from two posts above and place them in: "C:\Program Files\Unity\Editor\Data\PlaybackEngines\webglsupport\BuildTools\WebGLTemplates"
2. Next downloaded the last UnityProgress.js posted (Post #21 I think) and replaced the old UnityProgress.js with the newer one.
3. In unity, I chose the "CustomProgress" template under Resolution and Presentation.
4. I built... and I get a frozen webpage as described above.

I'm using firefox and chrome (with extension "web server for chrome") to test my builds.

What am I missing? Or Where did I go wrong?

Thanks for the help Community!
-E

 

Same here....
The bar is frozen and doesn't load anything...
Written %UNITY_WEBGL_LOADER_GLUE% to the top left... ...

 

Reupload

 

The Unity 5.6 doesn't use the %UNITY_WEBGL_LOADER_GLUE% anymore. See https://forum.unity3d.com/threads/new-unity-webgl-embedding-api-white-paper.430909/

 

For the newest versions of Unity (5.6.x - 2017) I had to rewrite the file TemplateData/UnityLoader.js to this:

Code (JavaScript):

1. var loadingData = {};
2. loadingData.progress = 0.0;
3. loadingData.message = "";
4.  
5. loadingData.SetProgress = function (progress)
6. {
7.     if (loadingData.progress < progress)
8.     {
9.         loadingData.progress = progress;
10.     }
11.     if (progress == 1)
12.     {
13.         loadingData.SetMessage("Preparing...");
14.         document.getElementById("spinner").style.display = "inherit";
15.         document.getElementById("bgBar").style.display = "none";
16.         document.getElementById("progressBar").style.display = "none";
17.     }
18.     loadingData.Update();
19. }
20.  
21. loadingData.SetMessage = function (message)
22. {
23.     loadingData.message = message;
24.     loadingData.Update();
25. }
26.  
27. loadingData.Update = function()
28. {
29.     var length = 200 * Math.min(loadingData.progress, 1);
30.     bar = document.getElementById("progressBar");
31.     createjs.Tween.removeTweens(bar);
32.     createjs.Tween.get(bar).to({width: length}, 500, createjs.Ease.sineOut);
33.     document.getElementById("loadingInfo").innerHTML = loadingData.message;
34. }
35.  
36. loadingData.Clear = function()
37. {
38.     document.getElementById("loadingBox").style.display = "none";
39. }
40.  
41. function UnityProgress(gameInstance, progress)
42. {
43.  
44.   if (!gameInstance.Module)
45.     return;
46.   if (!gameInstance.progress)
47.   {
48.       //INITIALIZATION
49.     gameInstance.progress = document.getElementById("loadingBox");
50.  
51.     createjs.CSSPlugin.install(createjs.Tween);
52.     createjs.Ticker.setFPS(60);
53.  
54.   }
55.   loadingData.progress  = progress;
56.   loadingData.Update();
57.  
58.   if (progress == 1)
59.   {
60.         loadingData.SetMessage("Preparing...");
61.         document.getElementById("spinner").style.display = "inherit";
62.         document.getElementById("bgBar").style.display = "none";
63.         document.getElementById("progressBar").style.display = "none";
64.   }
65.  
66. }
67.  
68. //Called from Unity on Awake
69. function FinishedLoading()
70. {
71.     loadingData.Clear();
72.  
73. }
74.  

The function FinishedLoading is called from Awake() in a script that's in the first loaded scene using Application.ExternalCall():

Code (CSharp):

1. private void Awake()
2. {
3.     Application.ExternalCall("FinishedLoading");
4. }

 

Can anyone post a link with working template for 2017 version? thanks

 

How would I add a pre-loading place holder like the play button on a video, where the user has to click to trigger the game to load?

 

I am totally guessing here but, I expect you need to just add a html/css/what-not button which calls the:

Code (CSharp):

1.         var gameInstance = UnityLoader.instantiate("gameContainer", "%UNITY_WEBGL_BUILD_URL%", {
2.             onProgress: UnityProgress
3.         });

part of the index.html.

Could be wrong, but I can't see why that wouldn't work.

 

Here's some code I used to get this to work:

Code (csharp):

1. <div class="unitywebgl-container">
2.    <div class="clicktoload" href="#" onclick="runUnityLoader();">
3.        <div class="logo -middle">Click to Load</div>
4.    </div>
5.    <div class="logo -corner">WebGL</div>
6.    <canvas class="emscripten canvas" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
7. </div>
8.  
9. <script type='text/javascript'>
10.    var Module = {
11.        TOTAL_MEMORY: 20000000,
12.        errorhandler: null,           // arguments: err, url, line. This function must return 'true' if the error is handled, otherwise 'false'
13.        compatibilitycheck: null,
14.        backgroundColor: "#F8F8F8",
15.        splashStyle: "Light",
16.        dataUrl: "{{ site.baseurl }}/Game.data",
17.        codeUrl: "{{ site.baseurl }}/Game.js",
18.        asmUrl: "{{ site.baseurl }}/Game.asm.js",
19.        memUrl: "{{ site.baseurl }}/Game.mem",
20.    };
21.  
22.    $(".clicktoload").click(function () {
23.        $(".clicktoload").css("display", "none");
24.    });
25.  
26.    function runUnityLoader() {
27.        var script = document.createElement("script");
28.        script.src = "{{ site.baseurl }}/Release/UnityLoader.js";
29.        document.body.appendChild(script);
30.    }
31.  
32.    // https://stackoverflow.com/questions/2190801/passing-parameters-to-javascript-files
33.  
34. </script>

When clicked, everything inside "clicktoload" class gets hidden, and "runUnityLoader" creates the actual unity game which will start to load (you'll notice the browser hang for a second).

CSS:

Code (csharp):

1.  
2. .unitywebgl-container {
3.    position: relative;
4. }
5. .unitywebgl-container .logo {
6.    position: absolute;
7.  
8.    display: flex;
9.    align-items: center;
10.    justify-content: center;
11.    text-align: center;
12.  
13.    color: #fff;
14.  
15.    background: #00b7ff;
16.    border-radius: 50%;
17.    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3) inset;
18. }
19. .unitywebgl-container .logo.-corner {
20.    margin: 20px;
21.    width: 50px;
22.    height: 50px;
23.    font-size: 16px;
24.    background: #ff004c;
25. }
26. .unitywebgl-container .logo.-middle {
27.    width: 150px;
28.    height: 150px;
29.    font-size: 22px;
30. }
31. .unitywebgl-container .clicktoload {
32.    cursor: pointer;
33.  
34.    position: absolute;
35.  
36.    width: 100%;
37.    height: 100%;
38.  
39.    display: flex;
40.    align-items: center;
41.    justify-content: center;
42.  
43.    box-sizing: border-box;
44.  
45.    background: #ffffff;
46.    border: 10px solid rgba(0,0,0,0.01);
47.  
48.    z-index: 999;
49. }
50. .unitywebgl-container .canvas {
51.    width: 100%;
52. }