着色器（Shader）

9.4 着色器

​ 着色器（Shader）：在GPU伤的片段，执行图形渲染的各个阶段，决定最终像素的颜色和其他属性；可以分为顶点着色器（Vertex Shader）和片段着色器（Fragment Shader），着色器使用GLSL语言；

顶点着色器（Vertex Shader）:顶点着色器主要负责处理输入的顶点坐标，并对这些顶点进行变换

片段着色器（Fragment Shader）：主要负责处理图形中的每个片段（像素）。它可以计算像素的最终颜色，进行光照计算、纹理映射、颜色插值等

着色器的结构：版本声明 + 输入/输出/全局变量 + main函数

9.4.1 uniform变量

uniform 是一个全局的变量，在着色器glsl代码上只有变量声明，但是并没有具体值，这个变量的值一般在c pp上进行赋值；

void setVec3(const std::string &name, float x, float y, float z) const
{ 
glUniform3f(glGetUniformLocation(ID, name.c_str()), x, y, z); 
}
1
2
3
4

glGetUniformLocation 函数获取指定名称的 uniform 变量在着色器程序中的位置。

使用 glUniform3f 函数将 vec3 类型的值设置给指定位置的 uniform 变量

9.4.2 Vertex Shader

#version 330 core //版本声明
//声明了两个输入属性，分别是顶点的位置和颜色
layout(location = 0) in vec3 aPosition;//顶点位置属性在顶点数据中的位置索引为0
in vec3 aColor;//颜色属性

out vec3 vColor;//传递顶点的颜色给片段着色器

//三个uniform变量，分别代表投影矩阵、视图矩阵和模型矩阵
uniform mat4 uProjection;//Uniform  是特殊的一种全局变量
uniform mat4 uView;
uniform mat4 uModel;

