镜之国的爱丽丝
0%

01_画个三角形

发表于 更新于 分类于 ，

1. 管线图例

703548-20190402212658795-1353723850.png

2. 进入 main() 函数

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
//----------------------------------------------------------------------------
//
// main
//

#ifdef _WIN32
int CALLBACK WinMain(
    _In_ HINSTANCE hInstance,
    _In_ HINSTANCE hPrevInstance,
    _In_ LPSTR     lpCmdLine,
    _In_ int       nCmdShow
)
#else
int
main(int argc, char** argv)
#endif
{
    // 初始化 GLFW 库
    glfwInit();

    // 创建一个窗口以及一个新的 OpenGL 环境
    // 设置程序所使用的窗口类型以及期望的窗口尺寸
    GLFWwindow* window = glfwCreateWindow(800, 600, "Triangles", NULL, NULL);

    // 设置 window 中的窗口所关联的 OpenGL 环境为当前环境
    glfwMakeContextCurrent(window);

    // 初始化 GL3W 库，简化函数寻址过程
    gl3wInit();

    // 初始化
    init();

    // 循环直至用户关闭窗口
    while (!glfwWindowShouldClose(window))
    {
        // 渲染
        display();

        // 交换前后缓存，即渲染每一帧画面
        glfwSwapBuffers(window);

        // 监听所有等待处理的事件和消息
        glfwPollEvents();
    }

    // 释放 window
    glfwDestroyWindow(window);

    // 关闭 GLFW 库
    glfwTerminate();
}

3. OpenGL 的初始化过程

3.1 对象结构

screenShot.png

VAO : {VBO , 顶点属性}

注意绑定顺序 ：

  • 生成和绑定 VAO ；
  • 生成和绑定 VBO ；
  • 将 VBO 和 顶点数据 关联；
  • 设置 顶点属性 { 数组头指针 , 数据步长 } ；
  • 这时 VAO 才同时存储 VBO 和 顶点属性 两个信息

3.2 变量声明

1
2
3
4
5
6
7
8
enum VAO_IDs { Triangles, NumVAOs };
enum Buffer_IDs { ArrayBuffer, NumBuffers };
enum Attrib_IDs { vPosition = 0 };

GLuint  VAOs[NumVAOs];
GLuint  Buffers[NumBuffers];

const GLuint  NumVertices = 6;

3.3 顶点数组

3.3.1 顶点数组对象（VAO）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//----------------------------------------------------------------------------
//
// init
// 负责设置程序中需要用到的数据
//

void
init(void)
{
    // 分配一个顶点数组对象 VAOs ，分配的对象个数为 NumVAOs
    glGenVertexArrays(NumVAOs, VAOs);

    // 将顶点数组对象绑定到当前 OpenGL 环境中
    // 分两种情况调用该函数：
    // 1 - 创建并初始化一个对象；
    // 2 - 准备使用某个对象，但它并不是当前绑定的对象
    glBindVertexArray(VAOs[Triangles]);


    ......(分配缓存对象)
}

3.3.2 顶点缓存对象（VBO）

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
//----------------------------------------------------------------------------
//
// init
// 负责设置程序中需要用到的数据
//

void
init(void)
{
    ......(初始化顶点数组对象)

    // 顶点数据
    GLfloat  vertices[NumVertices][2] = {
        { -0.90f, -0.90f }, {  0.85f, -0.90f }, { -0.90f,  0.85f },  // Triangle 1
        {  0.90f, -0.85f }, {  0.90f,  0.90f }, { -0.85f,  0.90f }   // Triangle 2
    };

    // 缓存对象：是 OpenGL 服务端分配和管理的一块内存区域
    //          几乎所有传入 OpenGL 的数据都是存储在缓存对象当中的

    // 分配一个缓存对象 Buffers ，对象个数为 NumBuffers
    glCreateBuffers(NumBuffers, Buffers);

    // 绑定缓存对象 Buffers 到当前的 OpenGL 环境
    // 同时需要指定对应的类型，该处为 GL_ARRAY_BUFFER 类型
    glBindBuffer(GL_ARRAY_BUFFER, Buffers[ArrayBuffer]);

    // 1 - 分配顶点数据所需的存储空间
    // 2 - 将数据从应用程序的数组中拷贝到 OpenGL 服务端的内存中
    glBufferStorage(GL_ARRAY_BUFFER, sizeof(vertices), vertices, 0);

    // 设置 “顶点属性”
    // vPosition        ：顶点着色器中输入变量的 location 值，该处为 0
    // 2                ：数组中每个顶点的元素数目，该处即 x 和 y 一共两个
    // GL_FLOAT         ：表示数组中每个元素为 GLfloat 类型
    // GL_FALSE         ：不进行归一化操作
    // 0                ：数组中每两个元素之间的大小偏移值，该处数组应“紧密封装”
    // BUFFER_OFFSET(0) ：缓存对象中，从起始位置开始计算的数组的偏移值（设起始地址为 0 ）
    glVertexAttribPointer(vPosition, 2, GL_FLOAT, GL_FALSE, 0, BUFFER_OFFSET(0));

    // 启用与 vPosition 索引相关的顶点数组
    glEnableVertexAttribArray(vPosition);

    ......(初始化顶点与片元着色器)
}

3.3.3 索引缓冲对象

当需要绘制两个三角形时：

1
2
3
4
5
6
7
8
9
10
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,  // 右下角
    -0.5f, -0.5f, 0.0f, // 左下角
    -0.5f, 0.5f, 0.0f   // 左上角
};

