計算機圖形學作業（ 七）：利用 OpenGL 繪製 Bezier 貝塞爾曲線

Bezier 曲線原理

Bezier 曲線的原理我參考了這篇博客：https://www.cnblogs.com/hyb1/p/3875468.html。

Bezier 曲線是應用於二維圖形的曲線。曲線由頂點和控制點組成，通過改變控制點座標可以改變曲線的形狀。

一次 Bezier 曲線公式：

一次 Bezier 曲線是由 P0 至 P1 的連續點，描述的一條線段。

二次 Bezier 曲線公式：

二次 Bezier 曲線是 P0 至 P1 的連續點 Q0 和 P1 至 P2 的連續點 Q1 組成的線段上的連續點 B(t)，描述一條拋物線。

三次 Bezier 曲線公式：

由此可得 Bezier 曲線的一般方程爲：

OpenGL 實現思路

在 OpenGL 窗口中，我們希望能通過左鍵點擊窗口添加 Bezier 曲線的控制點，右鍵點擊則對當前添加的最後一個控制點進行消除。然後根據鼠標繪製的控制點實時更新 Bezier 曲線。

捕獲鼠標點擊時的座標

我們需要用一個回調函數，該函數是在鼠標移動時不斷獲取鼠標在窗口的座標。

首先我們要聲明全局的鼠標位置變量，代碼如下：

float mouseXPos, mouseYPos;

然後在鼠標事件中不斷更新全局位置變量的值。代碼如下

void cursor_position_callback(GLFWwindow* window, double x, double y) { 
	mouseXPos = float((x - WINDOW_WIDTH / 2) / WINDOW_WIDTH) * 2;
	mouseYPos = float(0 - (y - WINDOW_HEIGHT / 2) / WINDOW_HEIGHT) * 2;
	return; 
}

根據頂點畫出連續的線段

前面我們獲取的鼠標的當前位置，那麼當鼠標點擊左鍵時，我們要捕獲該點擊事件，將頂點數據添加到 lineVertices 並通過綁定 VAO 畫出線段。

先聲明全局的頂點數據變量：

// 聲明全局頂點變量, 點個數爲 vertexLen / 3
int lineVertexLen = 0;
float lineVertices[MAX_VERTEX_LEN] = {
	//位置
	//-0.5f, 0.5f, 0.0f
};

然後再鼠標點擊事件中操作：

void mouse_button_callback(GLFWwindow* window, int button, int action, int mods) { 
	if (action == GLFW_PRESS) switch (button) { 
		case GLFW_MOUSE_BUTTON_LEFT:			
			// 每隔兩個點畫一條直線
			// 鼠標點擊的點
			lineVertices[lineVertexLen] = mouseXPos;
			lineVertexLen++;
			lineVertices[lineVertexLen] = mouseYPos;
			lineVertexLen++;
			lineVertices[lineVertexLen] = 0.0f;
			lineVertexLen++;
			// 添加索引,前一個點也新的點一起確定新線段
			if (lineIndicesLen >= 2) {
				lineIndices[lineIndicesLen] = lineIndices[lineIndicesLen - 1];
				lineIndicesLen++;
				lineIndices[lineIndicesLen] = lineIndices[lineIndicesLen - 1] + 1;
				lineIndicesLen++;
			}
			else {
				lineIndices[lineIndicesLen] = lineIndicesLen;
				lineIndicesLen++;
			}
			break;
		default:				
			break;
	}	
	return; 
}

之後便是通過 VAO、VBO 和 GL_LINES 等畫出線段。

根據頂點畫出 Bezier 貝塞爾曲線

根據之前的 Bezier 曲線一般式，我們能很容易地根據頂點計算出 Bezier 曲線的點數據。只要新聲明一個函數，傳入頂點的數據和長度，就能計算出各個位置上的 Bezier 曲線的點數據，如下：

