Rust开发OpenGL封装时JPG纹理渲染呈灰度带红绿条纹问题求助

问题原因 #

OpenGL 默认启用4字节像素读取对齐规则，你上传的纹理是3通道RGB8格式（单像素占3字节），若图片宽度不是4的倍数，OpenGL读取每行像素时会出现偏移错位，最终表现为灰度画面叠加异常彩色线条。

解决方案 #

修改纹理加载代码，在调用gl::TexImage2D前添加像素对齐规则设置：

unsafe {
    gl::ActiveTexture(gl::TEXTURE0 + location);
    gl::GenTextures(1, &mut id);
    gl::BindTexture(gl::TEXTURE_2D, id);

    gl::TexParameteri(gl::TEXTURE_2D, gl::TEXTURE_WRAP_S, gl::REPEAT as i32);
    gl::TexParameteri(gl::TEXTURE_2D, gl::TEXTURE_WRAP_T, gl::REPEAT as i32);
    gl::TexParameteri(gl::TEXTURE_2D, gl::TEXTURE_MIN_FILTER, gl::LINEAR_MIPMAP_LINEAR as i32);
    gl::TexParameteri(gl::TEXTURE_2D, gl::TEXTURE_MAG_FILTER, gl::LINEAR as i32);

    // 新增下面这行，设置像素解包对齐为1字节
    gl::PixelStorei(gl::UNPACK_ALIGNMENT, 1);

    gl::TexImage2D(gl::TEXTURE_2D, 0, gl::RGB8 as i32, width as i32, height as i32, 0, gl::RGB, gl::UNSIGNED_BYTE, (&img as &[u8]).as_ptr() as *const c_void);
    gl::GenerateMipmap(gl::TEXTURE_2D);
}

GL_UNPACK_ALIGNMENT参数指定OpenGL读取纹理数据时每行的对齐字节数，设为1后会按连续字节读取像素，适配无填充的3通道RGB数据。

额外补充（可选解决上下颠倒问题） #

image crate默认从上到下存储像素数据，OpenGL纹理默认从下到上采样，若要修复上下颠倒问题，在转换得到RGB8图像后调用翻转方法即可：

let img = match img {
    image::DynamicImage::ImageRgb8(img) => img,
    x => x.to_rgb8()
};
// 新增翻转行
let img = img.flipv();

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