void main()
{
  //顶点位置从对象空间变换到裁剪空间
    gl_Position = uProjection * uView * uModel * vec4(aPosition, 1.0);
    vColor = aColor;//将顶点的颜色属性传递给输出属性
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

这段代码简单地描述了一个典型的顶点着色器结构，它将顶点从对象空间变换到裁剪空间，并传递了顶点的颜色属性给片段着色器。

9.4.3 Fragment Shader

#version 330 core

in vec3 vColor; // 接收从顶点着色器传递过来的颜色属性

//片段着色器的输出颜色是一个 vec4 类型的向量，其中的分量分别对应着红、绿、蓝和透明度
out vec4 FragColor; // 片段着色器的输出颜色

void main()
{
    FragColor = vec4(vColor, 1.0); // 使用顶点着色器传递的颜色属性作为片段的颜色输出
}

1
2
3
4
5
6
7
8
9
10
11
12

在这个示例中，片段着色器接收顶点着色器传递过来的颜色属性，并将其作为片段的颜色输出。

9.4.4 调用着色器

调用着色器的步骤：

创建: glCreateShader,glShaderSource

编译：glcompileShader，glGetShaderiv

链接使用：glCreateProgram，glAttachShader，glLinkProgram, glUseProgram，glGetProgramiv

while循环：glfwWindowShouldClose(),glClear，glfwSwapBuffers()，glfwPollEvents

清理：glDeleteShader，glDeleteProgram，glfwTerminate()

（1）创建

​ glCreateShader

作用：创建一个空的 shader 对象，并返回一个非0的shader ID值

unsigned int vertexShader = glCreateShader(GL_VERTEX_SHADER);//创建顶点着色器
1

​ glShaderSource

作用：给shader对象指定源码

原型：

void glShaderSource(GLuint shader,  //需要设置源码的 shader 对象
				 	GLsizei count,//源码脚本的数量
				 	const GLchar **string,//shader的glsl代码对象
				 	const GLint *length);//shader的glsl代码对象的长度，一般NULL表示代码结束的位置
1
2
3
4

// 创建顶点着色器对象
GLuint vertexShader = glCreateShader(GL_VERTEX_SHADER);
// 将顶点着色器源代码加载到着色器对象中
const char* vertexShaderSourcePtr = vertexShaderSource.c_str();
glShaderSource(vertexShader, 1, &vertexShaderSourcePtr, NULL);
1
2
3
4
5

（2）编译

glCompileShader

作用：编译着色器

glCompileShader(vertexShader);//编译顶点着色器
1

glGetShaderiv

作用：从着色器对象返回一个信息数组

void glGetShaderiv（GLuint shader,GLenum pname,GLint *params）;
//指定着色器对象的参数，GL_COMPILE_STATUS:
//params：函数返回结果
1
2
3

使用：

int success;
char infoLog[512];
glGetShaderiv(vertexShader, GL_COMPILE_STATUS, &success);//检查顶点着色器是否编译成功
if (!success)
{
  glGetShaderInfoLog(vertexShader, 512, NULL, infoLog);
  std::cout << "ERROR::SHADER::VERTEX::COMPILATION_FAILED\n" << infoLog << std::endl;
}
1
2
3
4
5
6
7
8

glGetShaderInfoLog

作用：反回着色器对象的信息日志

char infoLog[512];
glGetShaderInfoLog(vertexShader, 512, NULL, infoLog);
1
2

（3）链接

a. 在连接shader之前，首先要创建一个容纳程序的容器，称为着色器程序容器。通过glCreateProgram函数来创建一个程序容器。

函数原型：

int glCreateProgram () //如果函数调用成功将返回一个正整数作为该着色器程序的id。
1

b. shader容器添加到程序中，shader容器不一定需要被编译，甚至不需要包含任何的代码，lAttachShader函数将shader容器添加到程序中

函数原型：

void glAttachShader (int program, int shader)
/**
 program是着色器程序容器的id；
 shader是要添加的顶点或者片元shader容器的id
*/
1
2
3
4
5

参数含义：
program是着色器程序容器的id；
shader是要添加的顶点或者片元shader容器的id

c. 在链接操作执行以后，可以任意修改shader的源代码，对shader重新编译不会影响整个程序，除非重新链接程序。

函数原型：

void glLinkProgram (int program)
//program是着色器程序容器的id
1
2

d. 加载并使用链接好的程序,将program设置为0，表示使用固定功能管线。

函数原型：

void glUseProgram (int program)
//program是要使用的着色器程序的id
1
2

（4）while循环

// 渲染循环
while (!glfwWindowShouldClose(window)) {
  glClear(GL_COLOR_BUFFER_BIT);//清除缓存，GL_COLOR_BUFFER_BIT 颜色缓存

  // 绘制代码
  glfwSwapBuffers(window);//交换缓冲区，渲染操作一般是在后缓冲区完成的，而前缓冲区则用于显示。调用这个函数会交换前后缓冲区的内容，使得后缓冲区的内容被复制到前缓冲区，从而显示在窗口中
  glfwPollEvents();//挂起所有事件
}
1
2
3
4
5
6
7
8

（5）清理

 // 清理资源
 glDeleteShader(vertexShader);
 glDeleteShader(fragmentShader);
 glDeleteProgram(shaderProgram);
 glfwTerminate();
1
2
3
4
5

示例代码1:

#ifndef SHADER_H
#define SHADER_H

#include 
#include 

#include 
#include 
#include 
#include 

class Shader
{
public:
    unsigned int ID;
    // constructor generates the shader on the fly
    // ------------------------------------------------------------------------
    Shader(const char* vertexPath, const char* fragmentPath)
    {
        // 1. retrieve the vertex/fragment source code from filePath
        std::string vertexCode;
        std::string fragmentCode;
        std::ifstream vShaderFile;
        std::ifstream fShaderFile;
        // ensure ifstream objects can throw exceptions:
        vShaderFile.exceptions (std::ifstream::failbit | std::ifstream::badbit);
        fShaderFile.exceptions (std::ifstream::failbit | std::ifstream::badbit);
        try 
        {
            // open files
            vShaderFile.open(vertexPath);
            fShaderFile.open(fragmentPath);
            std::stringstream vShaderStream, fShaderStream;
            // read file's buffer contents into streams
            vShaderStream << vShaderFile.rdbuf();
            fShaderStream << fShaderFile.rdbuf();		
            // close file handlers
            vShaderFile.close();
            fShaderFile.close();
            // convert stream into string
            vertexCode = vShaderStream.str();
            fragmentCode = fShaderStream.str();			
        }
        catch (std::ifstream::failure& e)
        {
            std::cout << "ERROR::SHADER::FILE_NOT_SUCCESSFULLY_READ: " << e.what() << std::endl;
        }
        const char* vShaderCode = vertexCode.c_str();
        const char * fShaderCode = fragmentCode.c_str();
        // 2. compile shaders
        unsigned int vertex, fragment;
        // vertex shader
        vertex = glCreateShader(GL_VERTEX_SHADER);
        glShaderSource(vertex, 1, &vShaderCode, NULL);
        glCompileShader(vertex);
        checkCompileErrors(vertex, "VERTEX");
        // fragment Shader
        fragment = glCreateShader(GL_FRAGMENT_SHADER);
        glShaderSource(fragment, 1, &fShaderCode, NULL);
        glCompileShader(fragment);
        checkCompileErrors(fragment, "FRAGMENT");
        // shader Program
        ID = glCreateProgram();
        glAttachShader(ID, vertex);
        glAttachShader(ID, fragment);
        glLinkProgram(ID);
        checkCompileErrors(ID, "PROGRAM");
        // delete the shaders as they're linked into our program now and no longer necessary
        glDeleteShader(vertex);
        glDeleteShader(fragment);

    }
    // activate the shader
    // ------------------------------------------------------------------------
    void use() const
    { 
        glUseProgram(ID); 
    }
    // utility uniform functions
    // ------------------------------------------------------------------------
    void setBool(const std::string &name, bool value) const
    {         
        glUniform1i(glGetUniformLocation(ID, name.c_str()), (int)value); 
    }
    // ------------------------------------------------------------------------
    void setInt(const std::string &name, int value) const
    { 
        glUniform1i(glGetUniformLocation(ID, name.c_str()), value); 
    }
    // ------------------------------------------------------------------------
    void setFloat(const std::string &name, float value) const
    { 
        glUniform1f(glGetUniformLocation(ID, name.c_str()), value); 
    }
    // ------------------------------------------------------------------------
    void setVec2(const std::string &name, const glm::vec2 &value) const
    { 
        glUniform2fv(glGetUniformLocation(ID, name.c_str()), 1, &value[0]); 
    }
    void setVec2(const std::string &name, float x, float y) const
    { 
        glUniform2f(glGetUniformLocation(ID, name.c_str()), x, y); 
    }
    // ------------------------------------------------------------------------
    void setVec3(const std::string &name, const glm::vec3 &value) const
    { 
        glUniform3fv(glGetUniformLocation(ID, name.c_str()), 1, &value[0]); 
    }
    void setVec3(const std::string &name, float x, float y, float z) const
    { 
        glUniform3f(glGetUniformLocation(ID, name.c_str()), x, y, z); 
    }
    // ------------------------------------------------------------------------
    void setVec4(const std::string &name, const glm::vec4 &value) const
    { 
        glUniform4fv(glGetUniformLocation(ID, name.c_str()), 1, &value[0]); 
    }
    void setVec4(const std::string &name, float x, float y, float z, float w) const
    { 
        glUniform4f(glGetUniformLocation(ID, name.c_str()), x, y, z, w); 
    }
    // ------------------------------------------------------------------------
    void setMat2(const std::string &name, const glm::mat2 &mat) const
    {
        glUniformMatrix2fv(glGetUniformLocation(ID, name.c_str()), 1, GL_FALSE, &mat[0][0]);
    }
    // ------------------------------------------------------------------------
    void setMat3(const std::string &name, const glm::mat3 &mat) const
    {
        glUniformMatrix3fv(glGetUniformLocation(ID, name.c_str()), 1, GL_FALSE, &mat[0][0]);
    }
    // ------------------------------------------------------------------------
    void setMat4(const std::string &name, const glm::mat4 &mat) const
    {
        glUniformMatrix4fv(glGetUniformLocation(ID, name.c_str()), 1, GL_FALSE, &mat[0][0]);
    }

private:
    // utility function for checking shader compilation/linking errors.
    // ------------------------------------------------------------------------
    void checkCompileErrors(GLuint shader, std::string type)
    {
        GLint success;
        GLchar infoLog[1024];
        if (type != "PROGRAM")
        {
            glGetShaderiv(shader, GL_COMPILE_STATUS, &success);
            if (!success)
            {
                glGetShaderInfoLog(shader, 1024, NULL, infoLog);
                std::cout << "ERROR::SHADER_COMPILATION_ERROR of type: " << type << "\n" << infoLog << "\n -- --------------------------------------------------- -- " << std::endl;
            }
        }
        else
        {
            glGetProgramiv(shader, GL_LINK_STATUS, &success);
            if (!success)
            {
                glGetProgramInfoLog(shader, 1024, NULL, infoLog);
                std::cout << "ERROR::PROGRAM_LINKING_ERROR of type: " << type << "\n" << infoLog << "\n -- --------------------------------------------------- -- " << std::endl;
            }
        }
    }
};
#endif

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166

示例代码2：

cmakelist

cmake_minimum_required(VERSION 3.12)
project(OpenGL)

set(CMAKE_CXX_STANDARD 11)

set(GLEW_H /usr/local/Cellar/glew/2.2.0_1/include/GL)
set(GLFW_H /usr/local/Cellar/glfw/3.3.6/include/GLFW)
set(GLAD_H /Users/xiongzhiyao/glad/include)
set(KH_H /Users/xiongzhiyao/glad/include/)
include_directories(${GLEW_H} ${GLFW_H} ${GLAD_H} ${KH_H})



# 添加目标链接
set(GLEW_LINK /usr/local/Cellar/glew/2.2.0_1/lib/libGLEW.2.2.dylib)
set(GLFW_LINK /usr/local/Cellar/glfw/3.3.6/lib/libglfw.3.dylib)
link_libraries(${OPENGL} ${GLEW_LINK} ${GLFW_LINK})

# 执行编译命令
set(SOURCE_FILES glad.c main.cpp)
add_executable(OpenGL ${SOURCE_FILES})

# mac下这步很重要
if (APPLE)
    target_link_libraries(OpenGL "-framework OpenGL")
    target_link_libraries(OpenGL "-framework GLUT")
endif()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

cpp

#include 
#include 

#include 

void framebuffer_size_callback(GLFWwindow* window, int width, int height);
void processInput(GLFWwindow *window);

// settings
const unsigned int SCR_WIDTH = 800;
const unsigned int SCR_HEIGHT = 600;

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

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

int main()
{
    // glfw: initialize and configure
    // ------------------------------
    glfwInit();//初始化glfw库
    glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);//设置openGL的主版本号
    glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);//设置openGL的次版本号
    glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);//profile设置openGL的配置文件

