【QOpenGL】layout介绍

已于 2025-05-18 23:18:43 修改
阅读量949 收藏 20
点赞数 13
CC 4.0 BY-SA版权
分类专栏： OpenGL 文章标签： OpenGL
于 2025-05-18 23:16:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Antonio915/article/details/148052024

一、概述

指定顶点着色器的layout，以及代码中的layout与着色器中的关系。

二、前置知识

layout变量的基础知识：[[21-layout介绍]]

三、实现流程

layout一般使用

通常，我们在GLSL中指定layout，然后在代码中直接输入这个布局的相关属性，比如layout=0：

glEnableVertexAttribArray(0);

动态获取layout

通过以下步骤可以动态获取输入变量所在的layout

this->shader_program_.bind();  // 如果使用 QShaderProgram，那么最好在获取顶点属性位置前，先 bind()
GLint aPosLocation = this->shader_program_.attributeLocation("aPos");  // 获取顶点着色器中顶点属性 aPos 的位置
glVertexAttribPointer(aPosLocation, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);  // 手动传入第几个属性
glEnableVertexAttribArray(aPosLocation); // 开始 VAO 管理的第一个属性值
qDebug()<<"pos = "<<aPosLocation;

结果：

pos = 2

与GLSL一致：

layout (location = 2)in vec3 aPos;

API：

  • [[bind]]
  • [[attributeLocation]]

延迟指定layout

如果在GLSL中没有指定输入变量layout，可以在代码中延迟加入。不过，指定layout必须在链接程序之前实现，或是实现之后重新链接。

通过以下步骤来

