Base URL for Textures using AssetManager

[flux159]

Hi! I've been using Babylon for a week or so now and really like how easy it is to use and how well the tutorials are written (I'm using it for a robotics simulation project I'm currently working on). Anyways, I have a question about how textures (and other AssetTasks as well: https://github.com/BabylonJS/Babylon.js/blob/master/src/Tools/babylon.assetsManager.ts) are loaded using the AssetManager.

I have a texture image that's being served at /app/assets/sceneassets/mytextureimg.jpg. My Babylon scene is loaded at the url /app/testbabylon. When I try to load a texture using the addTextureTask method of the AssetManager, I specify that the asset is located at "/app/assets/sceneassets/mytextureimg.jpg", however, the network request that the AssetManager makes is to "/app/testbabylon/app/assets/sceneassets/mytextureimg.jpg". This is clearly relative to my current path, I can use an absolute path (in dev: "http://localhost:4000/app/assets/sceneassets/mytextureimg.jpg") and it works correctly, however this seems messy (especially if switching domains). 

If I end up using "//app/assets/sceneassets/mytextureimg.jpg" the network request is "http://app/assets/sceneassets/mytextureimg.jpg" - which doesn't point to anything.

My main question is whether its possible to specify the AssetManager to use the root url of my domain for texture (and/or image, cubetexture, etc.) loading (or have something like a "rootUrl" parameter like AddMeshTask seems to have).

Just for reference, here's a snippet of the code I'm using (material is an object that has a name and diffuseTexture property; where diffuseTexture is the url string, scene is a Babylon Scene object).

  setupMaterial(material, scene) {
    const babylonMaterial = new Babylon.StandardMaterial(material.name, scene);

    if (material.diffuseTexture) {
      const diffuseTask = scene.loader.addTextureTask(
        `diffuseTextureTask${material.name}`, material.diffuseTexture);

      diffuseTask.onSuccess = (task) => {
        babylonMaterial.diffuseTexture = task.texture;
      };
    }

    return babylonMaterial;
  }

Thanks for any help,

Flux159

[GameMonetize]

Hello there must be something else because I can reference my texture with a "/something" here:

http://www.babylonjs-playground.com/#28G6UT#45

[flux159]

Thanks for the reply - I think what you're referencing in http://www.babylonjs-playground.com/#28G6UT#45 is slightly different than my case. Checking the window.location of that link gives a pathname property of "/" (the hash property is "#28G6UT#45"). A relative reference would only use the pathname and not the hash (I think - I'm not entirely sure about that). 

I think something more similar would be trying to use the sandbox https://babylonjs.azurewebsites.net/sandbox/ and trying to access a texture from 'https://babylonjs.azurewebsites.net/assets/texture.jpg' using only the path string '/assets/texture.jpg' and not the absolute url.

I don't know if the sandbox would support something like that (don't have too much experience using it).

Anyways, I was able to get around the issue entirely last night by using a dynamic configuration that provides the correct base url for me.

Thanks,

Flux159

 

[GameMonetize]

Does "../assets/texture.jpg" work? 

[aWeirdo]

starting a url string with " // " is like writing http:// or https://

 // will use which ever type of connection you are using, so if you're on a secure https:// connection to a website, // will also use https:// in your url string. 

relative paths does this already, // is usually only used when loading off-site assets / plugins to avoid security issues on ssl connections.

So using relative paths;

You texture is located in;

"/app/assets/sceneassets/mytextureimg.jpg",

and the file you are trying to load the texture from is in;

"/app/testbabylon/".

 

Which means we need to go one folder back, to the "app" folder, and then into "assets", etc and it should work;

 "./" (Dot Slash) means starting from the same folder as the file containing the url string,

"../" (Dot Dot Slash) means starting one folder back from the file containing the url string.

So, the result would be;

"../assets/sceneassets/mytextureimg.jpg" as Deltakosh pointed out above.

 

Futher explaination;

"../" Dot Dot Slash is the same as writing Dot Slash Dot Dot Slash "./../"

Dot Slash Dot Dot Slash, just means starting from the same folder as the file containing the url string, and then going one folder back. 

This method can be used until you reach the root / public folder,

e.g. on apache PHP servers that would usually be called either www or public or public_html,
for security reasons you can't go further back than that folder, but you can go back to it.

Say you want to go from "public/app/html/TestApp/index.html"

and reach a image here; "public/images/image.png"

the string in the index.html would be; "./../../../images/image.png"

 

I hope it makes sense  

[flux159]

Sorry, I should have clarified this earlier - I understand relative directories above the existing directory - its what I did not want to do (if my route changes in the future from /app/testbabylon to /app/somethingelse/babylon, all those links are broken unless I also move the assets).

Going to mark this as resolved since its better for my case to use absolute paths anyways, which I've already done and it works fine.

[jerome]

just a pedantic precision :

With URL, we don't speak about "folders" but about "paths" ! http://foo.com/bar/resource

"http" is the scheme, usually the protocol used to reach the resource

"foo.com" is the domain name, usually the name of the server hosting the resource

"bar/resource" is the path to reach the resource "resource"

"bar" is not necesseraly a folder in the file system of the server "foo.com". It may be mapped to some existing folder "bar" (ex : /var/www/html/bar in some linux distro with the web server Apache with the default settings), like it could be mapped to something fully different with nothing to do with the name "bar" (ex : /vg-45643/web/public_html/sites/zbob4543)