第 3 章练习：坐标空间与调试

对应教程：03 坐标空间、颜色与调试
起始示例：坐标空间可视化，修改 03-spaces.js，必要时修改 03-spaces.html。

练习 1：记录坐标空间的变化

依次选择“局部空间”“世界空间”“观察空间”，先只移动模型，再把模型复位并只移动相机。

**目标：**写下每种模式中“同一个模型点的颜色”是否随上述操作改变，并解释依据。

**完成标准：**能填写下表，并区分“物体在屏幕上的位置改变”和“物体表面某个点对应的颜色改变”。

练习 2：替换位置计算公式

**目标：**用 modelViewMatrix 计算 gl_Position，并保持三个颜色模式可用。

**要求：**顶点着色器中的 vWorldPosition 和 vViewPosition 仍要赋值；只替换写入 gl_Position 的那一行。

**完成标准：**相机和模型滑块的行为与原示例相同，立方体位置不跳动。

练习 3：把观察空间深度变成灰度

**目标：**新增一个“观察空间深度”模式，用灰度表示片元离相机的大致距离。

**要求：**使用已有 vViewPosition.z；增加一个模式选项。在本示例中，用 6.0 作为显示尺度。

**完成标准：**新增模式能显示明暗差别；移动模型和相机时，深度变化对应的灰度也改变。

<details> <summary>提示</summary>

相机前方的观察空间 Z 通常为负值，取反后得到正数，再除以显示尺度。

</details>

参考解答

<a id=“reference-answers”></a>

第 3 章练习参考解答

对应练习：坐标空间与调试。

练习 1：记录坐标空间的变化

这里比较的是同一个局部点的颜色。移动模型或相机，立方体在屏幕上可能移动、旋转或改变投影，但这与局部点的颜色是否变化是两件事。世界空间的位置不随相机移动；观察空间的位置随相机移动。

练习 2：替换位置计算公式

在 03-spaces.js 的顶点着色器中，把最后一行改为：

gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

保留上方 worldPosition、viewPosition 及两个 varying 的赋值。对于本示例的普通网格，modelViewMatrix 等于 viewMatrix * modelMatrix，所以立方体投影位置不变。

练习 3：把观察空间深度变成灰度

在 03-spaces.html 的模式下拉框中增加：

<option value="3">观察空间深度</option>

在 03-spaces.js 的片元着色器中，将 vec3 color = ... 一行改成条件分支：

vec3 color;
if ( uMode == 3 ) {
  float depthGray = -vViewPosition.z / 6.0;
  color = vec3( depthGray );
} else {
  color = positionToShow * 0.2 + 0.5;
}

在示例的相机和模型范围内，相机前方的 vViewPosition.z 为负，取反并除以 6.0 后落在便于观察的灰度范围。这个灰度只是调试映射，并不等于深度缓冲区中的非线性深度值。改动前后的三个原有模式仍走 else 分支。