WebGL和两个图像大小的力量

Question

我想用WebGL制作一个Flickr照片流的3D画廊.看起来WebGL只允许使用尺寸为2的幂的方形图像作为纹理.我需要能够显示任何比例和尺寸的图像.我可以看到,如果我将图像数据复制到另一个最近的方形尺寸的图像中,然后使用纹理坐标使其显示正确.问题是,如果我错了,请纠正我,我不能在JavaScript中进行图像处理,并且需要运行ASP.NET,Java或类似的服务器才能在WebGL获取之前为我处理在上面.

有没有办法在WebGL和JavaScript中使用任意大小的图像而不需要服务器充当中间人图像处理器？

Answer 1

如果您执行以下命令,我对npot纹理(FF和chrome)没有任何问题:

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

这个页面很好地总结了这种情况(并且或多或少地重申了其他回答者已经说过的内容).基本上,WebGL不支持使用mipmapping和/或重复的NPOT纹理.如果没有这些模式就无法逃脱,可以在2D画布中调整纹理大小.该页面包含一些方便的画布调整大小的代码.

更新: WebGL2,WebGL的下一个版本,支持NPOT纹理.

Answer 3

我不太了解底层细节，无法完全回答您的问题，但我发现了一些内容：

\n\n

这篇文章并不鼓舞人心：

\n\n

\n

Minefield 中的纹理处理已更新，以便更好地匹配规范；以前，它非常宽容[...]，并允许您使用从 WebGL 角度来看并不真正有效的纹理。现在\n 不\xe2\x80\x99t [...] 你\xe2\x80\x99 将看到一条错误\n 消息，指出\n\xe2\x80\x9cA 纹理将\n 渲染为黑色，按照\n OpenGL ES 2.0.24 规范部分\n 3.8.2，因为它是 2D 纹理，带有缩小过滤器，\n 不需要 mipmap，其宽度或\n 高度不是 2 的幂，并且换行模式与 CLAMP_TO_EDGE 不同。\xe2\x80\x9d

\n

\n\n

我不知道这些额外条件是否适用于您的应用。另请参阅OpenGL ES 规范。

\n\n

该线程相当深入地讨论了对“NPOT”的支持：

\n\n

\n

\n

\n

\n

OpenGL 以两种方式支持 NPOT 纹理。第一个称为“矩形纹理”(RT)，它可以是任意大小，但不能重复、mip 映射或有边框。他们不使用 0-1 纹理坐标，而是使用 0-w、\n 0-h。OpenGL 还支持真正的 NPOT 纹理，它具有与 RT 类似的约束，但使用正常的 0-1 纹理坐标。

\n\n

问题是一些较旧的硬件（当我说“较旧”时，我指的是 2005 年的硬件）仅支持 RT，而不是真正的 NPOT。当您只有 RT 支持时，不可能模拟 NPOT，因为在 GLSL 中您使用不同的 RT 采样器（sampler2DRect 与 Sampler2D）。

\n\n

OpenGL ES 仅支持 NPOT，不支持 RT。

\n

\n

\n

\n

\n\n

...

\n\n

\n

\n

\n

WebGL 实现可以在 texImage2D 和 texSubImage2D\n 调用期间将 NPOT 纹理数据缩放到二维的下一个最高幂。这不会涉及任何 API 更改。O3D 在某些情况下这样做是为了证明该技术可以在最终用户不知情的情况下发挥作用。我认为在 WebGL API 中公开矩形纹理是一个坏主意；它们绝对不是前进的道路。

\n

\n

\n

\n\n

所以，拿那个FWIW......

\n