使用OpenGL Shader绘制颜色渐变三角形

最新推荐文章于 2025-07-22 11:57:58 发布
原创 最新推荐文章于 2025-07-22 11:57:58 发布 · 797 阅读 · 28 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#算法 #图形渲染 #c++

引言

在现代计算机图形学中，着色器（Shader）是控制图形渲染流程的核心工具。本文将通过一个简单的渐变三角形绘制案例，带您快速上手OpenGL的Shader编程。无论您是刚接触图形编程的新手，还是希望复习基础的老手，这篇教程都将为您提供清晰的实现路径和原理解析。

一、核心原理

1.1 图形渲染管线

OpenGL的渲染流程包含以下关键阶段：

  1. **顶点数据** → **顶点着色器** → **图元装配**
  2. → **几何着色器**（可选）→ **光栅化**
  3. → **片段着色器** → **深度测试** → **帧缓冲**

在本案例中，我们重点关注顶点着色器和片段着色器的配合使用。

1.2 颜色插值机制

通过在顶点数据中指定颜色值，OpenGL会在光栅化阶段自动对三角形内部的颜色进行**双线性插值**。例如：

  • 左下顶点设为红色 `(1,0,0)`
  • 右下顶点设为绿色 `(0,1,0)`
  • 顶部顶点设为蓝色 `(0,0,1)`

最终三角形会呈现自然的颜色过渡效果。

二、完整实现代码

#include <GL/glew.h>
#include <GLFW/glfw3.h>
#include <iostream>

const char* vertexShaderSource = R"glsl(
    #version 330 core
    layout (location = 0) in vec3 aPos;
    layout (location = 1) in vec3 aColor;
    out vec3 ourColor;
    void main()
    {
        gl_Position = vec4(aPos, 1.0);
        ourColor = aColor;
    }
)glsl";

const char* fragmentShaderSource = R"glsl(
    #version 330 core
    in vec3 ourColor;
    out vec4 FragColor;
    void main()
    {
        FragColor = vec4(ourColor, 1.0);
    }
)glsl";

float vertices[] = {
    // 位置              // 颜色
    -0.5f, -0.5f, 0.0f, 1.0f, 0.0f, 0.0f, // 左下红
     0.5f, -0.5f, 0.0f, 0.0f, 1.0f, 0.0f, // 右下绿
     0.0f,  0.5f, 0.0f, 0.0f, 0.0f, 1.0f  // 顶部蓝
};

int main()
{
    // 初始化GLFW
    if (!glfwInit()) {
        std::cerr << "Failed to initialize GLFW" << std::endl;
        return -1;
    }

    // 配置GLFW
    glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
    glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
    glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);

    // 创建窗口
    GLFWwindow* window = glfwCreateWindow(800, 600, "OpenGL Triangle", NULL, NULL);
    if (!window) {
        std::cerr << "Failed to create GLFW window" << std::endl;
        glfwTerminate();
        return -1;
    }
    glfwMakeContextCurrent(window);

    // 初始化GLEW
    glewExperimental = GL_TRUE;
    if (glewInit() != GLEW_OK) {
        std::cerr << "Failed to initialize GLEW" << std::endl;
        return -1;
    }

    // 编译顶点着色器
    unsigned int vertexShader = glCreateShader(GL_VERTEX_SHADER);
    glShaderSource(vertexShader, 1, &vertexShaderSource, NULL);
    glCompileShader(vertexShader);

    // 检查顶点着色器编译错误
    int success;
    char infoLog[512];
    glGetShaderiv(vertexShader, GL_COMPILE_STATUS, &success);
    if (!success) {
        glGetShaderInfoLog(vertexShader, 512, NULL, infoLog);
        std::cerr << "Vertex shader compilation failed:\n" << infoLog << std::endl;
    }

    // 编译片段着色器
    unsigned int fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
    glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);
    glCompileShader(fragmentShader);

    // 检查片段着色器编译错误
    glGetShaderiv(fragmentShader, GL_COMPILE_STATUS, &success);
    if (!success) {
        glGetShaderInfoLog(fragmentShader, 512, NULL, infoLog);
        std::cerr << "Fragment shader compilation failed:\n" << infoLog << std::endl;
    }

    // 链接着色器程序
    unsigned int shaderProgram = glCreateProgram();
    glAttachShader(shaderProgram, vertexShader);
    glAttachShader(shaderProgram, fragmentShader);
    glLinkProgram(shaderProgram);

    // 检查链接错误
    glGetProgramiv(shaderProgram, GL_LINK_STATUS, &success);
    if (!success) {
        glGetProgramInfoLog(shaderProgram, 512, NULL, infoLog);
        std::cerr << "Shader program linking failed:\n" << infoLog << std::endl;
    }

    // 删除着色器对象
    glDeleteShader(vertexShader);
    glDeleteShader(fragmentShader);

    // 配置VAO/VBO
    unsigned int VBO, VAO;
    glGenVertexArrays(1, &VAO);
    glGenBuffers(1, &VBO);

    glBindVertexArray(VAO);
    glBindBuffer(GL_ARRAY_BUFFER, VBO);
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

    // 位置属性
    glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)0);
    glEnableVertexAttribArray(0);
    // 颜色属性
    glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)(3 * sizeof(float)));
    glEnableVertexAttribArray(1);

    // 渲染循环
    while (!glfwWindowShouldClose(window)) {
        // 处理输入
        if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)
            glfwSetWindowShouldClose(window, true);

        // 清除颜色缓冲
        glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
        glClear(GL_COLOR_BUFFER_BIT);

        // 激活着色器程序
        glUseProgram(shaderProgram);
        glBindVertexArray(VAO);
        glDrawArrays(GL_TRIANGLES, 0, 3);

        // 交换缓冲和轮询事件
        glfwSwapBuffers(window);
        glfwPollEvents();
    }

    // 清理资源
    glDeleteVertexArrays(1, &VAO);
    glDeleteBuffers(1, &VBO);
    glDeleteProgram(shaderProgram);

    glfwTerminate();
    return 0;
}

