没有颜色的Opengl纹理渲染

Question

出于教育目的，我正在用 Rust 编写一个 openGl 包装器。但是，我在显示图像文件 (jpg) 的纹理时遇到问题。图像显示为灰度图像，带有一些有缺陷的红色和绿色线条。

我正在使用“图像”箱加载图像并将其转换为 ImageBuffer。加载部分正在运行，我已经通过再次保存图像进行了检查。

我认为缓冲区到 rgb 的转换也有效，因为我第二次保存图像时它也有效。

加载图片的代码:

extern  crate image;

use gl;

use std::{path, ffi::c_void};

#[derive(Debug)]
pub struct Texture {
    id: u32,
    location: gl::types::GLenum,
    path: path::PathBuf,
}

enum TextureError {
    FileNotFound(path::PathBuf),
    InvalidFileType(String)
}

impl Texture {
    pub fn new(file_path: &str, location: u32) -> Texture {
        let mut id = 0;

        let img = image::open(file_path).unwrap();
        img.save("res/test.jpg").unwrap();
        let img = match img {
            image::DynamicImage::ImageRgb8(img) => img,
            x => x.to_rgb8()
        };
        let width = img.width();
        let height = img.height();
        img.save("res/test2.jpg").unwrap();

        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);

            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);
        }
        Texture {
            id,
            location,
            path: path::PathBuf::from(file_path)
        }
    }
}

主要代码:

基本模块、着色器、窗口等模块是我编写和测试的模块。 (他们按预期工作)

extern crate gl;
extern crate glfw;

#[macro_use]
extern crate lazy_static;

mod fundamental;
mod shader;
mod window;

use window::Window;

use crate::fundamental::{Buffer, VertexArray, VertexAttribPtr, Texture};

fn main() {
    //setup glfw
    let mut window = Window::new();

    //load OpenGL
    gl::load_with(|s| window.glfw_window.get_proc_address(s) as *const _);
    unsafe {
        gl::Viewport(0, 0, 600, 600);
    }

    let vertices: Vec<f32> = vec![
        -0.5, -0.5, 0.0, 0.0, 0.0,
         0.5, -0.5, 0.0, 1.0, 0.0,
        -0.5, 0.5, 0.0, 0.0, 1.0,
         0.5, 0.5, 0.0, 1.0, 1.0
    ];
    
    let indices: Vec<u32> = vec![0, 1, 2, 1, 2, 3];

    let vao = VertexArray::new();
    vao.bind();
    let vbo = Buffer::new(gl::STATIC_DRAW, gl::ARRAY_BUFFER);
    let ebo = Buffer::new(gl::STATIC_DRAW, gl::ELEMENT_ARRAY_BUFFER);
    vbo.set_data(&vertices);
    ebo.set_data(&indices);
    let _v_a_ptr0 = VertexAttribPtr::new(0, 3, gl::FLOAT, 5 * 4, 0);
    let _v_a_ptr1 = VertexAttribPtr::new(1, 2, gl::FLOAT, 5 * 4, 3 * 4);
    vao.unbind();

    let shader = shader::Shader::new("shaders/shader.vs", "shaders/shader.fs", None);

    let _texture_bonfire = Texture::new("res/bonfire.jpg", 0);

    //rendering loop
    println!("---Starting rendering loop---");
    while window.not_closed() {
        window.poll_events();
        unsafe {
            gl::ClearColor(0.2, 0.3, 0.3, 1.0);
            gl::Clear(gl::COLOR_BUFFER_BIT);
            let mut error = gl::GetError();
            while error != 0 {
                println!("{}", error);
                error = gl::GetError();
            }
            shader.bind();
            vao.bind();
            gl::DrawElements(
                gl::TRIANGLES,
                indices.len() as i32,
                gl::UNSIGNED_INT,
                std::ptr::null(),
            );
        }
        window.swap_buffers();
    }
}

vertex_attrib_ptr 模块的代码:

(以防万一)

use std::ffi::c_void;

pub struct VertexAttribPtr {
    location: u32,
}

impl VertexAttribPtr {
    pub fn new(
        location: u32,
        size_of_attribute: i32,
        vertex_type: gl::types::GLenum,
        vertex_size: i32,
        offset: u32,
    ) -> VertexAttribPtr {
        unsafe {
            gl::VertexAttribPointer(
                location,
                size_of_attribute,
                vertex_type,
                gl::FALSE,
                vertex_size,
                offset as *const c_void,
            );
            gl::EnableVertexAttribArray(location);
        }
        VertexAttribPtr { location }
    }

    #[allow(unused)]
    pub fn enable(&self) {
        unsafe {
            gl::EnableVertexAttribArray(self.location);
        }
    }

    #[allow(unused)]
    pub fn disable(&self) {
        unsafe {
            gl::DisableVertexAttribArray(self.location);
        }
    }
}

顶点着色器

#version 460 core
layout (location = 0) in vec3 pos;
layout (location = 1) in vec2 tex_coord;

out vec2 texture_cord;

void main()
{
    gl_Position = vec4(pos.x, pos.y, pos.z, 1.0);
    texture_cord = tex_coord;
}

片段着色器

#version 460 core
out vec4 FragColor;

in vec2 texture_cord;

uniform sampler2D texture0;

void main()
{
    FragColor = texture(texture0, texture_cord);
    //FragColor = vec4(1.0);
}

渲染纹理:

纹理图像也是颠倒的，但这是后面的问题。

原图

Answer 1

默认情况下，OpenGL 假设图像的每一行的开始对齐到 4 个字节。

这是因为 gl::UNPACK_ALIGNMENT参数默认为 4。由于图像有 3 个颜色 channel (gl::RGB)，并且图像的行大小可能不会对齐到 4 字节。当具有 3 个颜色 channel 的 RGB 图像加载到纹理对象并且 3*width 不能被 4 整除时，gl::UNPACK_ALIGNMENT在使用 gl::TexImage2D 指定纹理图像之前必须设置为 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);

---

纹理也翻转了。您必须“交换”纹理坐标的第二个分量:

let vertices: Vec<f32> = vec![
   -0.5, -0.5, 0.0, 0.0, 1.0,
    0.5, -0.5, 0.0, 1.0, 1.0,
   -0.5,  0.5, 0.0, 0.0, 0.0,     
    0.5,  0.5, 0.0, 1.0, 0.0
];