Glium教程：使用着色器实现彩色三角形动画-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00317/article/details/148575604

Glium教程：使用着色器实现彩色三角形动画

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

概述

本文将通过分析一个使用glium库实现的彩色三角形动画示例，深入讲解现代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 #5")
    .build(&event_loop);

这段代码创建了一个事件循环和一个带有标题"Glium tutorial #5"的窗口。SimpleWindowBuilder是glium提供的简化窗口构建工具，它封装了底层窗口创建的复杂性。

顶点数据定义

接下来定义了顶点数据结构：

#[derive(Copy, Clone)]
struct Vertex {
    position: [f32; 2],
    color: [f32; 3],
}
implement_vertex!(Vertex, position, color);

这里定义了一个包含位置和颜色属性的顶点结构体。implement_vertex!宏是glium提供的便利工具，它自动为顶点类型实现了必要的trait，使其能够被用作顶点缓冲区的数据。

几何形状与缓冲区

创建了一个包含三个顶点的三角形：

let shape = vec![
    Vertex { position: [-0.5, -0.5], color: [1.0, 0.0, 0.0] },  // 红色
    Vertex { position: [ 0.0,  0.5], color: [0.0, 1.0, 0.0] },  // 绿色
    Vertex { position: [ 0.5, -0.25], color: [0.0, 0.0, 1.0] }  // 蓝色
];

每个顶点不仅有位置信息，还包含了RGB颜色值。然后创建了顶点缓冲区和索引：

let indices = glium::index::NoIndices(glium::index::PrimitiveType::TrianglesList);
let vertex_buffer = glium::VertexBuffer::new(&display, &shape).unwrap();

这里使用了NoIndices表示不使用索引缓冲，直接按顺序绘制顶点。

着色器程序

示例中定义了两个着色器：

顶点着色器：

#version 140
in vec2 position;
in vec3 color;
out vec3 vertex_color;
uniform mat4 matrix;

void main() {
    vertex_color = color;
    gl_Position = matrix * vec4(position, 0.0, 1.0);
}

片段着色器：

#version 140
in vec3 vertex_color;
out vec4 color;

void main() {
    color = vec4(vertex_color, 1.0);
}

顶点着色器接收位置和颜色属性，通过uniform矩阵变换位置，并将颜色传递给片段着色器。片段着色器简单地使用插值后的颜色输出最终像素颜色。

动画实现

动画效果通过随时间变化的uniform矩阵实现：

let mut t: f32 = -0.5;
// ...
t += 0.02;
let x = t.sin() * 0.5;

let uniforms = uniform! {
    matrix: [
        [1.0, 0.0, 0.0, 0.0],
        [0.0, 1.0, 0.0, 0.0],
        [0.0, 0.0, 1.0, 0.0],
        [ x, 0.0, 0.0, 1.0f32],
    ]
};

这里使用正弦函数使三角形在x轴上平滑移动，创造出动画效果。uniform!宏简化了uniform变量的创建过程。

事件处理与渲染循环

示例实现了完整的事件处理循环：

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();
        },
        _ => (),
    }
})

关键点包括：

处理窗口关闭事件
在重绘请求时更新动画并渲染
响应窗口大小变化调整显示
使用AboutToWait事件实现连续渲染

渲染流程

每次重绘时的渲染流程如下：

清空颜色缓冲区为蓝色
更新uniform矩阵
绘制三角形
提交绘制命令

let mut target = display.draw();
target.clear_color(0.0, 0.0, 1.0, 1.0);
target.draw(&vertex_buffer, &indices, &program, &uniforms,
            &Default::default()).unwrap();
target.finish().unwrap();