CORS images with WebGL

[mariogarranz]

Some of our games images need to be loaded from an external server. The game may be played on different sites, but these images need to remain always on the same default site.


It's an Amazon AWS S3 server, where we declared the images to be public, which apparently enables CORS loading. It works just fine with CANVAS mode, but when we use WebGL mode we get this error:

 

 

Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at ---- may not be loaded. 

 

 

I have read about some other people having this problem with PIXI, but the problem seems to be with CORS not being enabled (which is not our problem, because these images are being loaded correctly for CANVAS drawing).

Is this normal? Shall we use any special headers when loading these images? Amazon S3 servers don't seem to have many other options to configure CORS other than making files public.

[bryanbibat]

Did you set the game.load.crossOrigin to 'anonymous' or the S3's domain before preloading the assets?

[mariogarranz]

Thanks for answering bryanbait.

I solved this by setting the crossOrigin you mentioned. Also some configuration was missing on the S3 side. The biggest problem was that some images were loaded previously as non-Phaser (for CSS layers) elements, and because these were loaded before Phaser.Loader started doing its stuff, their configuration prevailed, which took me quite some time to notice.

It's now all working just fine.

 

Thanks for your help, I hope this may help anyone else as well.