其中有重复的顶点信息，这时可以维护一个索引数据

  • 顶点数据 ：存储顶点的原始信息（位置、颜色等）；
  • 索引数据 ：指定三角形每个顶点所需要的顶点数据的索引。
1
2
3
4
5
6
7
8
9
10
11
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  // 第二个三角形
};

使用流程同上：

1
2
3
4
5
6
7
// 生成
GLuint EBO;
glGenBuffers(1, &EBO);
// 绑定
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
// 关联数据
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);

渲染：

1
2
3
4
// 绑定
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
// 根据索引绘制
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);

3.4 初始化顶点与片元着色器

3.4.1 顶点着色器

1
2
3
4
5
6
7
8
9
10
11
12
// 版本声明，450 表示使用的 OpenGL 4.5
#version 450 core

// 布局限定符：为变量提供元数据
// 设置 vPosition 的位置属性 location 为 0 
layout( location = 0 ) in vec4 vPosition;

void
main()
{
    gl_Position = vPosition;
}

该处为一个 传递着色器 ，只负责将输入数据拷贝到输出数据中

3.4.2 片元着色器

1
2
3
4
5
6
7
8
#version 450 core

layout( location = 0 ) out vec4 fColor;

void main()
{
    fColor = vec4(0.5, 0.4, 0.8, 1.0);
}

依据位置信息，生成对应的颜色信息

vPosition -> gl_Position -> fColor

Note ：

  • 所有的输入输出变量都应设置 location

3.4.3 初始化着色器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//----------------------------------------------------------------------------
//
// init
// 负责设置程序中需要用到的数据
//

void
init(void)
{
    ......(分配缓存对象)

    Shader::ShaderInfo shaders[] =
    {
        // { 类型，文件路径 }
        { GL_VERTEX_SHADER, "Media/Shader/01_Triangle/triangles.vert" },
        { GL_FRAGMENT_SHADER, "Media/Shader/01_Triangle/triangles.frag" },
        { GL_NONE, NULL }
    };

    // 读取文件和创建 OpenGL 着色器程序
    Shader ourShader(shaders);
    ourShader.use();
}

Note ：

4. 读取着色器的基本流程

screenShot.png

4.1 着色器对象

4.1.1 创建着色器对象

  • 创建着色器对象，例如 GL_VERTEX_SHADER 、 GL_FRAGMENT_SHADER
1
2
GLuint vertexShader;
vertexShader = glCreateShader(GL_VERTEX_SHADER);

4.1.2 关联着色器数据

  • 将着色器对象和着色器数据关联
1
2
3
4
5
6
7
8
9
10
// 着色器数据
const GLchar* 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";

// 将对象和数据进行关联
 glShaderSource(vertexShader, 1, &vertexShaderSource, NULL);

4.1.3 编译着色器

  • 编译着色器
1
glCompileShader(fragmentShader);

4.1.4 生成报错日志

  • 检测编译是否成功，生成日志
1
2
3
4
5
6
7
8
9
10
GLint  success;
GLchar 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;
}

4.1.5 维护一个着色器数组

上述是以顶点着色器为例，片元着色器同理，在实际使用过程中，会有多个着色器，这时我们可以维护一个着色器的数组，迭代的进行上述流程

1
2
3
4
5
6
7
ShaderInfo shaders[] =
    {
        // { 类型，文件路径 }
        { GL_VERTEX_SHADER, "media/shaders/triangles/triangles.vert" },
        { GL_FRAGMENT_SHADER, "media/shaders/triangles/triangles.frag" },
        { GL_NONE, NULL }
    };

4.2 着色器程序

4.2.1 创建着色器程序对象

1
2
GLuint shaderProgram;
shaderProgram = glCreateProgram();

4.2.2 添加着色器对象

将 4.1 中编译完成的 着色器对象 依次添加到 着色器程序对象 上

1
2
glAttachShader(shaderProgram, vertexShader);
glAttachShader(shaderProgram, fragmentShader);

4.2.3 着色器链接

进行着色器的链接操作

1
glLinkProgram(shaderProgram);

4.2.4 生成报错日志

检测着色器链接是否成功

1
2
3
4
5
6
glGetProgramiv(shaderProgram, GL_LINK_STATUS, &success);

if (!success) {
    glGetProgramInfoLog(shaderProgram, 512, NULL, infoLog);
    std::cout << "ERROR::SHADER::VERTEX::COMPILATION_FAILED\n" << infoLog << std::endl;
}

4.2.5 激活着色器程序

着色器程序激活之后，在渲染过程中会自动使用该着色器管线进行渲染

1
glUseProgram(shaderProgram);

4.2.6 释放着色器对象

1
2
glDeleteShader(vertexShader);
glDeleteShader(fragmentShader);

5. 使用 OpenGL 进行渲染

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
//----------------------------------------------------------------------------
//
// display
// 执行渲染工作
// 1）调用 glClearBufferfv() 清除窗口内容
// 2）调用 OpenGL 命令来渲染对象
// 3）将最终图像输出到屏幕
//

void
display(void)
{
    static const float black[] = { 0.0f, 0.0f, 0.0f, 0.0f };
    static const float red[] = { 1.0f, 0.0f, 0.0f, 0.0f };

    // 使用 black 初始化当前的帧缓存(也可以换成 red)
    // 清除当前绘制帧缓存中的指定缓存类型
    glClearBufferfv(GL_COLOR, 0, red);

    // 先绑定当前帧使用的顶点数组
    glBindVertexArray(VAOs[Triangles]);

    // 使用当前绑定的顶点数组元素来建立一系列的几何图元
    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);

    // 根据索引绘制
    glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);
}

6. 结果

screenShot.png