[OpenGL][VAO, VBO] 삼각형그리기

 

Open GL es 이론을 공부하면서 비주얼 스크립트를 통해 Open GL실습을 하고있다.
이번에는 Open GL 라이브러리를 가져와 라이브러리 내 함수로 삼각형을 그리려고 한다.
 

첫번째로는 GLUT 라이브러리 내 함수를 사용해 버텍스의 좌표, 색상 벡터값을 지정해주어
간단하게 그려보는 코드로 아래와 같이 작성했다.
 

#include <glut.h>

void Display()
{
	//화면 지우고 버퍼 클리어
	glClear(GL_COLOR_BUFFER_BIT);

	//삼각형 그리기 시작 ------------------------------------------------------------
	glBegin(GL_TRIANGLES);

	//버텍스 색상, 위치 지정
	glColor3f(1, 0, 0);	 
    glVertex2f(-0.6, -0.75);
	
	glColor3f(0, 1, 0);	 
    glVertex2f(0.6, -0.75);
	
	glColor3f(0, 0, 1);	 
	glVertex2f(0, 0.75);


	//삼각형그리기 끝 -----------------------------------------------------------------
	glEnd();

	// 화면에 삼각형 표시
	glFlush();
}

int main(int argc, char** argv) 
{
	//OpenGL 윈도우 초기화
	glutInit(&argc, argv);

	//RGB사용하는 윈도우 한개 생성
	glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);

	//윈도우 위치, 크기, 이름 지정
	glutInitWindowPosition(80, 80);
	glutInitWindowSize(400, 300);
	glutCreateWindow("OpenGL Triangle");

	//Display 함수 호출
	glutDisplayFunc(Display);

	glutMainLoop();
}

 
Disply() 함수 내에서 삼각형 좌표와 색상 벡터값을 지정한다. 이때 삼각형을 그리는 코드는 glBegin() 뒤,  glEnd() 앞에서 작성하여야 한다.
 
해당 코드가 실행되기위해서는 GLUT 라이브러리를 불러와야하는데, 이를 위해 나는 glut.dll파일을 해당 cpp파일과 같은 경로안에 넣어두었다.

 
 
나는 400*300 크기의 윈도우위에 각 버텍스의 좌표와 색상값이 다른 삼각형을 그려주었다.
결과는 아래와 같다.

 
 
 

---

 
 
 
두번째 방법은 GLFW 라이브러리를 사용하는 방식이다.
여기서 GLUT 과 GLFW 의 차이에 대해 생기는 의문이 있을텐데 그에 대한 답은 chat gpt의 대답을 차용하도록하겠다.

GLFW는 OpenGL을 위한 C 라이브러리로, 윈도우 생성, 입력 처리, OpenGL 컨텍스트 관리 등을 담당합니다. GLFW는 크로스 플랫폼을 지원하며, 윈도우 시스템과의 상호 작용을 쉽게 할 수 있도록 도와줍니다. 또한 멀티스레딩 환경에서 안정적으로 동작하며, 윈도우 이벤트 처리, 키보드 및 마우스 입력 처리 등 다양한 기능을 제공합니다.
반면, GLUT는 OpenGL Utility Toolkit의 약자로, C/C++을 위한 라이브러리입니다. GLUT는 단순화된 API를 제공하여 OpenGL 프로그래밍을 편리하게 만들어줍니다. 주로 간단한 그래픽 애플리케이션 개발에 사용되며, 윈도우 생성, 이벤트 처리, 기본적인 입력 처리 등을 지원합니다. 하지만 멀티스레드 환경에서는 제한적인 기능을 가지고 있습니다.

 
요약하자면 GLFW는 비교적 정교하고 강력한 기능을 제공하는 OpenGL 라이브러리이고, GLUT는 비교적 간단한 그래픽 어플리케이션을 빠르게 개발하기 용이한 OpenGL 라이브러리인 것이다.
 
 
 
사실말해보자면 라이브러리는 어떤것을 사용하든 삼각형을 그리는데에는 방식이 크게 차이나지는 않을것이다.
다만, 아래 방법은 VAO와 VBO를 사용해 삼각형을 그리고, 파일을 읽어와 쉐이더를 직접 컴파일 하는 형식으로 작성되었다.
 
세부 사항은 주석을 참고하길 바란다.

//API 헤더 포함
#include <GL/glew.h>
#include <GLFW/glfw3.h>
#include <stdlib.h>
#include <stdio.h>
#include <fstream>
#include <string>

//shader ID 번호 저장용 변수 선언
GLuint VBO, VAO, shader;