#ifdef __APPLE__
    glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE);
#endif

    // glfw window creation
    // --------------------
    GLFWwindow* window = glfwCreateWindow(SCR_WIDTH, SCR_HEIGHT, "LearnOpenGL", NULL, NULL);//创建一个窗口
    if (window == NULL)
    {
        std::cout << "Failed to create GLFW window" << std::endl;
        glfwTerminate();
        return -1;
    }
    glfwMakeContextCurrent(window);//将当前上下文设置为窗口上下文
    glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);//设置窗口大小回调函数

    // glad: load all OpenGL function pointers
    // ---------------------------------------
    if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress))
    {
        std::cout << "Failed to initialize GLAD" << std::endl;
        return -1;
    }

    // build and compile our shader program
    // ------------------------------------
    // vertex shader
    unsigned int vertexShader = glCreateShader(GL_VERTEX_SHADER);//创建顶点着色器
    glShaderSource(vertexShader, 1, &vertexShaderSource, NULL);//将顶点着色器附加到着色器对象上
    glCompileShader(vertexShader);//编译顶点着色器
    // check for shader compile errors
    int success;
    char infoLog[512];
    glGetShaderiv(vertexShader, GL_COMPILE_STATUS, &success);//检查顶点着色器是否编译成功
    if (!success)
    {
        glGetShaderInfoLog(vertexShader, 512, NULL, infoLog);
        std::cout << "ERROR::SHADER::VERTEX::COMPILATION_FAILED\n" << infoLog << std::endl;
    }
    // fragment shader
    unsigned int fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);//创建片段着色器
    glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);//添加对象
    glCompileShader(fragmentShader);//编译片段着色器
    // check for shader compile errors
    glGetShaderiv(fragmentShader, GL_COMPILE_STATUS, &success);//检查编译是否成功
    if (!success)
    {
        glGetShaderInfoLog(fragmentShader, 512, NULL, infoLog);
        std::cout << "ERROR::SHADER::FRAGMENT::COMPILATION_FAILED\n" << infoLog << std::endl;
    }
    // link shaders
    unsigned int shaderProgram = glCreateProgram();
    glAttachShader(shaderProgram, vertexShader);
    glAttachShader(shaderProgram, fragmentShader);
    glLinkProgram(shaderProgram);
    // check for linking errors
    glGetProgramiv(shaderProgram, GL_LINK_STATUS, &success);//检查着色器链接是否错误
    if (!success) {
        glGetProgramInfoLog(shaderProgram, 512, NULL, infoLog);
        std::cout << "ERROR::SHADER::PROGRAM::LINKING_FAILED\n" << infoLog << std::endl;
    }
    glDeleteShader(vertexShader);//删除顶点着色器
    glDeleteShader(fragmentShader);//删除片段着色器

    // set up vertex data (and buffer(s)) and configure vertex attributes
    // ------------------------------------------------------------------
    float vertices[] = {
            // positions         // colors
            0.5f, -0.5f, 0.0f,  1.0f, 0.0f, 0.0f,  // bottom right
            -0.5f, -0.5f, 0.0f,  0.0f, 1.0f, 0.0f,  // bottom left
            0.0f,  0.5f, 0.0f,  0.0f, 0.0f, 1.0f   // top

    };

    unsigned int VBO, VAO;
    glGenVertexArrays(1, &VAO);//生成1个VAO
    glGenBuffers(1, &VBO);//生成一个VBO
    // bind the Vertex Array Object first, then bind and set vertex buffer(s), and then configure vertex attributes(s).
    glBindVertexArray(VAO);

    glBindBuffer(GL_ARRAY_BUFFER, VBO);//绑定VBO
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);//将顶点数据传递到VBO

    // position attribute 位置属性和颜色属性
    glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)0);//将当前顶点属性与VBO关联
    glEnableVertexAttribArray(0);//启动顶点属性
    // color attribute
    glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)(3 * sizeof(float)));
    glEnableVertexAttribArray(1);

    // You can unbind the VAO afterwards so other VAO calls won't accidentally modify this VAO, but this rarely happens. Modifying other
    // VAOs requires a call to glBindVertexArray anyways so we generally don't unbind VAOs (nor VBOs) when it's not directly necessary.
    // glBindVertexArray(0);

    // as we only have a single shader, we could also just activate our shader once beforehand if we want to
    glUseProgram(shaderProgram);//使用着色程序

    // render loop 主任务渲染循环
    // -----------
    while (!glfwWindowShouldClose(window))
    {
        // input
        // -----
        processInput(window);//处理用户输入

        // render
        // ------
        glClearColor(0.2f, 0.3f, 0.3f, 1.0f);//清空颜色
        glClear(GL_COLOR_BUFFER_BIT);//清空颜色缓冲区

        // render the triangle
        glBindVertexArray(VAO);//绑定VAO并绘制三角形
        glDrawArrays(GL_TRIANGLES, 0, 3);//绘制三角形

        // glfw: swap buffers and poll IO events (keys pressed/released, mouse moved etc.)
        // -------------------------------------------------------------------------------
        glfwSwapBuffers(window);//交换前后缓冲区
        glfwPollEvents();//处理窗口事件
    }

    // optional: de-allocate all resources once they've outlived their purpose:
    // ------------------------------------------------------------------------
    glDeleteVertexArrays(1, &VAO);
    glDeleteBuffers(1, &VBO);
    glDeleteProgram(shaderProgram);

    // glfw: terminate, clearing all previously allocated GLFW resources.
    // ------------------------------------------------------------------
    glfwTerminate();//关闭glfw程序
    return 0;
}

// process all input: query GLFW whether relevant keys are pressed/released this frame and react accordingly
// ---------------------------------------------------------------------------------------------------------
void processInput(GLFWwindow *window)
{
    if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)
        glfwSetWindowShouldClose(window, true);
}

// glfw: whenever the window size changed (by OS or user resize) this callback function executes
// ---------------------------------------------------------------------------------------------
void framebuffer_size_callback(GLFWwindow* window, int width, int height)
{
    // make sure the viewport matches the new window dimensions; note that width and
    // height will be significantly larger than specified on retina displays.
    glViewport(0, 0, width, height);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187

9.4.5 法线的计算

法线向量的计算通常需要根据具体的情况来决定，但是常见的方式包括以下几种：

（1）在顶点着色器中计算

法线向量乘以模型矩阵的逆转置矩阵来实现的

Normal = mat3(transpose(inverse(model))) * aNormal;
1

（2）在片段着色器中计算 （3）使用法线贴图