int getBezierVertex(float lineVertices[MAX_VERTEX_LEN], int lineVertexLen, float bezierVertices[MAX_BEZIER_VERTEX_LEN]) {
	int bezierVertexLen = 0;
	if (lineVertexLen == 0) return bezierVertexLen;
	else if (lineVertexLen == 3) {
		bezierVertices[bezierVertexLen] = lineVertices[0];
		bezierVertexLen++;
		bezierVertices[bezierVertexLen] = lineVertices[1];
		bezierVertexLen++;
		bezierVertices[bezierVertexLen] = lineVertices[2];
		bezierVertexLen++;
	}
	else {
		for (float t = 0.000f; t <= 1.000f; t = t + 0.001f) {
			double new_xPos = 0, new_yPos = 0;
			for (int index = 0; index < lineVertexLen / 3; index++) {
				// x座標
				new_xPos += lineVertices[index * 3] * pow(t, index) * pow((1 - t), (lineVertexLen / 3 - 1 - index));
				// y座標
				new_yPos += lineVertices[index * 3 + 1] * pow(t, index) * pow((1 - t), (lineVertexLen / 3 - 1 - index));
			}
			bezierVertices[bezierVertexLen] = new_xPos;
			bezierVertexLen++;
			bezierVertices[bezierVertexLen] = new_yPos;
			bezierVertexLen++;
			bezierVertices[bezierVertexLen] = 0.0f;
			bezierVertexLen++;
		}
	}
	return bezierVertexLen;
}

之後便可以通過 VAO、VBO 和 GL_POINTS 等畫出 Bezier 曲線。

效果

代碼

#include <iostream>
#include <cmath>
#include <glad/glad.h>
#include <GLFW/glfw3.h>

#include "imgui.h"
#include "imgui_impl_glfw.h"
#include "imgui_impl_opengl3.h"

#include <glm.hpp>
#include <gtc/matrix_transform.hpp>
#include <gtc/type_ptr.hpp>

// 加載紋理的庫
#include "stb_image.h"

//使用了官方的shader庫文件，可以更方便地操作shader
//注意，使用官方庫操作shadder時，自己寫的頂點和片段着色器代碼必須另外寫成文件
//然後把文件路徑傳入shader.h提供的構造函數
#include "shader.h"  

using namespace std;

const int WINDOW_WIDTH = 1000;
const int WINDOW_HEIGHT = 800;
const int MAX_VERTEX_LEN = 300;
const int MAX_INDICES_LEN = 600;
const int MAX_BEZIER_VERTEX_LEN = 3000;

void framebuffer_size_callback(GLFWwindow* window, int width, int height);
void processInput(GLFWwindow* window);
void mouse_button_callback(GLFWwindow* window, int button, int action, int mods);
void cursor_position_callback(GLFWwindow* window, double x, double y);
int getBezierVertex(float lineVertices[MAX_VERTEX_LEN],int lineVertexLen, float bezierVertices[MAX_BEZIER_VERTEX_LEN]);

// 聲明鼠標全局位置變量
float mouseXPos, mouseYPos;

// 聲明全局頂點變量, 點個數爲 vertexLen / 3
int lineVertexLen = 0;
float lineVertices[MAX_VERTEX_LEN] = {
	//位置
	//-0.5f, 0.5f, 0.0f,
	//0.5f, 0.5f, 0.0f,
	//0.5f, -0.5f, 0.0f
};
int lineIndicesLen = 0;
unsigned int lineIndices[MAX_INDICES_LEN] = { // 注意索引從0開始! 
	//0, 1, // 第一個線段
	//1, 2
};


