着色器编程
从文件中导入着色器代码
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"
"}\0";
这样把着色器的代码直接放到字符串中导入,虽然可行,但是实在太麻烦了,而且不适合IED去编辑。因此我们希望将这些代码单独存于一个文件中,我们直接从文件中导入。我们下面使用QT封装好的函数去使用。
使用QOpenGLShaderProgram库
在头文件中加入:
//ZjjOpenGLWidget.h
... ...
#include <QOpenGLShaderProgram>
... ...
class ZjjOpenGLWidget : public QOpenGLWidget,QOpenGLFunctions_4_5_Core
{
Q_OBJECT
public:
... ...
protected:
... ...
QOpenGLShaderProgram shaderProgram;
... ...
使用QT封装的着色器对象
在源代码文件中加入:
#include "zjjopenglwidget.h"
// 创建VBO和VAO对象,并赋予ID
GLuint VBO, VAO, EBO;
float vertices[] = {
0.5f, 0.5f, 0.0f, // 右上角
0.5f, -0.5f, 0.0f, // 右下角
-0.5f, -0.5f, 0.0f, // 左下角
-0.5f, 0.5f, 0.0f // 左上角
};
unsigned int indices[] = { // 注意索引从0开始!
0, 1, 3, // 第一个三角形
1, 2, 3 // 第二个三角形
};
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"
"}\0";
ZjjOpenGLWidget::ZjjOpenGLWidget(QWidget *parent) : QOpenGLWidget(parent)
{
}
ZjjOpenGLWidget::~ZjjOpenGLWidget()
{
makeCurrent();
glDeleteBuffers(1, &VBO);
glDeleteBuffers(1, &EBO);
glDeleteVertexArrays(1, &VAO);
doneCurrent();
}
void ZjjOpenGLWidget::drawShape(Shape shape)
{
m_shape = shape;
update();
}
void ZjjOpenGLWidget::setWireFrame(bool wireframe)
{
makeCurrent();
if(wireframe)
glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);
else
glPolygonMode(GL_FRONT_AND_BACK, GL_FILL);
update();
doneCurrent();
}
void ZjjOpenGLWidget::initializeGL()
{
initializeOpenGLFunctions();
// 创建一个VertexArrays并且给VAO一个编号(改变VAO的值)
glGenVertexArrays(1, &VAO);
// 创建一个Buffers并且给VBO一个编号(改变VBO的值)
glGenBuffers(1, &VBO);
// 创建一个索引缓冲对象并且给EBO一个编号
glGenBuffers(1, &EBO);
// 绑定VBO和VAO对象
glBindVertexArray(VAO);
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
// 复制我们的索引数组到一个索引缓冲中,供OpenGL使用
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);
// 告知显卡如何解析缓冲里的属性值
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3*sizeof(float), (void*)0);
// 开启VAO管理的第一个属性值
glEnableVertexAttribArray(0);
// 将上下文的GL_ARRAY_BUFFER对象设回默认的ID-0,相当于与所创建的VAO和VBO解绑
glBindBuffer(GL_ARRAY_BUFFER, 0);
glBindVertexArray(0);
// 释放GL_ELEMENT_ARRAY_BUFFER
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0);
// 一旦我们重新绑定这个VAO和VBO到GL_ARRAY_BUFFER位置,这些选项就会重新生效,不需要重新设置
shaderProgram.addShaderFromSourceCode(QOpenGLShader::Vertex, vertexShaderSource);
shaderProgram.addShaderFromSourceCode(QOpenGLShader::Fragment, fragmentShaderSource);
bool success;
success = shaderProgram.link();
if(!success) {
qDebug()<<"ERR:"<<shaderProgram.log();
}
}
void ZjjOpenGLWidget::resizeGL(int w, int h)
{
Q_UNUSED(w);
Q_UNUSED(h);
}
void ZjjOpenGLWidget::paintGL()
{
glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
// 调用glUseProgram函数,用刚创建的程序对象作为它的参数,以激活这个程序对象
shaderProgram.bind();
glBindVertexArray(VAO);
switch (m_shape) {
case Rect:
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);
break;
default:
break;
}
glBindVertexArray(0);
}
将着色器代码文件放入QT资源文件中
为了在QT中正常加载并编辑shader文件:在工具->选项 中设置编码规则:
在项目的目录下新建两个文本:
可以自定义一个前缀
将刚刚新建的两个文件添加进来项目中
这样,我们的项目中就多了两个可编辑的文件:
添加文本:
在代码中修改一下,配置从文件中读入:
// shaderProgram.addShaderFromSourceCode(QOpenGLShader::Vertex, vertexShaderSource);
// shaderProgram.addShaderFromSourceCode(QOpenGLShader::Fragment, fragmentShaderSource);
shaderProgram.addShaderFromSourceFile(QOpenGLShader::Vertex, ":/shaders/shapes.vert");
shaderProgram.addShaderFromSourceFile(QOpenGLShader::Fragment, ":/shaders/shapes.frag");
着色器编程语言:GLSL
着色器是使用一种叫GLSL的类C语言写成的。GLSL是为图形计算量身定制的,它包含一些针对向量和矩阵操作的有用特性。
着色器的开头总是要声明版本,接着是输入和输出变量、uniform和main函数。每个着色器的入口点都是main函数,在这个函数中我们处理所有的输入变量,并将结果输出到输出变量中。
一个典型的着色器有下面的结构:
#version version_number
in type in_variable_name;
in type in_variable_name;
out type out_variable_name;
uniform type uniform_name;
int main()
{
// 处理输入并进行一些图形操作
...
// 输出处理过的结果到输出变量
out_variable_name = weird_stuff_we_processed;
}
当我们特别谈论到顶点着色器的时候,每个输入变量也叫顶点属性(Vertex Attribute)。我们能声明的顶点属性是有上限的,它一般由硬件来决定。OpenGL确保至少有16个包含4分量的顶点属性可用,但是有些硬件或许允许更多的顶点属性,你可以查询GL_MAX_VERTEX_ATTRIBS
来获取具体的上限:
int nrAttributes;
glGetIntegerv(GL_MAX_VERTEX_ATTRIBS, &nrAttributes);
std::cout << "Maximum nr of vertex attributes supported: " << nrAttributes << std::endl;
通常情况下它至少会返回16个,大部分情况下是够用了。
数据类型
和其他编程语言一样,GLSL有数据类型可以来指定变量的种类。GLSL中包含C等其它语言大部分的默认基础数据类型:int
、float
、double
、uint
和bool
。GLSL也有两种容器类型,它们会在这个教程中使用很多,分别是向量(Vector)和矩阵(Matrix)。
向量
GLSL中的向量是一个可以包含有1、2、3或者4个分量的容器,分量的类型可以是前面默认基础类型的任意一个。它们可以是下面的形式(n
代表分量的数量):
大多数时候我们使用vecn
,因为float足够满足大多数要求了。
一个向量的分量可以通过vec.x
这种方式获取,这里x是指这个向量的第一个分量。你可以分别使用.x
、.y
、.z
和.w
来获取它们的第1、2、3、4个分量。GLSL也允许你对颜色使用rgba
,或是对纹理坐标使用stpq
访问相同的分量。
向量这一数据类型也允许一些有趣而灵活的分量选择方式,叫做重组(Swizzling)。重组允许这样的语法:
vec2 someVec;
vec4 differentVec = someVec.xyxx;
vec3 anotherVec = differentVec.zyw;
vec4 otherVec = someVec.xxxx + anotherVec.yxzy;
你可以使用上面4个字母任意组合来创建一个和原来向量一样长的(同类型)新向量,只要原来向量有那些分量即可;然而,你不允许在一个vec2
向量中去获取.z
元素。我们也可以把一个向量作为一个参数传给不同的向量构造函数,以减少需求参数的数量:
vec2 vect = vec2(0.5, 0.7);
vec4 result = vec4(vect, 0.0, 0.0);
vec4 otherResult = vec4(result.xyz, 1.0);
向量是一种灵活的数据类型,我们可以把用在各种输入和输出上。
输入与输出
虽然着色器是各自独立的小程序,但是它们都是一个整体的一部分,出于这样的原因,我们希望每个着色器都有输入和输出,这样才能进行数据交流和传递。GLSL定义了in
和out
关键字专门来实现这个目的。每个着色器使用这两个关键字设定输入和输出,只要一个输出变量与下一个着色器阶段的输入匹配,它就会传递下去。但在顶点和片段着色器中会有点不同。
顶点着色器应该接收的是一种特殊形式的输入,否则就会效率低下。顶点着色器的输入特殊在,它从顶点数据中直接接收输入。为了定义顶点数据该如何管理,我们使用location
这一元数据指定输入变量,这样我们才可以在CPU上配置顶点属性。我们已经在前面的教程看过这个了,layout (location = 0)
。顶点着色器需要为它的输入提供一个额外的layout
标识,这样我们才能把它链接到顶点数据。
你也可以忽略layout (location = 0)标识符,通过在OpenGL代码中使用glGetAttribLocation查询属性位置值(Location),但是我更喜欢在着色器中设置它们,这样会更容易理解而且节省你(和OpenGL)的工作量。
通过glBindAttribLocation
查询属性位置值,例如:
// 告知显卡如何解析缓冲里的属性值
// void glVertexAttribPointer(GLuint index, GLint size, GLenum type,
// GLboolean normalized, GLsizei stride, const GLvoid* pointer);
shaderProgram.bind();
GLint posLocation = shaderProgram.attributeLocation("aPos");
glVertexAttribPointer(posLocation, 3, GL_FLOAT, GL_FALSE, 3*sizeof(float), (void*)0);
// 开启VAO管理的第一个属性值
glEnableVertexAttribArray(posLocation);
或者(使用QT封装的shaderProgram
类):
// 告知显卡如何解析缓冲里的属性值
// void glVertexAttribPointer(GLuint index, GLint size, GLenum type,
// GLboolean normalized, GLsizei stride, const GLvoid* pointer);
shaderProgram.bind();
GLint posLocation = 0;
shaderProgram.bindAttributeLocation("aPos", posLocation);
glVertexAttribPointer(posLocation, 3, GL_FLOAT, GL_FALSE, 3*sizeof(float), (void*)0);
// 开启VAO管理的第一个属性值
glEnableVertexAttribArray(posLocation);
另一个例外是片段着色器,它需要一个vec4颜色输出变量,因为片段着色器需要生成一个最终输出的颜色。如果你在片段着色器没有定义输出颜色,OpenGL会把你的物体渲染为黑色(或白色)。
所以,如果我们打算从一个着色器向另一个着色器发送数据,我们必须在发送方着色器中声明一个输出,在接收方着色器中声明一个类似的输入。当类型和名字都一样的时候,OpenGL就会把两个变量链接到一起,它们之间就能发送数据了(这是在链接程序对象时完成的)。为了展示这是如何工作的,我们会稍微改动一下之前教程里的那个着色器,让顶点着色器为片段着色器决定颜色。
顶点着色器
#version 330 core
layout (location = 0) in vec3 aPos; // 位置变量的属性位置值为0
out vec4 vertexColor; // 为片段着色器指定一个颜色输出
void main()
{
gl_Position = vec4(aPos, 1.0); // 注意我们如何把一个vec3作为vec4的构造器的参数
vertexColor = vec4(0.5, 0.0, 0.0, 1.0); // 把输出变量设置为暗红色
}
片段着色器
#version 330 core
out vec4 FragColor;
in vec4 vertexColor; // 从顶点着色器传来的输入变量(名称相同、类型相同)
void main()
{
FragColor = vertexColor;
}
你可以看到我们在顶点着色器中声明了一个vertexColor
变量作为vec4
输出,并在片段着色器中声明了一个类似的vertexColor
。由于它们名字相同且类型相同,片段着色器中的vertexColor
就和顶点着色器中的vertexColor
链接了。由于我们在顶点着色器中将颜色设置为深红色,最终的片段也是深红色的。下面的图片展示了输出结果:
Uniform
Uniform
是一种从CPU中的应用向GPU中的着色器发送数据的方式,但uniform
和顶点属性有些不同。首先,uniform
是全局的(Global)。全局意味着uniform
变量必须在每个着色器程序对象中都是独一无二的,而且它可以被着色器程序的任意着色器在任意阶段访问。第二,无论你把uniform
值设置成什么,uniform
会一直保存它们的数据,直到它们被重置或更新。
我们可以在一个着色器中添加uniform
关键字至类型和变量名前来声明一个GLSL的uniform
。从此处开始我们就可以在着色器中使用新声明的uniform了。
#version 330 core
out vec4 FragColor;
uniform vec4 ourColor; // 在OpenGL程序代码中设定这个变量
void main()
{
FragColor = ourColor;
}
我们在片段着色器中声明了一个uniform vec4
的ourColor
,并把片段着色器的输出颜色设置为uniform
值的内容。因为uniform
是全局变量,我们可以在任何着色器中定义它们,而无需通过顶点着色器作为中介。顶点着色器中不需要这个uniform
,所以我们不用在那里定义它。
如果你声明了一个
uniform
却在GLSL代码中没用过,编译器会静默移除这个变量,导致最后编译出的版本中并不会包含它,这可能导致几个非常麻烦的错误,记住这点!
这个uniform
现在还是空的;我们还没有给它添加任何数据,所以下面我们就做这件事。我们首先需要找到着色器中uniform
属性的索引/位置值。当我们得到uniform
的索引/位置值后,我们就可以更新它的值了。这次我们不去给像素传递单独一个颜色,而是让它随着时间改变颜色:
QT的方法
int timeValue = QTime::currentTime().second();
float greenValue = (sin(timeValue) / 2.0f) +0.5f;
shaderProgram.setUniformValue("ourColor", 0.0f, greenValue, 0.0f, 1.0f);
QT已经帮我们把相关库进行了二次封装,大大方便了我们的使用。我们不再需要手动设定uniform
变量的类型。
GLFW的方法:
float timeValue = glfwGetTime();
float greenValue = (sin(timeValue) / 2.0f) + 0.5f;
int vertexColorLocation = glGetUniformLocation(shaderProgram, "ourColor");
glUseProgram(shaderProgram);
glUniform4f(vertexColorLocation, 0.0f, greenValue, 0.0f, 1.0f);
首先我们通过
glfwGetTime()
获取运行的秒数。然后我们使用sin函数让颜色在0.0到1.0之间改变,最后将结果储存到greenValue
里。
接着,我们用glGetUniformLocation
查询uniform ourColor
的位置值。我们为查询函数提供着色器程序和uniform
的名字(这是我们希望获得的位置值的来源)。如果glGetUniformLocation
返回-1就代表没有找到这个位置值。最后,我们可以通过glUniform4f
函数设置uniform
值。注意,查询uniform
地址不要求你之前使用过着色器程序,但是更新一个uniform
之前你必须先使用程序(调用glUseProgram
),因为它是在当前激活的着色器程序中设置uniform
的。
因为OpenGL在其核心是一个C库,所以它不支持类型重载,在函数参数不同的时候就要为其定义新的函数;glUniform
是一个典型例子。这个函数有一个特定的后缀,标识设定的uniform
的类型。可能的后缀有:
每当你打算配置一个OpenGL的选项时就可以简单地根据这些规则选择适合你的数据类型的重载函数。在我们的例子里,我们希望分别设定uniform
的4个float值,所以我们通过glUniform4f
传递我们的数据(注意,我们也可以使用fv版本)。现在你知道如何设置
uniform
变量的值了,我们可以使用它们来渲染了。如果我们打算让颜色慢慢变化,我们就要在游戏循环的每一次迭代中(所以他会逐帧改变)更新这个uniform
,否则三角形就不会改变颜色。下面我们就计算greenValue
然后每个渲染迭代都更新这个uniform
:
......
// 渲染
// 清除颜色缓冲
glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
// 记得激活着色器
glUseProgram(shaderProgram);
// 更新uniform颜色
float timeValue = glfwGetTime();
float greenValue = sin(timeValue) / 2.0f + 0.5f;
int vertexColorLocation = glGetUniformLocation(shaderProgram, "ourColor");
glUniform4f(vertexColorLocation, 0.0f, greenValue, 0.0f, 1.0f);
// 绘制三角形
glBindVertexArray(VAO);
glDrawArrays(GL_TRIANGLES, 0, 3);
......
}
结果
这里的代码对之前代码是一次非常直接的修改。这次,我们在每次迭代绘制三角形前先更新uniform
值。如果你正确更新了uniform
,你会看到你的三角形逐渐由绿变黑再变回绿色。
在QT中的具体实现:
zjjopenglwidget.h:
......
#include <cmath>
#include <QTime>
#include <QTimer>
......
protected:
Shape m_shape;
QOpenGLShaderProgram shaderProgram;
QTimer timer;
......
public slots:
void on_timeout();
zjjopenglwidget.cpp:
......
ZjjOpenGLWidget::ZjjOpenGLWidget(QWidget *parent) : QOpenGLWidget(parent)
{
timer.start(100);
connect(&timer, SIGNAL(timeout()), this, SLOT(on_timeout()));
}
......
void ZjjOpenGLWidget::on_timeout()
{
makeCurrent();
int timeValue = QTime::currentTime().second();
float greenValue = (sin(timeValue) / 2.0f) +0.5f;
shaderProgram.setUniformValue("ourColor", 0.0f, greenValue, 0.0f, 1.0f);
doneCurrent();
update();
}
shapes.frag:
#version 330 core
out vec4 FragColor;
uniform vec4 ourColor;
void main()
{
//FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);
FragColor = ourColor;
}
GLSL更多属性
我们将把颜色数据添加为3个float
值至vertices
数组。我们将把三角形的三个角分别指定为红色、绿色和蓝色:
float vertices[] = {
0.5f, 0.5f, 0.0f, 1.0, 0.0, 0.0, // 右上角
0.5f, -0.5f, 0.0f, 0.0, 1.0, 0.0, // 右下角
-0.5f, -0.5f, 0.0f, 0.0, 0.0, 1.0, // 左下角
-0.5f, 0.5f, 0.0f, 0.5, 0.5, 0.5 // 左上角
};
由于现在有更多的数据要发送到顶点着色器,我们有必要去调整一下顶点着色器,使它能够接收颜色值作为一个顶点属性输入。需要注意的是我们用layout
标识符来把aColor
属性的位置值设置为1:
#version 330 core
layout (location = 0) in vec3 aPos; // 位置变量的属性位置值为 0
layout (location = 1) in vec3 aColor; // 颜色变量的属性位置值为 1
out vec3 ourColor; // 向片段着色器输出一个颜色
void main()
{
gl_Position = vec4(aPos, 1.0);
ourColor = aColor; // 将ourColor设置为我们从顶点数据那里得到的输入颜色
}
由于我们不再使用uniform
来传递片段的颜色了,现在使用ourColor
输出变量,我们必须再修改一下片段着色器:
#version 330 core
out vec4 FragColor;
in vec3 ourColor;
void main()
{
FragColor = vec4(ourColor, 1.0);
}
因为我们添加了另一个顶点属性,并且更新了VBO的内存,我们就必须重新配置顶点属性指针。更新后的VBO内存中的数据现在看起来像这样:
知道了现在使用的布局,我们就可以使用glVertexAttribPointer
函数更新顶点格式,
// 位置属性
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);
glVertexAttribPointer
函数的前几个参数比较明了。这次我们配置属性位置值为1的顶点属性。颜色值有3个float
那么大,我们不去标准化这些值。
由于我们现在有了两个顶点属性,我们不得不重新计算步长值。为获得数据队列中下一个属性值(比如位置向量的下个x
分量)我们必须向右移动6个float
,其中3个是位置值,另外3个是颜色值。这使我们的步长值为6乘以float
的字节数(=24字节)。
同样,这次我们必须指定一个偏移量。对于每个顶点来说,位置顶点属性在前,所以它的偏移量是0。颜色属性紧随位置数据之后,所以偏移量就是3 * sizeof(float)
,用字节来计算就是12字节。