基于OpenGL的Koch分形雪花实现

在这学期选修了一门计算机图形学，本来是想好好学习一番，但。。。总感觉老师的教学水平有限，一学期下来感觉没学到啥东西，最多就是在几次实战作业中熟悉了一下部分效果的实现。唯一稍微有点收获的就是第一次作业，老师要求实现一种分形图形，最好是雪花。这也算是我开始学习图形学后第一个不是跟着教程实现的小功能，通过自己对API的理解和尝试实现的，虽然很简单，但也是学习路上一点小小的进步吧，在此记录下来（顺便把代码放上来，节省电脑硬盘，代码本身也不多，不想放在GitHub上）

什么是分形

本来是想认真的写个定义，但好像其严格定义有点复杂。。。本人比较懒，就不写了。简单来说，分形图就是以一个“父图”为基准，按照一定规律在“父图”上衍生出“子图”，并以此不断循环下去，放一个简单的图例就知道了（百度直接找的，侵删）：

这个图应该能比较好的展现分形雪花的概念。

实现思路

从图形的演变，我们很简单就能想到可以运用递归的思路，现在我们应该考虑的是递归函数的构造——用什么作为递归的参数？以怎样的方式调用下一次递归？

很明显，如果我们直接拿“雪花”本身作为递归的对象，这个递归函数很难实现，通过观察我们可以发现，实际上所谓的“雪花分形”，本质上也是线段的分形，即下图：

每一层次的分形“雪花”，都由相应数量的“线段”构成，而“分形”其实便是所有的线段分形一次，因此我们只需每次递归实现上图中的（1）->（2）即可，我们的递归函数的基本构造便是：输入参数为一条线段的两个端点（的位置），在函数内部计算需要生成的三个端点（的位置），即线段1/3处的端点，线段2/3处的端点，以及用该两点计算出的三角顶点，该算法的实现代码如下如所示：

aPoint v1 = mix(a, b, 1.0f / 3.0f);
aPoint v3 = mix(a, b, 2.0f / 3.0f);
aPoint v2 = caculatev2(v1, v3);

aPoint mix(aPoint a, aPoint b, float length)
{aPoint v;v.x = a.x + (b.x - a.x) * length;v.y = a.y + (b.y - a.y) * length;v.z = 0.0f;return v;
}

aPoint caculatev2(aPoint a, aPoint b)
{aPoint v;v.x = b.x - a.x;v.y = b.y - a.y;v.z = 0.0f;aPoint v2;v2.x = v.x * cos(glm::radians(60.0f)) - v.y * sin(glm::radians(60.0f));v2.y = v.x * sin(glm::radians(60.0f)) + v.y * cos(glm::radians(60.0f));v2.x += a.x;v2.y += a.y;v2.z = 0.0f;return v2;
}

aPoint是我自己写的一个结构体，v1为左边1/3处的点，v2为突出的顶点，v3为右边1/3处的点。左右两边1/3的点很好计算，中间的突出点有点麻烦，不过只要会sin/cos这些三角函数，推一推就好，这里就不细讲了。

现在，计算出的3个点和原来线段的2个端点一共5个点，构成了新的递归调用的参数集合，我们按照线段路线，将这5个点中任意相邻的两个点作为新的递归参数（一共调用下一层递归4次），如下代码：

