Google Chrome and Firefox are blocking cross-domain image in WebGL (because of a security issue). This is really annoying when you want to display image from other domain in WebGL. To bypass this same-origin-policy restriction you have several options:
- Ask the other domain to add a CORS http header
- Use a proxy
- Use my trick
Ok, to be honest my “trick” only work for browser extensions (tested with Google Chrome extension only). How is it working?
- Add the domain in the list of allowed cross-domain ajax call in the manifest of the extension.
- Do a binary ajax request on the jpeg
- Parse the jpeg in javascript using jpgjs
- Fill the WebGL texture with the jpeg decoded in JS
The drawbacks are that it can only be used by browser extensions and that JS jpeg decoding is slow compared to native decoding.
I’ve used this workaround to add the pictures in my WebGL PhotoSynth Viewer extension.
I’ve posted a new version which is really much faster.
Would converting the jpeg to a data url and creating an image from that work? I suspect it would be faster than jpgjs.
@John: yes, but the obvious next question is: how do you convert the jpeg to data url? Because feeding (using drawImage) a canvas with it and calling toDataURL won’t work because of the same origin policy restriction… Do you have an other way to get a data url in mind?
@John: Thanks for the explanation! (sent by mail) I’ve implemented your suggestion and it works like a charm!