[Open GL] Tutorial 4 : A Colored Cube 예제풀이

Notice

Recent Posts

Recent Comments

Link

« 2025/02 »
일	월	화	수	목	금	토
						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

Tags more

Archives

Today

Total

관리 메뉴

Today, I will

[Open GL] Tutorial 4 : A Colored Cube 예제풀이 본문

Open GL

[Open GL] Tutorial 4 : A Colored Cube 예제풀이

Lv.Forest 2023. 10. 30. 01:32

예제풀이

아래 문서의 예제를 풀어보는 포스팅입니다.

Tutorial 4 : A Colored Cube

Welcome for the 4rth tutorial ! You will do the following : Draw a cube instead of the boring triangle Add some fancy colors Learn what the Z-Buffer is Draw a cube A cube has six square faces. Since OpenGL only knows about triangles, we’ll have to draw 1

www.opengl-tutorial.org

기존 코드는 아래와 같은 정육면체가 1개가 그려진다.

서로 다른 위치에 큐브를 하나 더 그리기.
색상 값을 직접 생성. 무작위로 실행될 때마다 색상이 변경(아래는 예시)

static GLfloat g_color_buffer_data[12*3*3];
for (int v = 0; v < 12*3 ; v++){
    g_color_buffer_data[3*v+0] = your red color here;
    g_color_buffer_data[3*v+1] = your green color here;
    g_color_buffer_data[3*v+2] = your blue color here;
}

각 프레임마다 색상이 변경되. 매 프레임마다 glBufferData를 호출
전에 적절한 버퍼가 바인딩되었는지(glBindBuffer) 확인

1) 2번째 정육면체 버텍스 정의

두번째 정육면체를 첫번째 정육면체의 오른쪽에 그리기 위해 x축 방향으로 2.0f 만큼 이동하게끔 작성

	// Our vertices. Tree consecutive floats give a 3D vertex; Three consecutive vertices give a triangle.
	// A cube has 6 faces with 2 triangles each, so this makes 6*2=12 triangles, and 12*3 vertices
	static const GLfloat g_vertex_buffer_data[] = { 
		-1.0f,-1.0f,-1.0f,
		-1.0f,-1.0f, 1.0f,
		-1.0f, 1.0f, 1.0f,
		 1.0f, 1.0f,-1.0f,
		-1.0f,-1.0f,-1.0f,
		-1.0f, 1.0f,-1.0f,
		 1.0f,-1.0f, 1.0f,
		-1.0f,-1.0f,-1.0f,
		 1.0f,-1.0f,-1.0f,
		 1.0f, 1.0f,-1.0f,
		 1.0f,-1.0f,-1.0f,
		-1.0f,-1.0f,-1.0f,
		-1.0f,-1.0f,-1.0f,
		-1.0f, 1.0f, 1.0f,
		-1.0f, 1.0f,-1.0f,
		 1.0f,-1.0f, 1.0f,
		-1.0f,-1.0f, 1.0f,
		-1.0f,-1.0f,-1.0f,
		-1.0f, 1.0f, 1.0f,
		-1.0f,-1.0f, 1.0f,
		 1.0f,-1.0f, 1.0f,
		 1.0f, 1.0f, 1.0f,
		 1.0f,-1.0f,-1.0f,
		 1.0f, 1.0f,-1.0f,
		 1.0f,-1.0f,-1.0f,
		 1.0f, 1.0f, 1.0f,
		 1.0f,-1.0f, 1.0f,
		 1.0f, 1.0f, 1.0f,
		 1.0f, 1.0f,-1.0f,
		-1.0f, 1.0f,-1.0f,
		 1.0f, 1.0f, 1.0f,
		-1.0f, 1.0f,-1.0f,
		-1.0f, 1.0f, 1.0f,
		 1.0f, 1.0f, 1.0f,
		-1.0f, 1.0f, 1.0f,
		 1.0f,-1.0f, 1.0f,

		 2.0f,-1.0f,-1.0f,
		 2.0f,-1.0f, 1.0f,
		 2.0f, 1.0f, 1.0f,
		 4.0f, 1.0f,-1.0f,
		 2.0f,-1.0f,-1.0f,
		 2.0f, 1.0f,-1.0f,
		 4.0f,-1.0f, 1.0f,
		 2.0f,-1.0f,-1.0f,
		 4.0f,-1.0f,-1.0f,
		 4.0f, 1.0f,-1.0f,
		 4.0f,-1.0f,-1.0f,
		 2.0f,-1.0f,-1.0f,
		 2.0f,-1.0f,-1.0f,
		 2.0f, 1.0f, 1.0f,
		 2.0f, 1.0f,-1.0f,
		 4.0f,-1.0f, 1.0f,
		 2.0f,-1.0f, 1.0f,
		 2.0f,-1.0f,-1.0f,
		 2.0f, 1.0f, 1.0f,
		 2.0f,-1.0f, 1.0f,
		 4.0f,-1.0f, 1.0f,
		 4.0f, 1.0f, 1.0f,
		 4.0f,-1.0f,-1.0f,
		 4.0f, 1.0f,-1.0f,
		 4.0f,-1.0f,-1.0f,
		 4.0f, 1.0f, 1.0f,
		 4.0f,-1.0f, 1.0f,
		 4.0f, 1.0f, 1.0f,
		 4.0f, 1.0f,-1.0f,
		 2.0f, 1.0f,-1.0f,
		 4.0f, 1.0f, 1.0f,
		 2.0f, 1.0f,-1.0f,
		 2.0f, 1.0f, 1.0f,
		 4.0f, 1.0f, 1.0f,
		 2.0f, 1.0f, 1.0f,
		 4.0f,-1.0f, 1.0f,
	};