// 셰이더 파일내용 읽어오기 -> 문자열 반환
std::string	ReadFile(const char* filePath)
{
	std::string content;
	std::ifstream fileStream(filePath, std::ios::in);

	while (!fileStream.is_open())
	{
		printf("%s 파일 읽기를 실패했습니다.\n", filePath);
		return "";
	}

	std::string line = "";
	while (!fileStream.eof())
	{
		std::getline(fileStream, line);
		content.append(line + "\n");
	}

	fileStream.close();
	return content;
}

//쉐이더 컴파일 -> ID 반환
GLuint	AddShader(const char* shaderCode, GLenum shaderType)
{
	GLuint new_shader = glCreateShader(shaderType); 

	const GLchar* code[1];
	code[0] = shaderCode;

	glShaderSource(new_shader, 1, code, NULL); //쉐이더 코드 -> 쉐이더에 연결

	GLint result = 0;
	GLchar err_log[1024] = { 0 };

	glCompileShader(new_shader); //쉐이더 컴파일
	glGetShaderiv(new_shader, GL_COMPILE_STATUS, &result); //컴파일 성공 bool
	if (!result)
	{
		glGetShaderInfoLog(new_shader, sizeof(err_log), NULL, err_log);
		printf("Error compiling the %d shader: '%s'\n", shaderType, err_log);
		return 0;
	}
	return new_shader;
}

// 버텍스, 프래그먼트 쉐이더를 컴파일 -> 쉐이더 프로그램 만드는 함수
// vsCode = 버텍스 쉐이더 코드, fsCode = 프래그먼트 쉐이더 코드 -> 문자열
void	CompileShader(const char* vsCode, const char* fsCode)
{
	GLuint vs, fs;

	shader = glCreateProgram(); //쉐이더 프로그램 생성 후 ID반환

	if (!shader)
	{
		printf("Error: Cannot create shader program.");
		return;
	}

	vs = AddShader(vsCode, GL_VERTEX_SHADER); //ID생성 -> 컴파일
	fs = AddShader(fsCode, GL_FRAGMENT_SHADER);
	glAttachShader(shader, vs);  //버텍스 쉐이더 프로그램 첨부
	glAttachShader(shader, fs); // 프래그먼트 쉐이더 프로그램 첨부

	GLint result = 0;
	GLchar err_log[1024] = { 0 };

	glLinkProgram(shader);  // 쉐이더 코드를 명령어로 변환 , GPU실행파일 생성
	glGetProgramiv(shader, GL_LINK_STATUS, &result); //링크 성공여부 확인 
	if (!result)
	{
		glGetProgramInfoLog(shader, sizeof(err_log), NULL, err_log);
		printf("Error linking program: '%s'\n", err_log);
		return;
	}
}

//버텍스, 프래그먼트 쉐이더 경로를 읽어와 쉐이더 프로그램을 만드는 함수
void CreateShaderProgramFromFiles(const char* vsPath, const char* fsPath)
{
	std::string vsFile = ReadFile(vsPath);
	std::string fsFile = ReadFile(fsPath);
	const char* vsCode = vsFile.c_str();
	const char* fsCode = fsFile.c_str();

	CompileShader(vsCode, fsCode);
}

//삼각형을 생성하는 함수
void CreateTriangle()
{
	//버텍스 좌표 정의
	GLfloat vertices[] = {
		-1.0f, -1.0f, 0.0f,
		1.0f, -1.0f, 0.0f,
		0.0f, 1.0f, 0.0f
	};

	//VAO는  하나 이상의 VBO를 갖는 객체, 모든 데이터를 포함, ID가짐
	glGenVertexArrays(1, &VAO); //버텍스 데이터 상태를저장, 읽기위한 가이드
	glBindVertexArray(VAO); //VAO를 바인딩

	//VBO는 한 정점의 위치, 색상, 노멀정보를 가짐, 고유ID
	glGenBuffers(1, &VBO); // VBO생성 - 버텍스 버퍼 오브젝트
	glBindBuffer(GL_ARRAY_BUFFER, VBO); //GL_ARRAY_BUFFER(openGL context)로 VBO를 바인딩
	glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

	glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 0, 0); //GPU가 VBO를 읽을 수 있도록 정보 전달
	glEnableVertexAttribArray(0);

	glBindBuffer(GL_ARRAY_BUFFER, 0);

	glBindVertexArray(0);

