WebGL texParami设置导致纹理渲染为黑色

Question

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.

Answer 1

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

You can read more about CORS here and here .