glDrawArrays에 기존 인자에 * 2

// Draw the triangle !
		glDrawArrays(GL_TRIANGLES, 0, (12*3)*2); // 12*3 indices starting at 0 -> 12 triangles

2) 카메라 xpos를 변경

(4,3,-3) -> (8,3,-3)

	// Camera matrix
	glm::mat4 View       = glm::lookAt(
								glm::vec3(8,3,-3), // Camera is at (4,3,-3), in World Space
								glm::vec3(0,0,0), // and looks at the origin
								glm::vec3(0,1,0)  // Head is up (set to 0,-1,0 to look upside-down)
						   );

3) 컬러 인덱스

기존

	static const GLfloat g_color_buffer_data[] = { 
		0.583f,  0.771f,  0.014f,
		0.609f,  0.115f,  0.436f,
		0.327f,  0.483f,  0.844f,
		0.822f,  0.569f,  0.201f,
		0.435f,  0.602f,  0.223f,
		0.310f,  0.747f,  0.185f,
		0.597f,  0.770f,  0.761f,
		0.559f,  0.436f,  0.730f,
		0.359f,  0.583f,  0.152f,
		0.483f,  0.596f,  0.789f,
		0.559f,  0.861f,  0.639f,
		0.195f,  0.548f,  0.859f,
		0.014f,  0.184f,  0.576f,
		0.771f,  0.328f,  0.970f,
		0.406f,  0.615f,  0.116f,
		0.676f,  0.977f,  0.133f,
		0.971f,  0.572f,  0.833f,
		0.140f,  0.616f,  0.489f,
		0.997f,  0.513f,  0.064f,
		0.945f,  0.719f,  0.592f,
		0.543f,  0.021f,  0.978f,
		0.279f,  0.317f,  0.505f,
		0.167f,  0.620f,  0.077f,
		0.347f,  0.857f,  0.137f,
		0.055f,  0.953f,  0.042f,
		0.714f,  0.505f,  0.345f,
		0.783f,  0.290f,  0.734f,
		0.722f,  0.645f,  0.174f,
		0.302f,  0.455f,  0.848f,
		0.225f,  0.587f,  0.040f,
		0.517f,  0.713f,  0.338f,
		0.053f,  0.959f,  0.120f,
		0.393f,  0.621f,  0.362f,
		0.673f,  0.211f,  0.457f,
		0.820f,  0.883f,  0.371f,
		0.982f,  0.099f,  0.879f,
}

변경

정점 데이터와 색상 데이터를 맞추기 위해 정점 데이터의 배열 g_vertex_buffer_data 크기와 동일하도록 변경하였다.

또한 매프레임 마다 랜덤한 색상을 보여주기 위해

#include <ctime>

srand(static_cast<unsigned int>(time(0)));

