【图形学基础算法】壹-本系列代码框架

发表于 | 更新于：

前言

  在光栅扫描显示器等设备上，所有图形的显示都归结为按照图形的描述将显示设备上的光栅像素点亮。为了输出一个像素，需要将该像素的坐标和颜色信息转换成输出设备的相应指令，根据指令在指定的屏幕位置上开启（接通）电路（电子束），将该位置上的显示单元器件发亮。基本图元显示问题就是根据基本图元的描述信息来生成像素组合。 ——《计算机图形学基础（OpenGL版）》

  本系列文章主要介绍根据描述来生成基本图元的算法，例如两点生成直线。

  这篇文章中我们主要实现基础的一个 OpenGL 代码框架来为我们之后的直线或者其他图形生成来做准备。如果你还完全不懂 OpenGL ，那么可以参考本博客站中的 OpenGL 学习记录。

  在很多介绍这些基本算法的文章或者书中，要么是 OpenGL 伪代码，要么是使用命令行来绘制（毕竟算法才是本体），现代 OpenGL 中已经没有了直接操作像素的方法 SetPixel() （使用 OpenGL 3.0+ 和 GLEW , GLFW），所以我们使用了纹理来代替。我们将纹理覆盖在窗口，然后通过修改纹理的数据来达到类似于设置像素的结果。

  基础框架的 Shader 代码极为简单：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//File Name : vertexShader.glsl
#version 330 core

layout (location = 0) in vec3 aPos;
layout (location = 1) in vec2 aTex;

out vec2 tex;

void main(){
	tex = aTex;
	gl_Position = vec4(aPos, 1.0f);
}

//File Name : fragmentShader.glsl
#version 330 core

uniform sampler2D samp;

in vec2 tex;
out vec4 FragColor;

void main(){
	FragColor = texture(samp , tex);
}

  编译和链接此 Shader 程序的代码暂且不提，之后可以在文末下载。我们主要来看看我们实现 SetPixel 方法的过程。

  我们的纹理将使用我们自己定义的一个数组，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*
 * File   : Texture
 * Author : KsGin 
 * Date   : 2018/4/17
 */

#include <string>
#include <GL/glew.h>
#include <iostream>

class Texture {
public:
    unsigned int ID;
    unsigned char *data;
    int width, height;

    Texture(int w, int h);

    void UpdateTexture();

    void Use();
    
    void SetPixel(int w, int h, unsigned char r, unsigned char g, unsigned char b);
};

  这是我们 Texture 类的声明，它共包括四个方法，构造方法，更新，绑定和我们所需要的 SetPixel ，在构造方法中我们接收纹理的 width 和 height 参数，并初始化 data 。

1
2
3
4
width = w;
height = h;
data = new unsigned char[w * h * 3];
memset(data, 0, sizeof(unsigned char) * 3 * height * width);

  同时也初始化纹理：

1
2
3
4
5
6
7
glGenTextures(1, &ID);
glBindTexture(GL_TEXTURE_2D, ID);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_R, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

  我们的纹理类型为 GL_RGB 三通道，所以 data 的大小应该为 w h 3 。

  在 Use() 方法中我们绑定纹理，在 UpdateTexture 中我们使用 data 加载纹理：

1
2
3
4
5
6
void Use() {
     glBindTexture(GL_TEXTURE_2D, ID);
}
void UpdateTexture() {
     glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);
}

  事实上这几个方法都是为 SetPixel() 服务 ，SetPixel() 方法中我们修改 data 数据后调用 Use 和 UpdateTexture() 。SetPixel 方法接受要修改的像素坐标以及要设置的颜色：

1
2
3
4
5
6
7
void SetPixel(int w, int h, unsigned char r, unsigned char g, unsigned char b) {
    data[width * (h - 1) * 3 + w * 3 - 2] = r;
    data[width * (h - 1) * 3 + w * 3 - 1] = g;
    data[width * (h - 1) * 3 + w * 3 - 0] = b;
    Use();
    UpdateTexture();
}

  现在，我们创建这么一个简单的 SetPixel 方法，在 OpenGL 的窗口中我们调用这个纹理，并生成一条直线，完整的 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
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
#include <GL/glew.h>
#include <GLFW/glfw3.h>

#include <iostream>
#include "Headers/Shader.hpp"
#include "Headers/Texture.hpp"
#include "Headers/Model.hpp"

using namespace std;
using namespace glm;

const int width = 800, height = 500;


void KeyCallback(GLFWwindow *window, int key, int scancode, int action, int mode);



int main() {
    if (!glfwInit()) {
        cout << "Init GLFW failed" << endl;
        glfwTerminate();
        return -1;
    }
    glfwWindowHint(GLFW_SAMPLES, 4);
    glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
    glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
    glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);
    glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GLFW_TRUE);

    GLFWwindow *pWindow = glfwCreateWindow(width, height, "Graphics Algorithm", nullptr, nullptr);
    if (!pWindow) {
        cout << "Create window failed" << endl;
        glfwTerminate();
        return -1;
    }
    glfwMakeContextCurrent(pWindow);

    glewExperimental = GL_TRUE;
    if (glewInit() != GLEW_OK) {
        cout << "Failed to init GLEW" << endl;
        return -1;
    }

    glfwSetKeyCallback(pWindow, KeyCallback);

    glDisable(GL_DEPTH_TEST);

    auto glslShader = Shader("../Shaders/vertexShader.glsl", "../Shaders/fragmentShader.glsl");
    auto glslTex = Texture(width , height);
    auto screen = Model("../Resources/screen.txt");

    while (!glfwWindowShouldClose(pWindow)) {
        glfwPollEvents();

        glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
        glClearColor(0.0f, 0.0f, 0.0f, 1.0f);

        glslShader.use();
        glslTex.Use();
        screen.Use();

        for (int i = 0; i < 600; ++i) {
            glslTex.SetPixel(100 + i , 250 , 255 , 255 , 255);
        }

        glDrawElements(GL_TRIANGLES , screen.IndexCount() , GL_UNSIGNED_INT , 0);

        glfwSwapBuffers(pWindow);
    }

    return 0;
}

void KeyCallback(GLFWwindow *window, int key, int scancode, int action, int mode) {
    if (key == GLFW_KEY_ESCAPE && action == GLFW_PRESS) {
        glfwSetWindowShouldClose(window, GL_TRUE);
    }
}

  最终效果如下：

1

  完整代码：GraphicsAlgorithm

0%