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.

  • \$\begingroup\$ 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 \$\endgroup\$
    – Neenster
    Oct 12 '12 at 13:13
  • \$\begingroup\$ 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. \$\endgroup\$
    – Randomblue
    Oct 12 '12 at 13:25
  • \$\begingroup\$ 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. \$\endgroup\$
    – user1430
    Oct 17 '12 at 16:26

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);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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