위의 2줄을 추가해주었다. C++ rand()함수는 srand() 함수를 사용하여 현재 시간을 기반으로 시드를 설정한다. 이러면 매번 프로그램을 실행할 때 마다 다른 랜덤 씨드별 시퀀스를 얻을 수 있다.

	static GLfloat g_color_buffer_data2[sizeof(g_vertex_buffer_data)];
	for (int v = 0; v < sizeof(g_vertex_buffer_data) / sizeof(g_vertex_buffer_data[0]); v++) {
		// 랜덤한 색상 생성
		float random_color1 = static_cast<float>(rand()) / static_cast<float>(RAND_MAX);
		float random_color2 = static_cast<float>(rand()) / static_cast<float>(RAND_MAX);
		float random_color3 = static_cast<float>(rand()) / static_cast<float>(RAND_MAX);

		g_color_buffer_data2[3 * v + 0] = random_color3;
		g_color_buffer_data2[3 * v + 1] = random_color3;
		g_color_buffer_data2[3 * v + 2] = random_color3;
	}

	GLuint colorbuffer2;
	glGenBuffers(1, &colorbuffer2);
	glBindBuffer(GL_ARRAY_BUFFER, colorbuffer2);
	glBufferData(GL_ARRAY_BUFFER, sizeof(g_color_buffer_data2), g_color_buffer_data2, GL_STATIC_DRAW);

4) 최종 결과

// Include standard headers
#include <stdio.h>
#include <stdlib.h>
#include <ctime>

// Include GLEW
#include <GL/glew.h>

// Include GLFW
#include <GLFW/glfw3.h>
GLFWwindow* window;

// Include GLM
#include <glm/glm.hpp>
#include <glm/gtc/matrix_transform.hpp>
using namespace glm;

#include <common/shader.hpp>

