search

patriciogonzalezvivo / glslCanvas

Simple tool to load GLSL shaders on HTML Canvas using WebGL
http://patriciogonzalezvivo.github.io/glslCanvas/
MIT License
1.99k stars 183 forks source link

Loading texture image from S3 results in CORS issue #20

Open cmalven opened 6 years ago

cmalven commented 6 years ago

First of all, glslCanvas is great. By far the easiest way I've found so far to get working shaders onto a webpage. Thanks for your work on it, and Book of Shaders.

I'm tearing my hair out trying to resolve an issue I'm having loading a texture from an Amazon S3 bucket in Chrome and Safari. Firefox works just fine.

I'm specifying the texture path as a data-texture attribute like so:

<canvas data-textures="http://s3-us-west-1.amazonaws.com/my-bucket/image.jpg" width="900" height="380" data-fragment=""></canvas>

When glslCanvas attempts to load the texture, I get an error:

Access to Image at 'http://s3-us-west-1.amazonaws.com/my-bucket/image.jpg' from origin 'http://foo.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://foo.com' is therefore not allowed access.

When the image does load (which I've accomplished by testing with a local texture source) the shader works great. Occasionally, but not often, the textures will successfully load without me doing anything different, which makes troubleshooting this very difficult. Every time I think "Oh! It magically works now!" turns out it was a fluke and I'm back to the beginning.

I have the CORS on my s3 bucket set up appropriately, as well as in my sites .htaccess. I'm using other tools which are also using javascript to load images from the same s3 bucket, so it would seem that it may be unique to something glslCanvas is doing.

Anybody else have any experience with this?

patriciogonzalezvivo commented 6 years ago

Hi! thanks! Thanks for the patience on the replay. Hope is not to late!

CORS error have been a big mystery for my too. I found that is better to work this issue disabling the Browser cache. Other wise once is loaded will get it from memory instead of downloading it and dealing with the server settings.

Wonder if there is a problem between HTTP and HTTPS.

Have you made any progress on your own. Again sorry for not having more experience with CORS issues