OpenGL基础(05)GLSL语言简介

本文介绍了OpenGL着色器语言GLSL的基础知识,包括向量、矩阵的使用以及输入输出变量的概念。GLSL用于编写着色器程序,涉及向量的重组、矩阵运算以及数据在顶点和片段着色器间的传递。通过uniform变量,可以从CPU向GPU发送数据,实现颜色等属性的动态变化。通过实例展示了如何在OpenGL程序中设置和使用uniform变量,以实现颜色的动态渲染效果。
摘要由CSDN通过智能技术生成

前几个章节主要是使用OpenGL绘制出基本的图形,从这里开始我们考虑颜色的渐变,首先要了解GLSL语言的基础知识。

1 GLSL简介

GLSL是用来编写着色器程序的语言。GLSL是为图形计算量身定制的,它包含一些针对向量和矩阵操作的有用特性。着色器的开头要声明版本,接着是输入和输出变量、uniform和main函数。每个着色器的入口点都是main函数,在main中我们处理所有的in变量,并将结果输出到out变量中。

2 GLSL数据类型

GLSL的数据类型可以来指定变量种类。有如下几类:

  • 基础数据类型:intfloatdoubleuintbool
  • 容器类型:向量(Vector)、矩阵(Matrix)

因为基础数据类型 和C语言类似,因此不多做阐述,主要讲解向量部分和矩阵部分

2.1 向量

@1 向量形式

GLSL中的向量是一个可以包含有1-4个分量的容器,分量的类型可以是前面默认基础类型的任意一个。它们可以是下面的形式(n代表分量的数量):

  • vecn:包含n个float分量的默认向量
  • bvecn:包含n个bool分量的向量
  • ivecn:包含n个int分量的向量
  • uvecn:包含n个unsigned int分量的向量
  • dvecn:包含n个double分量的向量

一个向量的分量可以通过vec.x这种方式获取,也可以使用.x、.y、.z和.w来获取它们的其他几个分量。GLSL也允许对颜色使用rgba,或对纹理坐标使用stpq访问相同的分量。

@2 向量重组

向量这一数据类型也允许一些有趣而灵活的分量选择方式,叫做重组(Swizzling)。重组允许这样的语法:

vec2 someVec;
vec4 differentVec = someVec.xyxx;
vec3 anotherVec = differentVec.zyw;
vec4 otherVec = someVec.xxxx + anotherVec.yxzy;

可以使用上面4个字母任意组合来创建一个和原来向量一样长的(同类型)新向量,只要原来向量有那些分量即可。

@3 向量传递

我们也可以把一个向量作为一个参数传给不同的向量构造函数,以减少需求参数的数量:

vec2 vect = vec2(0.5f, 0.7f);
vec4 result = vec4(vect, 0.0f, 0.0f);
vec4 otherResult = vec4(result.xyz, 1.0f);

总之,向量是一种灵活的数据类型,我们可以把用在各种输入和输出上。

2.2 矩阵

3 输入输出

3.1 输入输出基础

着色器是各自独立的小程序,因此GLSL为每个着色器都定义了in和out关键字专门来实现数据交流和传递。每个着色器使用in和out来设定输入输出,只要一个输出变量与下一个着色器阶段的输入匹配,它的值就会传递下去。但在顶点和片段着色器中会有点不同。

  • 顶点着色器从顶点数据中直接接收输入。
  • 片段着色器需要一个vec4颜色输出变量,因为它需要生成一个最终输出的颜色。

所以,如果我们打算从一个着色器向另一个着色器发送数据,我们必须在发送方着色器中声明一个输出,在接收方着色器中声明一个输入。当类型和名字都一样的时候,OpenGL就会把两个变量链接到一起,它们之间就能发送数据了(这在链接程序对象时完成的)。如下两个着色器代码连接的方式如下:

@1 顶点着色器

#version 330 core
layout (location = 0) in vec3 position; // position变量的属性位置值为0
out vec4 vertexColor; // 为片段着色器指定一个颜色输出
void main()
{
    gl_Position = vec4(position, 1.0); // 注意我们如何把一个vec3作为vec4的构造器的参数
    vertexColor = vec4(0.0f, 0.0f, 1.0f, 1.0f); // 把输出变量设置为暗红色
}

@2 片段着色器

