OpenGL自定义Image/Texture类集成stb_image后纹理边缘出现噪点

问题背景 #

• 基于stb_image封装自定义Image、Texture类后，部分纹理渲染时边缘出现噪点伪影
• 测试用图像尺寸为128x128，用该图像作为窗口图标时显示完全正常，初步排除基础图像加载流程错误

相关实现代码 #

Image类核心实现 #

Image::Image() {
    width = 0;
    height = 0;
    channels = 0;
    data = NULL;
}

Image::Image(const Image& image) {
    width = image.width;
    height = image.height;
    channels = image.channels;

    int allocation = image.width * image.height * image.channels;
    data = new unsigned char[allocation];
    std::memcpy(data, image.data, allocation);
}

Image& Image::operator=(const Image& image) {
    if (this != &image && image.data != nullptr) {
        if(data != NULL)
            delete[] data;
        data = NULL;

        int allocation = image.width * image.height * image.channels;
        data = new unsigned char[allocation];
        std::memcpy(data, image.data, allocation);

        width = image.width;
        height = image.height;
        channels = image.channels;
        filepath = image.filepath;
    }

    return *this;
}

Image::Image(const std::string& _filepath) {
    width = 0;
    height = 0;
    channels = 0;
    data = NULL;
    filepath = _filepath;

    data = stbi_load(filepath.c_str(), &width, &height, &channels, STBI_rgb_alpha);
    
    if (data == NULL) {
        Debug::systemErr("Couldn't load image: " + filepath);
    }
}

Image::~Image() {
    if (data != NULL) {
        delete[] data;
    }

    data = NULL;
}

bool Image::hasData() const{
    return (data != NULL);
}

Texture类核心实现 #

Texture::Texture() {
    textureID = 0;
}

Texture::Texture(const Texture& texture) {
    image = Image(texture.image);
    textureID = 0;
}

Texture::Texture(const std::string& path) {
    image = Image(path);
    textureID = 0;
}

Texture& Texture::operator=(const Texture& texture) {
    textureID = texture.textureID;
    image = texture.image;

    return *this;
}

Texture::~Texture() {
    destroy();
}

void Texture::destroy() {
    glDeleteTextures(1, &textureID);
}

void Texture::create() {
    if (!isCreated && image.hasData()) {
        glGenTextures(1, &textureID);
        glBindTexture(GL_TEXTURE_2D, textureID);

        //glPixelStorei(GL_UNPACK_ALIGNMENT, 1);

        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST_MIPMAP_LINEAR);
        glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
        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_RGBA8, image.width, image.height, 0, GL_RGBA, GL_UNSIGNED_BYTE, image.data);

        glGenerateMipmap(GL_TEXTURE_2D);

        isCreated = true;
    }
}

根因定位 #

调用stbi_load时虽然通过最后一个参数STBI_rgb_alpha强制指定输出RGBA格式，但传入的channels指针对应的变量不会自动同步为强制输出的4通道，仍保留图像原始的通道数（比如原图为三通道RGB时，channels值仍为3）。
这会导致Image类的拷贝构造、赋值逻辑计算内存大小时，按错误的3通道计算：

• 分配/拷贝的内存长度为width * height * 3，但实际stb_image返回的数据是按width * height * 4存储的，拷贝时会读取超出已分配内存的垃圾数据
• 最终传入OpenGL的纹理数据缓冲区长度不足，采样时读取到越界的垃圾内存，表现为边缘噪点

修复方案 #

在stbi_load调用完成后，手动将channels赋值为4，和强制输出的RGBA格式对齐：

Image::Image(const std::string& _filepath) {
    width = 0;
    height = 0;
    channels = 0;
    data = NULL;
    filepath = _filepath;

    data = stbi_load(filepath.c_str(), &width, &height, &channels, STBI_rgb_alpha);
    // 新增行：同步强制输出的RGBA通道数
    channels = 4;
    
    if (data == NULL) {
        Debug::systemErr("Couldn't load image: " + filepath);
    }
}

额外注意事项 #

• 如果后续需要兼容不同通道数的图像，不要硬编码channels = 4，可以在stbi_load调用后先判断输出格式，再同步通道数
• 当前Texture类的赋值运算符直接拷贝了textureID，会导致多个对象共享同一个纹理句柄，析构时触发重复删除的问题，后续可以优化为深拷贝纹理或者使用引用计数管理OpenGL纹理资源
• 排查纹理渲染问题时，可以先校验传给glTexImage2D的数据长度是否和格式匹配，避免越界读写

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