int main(void)
{
	// GLFW 라이브러리 초기화
	if (!glfwInit())
		exit(EXIT_FAILURE);

	glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 4); // OpenGL 버전(x.y 중 x)
	glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 6); // 4.6에 맞춰 실행(x.y 중 y)
	glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE); // 더 이상 쓰이지 않는 하위 호환 기능들 에러 처리
	glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE); // 상위 호환성 지원

	//GLFW창 생성
	GLFWwindow* window = glfwCreateWindow(1080, 720, "title", NULL, NULL);
	if (!window)
	{
		glfwTerminate();
		exit(EXIT_FAILURE);
	}

	//컨텍스트 커렌트 윈도우 생성
	glfwMakeContextCurrent(window);

	//프레임 버퍼 크기를 가져와서 뷰포트 설정
	int framebuf_width, framebuf_height;
	glfwGetFramebufferSize(window, &framebuf_width, &framebuf_height);
	glViewport(0, 0, framebuf_width, framebuf_height);

	//Glew 초기화
	if (glewInit() != GLEW_OK)
	{
		glfwTerminate();
		exit(EXIT_FAILURE);
	}

	//삼각형 생성
	CreateTriangle();
	CreateShaderProgramFromFiles("shader.vert", "shader.frag");

	//렌더링루프
	while (!glfwWindowShouldClose(window))
	{
		//
		glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
		glClear(GL_COLOR_BUFFER_BIT);

		glUseProgram(shader);

		glBindVertexArray(VAO);
		glDrawArrays(GL_TRIANGLES, 0, 3);
		glBindVertexArray(0);

		glUseProgram(0);

		glfwSwapBuffers(window);
		glfwPollEvents();
	}

	glfwTerminate();

	return 0;
}

 
 
OpenGL은 하나의 State Machine으로 설명되는데, state를 한번 설정하면 해당 state에 따라 작동하고 이 state가 바뀌지 않는 한 그 상태가 계속 유지되기 때문이다. 
더 간단하게 말해보자면 가장 최근에 설정된  state로 돌아가는 기계라고 이해하면 된다.
 
따라서, OpenGL object는 이 state를 갖는 구조체와 같고 위 코드에서 Open GL Object는 GL_ARRAY_BUFFER 라는OpenGL context에 바인드 되어  context에 연결된 state를 current state로 인식하고, 이를 바탕으로 작동하게 된다.
 
그럼 해당 경우에는 어떤 OpenGL oject가 사용되었을까?
 
첫번째로는  VBO라는 OpenGL객체다.
VBO( Vertex Buffer Object ) 는 버텍스의 정점 데이터는 위치, 색상, 텍스처 좌표 등의 속성을 포함하고있는 객체이다.
 
VBO를 왜 사용하냐고 묻는다면 성능향상이 목적이다.
정점 데이터가 많아질 수록 GPU가 계속해서 꼭짓점을 그리는것은 효율적이지 않다. 따라서 CPU에서 그래픽 메모리로 저장되어 원하는 때에 GPU가 그릴 수 있도록 하게되는데 이렇게 정점데이터를 작성, 저장하는 단계를 Vertex Specification이라고 한다. VBO는 이 과정에서 정점데이터가 저장되는 OpenGL객체로서 사용된다.
 
위 코드를 보면 VBO는단순한 배열에 지나지 않는다. 그럼 GPU는 이 배열을 어떻게 삼각형으로 읽을 수 있는 것일까?

	//버텍스 좌표 정의
	GLfloat vertices[] = {
		-1.0f, -1.0f, 0.0f,
		1.0f, -1.0f, 0.0f,
		0.0f, 1.0f, 0.0f
	};

 
이 때 우리는 Attribute에 대해 알아야한다.
Vertex Attribute는 VBO가 포함하고있는 정점데이터가 어떤 형식으로 저장되어있는지를 GPU가 알 수 있도록 나타내는 것으로  Attribute를 연동시켜주어야 GPU가 삼각형을 올바르게 그릴 수 있다.
위 코드에서는 glVertexAttribPointer() 함수를 통해 버텍스 데이터에 대한 정보를 전달하고있다.
 
이렇게 위 코드에서 VBO는 Gen -> Bind -> Data 의순서로 사용 되고있다.
 
-
 
두번째로 설명할 OpenGL Object는 VAO이다.
VAO( Vertex Array Object ) 는 위 과정에서 VBO를 통해 데이터를 바인드, 저장하고 attribute를 설정하는 모든 작업을 하나의 state로 묶어서 OpenGL Object에 저장하는 역할을 하는 객체이다.
앞서 말했듯 작업을 하나로 묶은 state를 current state로 만들어 작업을 한번만 하게 한다.
 
VAO를 사용하는 과정은 Gen -> Bind 의 순서로 정의할 수 있고
VAO를 생성한 뒤 OpenGL context에 바인드 해줄 때마다 VAO에 과정을 저장하게 된다.
 
 
 

---

 
 
 
코드를 작성하면서 버텍스쉐이더와 프래그먼트 쉐이더, VBO, VAO.. 그 외에도 생소한 용어가 많이나와
흐름을 이해하는데 많은 시간을 쓴 것 같다. 
 
특히, VBO와 VAO는 버텍스 버퍼, 인덱스버퍼와의 관계와 닮아있다고 착오해 
둘의 개념을 헷갈려하곤 했는데 이번기회에 두 개념에 대한 정의를 올바르게 알 수 있었다.
오늘 공부 끝 !