#version 330 core
in vec4 vertexColor; // 从顶点着色器传来的输入变量(名称相同、类型相同)
out vec4 color; // 片段着色器输出的变量名可以任意命名,类型必须是vec4
void main()
{
    color = vertexColor;
}

在顶点着色器中声明了一个vertexColor变量作为vec4输出,并在片段着色器中声明了一个vertexColor变量作为输入。它们名字相同且类型相同,片段着色器中的vertexColor就和顶点着色器中的vertexColor链接了。由于我们在顶点着色器中将颜色设置为蓝色,最终的片段也是蓝色的。值传递的过程 就像是管道连接过程一样。

3.2 输入输出扩展

基于上面的机制,我们可以把颜色数据加进顶点数据中。代码如下所示:

GLfloat 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    // 顶部
};

由于有更多的数据要发送到顶点着色器,我们调整一下顶点着色器,使它能够接收颜色值作为一个顶点属性输入。需要注意的是我们用layout标识符来把color属性的位置值设置为1,代码如下所示:

#version 330 core
layout (location = 0) in vec3 position; // 位置变量的属性位置值为 0 
layout (location = 1) in vec3 color;    // 颜色变量的属性位置值为 1
out vec3 ourColor; // 向片段着色器输出一个颜色
void main()
{
    gl_Position = vec4(position, 1.0);
    ourColor = color; // 将ourColor设置为我们从顶点数据那里得到的输入颜色
}

对应的片段着色器代码如下:

#version 330 core
in vec3 ourColor;
out vec4 color;

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

因为我们添加了另一个顶点属性,并且更新了VBO的内存,我们就必须重新配置顶点属性指针。之前是这样:

更新后的VBO内存中的数据现在看起来像这样:

对应的代码修改为:

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

我们有3个顶点,和相应的3个颜色,从这个三角形的像素来看它可能包含50000左右的片段,片段着色器为这些像素进行插值颜色。如果你仔细看这些颜色就应该能明白了:红首先变成到紫再变为蓝色。片段插值会被应用到片段着色器的所有输入属性上。所以最终产生的效果如下所示:

4 Uniform变量

Uniform是 从CPU中的应用向GPU中的着色器发送数据的方式,但uniform和顶点属性有些不同。

  • uniform是全局的(Global)。
  • 无论你把uniform值设置成什么,uniform会一直保存它们的数据,直到它们被重置或更新。

通过GLSL语言,可以通过uniform设置三角形的颜色,着色器代码如下:

#version 330 core
out vec4 color;
uniform vec4 ourColor; // 在OpenGL程序代码中设定这个变量
void main()
{
    color = ourColor;
}  

接下来我们在应用代码中做如下设置,代码如下:

//获取运行的秒数。
GLfloat timeValue = glfwGetTime();
//使用sin函数让颜色在0.0到1.0之间改变,最后将结果储存到greenValue,持续变化
GLfloat greenValue = (sin(timeValue) / 2) + 0.5;
//查询uniform ourColor的位置值。查询函数参数为:着色器程序 和 uniform名字
GLint vertexColorLocation = glGetUniformLocation(shaderProgram, "ourColor");
glUseProgram(shaderProgram);
//设置uniform值
glUniform4f(vertexColorLocation, 0.0f, greenValue, 0.0f, 1.0f);

知道如何设置uniform变量的值,就可以使用它们来渲染了。可以在每次渲染循环时更新uniform,渲染部分代码如下:

while(!glfwWindowShouldClose(window))
{
    glfwPollEvents();
    glClearColor(0.2f, 0.4f, 0.3f, 1.0f);
    glClear(GL_COLOR_BUFFER_BIT);
    glUseProgram(shaderProgram);

    //新添加部分:更新uniform颜色
    GLfloat timeValue = glfwGetTime();
    GLfloat greenValue = (sin(timeValue) / 2) + 0.5;
    GLint vertexColorLocation = glGetUniformLocation(shaderProgram, "ourColor");
    glUniform4f(vertexColorLocation, 0.0f, greenValue, 0.0f, 1.0f);

    glBindVertexArray(VAO);
    glDrawArrays(GL_TRIANGLES, 0, 3);
    glBindVertexArray(0);
}

该系列文章主要参考openGL官网 和学习 learnopenGL官网 进行知识体系的梳理和重构,重在形成自己对openGL知识的理解和知识体系。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

图王大胜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值