我想使用 WebGL 制作一个包含 Flickr 照片流的小型 3D 画廊。看起来 WebGL 只允许将尺寸为 2 次方的方形图像用作纹理。我需要能够显示任何比例和尺寸的图像。我可以看到，如果我将图像数据复制到另一个最接近正方形尺寸的图像中，然后使用纹理坐标使其正确显示。问题是，如果我错了，请纠正我，我不能在 JavaScript 中进行图像处理，需要运行 ASP.NET、Java 或类似的服务器来为我处理，然后 WebGL 才能得到它的手就可以了。
有没有一种方法可以在 WebGL 和 JavaScript 中使用任意大小的图像，而无需服务器充当中间人图像处理器？
【问题讨论】：
标签： javascript webgl
只要您执行，我对 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);
【讨论】：
This page 很好地总结了情况（或多或少地重申了这里其他回答者已经说过的话）。基本上，WebGL 不支持带有 mipmapping 和/或重复的 NPOT 纹理。如果没有这些模式就无法逃脱，可以在 2D 画布中调整纹理的大小。该页面包含一些用于调整画布大小的方便代码。
更新：WebGL2，WebGL 的下一个版本，supports NPOT textures。
【讨论】：
@EnabrenTane 提供的参考非常有帮助。 Non-Power of Two Texture Support
虽然 OpenGL 2.0 及更高版本的桌面版完全支持 非二次幂 (NPOT) 纹理，OpenGL ES 2.0 和 WebGL 只有 有限的 NPOT 支持。限制在第 3.8.2 节中定义， OpenGL ES 的“着色器执行”和 3.7.11“Mipmap 生成” 2.0 规范，总结如下：
- generateMipmap(target) 如果当前绑定到目标的纹理的级别 0 图像具有 NPOT，则生成 INVALID_OPERATION 错误 宽度或高度。
- 在着色器中对 NPOT 纹理进行采样将产生 RGBA 颜色 (0, 0, 0, 1)，如果：
- 缩小过滤器设置为 NEAREST 或 LINEAR 以外的任何值：换句话说，如果它使用 mipmapped 过滤器之一。
- 重复模式设置为除 CLAMP_TO_EDGE 之外的任何值；不支持重复的 NPOT 纹理。
【讨论】：
我不太了解底层细节，无法完全回答您的问题，但我发现了以下几点：
This post 不鼓励：
纹理处理已在 雷区，以便 [it] 更好地匹配 规范；以前是 相当宽容[...]并允许你 使用不真实的纹理 从 WebGL 的角度来看是有效的。现在它 不 [...] 你会看到一个错误 消息说“纹理将 呈现为好像它是黑色的，如 根据 OpenGL ES 2.0.24 规范部分 3.8.2，因为是2D贴图，没有缩小滤镜 需要一个 mipmap，其宽度或 高度不是 2 的幂，并且具有 换行模式不同于 CLAMP_TO_EDGE。”
我不知道这些额外条件是否适用于您的应用。另请参阅OpenGL ES spec。
This thread 相当深入地介绍了对“NPOT”的支持：
OpenGL 以两种方式支持 NPOT 纹理。第一个叫做“矩形 Textures" (RT)，可以是任意大小，但不能重复、mip-mapped 或 有边界。他们不使用 0-1 纹理坐标，而是使用 0-w， 0小时。 OpenGL 还支持真正的 NPOT 纹理，具有类似的约束 到 RT，但它使用正常的 0-1 纹理坐标。
问题是一些较旧的硬件（当我说“较旧”时，我的意思是 2005 年的硬件）仅支持 RT，不支持真正的 NPOT。这是不可能的 当您只有 RT 支持时模拟 NPOT，因为在 GLSL 中您使用 RT 的不同采样器（sampler2DRect 与 sampler2D）。
OpenGL ES 只支持 NPOT，不支持 RT。
...
WebGL 实现可以将 NPOT 纹理数据扩展到下一个 texImage2D 和 texSubImage2D 期间二维的最高功率 来电。这不会涉及任何 API 更改。 O3D 在某些情况下会这样做 案例证明该技术可以在没有最终用户的情况下工作 会心。我认为暴露矩形纹理是个坏主意 在 WebGL API 中；他们绝对不是前进的道路。
所以，拿那个 FWIW...
【讨论】：
一个简单的解决方案是使用 2d 画布调整大小并将其用作纹理。
【讨论】：