OpenGL ES 2.0全屏四边形采样纹理时出现异常边缘问题

你的核心问题出在Mipmap采样逻辑和纹理坐标边界处理上，以下是具体原因和修复步骤：

1. Mipmap导致边缘颜色溢出 #

你在render()中设置了GL_TEXTURE_MIN_FILTER = GL_LINEAR_MIPMAP_LINEAR，同时在fillTexture()中生成了Mipmap层级。当纹理坐标接近图片边缘时，Mipmap会自动采样低分辨率层级，而低层级纹理会把边缘的红色与透明区域混合，最终出现非预期的红色边缘，顶部的渐变消失也是Mipmap模糊化采样的结果。

修复： #

如果无需多分辨率纹理采样，直接禁用Mipmap：

• 修改render()中的纹理过滤参数：

// 替换原MIN_FILTER设置，移除Mipmap依赖
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);

• 在fillTexture()中删除glGenerateMipmap(GL_TEXTURE_2D);，避免不必要的Mipmap生成。

2. 纹理坐标的边界精度漏洞 #

片段着色器中，坐标计算存在浮点精度问题：当fullscreenTextureCoordinates接近边缘时，计算出的imageTextureCoordinates可能微小超出[0,1]范围，结合Mipmap会放大误差影响；同时原边界判断逻辑重复计算坐标，容易出现精度偏差。

修复片段着色器： #

void main() {
    float left = imagePosition[0];
    float top = imagePosition[1];
    float right = imagePosition[2];
    float bottom = imagePosition[3];

    // 先计算纹理坐标，再做边界钳制
    float u = (fullscreenTextureCoordinates.x - left) / (right - left);
    float v = 1.0 - (fullscreenTextureCoordinates.y - top) / (bottom - top);
    
    // 强制把坐标限制在[0,1]范围内，避免浮点误差越界
    u = clamp(u, 0.0, 1.0);
    v = clamp(v, 0.0, 1.0);

    // 用step判断是否在显示区域内，生成透明遮罩
    float showMask = step(left, fullscreenTextureCoordinates.x) * step(fullscreenTextureCoordinates.x, right) *
                    step(1.0 - bottom, fullscreenTextureCoordinates.y) * step(fullscreenTextureCoordinates.y, 1.0 - top);

    vec4 texColor = texture2D(imageTexture, vec2(u, v));
    gl_FragColor = vec4(texColor.rgb, texColor.a * showMask);
}

3. 纹理参数设置时机优化 #

你在render()中每次绑定纹理都重复设置参数，而fillTexture()中首次创建纹理时未配置参数，会导致初始渲染使用GL默认参数（如GL_REPEAT）引发异常。建议将参数配置移到fillTexture()中：

void MapOverlayRenderer::fillTexture() {
    if (!_image.valid()) {
        return;
    }

    glBindTexture(GL_TEXTURE_2D, texture);

    // 先配置纹理参数，确保创建时就生效
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);

    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, static_cast<GLsizei>(_image.size.width), static_cast<GLsizei>(_image.size.height), 0, GL_RGBA,
                 GL_UNSIGNED_BYTE, _image.data.get());
}

额外检查点 #

• 确认PremultipliedImage的格式正确性：预乘alpha的图片直接采样是正确的，若图片实际未预乘alpha，会导致透明度计算异常，间接影响边缘显示。
• 验证_leftPadding、_topPadding等参数是否为0-1范围内的归一化坐标，参数越界会直接导致纹理坐标计算错误。

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