为何部分PNG无法在WebGL中使用gl.REPEAT设置gl.TEXTURE_WRAP_S/T？

我用这段代码设置WebGL纹理重复：

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);

第一张尺寸较大的PNG能正常实现纹理平铺，但从它截取得到的第二张截图却失效，WebGL画布完全没内容，两张图用的是完全一样的代码。

问题原因 #

WebGL的REPEAT纹理环绕模式有硬性要求：纹理的宽和高必须是2的幂次方（比如2、4、8、16…1024、2048这类数值）。原始图尺寸刚好符合这个要求，所以正常；而截图得到的第二张图，尺寸大概率不是2的幂，导致REPEAT模式直接失效，甚至无法渲染纹理。

解决办法 #

1. 调整图片尺寸为2的幂次方
   用图像编辑工具（PS、GIMP、在线工具都行）把第二张图的宽高改成最近的2的幂数值，比如截图是150x150，就改成256x256。

2. 改用CLAMP_TO_EDGE环绕模式（不需要重复的话）
   如果不需要纹理重复，把参数换成CLAMP_TO_EDGE，非2幂尺寸也能正常显示：

   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
   

3. 启用非2幂纹理扩展（浏览器支持的话）
   检查并启用OES_texture_npot扩展，让WebGL允许非2幂纹理使用REPEAT模式：

   const npotExt = gl.getExtension('OES_texture_npot');
   if (npotExt) {
       // 扩展启用成功，可正常用REPEAT
   } else {
       // 浏览器不支持，换前两种方法
   }
   

内容的提问来源于stack exchange，提问作者anglewings