WebGL2启用Mip-Mapping后绘制纹理四边形出现边界伪影求助

成因 #

1. MipMap自动生成时的跨边界采样：当纹理坐标处于0或1（刚好在纹理边缘），生成Mip层级时会对边缘外的像素进行采样。默认的纹理环绕模式是GL_REPEAT，这会把纹理另一侧的像素拉过来参与计算，导致最精细的Mip层边缘被污染——哪怕你大幅放大只用到最细Mip，这些被污染的边缘像素依然会显示为1像素伪影。
2. 浮点精度导致的层级偏移：邻近过滤下，哪怕理论上应该使用最细Mip层，纹理坐标的浮点误差可能让WebGL偶尔采样到上一层Mip，而这些Mip层的边缘已经被跨边界采样污染，进一步触发伪影。

解决方法 #

• 修改纹理环绕模式为钳位到边缘
  这是最简便有效的方案，让纹理边缘外的采样直接重复边缘像素，避免跨边界的错误采样。设置代码如下：

  // 设置S轴（水平）环绕模式
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  // 设置T轴（垂直）环绕模式
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  

  设置完成后重新生成MipMap，边缘伪影就会消失。

• 手动扩展纹理边缘像素
  如果业务需要保留GL_REPEAT环绕模式，可以给原始纹理的四周各添加1行/列和边缘完全相同的像素。比如原本256x256的纹理，扩展为258x258，上下左右分别复制原纹理的边缘像素。这样生成MipMap时，边缘采样会用到这些扩展的像素，不会拉到纹理另一侧的内容。

• 手动生成干净的Mip层级
  放弃WebGL的自动MipMap生成（gl.generateMipmap），自己手动计算每一层Mip的像素值，确保边缘采样逻辑正确。这个方法复杂度较高，仅在前两种方案无法满足需求时使用。

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