Glium教程：使用光照模型渲染3D茶壶-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01105/article/details/148575606

Glium教程：使用光照模型渲染3D茶壶

glium Safe OpenGL wrapper for the Rust language. 项目地址: https://gitcode.com/gh_mirrors/gl/glium

本教程将深入讲解如何使用Glium图形库实现一个带有光照效果的3D茶壶渲染程序。我们将从基础概念开始，逐步分析代码实现，帮助读者理解3D图形渲染中的关键技术和原理。

1. 程序概述

这个示例程序展示了如何使用Glium渲染一个3D茶壶模型，并为其添加基本的光照效果。程序实现了环境光、漫反射和高光三种光照成分的组合，创建出更加真实的3D视觉效果。

2. 初始化设置

程序首先初始化了窗口系统和OpenGL上下文：

let event_loop = glium::winit::event_loop::EventLoop::builder()
    .build()
    .expect("event loop building");
let (window, display) = glium::backend::glutin::SimpleWindowBuilder::new()
    .with_title("Glium tutorial #13")
    .build(&event_loop);

这里创建了一个事件循环和显示窗口，为后续的图形渲染做好准备。

3. 模型数据加载

程序加载了茶壶的顶点数据、法线数据和索引数据：

let positions = glium::VertexBuffer::new(&display, &teapot::VERTICES).unwrap();
let normals = glium::VertexBuffer::new(&display, &teapot::NORMALS).unwrap();
let indices = glium::IndexBuffer::new(&display, 
    glium::index::PrimitiveType::TrianglesList, &teapot::INDICES).unwrap();

positions：存储茶壶的顶点位置数据
normals：存储每个顶点的法线向量
indices：定义如何将顶点连接成三角形

4. 着色器程序

程序使用了顶点着色器和片段着色器来实现光照效果。

4.1 顶点着色器

顶点着色器主要完成以下工作：

将顶点位置从模型空间转换到裁剪空间
计算并传递法线向量
计算并传递顶点在裁剪空间中的位置

#version 150
in vec3 position;
in vec3 normal;

out vec3 v_normal;
out vec3 v_position;

uniform mat4 perspective;
uniform mat4 view;
uniform mat4 model;

void main() {
    mat4 modelview = view * model;
    v_normal = transpose(inverse(mat3(modelview))) * normal;
    gl_Position = perspective * modelview * vec4(position, 1.0);
    v_position = gl_Position.xyz / gl_Position.w;
}

4.2 片段着色器

片段着色器实现了Phong光照模型，包含三种光照成分：

环境光(ambient)：基础光照，确保物体不会完全黑暗
漫反射(diffuse)：模拟光线在粗糙表面的均匀散射
镜面反射(specular)：模拟光滑表面的高光效果

#version 150
in vec3 v_normal;
in vec3 v_position;

out vec4 color;

uniform vec3 u_light;

const vec3 ambient_color = vec3(0.2, 0.0, 0.0);
const vec3 diffuse_color = vec3(0.6, 0.0, 0.0);
const vec3 specular_color = vec3(1.0, 1.0, 1.0);

void main() {
    float diffuse = max(dot(normalize(v_normal), normalize(u_light)), 0.0);
    
    vec3 camera_dir = normalize(-v_position);
    vec3 half_direction = normalize(normalize(u_light) + camera_dir);
    float specular = pow(max(dot(half_direction, normalize(v_normal)), 0.0), 16.0);
    
    color = vec4(ambient_color + diffuse * diffuse_color + specular * specular_color, 1.0);
}

5. 渲染循环

程序在事件循环中处理窗口事件并执行渲染：

event_loop.run(move |ev, window_target| {
    match ev {
        // 窗口关闭事件处理
        glium::winit::event::Event::WindowEvent { event, .. } => match event {
            glium::winit::event::WindowEvent::CloseRequested => {
                window_target.exit();
            },
            // 重绘请求处理
            glium::winit::event::WindowEvent::RedrawRequested => {
                // 渲染代码...
            },
            // 窗口大小改变处理
            glium::winit::event::WindowEvent::Resized(window_size) => {
                display.resize(window_size.into());
            },
            _ => (),
        },
        // 持续渲染处理
        glium::winit::event::Event::AboutToWait => {
            window.request_redraw();
        },
        _ => (),
    }
})

6. 矩阵变换

程序使用了三种重要的矩阵变换：

模型矩阵(model)：将物体从模型空间转换到世界空间

let model = [
    [0.01, 0.0, 0.0, 0.0],
    [0.0, 0.01, 0.0, 0.0],
    [0.0, 0.0, 0.01, 0.0],
    [0.0, 0.0, 2.0, 1.0f32]
];

视图矩阵(view)：将场景从世界空间转换到相机空间

let view = view_matrix(&[2.0, 1.0, 1.0], &[-2.0, -1.0, 1.0], &[0.0, 1.0, 0.0]);

透视矩阵(perspective)：将场景从相机空间转换到裁剪空间

let perspective = {
    // 计算宽高比和透视参数...
};

7. 深度测试

程序启用了深度测试，确保物体正确遮挡：

let params = glium::DrawParameters {
    depth: glium::Depth {
        test: glium::draw_parameters::DepthTest::IfLess,
        write: true,
        .. Default::default()
    },
    .. Default::default()
};