[OpenGL] 카메라 설정 및 변환 (이동, 회전)

■ 카메라 / 뷰 공간

카메라 / 뷰 공간을 정의하기 위해서는 월드 공간에서의 카메라의 위치, 카메라가 바라보는 방향, 오른쪽을 가리키는 벡터, 그리고 카메라에서 위쪽을 가리키는 벡터가 필요하다.

 

→ 카메라의 위치를 원점으로 하는, 세 개의 수직 단위 축으로 좌표계를 생성한다.

 

 

● 1. Position (위치)

카메라 위치는 월드 공간에서 카메라의 위치를 가리키는 벡터이다.

glm::vec3 cameraPos = glm::vec3(0.0f, 0.0f, 3.0f);

양의 z축이 우리 쪽을 향하고 있으므로 카메라를 뒤로 이동하려면 양의 z축을 따라 이동시키면 된다.

● 2. Direction (방향)

다음으로 필요한 벡터는 카메라의 방향이다.

glm::vec3 cameraTarget = glm::vec3(0.0f, 0.0f, 0.0f);
glm::vec3 cameraDirection = glm::normalize(cameraPos - cameraTarget);

씬의 원점 벡터에서 카메라의 위치 벡터를 빼면 방향 벡터를 구할 수 있다.

 

하지만 뷰 행렬의 좌표계에서 z축이 양의 값을 가지게 하기 위해, OpenGL에서는 카메라는 음의 z축을 향하므로 방향 벡터를 반전시켜야 한다.

 

따라서 벡터를 빼는 순서를 바꿔 카메라의 양의 z축을 가리키는 벡터를 구한다.

 

* 방향 벡터는 실제로는 목표 방향의 반대를 가리키게 된다.

 

● 3. Right Axis (오른쪽 벡터)

glm::vec3 up = glm::vec3(0.0f, 1.0f, 0.0f); 
glm::vec3 cameraRight = glm::normalize(glm::cross(up, cameraDirection));

 

오른쪽 벡터를 얻기 위해 월드 공간에서 위쪽 벡터를 먼저 지정한 다음, 2단계에서 얻은 방향 벡터와 위쪽 벡터의 외적(cross product)을 구한다. 외적의 결과는 두 벡터에 모두 수직인 벡터로, 양의 x축 방향을 가리키는 벡터를 얻을 수 있다. (외적 순서를 바꾸면 음의 x축을 가리킨다)

 

● 4. Up Axis (위쪽 벡터)

glm::vec3 cameraUp = glm::cross(cameraDirection, cameraRight);

 

 

마찬가지로 오른쪽 벡터와 방향 벡터를 외적하여 카메라의 양의 y축을 가리키는 벡터를 구한다.

 

여기까지 뷰 / 카메라 공간을 구성하는 모든 벡터를 생성하였다. (이 과정은 선형 대수학에서 그람-슈미트(Gram-Schmidt) 과정으로 알려져 있다)

 

이러한 카메라 벡터를 사용하여 카메라를 생성하는 데 매우 유용한 LookAt 행렬을 만들 수 있다.

■ Look At

행렬의 좋은 점은 3개의 수직(또는 비선형) 축을 사용하여 좌표 공간을 정의하면, 이 3개의 축과 Translation (이동) 벡터를 이용해 행렬(= Look At 행렬)을 생성할 수 있다는 것이다.

 

이 행렬과의 곱셈을 통해 벡터를 해당 좌표 공간으로 변환할 수 있다. 바로 이것이 LookAt 행렬이 하는 일이다.

 

 

여기서 'R'은 오른쪽 벡터, 'U'는 위쪽 벡터, 'D'는 방향 벡터, 'P'는 카메라의 위치 벡터를 나타낸다. 회전 행렬이 전치(Transpose)되고 이동 행렬이 부정(Negate)된 이유는 우리가 카메라를 이동하고자 하는 방향의 반대 방향으로 월드를 회전하고 변환할 것이기 때문이다.

 

이 LookAt 행렬을 뷰 행렬로 사용하면 모든 월드 좌표를 우리가 정의한 뷰 공간으로 변환할 수 있다. LookAt 행렬은 주어진 대상을 바라보는 뷰 행렬을 생성한다.

 

다행히 우리는 카메라 위치, 타겟 위치, 월드 공간에서 위쪽 벡터(오른쪽 벡터를 계산할 때 사용한 위쪽 벡터)를 나타내는 벡터만 지정하면 GLM이 LookAt 행렬을 자동으로 생성하여 뷰 행렬로 사용할 수 있다.

 

glm::mat4 view;
view = glm::lookAt(glm::vec3(0.0f, 0.0f, 3.0f), glm::vec3(0.0f, 0.0f, 0.0f), glm::vec3(0.0f, 1.0f, 0.0f));

glm::lookAt 함수는 매개변수로 Position(위치), Target(타겟), Up Vector(위쪽 벡터)를 필요로 한다.

■ 카메라 회전하기

씬의 타겟을 (0, 0, 0)에 고정한다. 약간의 삼각법을 사용하여 원 위의 한 점을 나타내는 x 및 z 좌표를 매 프레임마다 생성하고, 이를 카메라 위치로 사용할 것이다. 시간 경과에 따라 x와 z 좌표를 다시 계산하면 원 위의 모든 점을 순회하게 되어 카메라가 씬 주위를 회전하게 된다.

 

이 원의 크기를 미리 정의된 반지름으로 확장하고, GLFW의 glfwGetTime 함수를 사용하여 매 프레임마다 새로운 뷰 행렬을 생성한다.

 

const float radius = 10.0f;
float camX = sin(glfwGetTime()) * radius;
float camZ = cos(glfwGetTime()) * radius;
glm::mat4 view;
view = glm::lookAt(glm::vec3(camX, 0.0, camZ), glm::vec3(0.0, 0.0, 0.0), glm::vec3(0.0, 1.0, 0.0));

 

 

- 결과

카메라가 원점을 중심으로 바라보며 씬 주위를 회전한다.

■ 카메라 이동하기

카메라 시스템을 설정하기 위해 카메라 변수들을 정의한다.

 

glm::vec3 cameraPos = glm::vec3(0.0f, 0.0f,  3.0f);
glm::vec3 cameraFront = glm::vec3(0.0f, 0.0f, -1.0f);
glm::vec3 cameraUp = glm::vec3(0.0f, 1.0f,  0.0f);

view = glm::lookAt(cameraPos, cameraPos + cameraFront, cameraUp);

 

방향은 카메라의 현재 위치에 방향 벡터를 더한 값이다. 이렇게 하면 카메라가 이동하더라도 항상 목표 방향을 향하도록 유지된다.

 

const float cameraSpeed = 0.05f;

if (glfwGetKey(window, GLFW_KEY_W) == GLFW_PRESS)
	cameraPos += cameraSpeed * cameraFront;
    
if (glfwGetKey(window, GLFW_KEY_S) == GLFW_PRESS)
	cameraPos -= cameraSpeed * cameraFront;
    
if (glfwGetKey(window, GLFW_KEY_A) == GLFW_PRESS)
	cameraPos -= glm::normalize(glm::cross(cameraFront, cameraUp)) * cameraSpeed;
    
if (glfwGetKey(window, GLFW_KEY_D) == GLFW_PRESS)
	cameraPos += glm::normalize(glm::cross(cameraFront, cameraUp)) * cameraSpeed;

WASD키를 이용하여 카메라의 위치를 조정하도록 한다.

 

* 외적하여 나온 오른쪽 벡터를 정규화하는 이유는 cameraFront 변수의 크기에 따라 크기가 달라질 수 있기 때문이다.

● 이동 속도 조절 (deltaTime)

현재 Input을 프레임마다 적용하여 초당 많은 프레임을 렌더하게 되면 이동 속도가 빨라진다.

 

이를 방지하기 위해 보통 'deltaTime' 변수, 즉 마지막 프레임을 렌더링하는데 걸린 시간을 곱하여 사용한다. 한 프레임을 렌더하는데 오래걸리면 그 만큼 속도를 증가시켜 균형을 맞춘다.

float deltaTime = 0.0f;
float lastFrame = 0.0f;
float currentFrame = glfwGetTime();

deltaTime = currentFrame - lastFrame;
lastFrame = currentFrame;

현재 프레임과 마지막 프레임을 변수로 선언하여 deltaTime을 계산한다.

 

float cameraSpeed = 2.5f * deltaTime;

이후 속도를 계산할 때 deltaTime을 곱해준다.

■ 마우스를 이용하여 둘러보기

씬을 둘러보기 위해서 마우스 입력에 따라 cameraFront 벡터를 수정해야 한다. 하지만 마우스 회전에 따라 방향 벡터를 변경하는 것은 복잡하고, 삼각법(Trigonometry)에 대한 지식이 필요하다.

● Euler Angle (오일러 각)

오일러 각은 강체(rigid body)가 놓인 방향을 3차원 공간에 표시하기 위해 오일러가 도입한 세 개의 각도이다. 오일러 각에는 Pitch, Yaw, Roll 3개의 각도가 있다.

 

 

Pitch는 상하 각도를, Yaw는 좌우 각도를, Roll은 회전 각도를 나타낸다. 각각의 오일러 각은 단일 값으로 표현되며, 이 세 가지 값을 조합하여 3차원에서의 모든 회전 벡터를 계산할 수 있다.

 

현재 우리의 카메라 시스템에서는 Pitch와 Yaw값만 가지고 새로운 방향 벡터를 나타내는 3D 벡터로 변환할 것이다.

- Yaw

3D 씬을 위에서 (y축을 따라) 내려다본다고 생각하면 삼각형의 두 변이 x축과 z축에 평행하게 된다.

 

 

빗변의 길이를 1로 설정했을 때, x축 기준 반시계 방향으로 Yaw 각도를 설정하면 x축 변의 길이는 cos(Yaw)가 되고, z축 변의 길이는 sin(Yaw)가 된다.

 

glm::vec3 direction;

// 각도를 먼저 라디안으로 변환하는 점에 유의
direction.x = cos(glm::radians(yaw)); 
direction.z = sin(glm::radians(yaw));

이를 이용해 카메라 방향 벡터를 생성한다. (현재 Pitch값은 포함되어 있지 않음)

- Pitch

이제 우리가 xz 평면에서 y축을 바라본다고 생각하면 삼각형의 두 변이 xz평면과 y축에 평행하게 된다.

 

 

마찬가지로 y축 변의 길이는 sin(Pitch)가 된다. 또한 xz평면의 변이 cos(Pitch)의 영향을 받으므로 최종 방향 벡터에 포함시켜야 한다.

 

direction.x = cos(glm::radians(yaw)) * cos(glm::radians(pitch));
direction.y = sin(glm::radians(pitch));
direction.z = sin(glm::radians(yaw)) * cos(glm::radians(pitch));

이렇게 Yaw와 Pitch값을 3차원 방향 벡터로 변환하였다.

 

- 보정

우리는 씬의 모든 것이 음의 z축 방향으로 위치하도록 세팅 했다. 하지만 x축과 z축의 삼각형을 보면 Yaw 각도가 0일 때 카메라의 방향 벡터가 양의 x축을 가리키게 된다. 카메라가 디폴트 값으로 음의 z축을 바라보게 하려면 Yaw 값을 시계 방향으로 90도 회전시켜야 한다.

 

// 시계 방향으로 회전하려면 음의 값을 할당
yaw = -90.0f;

 

● Mouse Input (마우스 입력)

수평 마우스 움직임은 Yaw 값에 영향을 주고 수직 마우스 움직임은 Pitch 값에 영향을 준다.

 

기본 아이디어는 지난 프레임의 마우스 위치를 저장하고 현재 프레임에서 마우스 값이 얼마나 변경되었는지 계산하여 카메라를 이동시킨다.

 

- 세팅

glfwSetInputMode(window, GLFW_CURSOR, GLFW_CURSOR_DISABLED);

먼저 마우스 커서를 보이지 않게 하고 창의 중앙에 머물도록 한다.

 

Pitch와 Yaw를 계산하기 위해 GLFW에게 마우스 움직임 이벤트를 감지하도록 지시해야 한다. 이를 위해 다음과 같은 프로토타입을 가진 콜백 함수를 선언한다.

// xpos와 ypos는 마우스 위치를 나타낸다.
void mouse_callback(GLFWwindow* window, double xpos, double ypos);

 

콜백 함수를 GLFW에 등록하여 마우스가 움직일 때 마다 mouse_callback 함수가 호출되도록 한다.

 

// 콜백 함수 등록
glfwSetCursorPosCallback(window, mouse_callback);

 

 

- 입력 처리

카메라의 방향 벡터를 완전히 계산하기 다음 단계를 수행한다

 

1. 지난 프레임 이후 마우스의 오프셋을 계산한다.
2. 오프셋 값을 카메라의 Yaw와 Pitch값에 더한다.
3. 피치 값의 최소/최대 제한을 추가한다.
4. 방향 벡터를 계산한다.

 

○ 1. 마우스 오프셋 계산

먼저 마우스의 마지막 위치를 저장할 변수를 선언한다. (초기값은 화면의 중심 좌표로 설정)

// 화면 크기가 800 * 600 일 때
float lastX = 400, lastY = 300;

 

 

그리고 마우스 콜백 함수에서 프레임 사이의 마우스 오프셋을 계산한다.

float xoffset = xpos - lastX;
// y좌표는 반전
float yoffset = lastY - ypos;
lastX = xpos;
lastY = ypos;

const float sensitivity = 0.1f;
xoffset *= sensitivity;
yoffset *= sensitivity;

* 마우스 입력에서 y좌표는 화면의 아래쪽에서 위쪽으로 범위가 설정되어 있으므로, 마우스의 수직 이동을 처리할 때 y좌표의 방향을 반전시켜야 한다.

 

○ 2. Yaw와 Pitch 값에 오프셋 적용

다음으로 전역 변수로 선언된 Yaw와 Pitch 값에 오프셋 값을 더한다.

yaw += xoffset;
pitch += yoffset;

 

 

○ 3. Pitch 값 제한

사용자가 89도 이상(90도에서 LookAt 플립이 발생함) 또는 -89도 이하로 볼 수 없도록 제약을 추가한다.

if(pitch > 89.0f)
	pitch =  89.0f;

if(pitch < -89.0f)
	pitch = -89.0f;

 

○ 4. 방향 벡터 계산

glm::vec3 direction;
direction.x = cos(glm::radians(yaw)) * cos(glm::radians(pitch));
direction.y = sin(glm::radians(pitch));
direction.z = sin(glm::radians(yaw)) * cos(glm::radians(pitch));
cameraFront = glm::normalize(direction);

계산된 방향 벡터는 마우스의 움직임으로부터 계산된 모든 회전을 포함하게 된다.

- 초기 마우스 위치 보정

처음 마우스 커서가 창에 들어오면, 마우스 콜백 함수가 xpos와 ypos 위치를 커서가 화면에 들어온 위치로 호출한다. 이 위치는 종종 화면의 중앙에서 상당히 멀리 떨어져 있는 경우가 많아 큰 오프셋이 발생하고 결과적으로 큰 이동 점프가 발생한다.

이를 해결하기 위해 첫 마우스 입력이라면 초기 마우스 위치를 새로운 xpos와 ypos 값으로 업데이트하여 새로 들어온 마우스 위치 좌표로 오프셋을 계산하도록 한다.

 

- 최종 마우스 콜백 함수

void mouse_callback(GLFWwindow* window, double xpos, double ypos)
{
	// firstMouse 초기값은 true
	if (firstMouse)
    {
        lastX = xpos;
        lastY = ypos;
        firstMouse = false;
    }

    float xoffset = xpos - lastX;
    float yoffset = lastY - ypos; 
    lastX = xpos;
    lastY = ypos;

    float sensitivity = 0.1f;
    xoffset *= sensitivity;
    yoffset *= sensitivity;

    yaw += xoffset;
    pitch += yoffset;

    if(pitch > 89.0f)
    	pitch = 89.0f;
        
    if(pitch < -89.0f)
    	pitch = -89.0f;

    glm::vec3 direction;
    direction.x = cos(glm::radians(yaw)) * cos(glm::radians(pitch));
    direction.y = sin(glm::radians(pitch));
    direction.z = sin(glm::radians(yaw)) * cos(glm::radians(pitch));
    cameraFront = glm::normalize(direction);
}

 

 

■ 카메라 줌 (Zoom)

FOV (시야각) 값을 조절하여 줌 효과를 구현할 것이다. 마우스의 스크롤 휠로 FOV 값을 조절하기 위해 마우스 스크롤을 위한 콜백 함수를 작성한다.

void scroll_callback(GLFWwindow* window, double xoffset, double yoffset)
{
    fov -= (float)yoffset;

    // fov 값 제한
    if (fov < 1.0f)
        fov = 1.0f;

    if (fov > 45.0f)
    	fov = 45.0f; 
}

 

 

선언한 마우스 스크롤 콜백 함수를 GLFW에 등록한다.

// 콜백 함수 등록
glfwSetScrollCallback(window, scroll_callback);

 

 

■ 소스 코드

- 메인 (카메라 클래스 사용한 버전)

https://learnopengl.com/code_viewer_gh.php?code=src/1.getting_started/7.4.camera_class/camera_class.cpp

 

- 카메라 클래스

https://learnopengl.com/code_viewer_gh.php?code=includes/learnopengl/camera.h