this->shader_program_.bind();
GLint aPosLocation = 2;
this->shader_program_.bindAttributeLocation("aPos", aPosLocation);
glVertexAttribPointer(aPosLocation, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
glEnableVertexAttribArray(aPosLocation);

API：

  • [[bindAttributeLocation]]

四、整体代码

foxopenglwidget.h

#ifndef FOXOPENGLWIDGET_H
#define FOXOPENGLWIDGET_H

#include <QOpenGLWidget>  // 相当于GLFW
#include <QOpenGLFunctions_4_5_Core>  // 相当于 GLAD
#include <QOpenGLShaderProgram>

class FoxOpenGLWidget : public QOpenGLWidget, QOpenGLFunctions_4_5_Core
{
    Q_OBJECT
public:
    enum Shape
    {
        None,
        Rect,
        Circle,
        Triangle
    };

    explicit FoxOpenGLWidget(QWidget *parent = nullptr);
    ~FoxOpenGLWidget();

    void drawShape(Shape shape);
    void setWirefame(bool wirefame);


protected:
    /* 需要重载的 QOpenGLWidget 中的三个函数 */
    virtual void initializeGL();
    virtual void resizeGL(int w, int h);
    virtual void paintGL();

signals:

public slots:

private:
    Shape current_shape_;  // 记录当前绘制的图形
    QOpenGLShaderProgram shader_program_;  // 【重点】使用 Qt 提供的对象进行编译和链接
};

#endif // FOXOPENGLWIDGET_H

foxopenglwidget.cpp

#include <QDebug>
#include "foxopenglwidget.h"

// 顶点数据
float vertices[] = {
    0.5f, 0.5f, 0.0f,   // 右上角 0
    0.5f, -0.5f, 0.0f,  // 右下角 1
    -0.5f, -0.5f, 0.0f, // 左下角 2
    -0.5f, 0.5f, 0.0f   // 左上角 3
};

unsigned int indices[] = {
    // 注意索引从0开始!
    // 此例的索引(0,1,2,3)就是顶点数组vertices的下标，
    // 这样可以由下标代表顶点组合成矩形
    0, 1, 3, // 第一个三角形
    1, 2, 3  // 第二个三角形
};

// 创建 VAO 和 VBO 对象并且赋予 ID
unsigned int VBO, VAO;

// 创建 EBO 元素缓冲对象
unsigned int EBO;

// 顶点着色器的源代码，顶点着色器就是把 xyz 原封不动的送出去
const char *vertexShaderSource = "#version 330 core\n"
                                 "layout (location = 0) in vec3 aPos;\n"
                                 "void main()\n"
                                 "{\n"
                                 "   gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);\n"
                                 "}\0";


// 片段着色器的源代码，片段着色器就是给一个固定的颜色
const char *fragmentShaderSource = "#version 330 core\n"
                                   "out vec4 FragColor;\n"
                                   "void main()\n"
                                   "{\n"
                                   "   FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);\n"
                                   "}\n\0";

FoxOpenGLWidget::FoxOpenGLWidget(QWidget *parent) : QOpenGLWidget(parent)
{
    this->current_shape_ = Shape::None;
}

FoxOpenGLWidget::~FoxOpenGLWidget()
{
    makeCurrent();

    /* 对象的回收 */
    glDeleteVertexArrays(1, &VAO);
    glDeleteBuffers(1, &VBO);
    glDeleteBuffers(1, &EBO);

    doneCurrent();
    update();
}


/* 首要要执行初始化过程，将函数指针指向显卡内的函数 */
void FoxOpenGLWidget::initializeGL()
{
    initializeOpenGLFunctions();  // 【重点】初始化OpenGL函数，将 Qt 里的函数指针指向显卡的函数（头文件 QOpenGLFunctions_X_X_Core）


    // ===================== 顶点着色器 =====================
//    this->shader_program_.addShaderFromSourceCode(QOpenGLShader::Vertex, vertexShaderSource);  // 通过字符串对象添加
    this->shader_program_.addShaderFromSourceFile(QOpenGLShader::Vertex, ":/shaders/ShaderSource/source.vert");  // 通过资源文件

    // ===================== 片段着色器 =====================
//    this->shader_program_.addShaderFromSourceCode(QOpenGLShader::Fragment, fragmentShaderSource);
    this->shader_program_.addShaderFromSourceFile(QOpenGLShader::Fragment, ":/shaders/ShaderSource/source.frag");

    // ===================== 链接着色器 =====================
    bool success = this->shader_program_.link();

    if (!success)
    {
        qDebug() << "ERROR: " << this->shader_program_.log();
    }

    // ===================== VAO | VBO =====================
    // VAO 和 VBO 对象赋予 ID
    glGenVertexArrays(1, &VAO);
    glGenBuffers(1, &VBO);

    // 绑定 VAO、VBO 对象
    glBindVertexArray(VAO);
    glBindBuffer(GL_ARRAY_BUFFER, VBO);

    /* 为当前绑定到 target 的缓冲区对象创建一个新的数据存储（在 GPU 上创建对应的存储区域，并将内存中的数据发送过去）
        如果 data 不是 NULL，则使用来自此指针的数据初始化数据存储
        void glBufferData(GLenum target,  // 需要在 GPU 上创建的目标
                                            GLsizeipter size,  // 创建的显存大小
                                            const GLvoid* data,  // 数据
                                            GLenum usage)  // 创建在 GPU 上的哪一片区域（显存上的每个区域的性能是不一样的）https://registry.khronos.org/OpenGL-Refpages/es3.0/
    */
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

#if 1
    /* 告知显卡如何解析缓冲区里面的属性值
        void glVertexAttribPointer(
                                    GLuint index,  // VAO 中的第几个属性（VAO 属性的索引）
                                    GLint size,  // VAO 中的第几个属性中对应的位置放几份数据
                                    GLEnum type,  // 存放数据的数据类型
                                    GLboolean normalized,  // 是否标准化
                                    GLsizei stride,  // 步长
                                    const void* offset  // 偏移量
        )
    */
    this->shader_program_.bind();  // 如果使用 QShaderProgram，那么最好在获取顶点属性位置前，先 bind()
    GLint aPosLocation = this->shader_program_.attributeLocation("aPos");  // 获取顶点着色器中顶点属性 aPos 的位置
    glVertexAttribPointer(aPosLocation, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);  // 手动传入第几个属性
    glEnableVertexAttribArray(aPosLocation); // 开始 VAO 管理的第一个属性值
#endif

#if 0
    /* 当我们在顶点着色器中没有写 layout 时，也可以在此处代码根据名字手动指定某个顶点属性的位置 */
    this->shader_program_.bind();
    GLint aPosLocation = 2;
    this->shader_program_.bindAttributeLocation("aPos", aPosLocation);
    glVertexAttribPointer(aPosLocation, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
    glEnableVertexAttribArray(aPosLocation);

#endif

    // ===================== EBO =====================
    glGenBuffers(1, &EBO);
    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
    glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);  // EBO/IBO 是储存顶点【索引】的


    // 解绑 VAO 和 VBO，注意先解绑 VAO再解绑EBO
    glBindVertexArray(0);
    glBindBuffer(GL_ARRAY_BUFFER, 0);  // 注意 VAO 不参与管理 VBO
    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0);


    /* 用线条填充，默认是 GL_FILL */
//    glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);
}

void FoxOpenGLWidget::resizeGL(int w, int h)
{
    Q_UNUSED(w);
    Q_UNUSED(h);
}

void FoxOpenGLWidget::paintGL()
{
    /* 设置 OpenGLWidget 控件背景颜色为深青色 */
    glClearColor(0.2f, 0.3f, 0.3f, 1.0f);  // set方法【重点】如果没有 initializeGL，目前是一个空指针状态，没有指向显卡里面的函数，会报错
    glClear(GL_COLOR_BUFFER_BIT);  // use方法

    /* 重新绑定 VAO */
    glBindVertexArray(VAO);

    /* 【重点】使用 QOpenGLShaderProgram 进行着色器绑定 */
    this->shader_program_.bind();

    /* 绘制三角形 */
//    glDrawArrays(GL_TRIANGLES, 0, 6);
//    glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);  // 6 代表6个点，因为一个矩形是2个三角形构成的，一个三角形有3个点
//    glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, &indices);  // 直接到索引数组里去绘制，如果VAO没有绑定EBO的话

    // 通过 this->current_shape_ 确定当前需要绘制的图形
    switch (this->current_shape_)
    {
    case Shape::None:
        break;

    case Shape::Rect:
        glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);
        break;

    case Shape::Circle:
        break;

    case Shape::Triangle:
        break;

    default:
        break;

    }
}

void FoxOpenGLWidget::drawShape(FoxOpenGLWidget::Shape shape)
{
    this->current_shape_ = shape;
    update();  // 【重点】注意使用 update() 进行重绘，也就是这条语句会重新调用 paintGL()
}

void FoxOpenGLWidget::setWirefame(bool wirefame)
{
    makeCurrent();

    if (true == wirefame)
    {
        glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);
    }
    else
    {
        glPolygonMode(GL_FRONT_AND_BACK, GL_FILL);
    }

    doneCurrent();
    update();  // 【重点】注意使用 update() 进行重绘，也就是这条语句会重新调用 paintGL()
}

API

bool QOpenGLShaderProgram::bind()

bind

Description

Binds this shader program to the active QOpenGLContext and makes it the current shader program. Any previously bound shader program is released. This is equivalent to calling glUseProgram() on programId(). Returns true if the program was successfully bound; false otherwise. If the shader program has not yet been linked, or it needs to be re-linked, this function will call link().

int QOpenGLShaderProgram::attributeLocation(const char *name) const

attributeLocation

Description

Returns the location of the attribute name within this shader program’s parameter list. Returns -1 if name is not a valid attribute for this shader program.

See also uniformLocation() and bindAttributeLocation().

void QOpenGLShaderProgram::bindAttributeLocation(const char *name, int location)

bindAttributeLocation

Description

Binds the attribute name to the specified location. This function can be called before or after the program has been linked. Any attributes that have not been explicitly bound when the program is linked will be assigned locations automatically.

When this function is called after the program has been linked, the program will need to be relinked for the change to take effect.

See also attributeLocation().

更多资料：https://github.com/0voice

openGL之API学习（四十七）layout作用详解
hankern的专栏
04-17 1万+
原文在https://www.khronos.org/opengl/wiki/Layout_Qualifier_(GLSL) GLSL语言规范中也有对此的详细说明https://www.khronos.org/registry/OpenGL/specs/gl/GLSLangSpec.4.60.pdf 这里大致翻译如下： 布局限定符（GLSL除了这个限定符，还有很多其它限定符，比如存储限定符、...
3.OpenGL学习笔记 - 着色器
周洪伟的博客
07-17 994
（1）顶点着色器通过2种方式来配置顶点数据： 第一种方式： layout (location = 0) in vec3 aPos; // 位置变量的属性位置值为0 第二种方式： 通过在OpenGL代码中使用glGetAttribLocation查询属性位置值(Location)。 （2）当顶点着色器定义一个输出，着色器定义一个输入，两个变量类型和名字都一样的时候，可以用来传递数据，如...
使用 GLSL 实现真实自然的纹理混合技术详解
最新发布
wang1290865309的博客
08-31 626
本文介绍了在OpenGL中实现纹理混合的技术方案。通过加载草地、土地和噪声三种纹理，利用GLSL着色器实现基于噪声权重的自然过渡效果。文章详细解析了纹理采样原理、mix函数与手动插值两种混合方法，并探讨了噪声图的设计技巧。同时提供了完整的渲染流程说明，包括shader初始化、纹理加载和采样器设置等关键步骤。最后还给出了多纹理混合方案和性能优化建议，为构建真实感图形场景提供了实用指导。
learnopengl笔记——基础篇（3）
giraffe1997的博客
05-22 521
本次通过编写不同的GLSL程序来控制图形的颜色，可以通过属性指针glVertexAttribPointer绑定VBO的顶点，将顶点着色器和片段着色器链接起来，输出的图形就能展示出对应的颜色。 一个例子如下： #version 330 core顶点着色器 layout(location =0)in vec3 aPos;//位置 layout(location =1)in vec3 acolor;//颜色，由着色器外设置 out vec4 mycolor ;//该输出传给片段着色器 void main()
openGL学习—Layout
qq_75066978的博客
04-27 585
通过在OpenGL代码中使用glGetAttribLocation 查询属性位置值（Location）或。顶点着色器接收的是特殊形式的输入，从顶点数据中直接接收输入。为了定义顶点数据如何管理，使用loaction指定输入变量。glBindAttriblocation查询属性。layout标识可以将其连接到顶点数据。
OpenGL笔记之属性变量获取的两种方式：使用layout(location = x) 指定位置和动态获取属性位置
小勇博客
07-13 711
使用指定位置：适合简单场景，位置固定，代码简洁。动态获取属性位置：更灵活，适合动态或复杂场景，避免硬编码位置。
qopengl 色子
04-18
### QOpenGL 实现色子渲染 在 OpenGL 中，通过定义几何形状并应用纹理或颜色来实现三维物体的绘制。对于色子这种立方体对象，可以将其视为由六个矩形面组成的封闭立体图形。以下是基于 Qt 的 `QOpenGLWidget` 类...
qopengl渲染yuv
01-22
layout(location = 0) in vec2 position; out vec2 TexCoords; void main() { gl_Position = vec4(position, 0.0, 1.0); TexCoords = (position + 1.0) / 2.0; // 将 [-1,+1] 映射到 [0,1] } ``` ```glsl // ...
qopengl绘制坐标点
08-22
layout (location = 0) in vec3 aPos; void main() { gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0); } ``` ##### 片段着色器 `source.frag` ```glsl #version 330 core out vec4 FragColor; void main() {...
QOpengl多线程绘画点云图
04-02
layout(location = 0) in vec3 vertexPosition; uniform mat4 mvpMatrix; void main() { gl_Position = mvpMatrix * vec4(vertexPosition, 1.0); gl_PointSize = 2.0; // 控制点大小 } ``` #### 5. 实现步骤 1. ...
QOpenGL画三角形
qq_36246937的博客
01-15 279
1、在新建的工程上在新建一个widget窗口类，用于继承QOpenGLWidget类 2、重写initializeGL、paintGL和resizeGL三个函数 #include "openglwidget.h" #include "ui_openglwidget.h" //GLSL3.0版本后,废弃了attribute关键字（以及varying关键字），属性变量统一用in/out作为前置关键字 #define GL_VERSION "#version 330 core\n" #define G
openGL之glsl入门7上--添加鱼眼及全景球面纹理
他山随悟的专栏
12-06 7601
理解纹理可以先看一下第四章的例子，第四章例子使用片元着色器直接显示图片（1080p图片），做法是先确定矩形的顶点坐标，矩形包含1920*1080个顶点，每个顶点与一个像素对应，这种方法虽然能显示出图片，但缺点非常明显，效率低、绘制麻烦、缩放效果差等。     理论上来说所有的模型都可以使用顶点+顶点颜色的方式绘制出来，这样的话，制作模型就太麻烦，纹理正是为了解决该问题而出现的，使用纹理，较少的工
openGL之API学习layout作用详解
aoxuestudy的专栏
12-11 2680
版权： https://blog.csdn.net/hankern/article/details/89325452 原文在https://www.khronos.org/opengl/wiki/Layout_Qualifier_(GLSL) 原文在https://www.khronos.org/opengl/wiki/Layout_Qualifier_(GLSL) GLSL语言规范中也有对此的详细说明https://www.khronos.org/registry/OpenGL/spe..
OpenGL教程（五）
QStack的博客
11-19 871
正如之前章节所提到的，着色器就是运行在GPU上的小程序，简单来说，着色器就是仅仅是一个将输入数据经过一定转换然后输出的过程，着色器之间是非常独立的，彼此之间除了输入输出之外没有其他交流，这篇文章将会详细介绍着色器以及编写着色器的语言GLSL。编写、编译和管理着色器十分的繁琐，为了方便管理我们通过建立一个着色器的类从硬盘读取着色器，然后编译并且链接它们，检查是否有错误，十分方便使用。出于学习的目的，我们将着色器的类定义在一个头文件内，其结构如下{public:// 项目ID。
OpenGL基本架构知识
qq_43840665的博客
09-03 571
qt opengl
《OpenGL编程指南》 笔记一 OpenGL概述
wwhx27的博客
02-10 626
文章目录第一章 OpenGL概述1.1 什么是OpenGL1.2 初始OpenGL程序1.3 OpenGL语法1.4 OpenGL渲染管线1.4.1 准备向OpenGL传输数据1.4.2 将数据传输到OpenGL1.4.3 顶点着色1.4.4 细分着色1.4.5 几何着色1.4.6 图元装配1.4.7 剪切1.4.8 光栅化1.4.9 片元着色1.4.10 逐片元的操作1.5 第一个程序的深入分析...
openGL之API学习（四十六）opengl图形管线
hankern的专栏
04-11 1087
管线详解 下面这个图取自《OpenGL ES 3.0编程指南》，此流程为可编程管线。 1.VBO/VAO（顶点缓冲区对象或顶点数组对象）: VBO/VAO（到底是啥，下回讲解）是cpu提供给GPU的顶点信息，包括了顶点的位置、颜色（只是顶点的颜色，和纹理的颜色无关）、纹理坐标（用于纹理贴图）等顶点信息。 2.VertexShader（顶点着色器）： 顶点着色器是处理VBO/VAO提供...
Opengl学习
RotatingJump的博客
11-24 346
环境的配置 1.glew glfw(32bit）下载 2.新建c++桌面开发 空白 3.新增项目 4.配置设置(项目/属性) (1)先调成所有配置 (2)依次点击 c/c++常规/附加所包含目录 在里边添加 下好的glew glfw 里include文件 (3)依次点击 连接器 常规 附加到库目录 (4)连接器 输入附加到依赖项 5.在代码中输入头文件 #include<iostream> #define GLEW_STATIC #include <GL/glew.h&gt
【LearnOpenGL基础入门——5】着色器
尘海折柳的博客
12-23 801
OpenGL着色器
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值