So this question is related to a previous post made at https://gamedev.stackexchange.com/questions/38829/webgl-texture-appears-as-black
I was having problems rendering a texture http://www.html5canvastutorials.com/cookbook/ch9/1369_09_06/crate.jpg , which is an even power of 2 (despite the changes recommended in the previous post)
I put a fork on JSFiddle , and after playing around with several images, it seems some textures render and some do not. Specifically this is detailed in the code
image.src = 'https://lh4.googleusercontent.com/-Y2gO2Ex8Q10/T588LBJKq7I/AAAAAAAAgzc/XKpph-vQWiw/s686/_DSC4127+-+Version+2.jpg';
// The original texture runs fine
image.src = 'http://webglfundamentals.org/webgl/resources/f-texture.png'
// As does this texure from WebGLFundamentals
image.src = 'http://www.html5canvastutorials.com/cookbook/ch9/1369_09_06/crate.jpg';
// But the crate texture does not want to show
image.src = 'https://dev.opera.com/articles/raw-webgl-part-2-simple-shader/figure3.png'
// Neither does this Red-Green-Yellow gradient
What am I missing in the JSFiddle code terms of being able to render the texture correctly?
I know its NOT an issue with the image and it must be a setting somewhere since its working correctly at the page located at http://www.html5canvastutorials.com/cookbook/ch9/1369_09_06/
Any help would be greatly appreciated!!
Thanks.
You have a problem with Cross-Origin Resource Sharing .
In dev-tools console output you can see:
Image from origin 'http://www.html5canvastutorials.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access.
For security reasongs, you are only allowed to load images from your own domain or from those who specifically allow it, by setting the Access-Control-Allow-Origin
header.
Only images on lh4.googleusercontent.com
and dev.opera.com
return with the header Access-Control-Allow-Origin: *
and are the only ones that work.
You will need to host the images on your own server, or if you need to load from and arbitrary URL you will need an image proxy on your server.
If you are just playing with WebGL, you can use crossorigin.me and use your image as:
http://crossorigin.me/http://www.html5canvastutorials.com/cookbook/ch9/1369_09_06/crate.jpg
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.