WebGL and the power of two image size

Question

I want to use WebGL to make a little 3D gallery of Flickr photo streams. It looks like WebGL only allows square images that's dimensions are a power of two to be used as textures. I need to be able to display images of any proportion and dimension. I can see that if I copy the image data into another image that is the nearest square dimension and then use texture coordinates to make it display right. The problem is, and correct me if I am wrong, that I can't do that image manipulation in JavaScript and would need a server running ASP.NET, Java or something like that to do the processing for me before WebGL could get its hands on it.

Is there a way of using arbitrarily sized images in WebGL and JavaScript without the need for a server to act as a middle man image processor?

Answer 1

I have no problem with npot textures (FF & chrome) provided that you execute:

texParameteri(TEXTURE_2D, TEXTURE_MAG_FILTER, LINEAR);
texParameteri(TEXTURE_2D, TEXTURE_MIN_FILTER, LINEAR);
texParameteri(TEXTURE_2D, TEXTURE_WRAP_S, CLAMP_TO_EDGE);
texParameteri(TEXTURE_2D, TEXTURE_WRAP_T, CLAMP_TO_EDGE);

Answer 2

This page nicely sums up the situation (and more or less restates what the other answerers here have already said). Basically, WebGL does not support NPOT textures with mipmapping and/or repeats. And if you can't get away without those modes, the texture can be resized in a 2D canvas. And the page includes some handy code for canvas resizing.

Update: WebGL2, the next version of WebGL, supports NPOT textures.