void dividLine(aPoint a, aPoint b, int Depth)
{if (Depth == 0){//结束递归}else{aPoint v1 = mix(a, b, 1.0f / 3.0f);aPoint v3 = mix(a, b, 2.0f / 3.0f);aPoint v2 = caculatev2(v1, v3);dividLine(a, v1, Depth - 1);dividLine(v1, v2, Depth - 1);dividLine(v2, v3, Depth - 1);dividLine(v3, b, Depth - 1);}
}

当递归结束后，我们就得到了相应递归层次的Koch分形雪花的所有顶点，接下来我们只要调用glBufferData()等OpenGL的函数，就可以把顶点传到顶点着色器，绘制我们的雪花

一个难点

但上述的实现过程有一个问题：OpenGL顶点着色器在处理顶点的时候，是顺序执行，意思是我们在分形过程中产生的顶点，必须要按顺序插入到待传入的数组中，这样一来我们无法确定数组大小，而来对数组进行数据的插入也是十分麻烦的事情（尽管可以用vector，还是麻烦），而且把所有顶点一口气传入到GPU，我也不知道glDrawArrays()函数该怎么设置才能正确把雪花画出来（设置成GL_TRIANGLE，GL_LINES都不对，有兴趣的可以试试看）。我当时在实现的过程中就卡在这个地方上了，后来我仔细想了想，我完全可以利用递归——因为每次递归到最深层次（即Depth == 0），就代表着当前输入参数的两个端点所构成的线段，是不会继续分形的，而是会直接在屏幕上画出来，与其一口气画出整个雪花，不如在每次判定Depth等于0时，画出线段，这样当整个递归结束后，就自然而然的画出了整个雪花。在查询API的过程中，我发现glBufferData在把输出传到显存前，会先清空显存内容，只保留当前glBufferData要传入的数据。利用这一特性，我们可以在每次（Depth == 0）时，将当前两个端点的位置传入到显存中，并直接调用glDrawArrays()函数（设置成GL_LINES），将线段画出来，因此我们的递归函数就变成了如下：

void dividLine(aPoint a, aPoint b, int Depth)
{if (Depth == 0){float vertices[] = {a.x, a.y, a.z, 1.0f, 1.0f, 1.0f,b.x, b.y, b.z, 0.0f, 0.0f, 0.0f,};glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), &vertices, GL_DYNAMIC_DRAW);glDrawArrays(GL_LINES, 0, 2);}else{aPoint v1 = mix(a, b, 1.0f / 3.0f);aPoint v3 = mix(a, b, 2.0f / 3.0f);aPoint v2 = caculatev2(v1, v3);dividLine(a, v1, Depth - 1);dividLine(v1, v2, Depth - 1);dividLine(v2, v3, Depth - 1);dividLine(v3, b, Depth - 1);}
}

实验结果

最后的生成结果如下图所示

当初始Depth = 1时：

当初始Depth = 2时：

当初始Depth = 3时：

上图的雪花位置、方向有差异，是因为我们这次的作业要求还包括加入雪花的旋转、位移等。完整的代码如下所示（包括着色器）：

