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