webgl and the power of two problem

Question

I want to use webgl to make a little 3d gallery of flickr photo streams. It looks like webgl only allows square images thats 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 use arbitrarily sized images in webgl and javascript without the need for a server to act as a middle man image processor?

Answer 1

I don't understand the low-level details well enough to completely answer your question, but here are some things I found:

This post is not encouraging:

Texture handling has been updated in Minefield so that [it] better matches the specification; previously it was quite forgiving [...] and allowed you to use textures that weren’t really valid from a WebGL viewpoint. Now it doesn’t [...] you’ll see an error message saying “A texture is going to be rendered as if it were black, as per the OpenGL ES 2.0.24 spec section 3.8.2, because it is a 2D texture, with a minification filter not requiring a mipmap, with its width or height not a power of two, and with a wrap mode different from CLAMP_TO_EDGE.”

I don't know if those extra conditions apply to your app. See also the OpenGL ES spec.

This thread goes fairly in-depth on support for "NPOT":

OpenGL supports NPOT textures in two ways. The first is called "Rectangle Textures" (RT), which can be any size, but can't be repeating, mip-mapped or have borders. And rather than using 0-1 texture coordinates, they use 0-w, 0-h. OpenGL Also supports true NPOT textures, which have similar constraints to RT, but which use the normal 0-1 texture coordinates.

The issue is that some older hardware (and when I say "older" I mean hardware from 2005) only supports RT, not true NPOT. It's not possible to emulate NPOT when you just have RT support because in GLSL you use a different sampler for RT (sampler2DRect vs sampler2D).

OpenGL ES only supports NPOT, not RT.

...

A WebGL implementation can scale up NPOT texture data to the next highest power of two dimension during texImage2D and texSubImage2D calls. This wouldn't involve any API changes. O3D does this in some cases as proof that the technique can work without the end user knowing. I think it would be a bad idea to expose rectangular textures in the WebGL API; they are definitely not the path forward.

So, take that FWIW...