三、关键代码解析


 3.1 顶点数据结构

float vertices[] = {
    // 位置              // 颜色
    -0.5f, -0.5f, 0.0f, 1.0f, 0.0f, 0.0f, // 左下红
     0.5f, -0.5f, 0.0f, 0.0f, 1.0f, 0.0f, // 右下绿
     0.0f,  0.5f, 0.0f, 0.0f, 0.0f, 1.0f  // 顶部蓝
};
  • 每个顶点包含6个浮点数：3个位置坐标 + 3个颜色通道（RGB）
  • 坐标范围[-1,1]对应标准化设备坐标（NDC）

3.2 顶点属性配置

// 位置属性（属性索引0）
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6*sizeof(float), (void*)0);
glEnableVertexAttribArray(0);

// 颜色属性（属性索引1）
glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6*sizeof(float), (void*)(3*sizeof(float)));
glEnableVertexAttribArray(1);

参数解释：

  •  `0/1`: 属性索引（对应shader中的`layout (location=N)`
  •  `3`: 每个属性的分量数量
  •  `6*sizeof(float)`: 每个顶点的总字节数（步长）
  •  指针偏移：颜色数据从第3个float开始

 3.3 着色器源码解析

顶点着色器：

#version 330 core
layout (location = 0) in vec3 aPos;  // 位置属性
layout (location = 1) in vec3 aColor; // 颜色属性
out vec3 ourColor; // 传递给片段着色器的变量

void main()
{
    gl_Position = vec4(aPos, 1.0); // 必须赋值给内置变量
    ourColor = aColor; // 传递颜色数据
}

片段着色器：

#version 330 core
in vec3 ourColor; // 接收插值后的颜色
out vec4 FragColor;

void main()
{
    FragColor = vec4(ourColor, 1.0); // 带透明度通道的输出
}

四、运行效果与调试

4.1 预期输出

程序运行后会显示一个背景为青灰色（RGB:0.2,0.3,0.3）的窗口，其中包含一个颜色渐变三角形：

  • 左下角：红色
  • 右下角：绿色
  • 顶部：蓝色
  •  内部区域：自动渐变混合

4.2 常见问题排查

1. 黑屏问题：

  •  检查GLEW初始化是否在创建上下文之后
  • 验证着色器是否编译成功
  • 确认VAO/VBO正确绑定

2. 颜色显示异常：

  •   检查顶点数据的内存布局
  •   确认属性指针的偏移量计算正确
  •   验证颜色值是否在[0,1]范围内

3. 段错误：

  •   确保OpenGL上下文正确创建
  •   检查函数指针加载是否成功（GLEW初始化）

五、扩展练习

