Loading skybox from url, experiencing problems. WebGL, Stutter, Mobile.

Sorry if I am using the wrong forum, please direct me elsewere if that's the case.

Hi, I am building a project that needs to load the skybox (/Panoramic) from a url (.jpg, 6720x3360 ~= 1-2MB) during runtime, but I am experiencing certain difficulties.

1. Problem [major]: The plan is to use the webgl application, but when using chrome for android after the image is loaded, the skybox is not replaced by the new photo, but instead the blank blue one is set. This is also the case on lower end smartphones when creating an apk version of the tool. I believe this is a memory issue as after a few skyboxes are loaded an error pops up (webgl). Although it works great on firefox for android. iOS devices don't seem to suffer from this.
2. Problem [minor]: After the image is downloaded, a stutter follows (0.2-1 sec depending on the device). Do you believe there's a way to mitigate this?

The code I am using is this:

Code (CSharp):

1. using System.Collections;
2. using UnityEngine;
3. using UnityEngine.Networking;
4.  
5. public class OnlineSkybox : MonoBehaviour
6. {
7.  
8.         public string url = "";
9.         public Material skyboxMat;
10.  
11.         void Start()
12.         {
13.             StartCoroutine(GetTexture());
14.         }
15.  
16.         IEnumerator GetTexture() {
17.             UnityWebRequest www = UnityWebRequestTexture.GetTexture(url);
18.             yield return www.SendWebRequest();
19.  
20.             if(www.result == UnityWebRequest.Result.ProtocolError) {
21.                 Debug.Log(www.error);
22.             }
23.             else {
24.                 // Texture loadedImage = ((DownloadHandlerTexture)www.downloadHandler).texture;
25.                 Texture loadedImage = DownloadHandlerTexture.GetContent(www);
26.                 skyboxMat.SetTexture("_MainTex", loadedImage);
27.             }
28.         }
29. }

Stutter is certainly caused by this:

Texture loadedImage = DownloadHandlerTexture.GetContent(www);

But this makes it longer and causes the bug with the blue skybox:

skyboxMat.SetTexture("_MainTex", loadedImage);

Do you have any ideas?

 

Oh I see... Anyone else that can help please do! I know that webgl has problems with low end devices and that is totally understandable. But is there a way to mitigate these by lowering the quality of the build or smth?​

 

FYI

https://docs.unity3d.com/Manual/webgl-browsercompatibility.html

So running into issues is kind of expected.

 

The texture dimensions are exceeding what the device can handle. Try limiting it to 4096 in either dimension.

You are running out of memory because the texture downloaded is being decompressed as RGB24 and the device used cannot handle that much. Use the profiler to see how much memory that texture is actually taking.
Do know that all textures you download with UnityWebRequest you have to destroy them explicitly. Unity does not clean this for you. so

Destroy(texture);

to free up that memory you've used. If you don't, you just pile up textures in memory until it crashes.

The stutter you're seeing is because of unity decompressing and loading the image into memory.
Jpg and Png's aren't compatible formats for the GPU. If used at runtime they have to be decompressed to RGB24 (jpg) or RGB32 (png). Then it has to be uploaded to the GPU. All this takes time and is not asynchronous AFAIK.

iOS uses WebGL 1.0 which is comparable to OpenGLES 2
Android uses WebGL 2.0 which is comparable to OpenGLES 3
WebGL has its own limitations, I'd still say it is the worst platform to support in comparison to native platforms.

Unity is trying to support mobile slowly. They already removed the warning but the content mostly runs terrible.

 

Thank you a lot. I have performed various tests and yes indeed limiting it to 4096 works perfectly and the stutter is more subtle. (Some browsers dont have a problem with higher resolution)

Is there a format of a file that I can upload, compatible with the GPU to limit the stutter and recources needed?