int main() {
	//初始化opengl窗口和配置
	glfwInit();
	glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
	glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
	glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);
	
	GLFWwindow* window = glfwCreateWindow(WINDOW_WIDTH, WINDOW_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);
	glfwSetMouseButtonCallback(window, mouse_button_callback);
	glfwSetCursorPosCallback(window, cursor_position_callback);

	if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress)) {
		std::cout << "Failed to initialize GLAD" << std::endl;
		return -1;
	}

	// 深度測試
	glEnable(GL_DEPTH_TEST);

	//創建並綁定ImGui
	const char* glsl_version = "#version 130";
	IMGUI_CHECKVERSION();
	ImGui::CreateContext();
	ImGuiIO& io = ImGui::GetIO(); (void)io;
	ImGui::StyleColorsDark();
	ImGui_ImplGlfw_InitForOpenGL(window, true);
	ImGui_ImplOpenGL3_Init(glsl_version);

	Shader lineShader("vertexShader.vs", "lineFragmentShader.fs");
	Shader bezierShader("vertexShader.vs", "bezierFragmentShader.fs");

	bool show_window = true;

	while (!glfwWindowShouldClose(window)) {
		processInput(window);

		//清除屏幕
		glClearColor(0.1f, 0.1f, 0.1f, 1.0f);
		glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

		unsigned int VAO;
		unsigned int VBO;
		unsigned int EBO;

		//必須先綁定VA0
		glGenVertexArrays(1, &VAO);
		glBindVertexArray(VAO);

		//再綁定VBO
		glGenBuffers(1, &VBO);
		glBindBuffer(GL_ARRAY_BUFFER, VBO);
		glBufferData(GL_ARRAY_BUFFER, sizeof(lineVertices), lineVertices, GL_STATIC_DRAW);

		//使用EBO畫多個線段，組合成其它圖形
		glGenBuffers(1, &EBO);
		glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
		glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(lineIndices), lineIndices, GL_STATIC_DRAW);

		//再設置屬性
		//位置屬性
		//屬性位置值爲0的頂點屬性
		glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
		glEnableVertexAttribArray(0);

		glBindBuffer(GL_ARRAY_BUFFER, 0);

		glEnableVertexAttribArray(1);

		// 使用着色器程序
		lineShader.use();

		//畫線段，
		glBindVertexArray(VAO);
		// 因爲通過 indices 確定線段，每兩點確定一線段，所以畫多少線段，就填入線段數乘以2
		if (lineIndicesLen >= 2) {
			glDrawElements(GL_LINES, lineIndicesLen, GL_UNSIGNED_INT, 0);
		}


		// 以下是 bezier 點數據
		// 聲明 bezier 頂點變量 
		int bezierVertexLen = 0;
		float bezierVertices[MAX_BEZIER_VERTEX_LEN] = {
			//-0.5f, 0.5f, 0.0f,
		};

		bezierVertexLen = getBezierVertex(lineVertices, lineVertexLen, bezierVertices);

		unsigned int bezierVAO;
		unsigned int bezierVBO;

		//必須先綁定VA0
		glGenVertexArrays(1, &bezierVAO);
		glBindVertexArray(bezierVAO);

		//再綁定VBO
		glGenBuffers(1, &bezierVBO);
		glBindBuffer(GL_ARRAY_BUFFER, bezierVBO);
		glBufferData(GL_ARRAY_BUFFER, sizeof(bezierVertices), bezierVertices, GL_STATIC_DRAW);

		//再設置屬性
		//位置屬性
		//屬性位置值爲0的頂點屬性
		glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
		glEnableVertexAttribArray(0);

		glBindBuffer(GL_ARRAY_BUFFER, 0);

		glEnableVertexAttribArray(1);

		// 使用着色器程序
		bezierShader.use();

		//畫線段，
		glBindVertexArray(bezierVAO);
		glDrawArrays(GL_POINTS, 0, bezierVertexLen / 3);

		//創建imgui
		ImGui_ImplOpenGL3_NewFrame();
		ImGui_ImplGlfw_NewFrame();
		ImGui::NewFrame();

		ImGui::Begin("Edit cube", &show_window, ImGuiWindowFlags_MenuBar);


		ImGui::End();

		ImGui::Render();
		int display_w, display_h;
		glfwMakeContextCurrent(window);
		glfwGetFramebufferSize(window, &display_w, &display_h);
		glViewport(0, 0, display_w, display_h);
		ImGui_ImplOpenGL3_RenderDrawData(ImGui::GetDrawData());

		glfwPollEvents();
		glfwSwapBuffers(window);
	}

	glfwTerminate();

	return 0;
}

