自由摄像机、欧拉角与帧率无关输入

为什么摄像机需要手柄、云台与独立状态

上一章你已经会摆模型、会选摄像机位置看向目标——lookAt(eye, center, up) 一行搞定 View 矩阵。但真正的相机不是钉在架子上的：你要能举着它四处走、转身、抬头低头、拉近拉远。游戏里的第一人称视角、编辑器里的自由漫游，靠的都是同一套可交互摄像机系统。

想象你拿着单反：身体位置是 position，镜头朝哪是 front，哪边算「上」是 worldUp。W 键 = 沿镜头方向往前走；鼠标拖动 = 转头看；滚轮 = 换广角/长焦（调 FOV）。本章就是把这三件事从直觉落到公式和代码。

摄像机三要素与 View 矩阵

坐标系统章 §3 已经讲过：View 矩阵把世界拉到摄像机面前，让摄像机坐在观察空间原点、面朝 -z。构造它需要三个输入——position（站哪）、front（朝哪）、worldUp（头顶方向）——对应 lookAt(eye, center, up) 里的三个向量。日常实现里 center = position + front，right = normalize(cross(front, worldUp))，三根轴互相垂直。

LookAt 三轴怎么叉乘、拼成 View 矩阵，坐标系统章 §4 已完整推导——下面这张图仍可对照：

欧拉角：用两个角描述「朝哪看」

摄像机的朝向用三个角描述：Pitch（俯仰角） 管上下看（抬头低头），Yaw（偏航角） 管左右看（转头），Roll（滚转角） 管歪头——第一人称和漫游相机几乎不用 Roll，锁 0 就好，否则画面会天旋地转。

Pitch、Yaw 变 → front 变 → 你看到的画面变。下面 §4 用三角函数把这两个角精确翻译成 front 的三个分量。

WASD：沿 front 和 right 平移

不同帧率下要走得一样远，靠 delta time —— 它是两次渲染之间经过的真实时间，§6 代码里每帧先算 deltaTime，再乘进位移。

这个式子在说：速度 $v$ 的单位是「世界单位/秒」，$\Delta t$ 是这一帧经过的秒数，$\hat d$ 是归一化移动方向；三者相乘才是本帧位移。帧率高时 $\Delta t$ 小、每帧走得少，帧率低时反之，但相同真实时间内累计距离一致。

WASD 四键对应四个方向：W 沿 front 前进，S 沿 -front 后退，A 沿 -right 左移，D 沿 +right 右移。right = normalize(cross(front, worldUp))，永远水平于地面（只要 front 没完全朝天/朝地）。

鼠标视角与滚轮缩放

鼠标移动 → 改 Pitch / Yaw：水平位移 xoffset 加给 Yaw，垂直 yoffset 减给 Pitch（y 取反——屏幕坐标 y 向下为正，而「抬头」应让 Pitch 增大）。改完角之后重新算 front，再 normalize。

滚轮则调 FOV：滚轮向上通常缩小 FOV（看得更窄、像长焦），向下放大 FOV（广角）。浏览器里用 wheel 事件；GLFW 用 scroll_callback。

真实 FPS 还会用 光标捕获（Pointer Lock），这样转 360° 不会撞到屏幕边缘。教学 Demo 用滑块模拟 Pitch/Yaw，原理相同。

鼠标第一次进入窗口时还要处理一次初始化：GLFW 教程用 firstMouse 把 lastX/lastY 设成当前坐标，然后把标记清掉；否则初始值通常是屏幕中心，第一帧会产生一个巨大的 offset，让视角突然跳转。Pointer Lock 的 movementX/Y 已经是相对位移，但锁定与解锁时仍应清空累计输入，避免旧偏移带进下一帧。

数学推导：Pitch + Yaw → front

符号：Pitch = $\phi$，Yaw = $\theta$（均用弧度）。front 是单位向量（长度 1），表示摄像机朝向。

第一步：只在水平面转 Yaw。 像站在地上原地转圈——方向向量在 XZ 平面上，长度 1：

