Unity WebGL External Assets

Question

I'm developing some webGL project in Unity that has to load some external images from a directory, it runs all fine in the editor, however when I build it, it throws a Directory Not Found exception in web console. I am putting the images in Assets/StreamingAssets folder, that will become StreamingAssets folder in the built project (at root, same as index.html). Images are located there, yet browser still complains about not being able to find that directory. (I'm opening it on my own computer, no running web server)

I guess I'm missing something very obvious, but it seems like I could use some help, I've just started learning unity a week ago, and I'm not that great with C# or JavaScript (I'm trying to get better...) Is this somehow related to some javascript security issues?

Could someone please point me in the right direction, how I should be reading images(no writing need to be done) in Unity WebGL?

string appPath = Application.dataPath;
string[] filePaths = Directory.GetFiles(appPath, "*.jpg");

According to unity3d.com in webGL builds everything except threading and reflection is supported, so IO should be working - or so I thought:S

I was working around a bit and now I'm trying to load a text file containing the paths of the images (separated by ';'):

    TextAsset ta = Resources.Load<TextAsset>("texManifest");
    string[] lines = ta.text.Split(';');

Then I convert all lines to proper path, and add them to a list:

    string temp = Application.streamingAssetsPath + "/textures/" + s;
    filePaths.Add(temp);

Debug.Log tells me it looks like this:

file://////Downloads/FurnitureDresser/build/StreamingAssets/textures/79.jpg

So that seems to be allright except for all those slashes (That looks a bit odd to me)

And finally create the texture:

    WWW www = new WWW("file://" + filePaths[i]);
    yield return www;
    Texture2D new_texture = new Texture2D(120, 80);
    www.LoadImageIntoTexture(new_texture);

And around this last part (unsure: webgl projects does not seem easily debuggable) it tells me: NS_ERROR_DOM_BAD_URI: Access to restricted URI denied

Can someone please enlighten me what is happening? And most of all, what would be proper to solution to create a directory from where I can load images during runtime?

Answer 1

I realise this question is now a couple of years old, but, since this still appears to be commonly asked question, here is one solution (sorry, the code is C# but I am guessing the javascript implementation is similar). Basically you need to use UnityWebRequest and Coroutines to access a file from the StreamingAssets folder.

1) Create a new Loading scene (which does nothing but query the files; you could have it display some status text or a progress bar to let the user knows what is happening).

2) Add a script called Loader to the Main Camera in the Loading scene.

3) In the Loader script, add a variable to indicate whether the asset has been read successfully:

private bool isAssetRead;

4) In the Start() method of the Loading script:

void Start ()
{
  // if webGL, this will be something like "http://..."
  string assetPath = Application.streamingAssetsPath;

  bool isWebGl = assetPath.Contains("://") || 
                   assetPath.Contains(":///");

  try
  {
    if (isWebGl)
    {
      StartCoroutine(
        SendRequest(
          Path.Combine(
            assetPath, "myAsset")));
    }
    else // desktop app
    {
      // do whatever you need is app is not WebGL
    }
  }
  catch
  {
    // handle failure
  }
}

5) In the Update() method of the Loading script:

void Update ()
{
  // check to see if asset has been successfully read yet
  if (isAssetRead)
  {
    // once asset is successfully read, 
    // load the next screen (e.g. main menu or gameplay)
    SceneManager.LoadScene("NextScene");
  }

  // need to consider what happens if 
  // asset fails to be read for some reason
}

6) In the SendRequest() method of the Loading script:

private IEnumerator SendRequest(string url)
{
  using (UnityWebRequest request = UnityWebRequest.Get(url))
  {
    yield return request.SendWebRequest();

    if (request.isNetworkError || request.isHttpError)
    {
      // handle failure
    }
    else
    {
      try
      {
        // entire file is returned via downloadHandler
        //string fileContents = request.downloadHandler.text;
        // or
        //byte[] fileContents = request.downloadHandler.data;

        // do whatever you need to do with the file contents
        if (loadAsset(fileContents))
          isAssetRead = true;
      }
      catch (Exception x)
      {
        // handle failure
      }
    }
  }
}