void framebuffer_size_callback(GLFWwindow* window, int width, int height) {
	glViewport(0, 0, width, height);
}

void processInput(GLFWwindow* window) {
	if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS) {
		glfwSetWindowShouldClose(window, true);
	}
}

void mouse_button_callback(GLFWwindow* window, int button, int action, int mods) { 
	if (action == GLFW_PRESS) switch (button) { 
		case GLFW_MOUSE_BUTTON_LEFT:			
			// 每隔兩個點畫一條直線
			// 鼠標點擊的點
			lineVertices[lineVertexLen] = mouseXPos;
			lineVertexLen++;
			lineVertices[lineVertexLen] = mouseYPos;
			lineVertexLen++;
			lineVertices[lineVertexLen] = 0.0f;
			lineVertexLen++;
			// 添加索引,前一個點也新的點一起確定新線段
			if (lineIndicesLen >= 2) {
				lineIndices[lineIndicesLen] = lineIndices[lineIndicesLen - 1];
				lineIndicesLen++;
				lineIndices[lineIndicesLen] = lineIndices[lineIndicesLen - 1] + 1;
				lineIndicesLen++;
			}
			else {
				lineIndices[lineIndicesLen] = lineIndicesLen;
				lineIndicesLen++;
			}
			break;
		case GLFW_MOUSE_BUTTON_RIGHT:
			if (lineVertexLen >= 3) {
				lineVertexLen = lineVertexLen - 3;
			}

			if (lineIndicesLen >= 4) {
				lineIndicesLen = lineIndicesLen - 2;
			}
			else {
				lineIndicesLen = lineIndicesLen - 1;
			}

			break;
		default:				
			break;
	}	
	return; 
}

void cursor_position_callback(GLFWwindow* window, double x, double y) { 
	mouseXPos = float((x - WINDOW_WIDTH / 2) / WINDOW_WIDTH) * 2;
	mouseYPos = float(0 - (y - WINDOW_HEIGHT / 2) / WINDOW_HEIGHT) * 2;
	return; 
}

int getBezierVertex(float lineVertices[MAX_VERTEX_LEN], int lineVertexLen, float bezierVertices[MAX_BEZIER_VERTEX_LEN]) {
	int bezierVertexLen = 0;
	if (lineVertexLen == 0) return bezierVertexLen;
	else if (lineVertexLen == 3) {
		bezierVertices[bezierVertexLen] = lineVertices[0];
		bezierVertexLen++;
		bezierVertices[bezierVertexLen] = lineVertices[1];
		bezierVertexLen++;
		bezierVertices[bezierVertexLen] = lineVertices[2];
		bezierVertexLen++;
	}
	else {
		for (float t = 0.000f; t <= 1.000f; t = t + 0.001f) {
			double new_xPos = 0, new_yPos = 0;
			for (int index = 0; index < lineVertexLen / 3; index++) {
				// x座標
				new_xPos += lineVertices[index * 3] * pow(t, index) * pow((1 - t), (lineVertexLen / 3 - 1 - index));
				// y座標
				new_yPos += lineVertices[index * 3 + 1] * pow(t, index) * pow((1 - t), (lineVertexLen / 3 - 1 - index));
			}
			bezierVertices[bezierVertexLen] = new_xPos;
			bezierVertexLen++;
			bezierVertices[bezierVertexLen] = new_yPos;
			bezierVertexLen++;
			bezierVertices[bezierVertexLen] = 0.0f;
			bezierVertexLen++;
		}
	}
	return bezierVertexLen;
}