int main( void )
{
	srand(static_cast<unsigned int>(time(0)));
	// Initialise GLFW
	if( !glfwInit() )
	{
		fprintf( stderr, "Failed to initialize GLFW\n" );
		getchar();
		return -1;
	}

	glfwWindowHint(GLFW_SAMPLES, 4);
	glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
	glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
	glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE); // To make MacOS happy; should not be needed
	glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);

	// Open a window and create its OpenGL context
	window = glfwCreateWindow( 1024, 768, "Tutorial 04 - Colored Cube", NULL, NULL);
	if( window == NULL ){
		fprintf( stderr, "Failed to open GLFW window. If you have an Intel GPU, they are not 3.3 compatible. Try the 2.1 version of the tutorials.\n" );
		getchar();
		glfwTerminate();
		return -1;
	}
	glfwMakeContextCurrent(window);

	// Initialize GLEW
	glewExperimental = true; // Needed for core profile
	if (glewInit() != GLEW_OK) {
		fprintf(stderr, "Failed to initialize GLEW\n");
		getchar();
		glfwTerminate();
		return -1;
	}

	// Ensure we can capture the escape key being pressed below
	glfwSetInputMode(window, GLFW_STICKY_KEYS, GL_TRUE);

	// Dark blue background
	glClearColor(0.0f, 0.0f, 0.4f, 0.0f);

	// Enable depth test
	glEnable(GL_DEPTH_TEST);
	// Accept fragment if it closer to the camera than the former one
	glDepthFunc(GL_LESS); 

	GLuint VertexArrayID;
	glGenVertexArrays(1, &VertexArrayID);
	glBindVertexArray(VertexArrayID);

	// Create and compile our GLSL program from the shaders
	GLuint programID = LoadShaders( "TransformVertexShader.vertexshader", "ColorFragmentShader.fragmentshader" );

	// Get a handle for our "MVP" uniform
	GLuint MatrixID = glGetUniformLocation(programID, "MVP");

	// Projection matrix : 45?Field of View, 4:3 ratio, display range : 0.1 unit <-> 100 units
	glm::mat4 Projection = glm::perspective(glm::radians(45.0f), 4.0f / 3.0f, 0.1f, 100.0f);
	// Camera matrix
	glm::mat4 View       = glm::lookAt(
								glm::vec3(8,3,-3), // Camera is at (4,3,-3), in World Space
								glm::vec3(0,0,0), // and looks at the origin
								glm::vec3(0,1,0)  // Head is up (set to 0,-1,0 to look upside-down)
						   );
	// Model matrix : an identity matrix (model will be at the origin)
	glm::mat4 Model      = glm::mat4(1.0f);
	// Our ModelViewProjection : multiplication of our 3 matrices
	glm::mat4 MVP        = Projection * View * Model; // Remember, matrix multiplication is the other way around

	// Our vertices. Tree consecutive floats give a 3D vertex; Three consecutive vertices give a triangle.
	// A cube has 6 faces with 2 triangles each, so this makes 6*2=12 triangles, and 12*3 vertices
	static const GLfloat g_vertex_buffer_data[] = {
		// 첫 번째 정육면체
		-1.0f,-1.0f,-1.0f,
		-1.0f,-1.0f, 1.0f,
		-1.0f, 1.0f, 1.0f,
		 1.0f, 1.0f,-1.0f,
		-1.0f,-1.0f,-1.0f,
		-1.0f, 1.0f,-1.0f,
		 1.0f,-1.0f, 1.0f,
		-1.0f,-1.0f,-1.0f,
		 1.0f,-1.0f,-1.0f,
		 1.0f, 1.0f,-1.0f,
		 1.0f,-1.0f,-1.0f,
		-1.0f,-1.0f,-1.0f,
		-1.0f,-1.0f,-1.0f,
		-1.0f, 1.0f, 1.0f,
		-1.0f, 1.0f,-1.0f,
		 1.0f,-1.0f, 1.0f,
		-1.0f,-1.0f, 1.0f,
		-1.0f,-1.0f,-1.0f,
		-1.0f, 1.0f, 1.0f,
		-1.0f,-1.0f, 1.0f,
		 1.0f,-1.0f, 1.0f,
		 1.0f, 1.0f, 1.0f,
		 1.0f,-1.0f,-1.0f,
		 1.0f, 1.0f,-1.0f,
		 1.0f,-1.0f,-1.0f,
		 1.0f, 1.0f, 1.0f,
		 1.0f,-1.0f, 1.0f,
		 1.0f, 1.0f, 1.0f,
		 1.0f, 1.0f,-1.0f,
		-1.0f, 1.0f,-1.0f,
		 1.0f, 1.0f, 1.0f,
		-1.0f, 1.0f,-1.0f,
		-1.0f, 1.0f, 1.0f,
		 1.0f, 1.0f, 1.0f,
		-1.0f, 1.0f, 1.0f,
		 1.0f,-1.0f, 1.0f,

		 // 두 번째 정육면체
		 2.0f,-1.0f,-1.0f,
		 2.0f,-1.0f, 1.0f,
		 2.0f, 1.0f, 1.0f,
		 4.0f, 1.0f,-1.0f,
		 2.0f,-1.0f,-1.0f,
		 2.0f, 1.0f,-1.0f,
		 4.0f,-1.0f, 1.0f,
		 2.0f,-1.0f,-1.0f,
		 4.0f,-1.0f,-1.0f,
		 4.0f, 1.0f,-1.0f,
		 4.0f,-1.0f,-1.0f,
		 2.0f,-1.0f,-1.0f,
		 2.0f,-1.0f,-1.0f,
		 2.0f, 1.0f, 1.0f,
		 2.0f, 1.0f,-1.0f,
		 4.0f,-1.0f, 1.0f,
		 2.0f,-1.0f, 1.0f,
		 2.0f,-1.0f,-1.0f,
		 2.0f, 1.0f, 1.0f,
		 2.0f,-1.0f, 1.0f,
		 4.0f,-1.0f, 1.0f,
		 4.0f, 1.0f, 1.0f,
		 4.0f,-1.0f,-1.0f,
		 4.0f, 1.0f,-1.0f,
		 4.0f,-1.0f,-1.0f,
		 4.0f, 1.0f, 1.0f,
		 4.0f,-1.0f, 1.0f,
		 4.0f, 1.0f, 1.0f,
		 4.0f, 1.0f,-1.0f,
		 2.0f, 1.0f,-1.0f,
		 4.0f, 1.0f, 1.0f,
		 2.0f, 1.0f,-1.0f,
		 2.0f, 1.0f, 1.0f,
		 4.0f, 1.0f, 1.0f,
		 2.0f, 1.0f, 1.0f,
		 4.0f,-1.0f, 1.0f
	};


	static GLfloat g_color_buffer_data2[sizeof(g_vertex_buffer_data)];

	for (int v = 0; v < sizeof(g_vertex_buffer_data) / sizeof(g_vertex_buffer_data[0]); v++) {
		// 랜덤한 색상 생성
		float random_color1 = static_cast<float>(rand()) / static_cast<float>(RAND_MAX);
		float random_color2 = static_cast<float>(rand()) / static_cast<float>(RAND_MAX);
		float random_color3 = static_cast<float>(rand()) / static_cast<float>(RAND_MAX);
		g_color_buffer_data2[3 * v + 0] = random_color3;
		g_color_buffer_data2[3 * v + 1] = random_color3;
		g_color_buffer_data2[3 * v + 2] = random_color3;
	}

	GLuint vertexbuffer;
	glGenBuffers(1, &vertexbuffer);
	glBindBuffer(GL_ARRAY_BUFFER, vertexbuffer);
	glBufferData(GL_ARRAY_BUFFER, sizeof(g_vertex_buffer_data), g_vertex_buffer_data, GL_STATIC_DRAW);

	GLuint colorbuffer2;
	glGenBuffers(1, &colorbuffer2);
	glBindBuffer(GL_ARRAY_BUFFER, colorbuffer2);
	glBufferData(GL_ARRAY_BUFFER, sizeof(g_color_buffer_data2), g_color_buffer_data2, GL_DYNAMIC_DRAW);

	do {

		// Clear the screen
		glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

		// Use our shader
		glUseProgram(programID);

		// Send our transformation to the currently bound shader, 
		// in the "MVP" uniform
		glUniformMatrix4fv(MatrixID, 1, GL_FALSE, &MVP[0][0]);

		// 1rst attribute buffer : vertices
		glEnableVertexAttribArray(0);
		glBindBuffer(GL_ARRAY_BUFFER, vertexbuffer);
		glVertexAttribPointer(
			0,                  // attribute. No particular reason for 0, but must match the layout in the shader.
			3,                  // size
			GL_FLOAT,           // type
			GL_FALSE,           // normalized?
			0,                  // stride
			(void*)0            // array buffer offset
		);

		// 2nd attribute buffer : colors
		for (int v = 0; v < sizeof(g_vertex_buffer_data) / sizeof(g_vertex_buffer_data[0]); v++) {
			// 랜덤한 색상 생성
			float random_color1 = static_cast<float>(rand()) / static_cast<float>(RAND_MAX);
			float random_color2 = static_cast<float>(rand()) / static_cast<float>(RAND_MAX);
			float random_color3 = static_cast<float>(rand()) / static_cast<float>(RAND_MAX);

			g_color_buffer_data2[3 * v + 0] = random_color1;
			g_color_buffer_data2[3 * v + 1] = random_color2;
			g_color_buffer_data2[3 * v + 2] = random_color3;
		}

		glBindBuffer(GL_ARRAY_BUFFER, colorbuffer2);

		glBufferData(GL_ARRAY_BUFFER, sizeof(g_color_buffer_data2), g_color_buffer_data2, GL_DYNAMIC_DRAW);

		glEnableVertexAttribArray(1);
		glBindBuffer(GL_ARRAY_BUFFER, colorbuffer2);
		glVertexAttribPointer(
			1,                                // attribute. No particular reason for 1, but must match the layout in the shader.
			3,                                // size
			GL_FLOAT,                         // type
			GL_FALSE,                         // normalized?
			0,                                // stride
			(void*)0                          // array buffer offset
		);

		// Draw the triangle !
		glDrawArrays(GL_TRIANGLES, 0, (12 * 3) * 2); // 12*3 indices starting at 0 -> 12 triangles

		glDisableVertexAttribArray(0);
		glDisableVertexAttribArray(1);

		// Swap buffers
		glfwSwapBuffers(window);

		glfwPollEvents();

	} // Check if the ESC key was pressed or the window was closed
	while( glfwGetKey(window, GLFW_KEY_ESCAPE ) != GLFW_PRESS &&
		   glfwWindowShouldClose(window) == 0 );

	// Cleanup VBO and shader
	glDeleteBuffers(1, &vertexbuffer);
	glDeleteBuffers(1, &colorbuffer2);
	glDeleteProgram(programID);
	glDeleteVertexArrays(1, &VertexArrayID);

	// Close OpenGL window and terminate GLFW
	glfwTerminate();

	return 0;
}

저작자표시 비영리 변경금지

'Open GL' 카테고리의 다른 글

[Open GL] LearnOpenGL hello_triangle_exercise 1, 2, 3 (0)	2023.11.21
[Open GL] LearnOpenGL many Triangles with Uniform Variables (0)	2023.11.21
[GLSL] 쉐이더 프로세서의 인풋,아웃풋 레지스터 (0)	2023.11.17
[Open GL] opengl-tutorial matrices (1)	2023.10.28
[Open GL] opengl-tutorial 2 first triangle (0)	2023.10.27

'Open GL' Related Articles

Today, I will

[Open GL] Tutorial 4 : A Colored Cube 예제풀이 본문

[Open GL] Tutorial 4 : A Colored Cube 예제풀이

예제풀이

1) 2번째 정육면체 버텍스 정의

2) 카메라 xpos를 변경

3) 컬러 인덱스

4) 최종 결과

'Open GL' 카테고리의 다른 글

티스토리툴바