texImage2D: width or height out of range, chrome 24

5
votes

I just started looking into the good stuff Three.js has to offer.

Now while trying to render a sphere with a texture I run into a problem.

I created a photosphere image and tried to load it onto a sphere.

I am using the WebGL renderer build into Three.js (got the latest zip from GIThub).

Two things are puzzeling me:

  1. The sphere including texture is rendered perfectly in both FF and Safari, but not in Chrome (24.0.1312.52).
  2. When I try another picture, from the example of @kennydude on github, it does work in all three tested browsers.

The only sign of something going wrong in Chrome I get is this warning:

WebGL: INVALID_VALUE: texImage2D: width or height out of range

My script is completely based on the example of @kennydude. I traced the error all the way back into the Three.js file r. 55 on line 25330. That is as far as I can get.

To get webGL running in Chrome I disabled the blacklist (my GPU appeared on that list).

Any ideas? Any help would be highly appreciated.

1
google-chromethree.jswebgl
btw you can try the faulty image on in2systems.nl/diensten – Bart
That message means the texture is larger than the GPU supports safely. Some GPU drivers have bugs when textures are too large. You can check the maximum size allowed by calling gl.getParameter(gl.MAX_TEXTURE_SIZE). If the texture you want to load is too large consider creating a canvas, draw the image into the canvas to resize it, then make a texture from the canvas. – gman
The image was indeed larger than the MAX_TEXTURE_SIZE of 4096 in my browser. I will apply resizing to tackle that problem. Cheers gman! – Bart

1 Answers

5
votes

Try resizing the image to a power of two size like 4096x1024.