建议尝试以下修改来加深理解：

  1. 修改顶点颜色值观察变化
  2. 添加第四个顶点绘制四边形
  3. 在片段着色器中实现颜色反转效果
  4. 尝试使用Uniform变量实现动态颜色变化

六、开发环境配置

6.1 Windows系统推荐配置：

1. 使用vcpkg安装依赖：

vcpkg install glfw3 glew

2. CMakeLists.txt示例：

   find_package(glfw3 REQUIRED)
   find_package(GLEW REQUIRED)
   
   target_link_libraries(YourTarget
       glfw
       GLEW::GLEW
       OpenGL::GL
   )

6.2 Linux系统配置：

# Ubuntu/Debian
sudo apt install libglfw3-dev libglew-dev

# 编译命令示例
g++ main.cpp -lglfw -lGLEW -lGL -lX11 -lpthread -ldl

 结语

通过这个简单的案例，我们完成了从数据准备、着色器编写到最终渲染的完整流程。Shader编程是图形开发的基石，掌握这些基础后，您可以进一步探索更复杂的特效实现，如光照计算、纹理映射等。建议结合[LearnOpenGL](https://learnopengl.com/)等优质资源继续深入学习。

项目推荐

horse_x: Horse 3D渲染内核基于Qt与OpenGL开发，是一款三维引擎。本项目将不提供编辑器，以SDK的形式对外提供接口。 本项目将参考Three.js与Unity等众多渲染引擎的API设计。致力于开发出一款具有竞争力的渲染引擎内核。

Android OpenGL渐变色
ZLGSPACE的博客
07-30 1150
物体在现实世界中会因光线的变化而展现出不同的颜色和亮度，这些细微的差别是视觉感知的重要线索。艺术家利用这些视觉线索来创造视觉上的错觉，使作品看起来更加立体。而本篇我们将通过渐变色使上一篇我们画出来的矩形更加现实。
OpenGL绘制顶点异色立方体、圆柱、球
Hawley的博客
06-30 2053
OpenGL绘制顶点异色立方体、圆柱、球参考博客一些碎碎念环境配置基础知识代码实现效果展示不足之处 参考博客 博客1 博客2 博客3 博客4 一些碎碎念 写这篇博客的原因很简单，就是老师整了个开卷考试，然后让我们用OpenGL画几个图形。一开始小伙伴先开始鼓捣这玩意，我想着白嫖。结果后来小伙伴出去实习了，然后也快交这个作业了，我就把小伙伴的代码拿出来看，很遗憾他的代码没啥注释，然后我就只好百度，花了几天时间看懂了，但是觉得太麻烦了，我就另起炉灶打算自己调包整一个。下面记录一下相关历程。 环境配置 环境的配置
openGL着色器 (shader)
xueangfu的博客
05-20 6040
着色器 (shader) 着色器(Shader)就是运行在GPU上的小程序。这些小程序在图形渲染管线的某个特定部分而运行。从基本意义上来说，着色器只是一种把输入转化为输出的程序。着色器也是一种非常独立的程序，因为它们之间不能相互通信；它们之间唯一的沟通只有通过输入和输出。 图形渲染管线 在讲着色器之前，不得不先理清楚openGL的图像渲染管线。在OpenGL中，任何事物都在3D空间中，而我们的屏幕和窗口却是2D像素数组，所以OpenGL的大部分工作都是关于把3D坐标转变为适应你屏幕的2D像素。3D坐标转
使用Shader中的自定义渐变效果
欢迎来到《技术探索》，这是一个专注于游戏开发技术的博客。在这里，我们将深入探讨游戏引擎、图形渲染、人工智能、物理模拟等领域的最新技术和最佳实践。无论您是初学者还是经验丰富的开发者，我们都希望为您提供有价值的见解和实用的技巧。
04-08 704
Properties_Color1 ("Color 1", Color) = (1, 0, 0, 1) // 默认红色_Color2 ("Color 2", Color) = (0, 0, 1, 1) // 默认蓝色SubShaderLOD 200PassCGPROGRAM// 渐变起始颜色// 渐变结束颜色// 顶点位置// UV坐标struct v2f// UV坐标// 裁剪空间中的顶点位置v2f o;// 将顶点位置转换到裁剪空间// 传递UV坐标。
OpenGL之几何着色器(Geometry Shader)详解
What_can_you_do的博客
12-12 2319
OpenGL学习笔记
【OpenGL】OpenGL入门之编写自己的着色器(Shader)类
YangMax1的博客
03-03 3518
目录自己的着色器类从文件读取着色器的使用运行测试参考 自己的着色器类   编写、编译、管理着色器是件麻烦事。写一个类来让我们的生活轻松一点，它可以从硬盘读取着色器，然后编译并链接它们，并对它们进行错误检测，这就变得很好用了。把着色器类全部放在头文件里，主要是为了学习用途，当然也方便移植。 我们先来添加必要的include，并定义类结构： #ifndef SHADER_H #define SHADER_H #include <glad/glad.h>; // 包含glad来获取所有的必须Open
OpenGL中shader的作用
weixin_38685248的博客
03-21 725
用OpenGL画图的机制可以简化为如下: 1. GPU通过CPU发送的数据构造三维空间(屏幕坐标系)中的顶点. 2. 让这些顶点具有几何特征. 3. 当顶点具备几何特征之后, 就可以确定这些顶点会影响屏幕上面的哪些像素并着色. 其中顶点即为vertex, vertex shader的职能, 其决定每一个顶点是如何通过CPU的数据构造出来的, 这一部分可以通过编程控制. 具备...
OpenGL Shader封装技术深入解析
最新发布
weixin_42576804的博客
07-22 880
htmltable {th, td {th {pre {简介：OpenGL Shader封装是图形编程中的关键技术，用于高效管理和使用OpenGL着色器程序。通过在C++中创建Shader类，开发者可以简化Shader的加载、编译、链接和使用过程。本文详细介绍了OpenGL Shader封装的关键步骤和面向对象设计模式的最佳实践，包括Shader对象的创建、源码的加载与编译、Shader程序的创建与链接、以及资源的清理和异常处理。
OpenGL着色器语言示例：绘制颜色渐变三角形
在这个例子中，它演示了如何使用着色器（Shaders）来绘制一个颜色渐变的三角形。 着色器语言GLSL（OpenGL Shading Language）是一种用于编写着色器的高级语言，它允许开发者编写能够在GPU上运行的代码。着色器是...
使用OpenGL实现立方体颜色渐变绘图工具
直线可以使用OpenGL的绘图命令来绘制，而圆柱则需要利用OpenGL的图元（如顶点、线和三角形）来构造。为了在OpenGL中绘制圆柱，开发者需要定义圆柱的两个圆形底面和侧面，然后通过渲染这些图元来生成一个圆柱体。 ...
OpenGL实现立方体颜色渐变与动态消隐效果
标题“立方体颜色渐变OpenGL”中所涉及的知识点主要集中在OpenGL图形编程领域，特别是如何利用OpenGL实现3D图形的渲染以及颜色的动态变化，具体知识内容如下： 1. OpenGL概述 OpenGL是一个跨语言、跨平台的应用程序...
Android OpenGL ES 学习(五) -- 渐变色
夏至的稻穗的博客
12-01 4194
OpenGL 学习教程这次要完成的效果：前面的代码中，我们的颜色是写死一种的，如何实现上面的渐变色呢？这里就需要用到光栅化：再复习一下光栅化的概念：它会图元映射成屏幕上相应的像素，生成供片段着色器使用上色的片段。前面说道，顶点数据不止包含位置，还有其他信息，所以，在绘制顶点位置的时候，也传递顶点颜色，由 OpenGL 实现栅格化的效果。这里，你可能会有疑惑，传递了三个颜色，也应该也是三个颜色啊，怎么会有渐变色呢？带着疑问，我们来试试。
shader着色器
Acheld的博客
01-16 699
学了接近一个月的OpenGL，终于要排上用场了...好吧，就从学到的shader（着色器）开刀吧。 先简单的介绍shader，shader其实是显卡的功能，就是利用显卡的GPU去做图像处理的工作，而不是CPU，这样可以在一些复杂的大程序中释放CPU空间而提高效率。这篇文章只是简单的介绍shader的使用，并没有介绍着色语言的语法结构等方面内容。后面等自己研究好了继续更新。
OpenGL基础（06）颜色渐变三角形 源码&显示效果
wangdsh的博客
07-14 2096
主要是通过实战 理解着色器插值的使用方法和光栅化效果，效果为颜色渐变。
OpenGL----系列三：搭建第一个图形纯色三角形
抱着火星上月球的博客
06-24 174
搭建第一个图形：三角形
Opengl实例三：课后作业
qq_38409301的博客
09-12 342
课后作业
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值