img.crossOrigin

[AndyBeaulieu]

In BABYLON.Tools.LoadImage, there is this code (which I think is relatively new):

            img.crossOrigin = 'anonymous';            img.src = url;

I understand this allows image textures to be downloaded from cross-origin sites (where allowed), but for some reason this is causing HTTP 304 Aborted on images hosted _locally_ when crossOrigin='anonymous' is on (if I remove this code then it I am ok again).

 

So for example, if my .babylon file references a .JPG file, and I place the file in the same dir as the .babylon file and load with BABYLON.SceneLoader.ImportMesh, then I get a 304 Aborted on any image references.

 

Does anyone have any ideas on this? It seems to happen on IE, FF, Chrome equally.

 

Thanks!

-Andy

 

 

[GameMonetize]

Sounds strange. I never get this issue

[gwenael]

Could it be your server settings that doesn't allow anonymous connection? Just an idea, I don't know much about it.

[AndyBeaulieu]

Yes, I should have thought about this a little more, it makes sense now 

 

In this case, we have a cookie-based authentication on the web site. 

 

So if we set:

 

crossOrigin = 'anonymous';

 

... then the cookie is not sent in the request headers for the texture images. Instead, we need to set:

 

crossOrigin = 'use-credentials';

 

... however, we only want to do this on img requests that are _internal_ to our own servers (in some cases, we go to texture images on other public servers).

 

So I am wondering if Babylon might benefit from having an option to set the crossOrigin on each image request somehow? 

 

 

... t

[gwenael]

I quickly read the code: you could add the crossOrigin parameter as is

BABYLON.Tools.LoadImage = function (url, onload, onerror, database, crossOrigin) {          var img = new Image();        img.crossOrigin = crossOrigin || 'anonymous';....

and pass 'use-credentials' when needed. Unfortunately I guess you don't directly call LoadImage or even BABYLON.Engine.prototype.createTexture, BABYLON.Engine.prototype.createRenderTargetTexture

or BABYLON.Mesh.CreateGroundFromHeightMap that call LoadImage internally. So you will have to add crossOrigin as parameter of these functions too and to the ones which call these functions... Not a good option I think.

 

You could rather add:

BABYLON.Tools.ImageCrossOrigin = 'anonymous';BABYLON.Tools.LoadImage = function (url, onload, onerror, database) {          var img = new Image();        img.crossOrigin = BABYLON.Tools.ImageCrossOrigin;...

and set BABYLON.Tools.ImageCrossOrigin when you want.

 

 

Last option, try:

BABYLON.Tools.LoadImage = function (url, onload, onerror, database) {          var img = new Image();        img.crossOrigin = 'use-credentials';...

maybe it will work on each case

[AndyBeaulieu]

In case anyone else hits this situation...

 

I ended up taking care of it on the server, by opening up the folders with textures to anonymous access, for example - 

 

  <location path="Images/skybox">

    <system.web>

      <authorization>

        <allow users="*" />

      </authorization>

    </system.web>

  </location>