2
\$\begingroup\$

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.

\$\endgroup\$
3
  • \$\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
    Commented Oct 12, 2012 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
    Commented Oct 12, 2012 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
    Commented Oct 17, 2012 at 16:26

1 Answer 1

Reset to default
3
\$\begingroup\$

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);
\$\endgroup\$
4
  • \$\begingroup\$ I've got these same declarations in my code, but it's still rendering non-pot textures as black. What else could one be missing? \$\endgroup\$
    – Reahreic
    Commented Aug 4, 2022 at 19:50
  • \$\begingroup\$ did you set gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);? \$\endgroup\$
    – gman
    Commented Aug 4, 2022 at 21:58
  • \$\begingroup\$ I have TEXTURE_MIN_FILTER set to LINEAR_MIPMAP_LINEAR and TEXTURE_MAG_FILTER to GL.LINEAR Though I don't quite understand the min and mag filtering to effectively use them. \$\endgroup\$
    – Reahreic
    Commented Aug 5, 2022 at 12:18
  • \$\begingroup\$ you can't use LINEAR_MIPMAP_LINEAR without mips. webgl2fundamentals.org/webgl/lessons/webgl-3d-textures.html If you want help you'll need to ask new question and post a minimal repo \$\endgroup\$
    – gman
    Commented Aug 6, 2022 at 15:00

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .