OpenGL 筆記 - Camera

OpenGL 中模擬相機的方法是,把場景(整個世界)照相機想移動的相反方向移動,來模擬出相機的感覺。

View(Camera) Space

View Space 是指把相機當作原點的座標,一個相機可以用以下三個東西定義出來:

  • 相機(Camera)
    • 位置
    • 觀察的方向
    • 相機頭頂的方向向量

第三個軸可以用外積求出,於是我們定義出了一個以相機為原點的座標系,接下來就是要構造 View Matrix 來把世界座標轉換過去。

  • 位置
1
glm::vec3 cameraPos = glm::vec3(0.0f, 0.0f, 3.0f);
  • 觀察的方向
1
2
3
4
glm::vec3 cameraTarget = glm::vec3(0.0f, 0.0f, 0.0f);
glm::vec3 cameraDirection = glm::normalize(cameraPos - cameraTarget);
// 這裡其實是反向(往相機插的向量) i.e. 圖 2 的藍色向量
// 也就是 View Space 的 z 向量
  • 右向量(對於相機)
    • 這裡會用世界的 $y$ 軸向量(向上)跟 觀察方向做外積
    • 拿到的向量會朝向 View Space 的 $+x$ ,也就是相機的右邊
1
2
glm::vec3 up = glm::vec3(0.0f, 1.0f, 0.0f);
glm::vec3 cameraRight = glm::normalize(glm::cross(up, cameraDirection));
  • 上向量(對於相機)
    • 我們已經有 View Space 的 $x$ 軸和 $z$ 軸的向量
1
glm::vec3 cameraUp = glm::cross(cameraDirection, cameraRight);

這三個向量構成了 View Space。

上面的數學知識是: Gram-Schmidt process

Look At 矩陣

$$
LookAt = \begin{bmatrix} \color{red}{R_x} & \color{red}{R_y} & \color{red}{R_z} & 0 \\ \color{green}{U_x} & \color{green}{U_y} & \color{green}{U_z} & 0 \\ \color{blue}{D_x} & \color{blue}{D_y} & \color{blue}{D_z} & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix} * \begin{bmatrix} 1 & 0 & 0 & -\color{purple}{P_x} \\ 0 & 1 & 0 & -\color{purple}{P_y} \\ 0 & 0 & 1 & -\color{purple}{P_z} \\ 0 & 0 & 0 & 1 \end{bmatrix}
$$

$\color{Red}{R}$ 是右向量、$\color{Green}{U}$是上向量、$\color{Blue}{D}$是方向向量,$\color{purple}{P}$ 是相機位置,注意位移是相反方向,是因為前面提到我們希望將世界往相機的相反方向移動(因為 OpenGL 的相機在 $(0, 0, 0)$)

  • GLM 提供了直接產生 Look At Matrix 的實用功能,只要提供相機位置、觀察目標、跟世界空間的上向量
1
2
3
4
5
6
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) // 上向量
);

自由移動

上面只示範了旋轉,如果能自由移動的話會更有趣,但是我們要改一下 Camera 的實作

1
2
3
4
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);
glm::vec3 cameraRight = glm::normalize(glm::cross(cameraFront, cameraUp));

lookAt 變成了:

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

接下來新增移動功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
if(sf::Keyboard::isKeyPressed(sf::Keyboard::W))
cameraPos += cameraSpeed * cameraFront;
else if(sf::Keyboard::isKeyPressed(sf::Keyboard::S))
cameraPos -= cameraSpeed * cameraFront;
//
if(sf::Keyboard::isKeyPressed(sf::Keyboard::A))
cameraPos -= cameraSpeed * cameraRight;
else if(sf::Keyboard::isKeyPressed(sf::Keyboard::D))
cameraPos += cameraSpeed * cameraRight;
//
if (sf::Keyboard::isKeyPressed(sf::Keyboard::Space))
cameraPos += cameraSpeed * cameraUp;
else if (sf::Keyboard::isKeyPressed(sf::Keyboard::LControl))
cameraPos -= cameraSpeed * cameraUp;

當我們按下 WASD 時,Camera 就會在遊戲世界中移動,按 Shift 時 Camera 會加速

除了按鍵移動之外,我們還改了移動速度的 code,根據處理器不同,每個 loop 的時間會不同,通常都會用 delta time 去乘上某個東西的時間變化量(e.g. 速度),來更新當前的狀態。

1
2
3
4
if(sf::Keyboard::isKeyPressed(sf::Keyboard::LShift))
cameraSpeed = dt * 5;
else
cameraSpeed = dt * 3;

視角移動

歐拉角

歐拉角(Euler Angle)可以表示空間中三軸的旋轉。俯仰角(Pitch)、偏擺角(Yaw)和翻滾角(Roll)

在傳統 FPS 中不會有 Roll 所以這裡不討論,有了歐拉角後就可以算出旋轉後的新的方向向量

1
2
3
4
glm::vec3 dir;
dir.x = cos(glm::radians(pitch)) * cos(glm::radians(yaw));
dir.y = sin(glm::radians(pitch));
dir.z = cos(glm::radians(pitch)) * sin(glm::radians(yaw));

有了方向向量,我們就可以把 cameraFront 設定成方向向量,來把相機轉過去了。

滑鼠輸入

通常根據滑鼠輸入變動視角的處理方法是:

  • 計算滑鼠位置的偏移量(相對上個 frame)
  • 把偏移量加到 pitchyaw
  • 限制最大跟最小值
  • 計算方向向量
1
2
3
4
5
6
7
8
// 滑鼠目前為位置
auto [x, y] = sf::Mouse::getPosition(window);
glm::vec2 nowCursorPos(x, window.getSize().y - y);
// 螢幕中心
static glm::vec2 screenCenter(window.getSize().x / 2, window.getSize().y / 2);
sf::Mouse::setPosition({window.getSize().x / 2, window.getSize().y / 2} , window);
// 偏移量
glm::vec2 off = nowCursorPos - screenCenter;

把偏移量乘上滑鼠敏感度

1
off *= sensitivity;

把角度加上偏移量,並限制最大、最小 (不限制水平旋轉是因為古早 FPS 都是視角轉 = 人轉)

1
2
3
4
5
6
7
8
9
10
11
static float pitch  = 0.f;
static float yaw = -90.f; // 面向 -z
static float sensitivity = 0.05f;

pitch += off.y;
yaw += off.x;
// 避免 yaw 因為 float 精度問題
if(yaw > 360.f || yaw < -360.f) yaw = glm::mod(yaw, 360.f);
// 限制 pitch
if(pitch > 89.f) pitch = 89.f;
if(pitch < -89.f) pitch = -89.f;

最後計算 Camera 新的方向向量

1
2
3
4
5
glm::vec3 newCameraFront;
newCameraFront.x = cos(glm::radians(yaw)) * cos(glm::radians(pitch));
newCameraFront.y = sin(glm::radians(pitch));
newCameraFront.z = sin(glm::radians(yaw)) * cos(glm::radians(pitch));
cameraFront = newCameraFront;

  • 隱藏滑鼠游標
1
2
3
4
5
6
7
8
9
10
11
12
window.setMouseCursorVisible(false); // 因為 imgui 的緣故,滑鼠還是會被畫出來
window.setMouseCursorGrabbed(true); // 讓滑鼠不能超出視窗範圍

while(running)
{
// ...

// 必須叫 imgui 不要畫滑鼠
ImGui::SetMouseCursor(ImGuiMouseCursor_None);

windiw.draw();
}

視角縮放

把 FOV 變小時,會產生一種放大的感覺,我們使用滑鼠滾輪來進行縮放。SFML 裏頭偵測滑鼠滾輪只能用事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Event update
if(event.type == sf::Event::MouseWheelScrolled)
{
mouseWheelDelta = event.mouseWheelScroll.delta;
}

// In Update
if(mouseWheelDelta != 0.f)
{
fov += mouseWheelDelta;
if(fov < 1.f) fov = 1.f;
if(fov > 45.f) fov = 45.f;
mouseWheelDelta = 0.f;
}

Lab

將 Camera 封裝成 class

試著自己實作看看 lookAt()

  • OpenGL 矩陣是 Column-major,所以 LookAt 公式要改寫成

$$
LookAt = \begin{bmatrix}
\color{red}{R_x} & \color{green}{U_x} & \color{blue}{D_x} & 0 \\
\color{red}{R_y} & \color{green}{U_y} & \color{blue}{D_y} & 0 \\
\color{red}{R_z} & \color{green}{U_z} & \color{blue}{D_z} & 0 \\
0 & 0 & 0 & 1
\end{bmatrix} *
\begin{bmatrix}
1 & 0 & 0 & 0 \\
0 & 1 & 0 & 0 \\
0 & 0 & 1 & 0 \\
-\color{purple}{P_x} & -\color{purple}{P_y} & -\color{purple}{P_z} & 1
\end{bmatrix}
$$

我卡了一整天幹zz


如果你覺得這篇文章很棒,請你不吝點讚 (゚∀゚)

推薦文章