#include <glad/glad.h>
#include <Glfw/glfw3.h>
#include <glm/glm.hpp>
#include <glm/gtc/matrix_transform.hpp>
#include <glm/gtc/type_ptr.hpp>#include <iostream>
#include <cmath>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"
"uniform mat4 transform;\n"
"void main()\n"
"{\n"
"  gl_Position = transform * vec4(aPos, 1.0f);\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";const int WIDTH = 800;
const int HEIGH = 800;int direction = 1;
float speed = 1.0f;
int depth = 1;
bool leftkeytable = false;
bool rightkeytable = false;
bool leftButtonMouse = false;
double Xtranslate = 0.0f;
double Ytranslate = 0.0f;typedef struct Point {float x;float y;float z;
}aPoint;void framebuffer_size_callback(GLFWwindow* window, int width, int heigh)
{glViewport(0, 0, 800, 800);
}void processInput(GLFWwindow* window)
{if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)glfwSetWindowShouldClose(window, true);if (glfwGetKey(window, GLFW_KEY_LEFT) == GLFW_PRESS){leftkeytable = true;}if (glfwGetKey(window, GLFW_KEY_LEFT) != GLFW_PRESS && leftkeytable){leftkeytable = false;depth--;if (depth < 0)depth = 0;}if (glfwGetKey(window, GLFW_KEY_RIGHT) == GLFW_PRESS){rightkeytable = true;}if (glfwGetKey(window, GLFW_KEY_RIGHT) != GLFW_PRESS && rightkeytable){rightkeytable = false;depth++;if (depth > 5)depth = 5;}if (glfwGetKey(window, GLFW_KEY_A) == GLFW_PRESS){direction = 1;}if (glfwGetKey(window, GLFW_KEY_D) == GLFW_PRESS){direction = -1;}if (glfwGetKey(window, GLFW_KEY_W) == GLFW_PRESS){speed += 0.1f;if (speed > 3.0f)speed = 3.0f;}if (glfwGetKey(window, GLFW_KEY_S) == GLFW_PRESS){speed -= 0.1f;if (speed < 0.5f)speed = 0.5f;}if (glfwGetMouseButton(window, GLFW_MOUSE_BUTTON_LEFT) == GLFW_PRESS){double X, Y;glfwGetCursorPos(window, &X, &Y);Xtranslate = (X - WIDTH / 2.0) / 800.0;Ytranslate = (HEIGH / 2.0 - Y) / 800.0;}
}aPoint mix(aPoint a, aPoint b, float length)
{aPoint v;v.x = a.x + (b.x - a.x) * length;v.y = a.y + (b.y - a.y) * length;v.z = 0.0f;return v;
}aPoint caculatev2(aPoint a, aPoint b)
{aPoint v;v.x = b.x - a.x;v.y = b.y - a.y;v.z = 0.0f;aPoint v2;v2.x = v.x * cos(glm::radians(60.0f)) - v.y * sin(glm::radians(60.0f));v2.y = v.x * sin(glm::radians(60.0f)) + v.y * cos(glm::radians(60.0f));v2.x += a.x;v2.y += a.y;v2.z = 0.0f;return v2;
}void dividLine(aPoint a, aPoint b, int Depth)
{if (Depth == 0){float vertices[] = {a.x, a.y, a.z, 1.0f, 1.0f, 1.0f,b.x, b.y, b.z, 0.0f, 0.0f, 0.0f,};glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), &vertices, GL_DYNAMIC_DRAW);glDrawArrays(GL_LINES, 0, 2);}else{aPoint v1 = mix(a, b, 1.0f / 3.0f);aPoint v3 = mix(a, b, 2.0f / 3.0f);aPoint v2 = caculatev2(v1, v3);dividLine(a, v1, Depth - 1);dividLine(v1, v2, Depth - 1);dividLine(v2, v3, Depth - 1);dividLine(v3, b, Depth - 1);}
}int main()
{glfwInit();glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);GLFWwindow* window = glfwCreateWindow(800, 800, "Learnopengl", nullptr, nullptr);if (window == nullptr){std::cout << "Failed to create window!" << std::endl;glfwTerminate();return -1;}glfwMakeContextCurrent(window);if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress)){std::cout << "Failed to initialize GLAD" << std::endl;return -1;}glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);unsigned int vertexShader = glCreateShader(GL_VERTEX_SHADER);glShaderSource(vertexShader, 1, &vertexShaderSource, NULL);glCompileShader(vertexShader);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;}unsigned int fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);glCompileShader(fragmentShader);glGetShaderiv(fragmentShader, GL_COMPILE_STATUS, &success);if (!success){glGetShaderInfoLog(fragmentShader, 512, NULL, infoLog);std::cout << "ERROR::SHADER::FRAGMENT::COMPILATION_FAILED\n" << infoLog << std::endl;}unsigned int shaderProgram = glCreateProgram();glAttachShader(shaderProgram, vertexShader);glAttachShader(shaderProgram, fragmentShader);glLinkProgram(shaderProgram);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);aPoint a;a.x = -0.433f;a.y = -0.25f;a.z = 0.0f;aPoint b;b.x = 0.0f;b.y = 0.5f;b.z = 0.0f;aPoint c;c.x = 0.433f;c.y = -0.25f;c.z = 0.0f;unsigned int VAO, VBO;glGenVertexArrays(1, &VAO);glGenBuffers(1, &VBO);glBindVertexArray(VAO);glBindBuffer(GL_ARRAY_BUFFER, VBO);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);float angle = 0.0f;while (!glfwWindowShouldClose(window)){processInput(window);glClearColor(0.2f, 0.3f, 0.3f, 1.0f);glClear(GL_COLOR_BUFFER_BIT);glm::mat4 trans = glm::mat4(1.0f);trans = glm::translate(trans, glm::vec3(Xtranslate, Ytranslate, 0.0));trans = glm::rotate(trans, glm::radians(angle), glm::vec3(0.0f, 0.0f, 1.0f));angle += direction * (speed);glUseProgram(shaderProgram);unsigned int transformLoc = glGetUniformLocation(shaderProgram, "transform");glUniformMatrix4fv(transformLoc, 1, GL_FALSE, glm::value_ptr(trans));dividLine(a, b, depth);dividLine(b, c, depth);dividLine(c, a, depth);glfwSwapBuffers(window);glfwPollEvents();}glDeleteVertexArrays(1, &VAO);glDeleteBuffers(1, &VBO);glfwTerminate();return 0;
}

感谢观看，顺便吐槽一下，网上的Koch雪花实现都是几年前的了，OpenGL的接口早改了