第二步：再抬 Pitch。 把水平分量「折」到 Y 上：水平部分长度变成 $\cos\phi$（因为 $\sin^2\phi + \cos^2\phi = 1$），竖直分量是 $\sin\phi$：

人话：Yaw 决定你在水平圈上指向哪；Pitch 把整根向量从水平面翘起来——XZ 两个分量都要乘 $\cos\phi$，因为翘角越大，水平投影越短；Y 分量直接是 $\sin\phi$。

LearnOpenGL 约定：Yaw 0° 时 front 指向 +X，逆时针增加；Pitch 正数向上看。代入验证：$\phi=0,\ \theta=0$ → front $= (1,0,0)$；只抬 Pitch 45° → $(\cos 45°, \sin 45°, 0)$，确实朝右上。

每帧更新：输入、状态、正交基与矩阵

输入回调不应该直接绘制场景。它只记录按键状态、鼠标偏移与滚轮增量；渲染循环在每帧开始时统一消费这些输入，并按固定顺序更新摄像机。这样键盘、鼠标、手柄都能汇入同一状态模型，录制与回放也只需要保存输入或最终状态。

交互 Demo：拖滑块当摄像机

猜一猜

1. 把 Pitch 调到 89° 极限——画面有什么异常感？网格线是否开始「拧」了？
2. 固定 Pitch = -15°，把 Yaw 从 0° 转到 180°——场景里的立方体发生了什么？（提示：你是在绕场景中心「绕圈看」。）
3. 把 FOV 拉到 15° 和 90° 对比——同一距离下，哪个更像「广角镜头」？

代码对照：GLFW 与浏览器

// 每帧开头
float currentFrame = glfwGetTime();
float deltaTime = currentFrame - lastFrame;
lastFrame = currentFrame;
 
float cameraSpeed = 2.5f * deltaTime;
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;
 
// 鼠标回调
void mouse_callback(GLFWwindow*, double xpos, double ypos) {
    float xoffset = xpos - lastX;
    float yoffset = lastY - ypos; // 注意取反
    lastX = xpos; lastY = ypos;
    float sensitivity = 0.1f;
    yaw   += xoffset * sensitivity;
    pitch += yoffset * sensitivity;
    if (pitch > 89.0f) pitch = 89.0f;
    if (pitch < -89.0f) pitch = -89.0f;
    updateCameraVectors(); // 用 pitch/yaw 重算 front
}
 
void scroll_callback(GLFWwindow*, double, double yoffset) {
    fov -= (float)yoffset;
    if (fov < 1.0f) fov = 1.0f;
    if (fov > 45.0f) fov = 45.0f;
}

let lastFrame = performance.now() / 1000;
 
function frame() {
  const now = performance.now() / 1000;
  const deltaTime = now - lastFrame;
  lastFrame = now;
 
  const speed = 2.5 * deltaTime;
  if (keys.has("w")) cameraPos.addScaledVector(front, speed);
  if (keys.has("s")) cameraPos.addScaledVector(front, -speed);
  const right = normalize(cross(front, worldUp));
  if (keys.has("a")) cameraPos.addScaledVector(right, -speed);
  if (keys.has("d")) cameraPos.addScaledVector(right, speed);
 
  const view = mat4LookAt([], cameraPos, add(cameraPos, front), worldUp);
  const proj = mat4Perspective([], (fov * Math.PI) / 180, aspect, 0.1, 100);
  // ... draw
}
 
canvas.addEventListener("mousemove", (e) => {
  if (!pointerLocked) return;
  yaw += e.movementX * 0.1;
  pitch -= e.movementY * 0.1; // 浏览器 movementY 向下为正，故减
  pitch = clamp(pitch, -89, 89);
  front = frontFromAngles(pitch, yaw);
});
 
canvas.addEventListener("wheel", (e) => {
  fov = clamp(fov - Math.sign(e.deltaY), 1, 45);
});

容易踩的坑

小结

