Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

I have a simple WebGL canvas, where I'm attempting to render a texture on a square. When working with textures as local files, all is fine. But when I try to load a texture from the web, I get a black canvas.

Please see this fiddle for a demo. I have made the shaders and JavaScript very simple.

share|improve this question
    
I don't know if it matters (it can'be judged by the fiddle), but make sure that the loading of your texture complies to the cross-domain access rules: developer.mozilla.org/en-US/docs/WebGL/Cross-Domain_Textures –  Neenster Oct 12 '12 at 13:13
    
Yes, I've made sure to use Picasa (which does CORS) and to have the line image.crossOrigin = 'anonymous'; to indicate that I'm using CORS. –  Randomblue Oct 12 '12 at 13:25
    
There's no actual question here. You're far more likely to get results (and not have your post closed) if you ask a concrete question and place the relevant source or examples in the question itself, and not link to them externally. –  Josh Petrie Oct 17 '12 at 16:26

1 Answer 1

up vote 2 down vote accepted

You need to set the texture parameters for non-power of 2 textures. Adding these 2 lines fixed the issue

    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.