• 可交互摄像机 = position + front + worldUp；View 仍用 LookAt，center = position + front
• Pitch / Yaw 描述朝向，Roll 本章锁 0；front 分量：$f_x=\cos\theta\cos\phi$，$f_y=\sin\phi$，$f_z=\sin\theta\cos\phi$
• WASD 沿 front / right 平移，right = normalize(cross(front, worldUp))
• 移动必须乘 deltaTime；鼠标改 Pitch/Yaw 后重算 front，yoffset 取反
• 滚轮调 FOV 改变透视投影的广角感，与「摄像机前后平移」不是一回事

版本、来源与运行边界

本章以 Joey de Vries 的 LearnOpenGL 原章 为授权改编依据，教学运行基线是 OpenGL 3.3 Core Profile。Khronos 当前发布的规范参照是 OpenGL 4.6 Core Profile；这里用 4.6 规范核查术语和状态合同，但不把 4.6 API 偷偷倒填为原教程内容。GLFW、GLAD、Assimp 与驱动版本都属于运行环境，不能拿“编译通过”替代对 context、资源和 framebuffer 结果的验证。

正式概念与状态责任

• camera：在“自由摄像机、欧拉角与帧率无关输入”中由Camera 对象与每帧输入采样器负责解释其输入、受控状态和可观察结果；运行时以帧时间、输入事件、欧拉角、基向量点积、view 矩阵与相机轨迹定位它的第一处变化。
• lookat：在“自由摄像机、欧拉角与帧率无关输入”中由Camera 对象与每帧输入采样器负责解释其输入、受控状态和可观察结果；运行时以帧时间、输入事件、欧拉角、基向量点积、view 矩阵与相机轨迹定位它的第一处变化。
• delta time：在“自由摄像机、欧拉角与帧率无关输入”中由Camera 对象与每帧输入采样器负责解释其输入、受控状态和可观察结果；运行时以帧时间、输入事件、欧拉角、基向量点积、view 矩阵与相机轨迹定位它的第一处变化。
• euler angles：在“自由摄像机、欧拉角与帧率无关输入”中由Camera 对象与每帧输入采样器负责解释其输入、受控状态和可观察结果；运行时以帧时间、输入事件、欧拉角、基向量点积、view 矩阵与相机轨迹定位它的第一处变化。

章专属 OpenGL 状态实验

先预测“采样键鼠，限制 pitch/FOV，重建正交基并调用 lookAt”发生后，Camera 对象与每帧输入采样器应怎样改变position、front/right/up、yaw/pitch、FOV、delta time 与 view matrix；再操作三个实验。实验不生成变化率或正确率等虚构总分，只显示真实 GL 状态、资源、命令和可观察结果。

实验一：Context—资源—结果合同

选择任一正式概念与基线/单故障场景，核对它是否进入本章状态合同。正式概念只有同时出现在解释、可视状态和交付证据中才算覆盖。

实验二：CPU 命令到 GPU 结果的五段轨迹

逐段执行“采样键鼠，限制 pitch/FOV，重建正交基并调用 lookAt”，在每一步记录资源身份、状态变化与第一个可观察结果，并持续核对“移动量乘 delta time，front/right/up 保持归一且互相正交”。

实验三：单故障与同输入恢复

注入“首个鼠标事件没有建立基线，巨大的 offset 让 yaw/pitch 瞬间跳变”，保存首个分岔；撤销后沿用完全相同的 context、资源内容、uniform 和 draw 输入重放。只有帧时间、输入事件、欧拉角、基向量点积、view 矩阵与相机轨迹一起恢复才算修复。

最小可重放检查

unit: logl-08
owner: Camera 对象与每帧输入采样器
state_or_resource: position、front/right/up、yaw/pitch、FOV、delta time 与 view matrix
command: 采样键鼠，限制 pitch/FOV，重建正交基并调用 lookAt
pass_invariant: 移动量乘 delta time，front/right/up 保持归一且互相正交
single_fault: 首个鼠标事件没有建立基线，巨大的 offset 让 yaw/pitch 瞬间跳变
required_evidence: 帧时间、输入事件、欧拉角、基向量点积、view 矩阵与相机轨迹

复核者先仅依据以上合同写出预期，再运行基线、单故障和清理后重放。若两次基线的资源身份、首个状态变化或 framebuffer 结果不同，必须保留差异，不能用最终截图相似掩盖中间状态错误。